Cleaning Code, moving functions...

src/views/admin/TableOnlyView/index.ts

@@ -0,0 +1 @@
+export {default as tableOnlyView} from './tableOnlyView.vue'

src/views/admin/TableOnlyView/tableOnlyView.ts

@@ -0,0 +1,62 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+import { GlobalStore, UserStore } from '@store'
+
+
+@Component({})
+export default class TableOnlyView extends Vue {
+  public loading: boolean = false
+  public serverPagination: {
+    page: number ,
+    rowsNumber: number // specifying this determines pagination is server-side
+  } = {page: 1, rowsNumber: 10}
+
+  public serverData: any [] = []
+  public columns: any[] = [
+    {
+      name: 'chiave',
+      required: true,
+      label: 'Chiave',
+      align: 'left',
+      field: 'chiave',
+      sortable: true
+    },
+    { name: 'valore', label: 'Valore', field: 'valore', sortable: false }
+  ]
+
+  public filter: string = ''
+  public selected: any[] = []
+
+
+  request(props) {
+    this.loading = true
+    setTimeout(() => {
+      this.serverPagination = props.pagination
+      let table = this.$refs.table,
+        rows = GlobalStore.state.cfgServer.slice(),
+        { page, rowsPerPage, sortBy, descending } = props.pagination
+
+      // if (props.filter) {
+      //   rows = table.filterMethod(rows, props.filter)
+      // }
+      // if (sortBy) {
+      //   rows = table.sortMethod(rows, sortBy, descending)
+      // }
+
+      this.serverPagination.rowsNumber = rows.length
+      if (rowsPerPage) {
+        rows = rows.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+      }
+      this.serverData = rows
+      this.loading = false
+    }, 1500)
+  }
+
+  mounted() {
+    this.request({
+      pagination: this.serverPagination,
+      filter: this.filter
+    })
+  }
+}

src/views/admin/TableOnlyView/tableOnlyView.vue

@@ -0,0 +1,29 @@
+<template>
+    <q-page padding class="docs-table">
+        <p class="caption">TableOnlyView</p>
+        <q-table
+                ref="table"
+                color="primary"
+                title="Parametri di Configurazione Server"
+                :data="serverData"
+                :columns="columns"
+                :filter="filter"
+                selection="multiple"
+                :selected.sync="selected"
+                row-key="chiave"
+                :pagination.sync="serverPagination"
+                @request="request"
+                :loading="loading"
+        >
+            <template slot="top-right" slot-scope="props">
+                <q-search hide-underline v-model="filter" />
+            </template>
+        </q-table>
+    </q-page>
+</template>
+<script lang="ts" src="tableOnlyView.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import 'tableOnlyView';
+</style>

src/views/admin/cfgServer/cfgServer.ts

@@ -0,0 +1,70 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+import { GlobalStore } from '@store'
+
+@Component({})
+export default class CfgServer extends Vue {
+  public loading: boolean = false
+  public paginationControl: {
+    page: number,
+    rowsPerPage: number // specifying this determines pagination is server-side
+  } = { page: 1, rowsPerPage: 20 }
+
+  public pagination: {
+    page: number
+  } = {page: 1 }
+
+  public serverData: any [] = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+  public columns: any[] = [
+    {
+      name: 'chiave',
+      required: true,
+      label: 'Chiave',
+      align: 'left',
+      field: 'chiave',
+      sortable: true
+    },
+    { name: 'userid', label: 'UserId', field: 'userid', sortable: false },
+    { name: 'valore', label: 'Valore', field: 'valore', sortable: false }
+  ]
+
+  public visibleColumns: ['chiave', 'userid', 'valore']
+  public separator: 'horizontal'
+  public filter: string = ''
+  public selected: any[] = []
+  public dark: boolean = true
+
+  public keysel: string = ''
+  public userIdsel: string = ''
+
+  get tableClass() {
+    if (this.dark) {
+      return 'bg-black'
+    }
+  }
+
+  public selItem(item) {
+    console.log('item', item)
+    this.keysel = item.chiave
+    this.userIdsel = item.userid
+    console.log('this.keysel', this.keysel)
+  }
+
+  public SaveValue(newVal, valinitial) {
+    console.log('SaveValue', newVal, 'selected', this.selected)
+
+    const mydata = {
+      chiave: this.keysel,
+      userId: this.userIdsel,
+      valore: newVal
+    }
+    // Save on Server
+    GlobalStore.actions.saveCfgServerKey(mydata)
+  }
+
+  public created() {
+    this.serverData = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+    // this.serverData = GlobalStore.state.cfgServer.slice()
+  }
+}

src/views/admin/cfgServer/cfgServer.vue

@@ -0,0 +1,40 @@
+<template>
+    <q-table
+            :data="serverData"
+            :columns="columns"
+            :filter="filter"
+            title="Configurazione Server"
+            row-key="chiave"
+    >
+        <q-tr slot="body" slot-scope="props" :props="props">
+            <q-td key="chiave" :props="props">
+                {{ props.row.chiave }}
+                <q-popup-edit v-model="props.row.chiave" disable>
+                    <q-field count>
+                        <q-input v-model="props.row.chiave" />
+                    </q-field>
+                </q-popup-edit>
+            </q-td>
+            <q-td key="userid" :props="props">
+                {{ props.row.userId }}
+                <q-popup-edit v-model="props.row.userId" disable>
+                    <q-field count>
+                        <q-input v-model="props.row.userId" />
+                    </q-field>
+                </q-popup-edit>
+            </q-td>
+            <q-td key="valore" :props="props">
+                {{ props.row.valore }}
+                <q-popup-edit v-model="props.row.valore" title="Aggiorna Valore" buttons @save="SaveValue" @show="selItem(props.row)">
+                    <q-input v-model="props.row.valore"/>
+                </q-popup-edit>
+            </q-td>
+        </q-tr>
+    </q-table>
+</template>
+<script lang="ts" src="./cfgServer.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './cfgServer';
+</style>

src/views/admin/cfgServer/index.ts

@@ -0,0 +1 @@
+export {default as cfgServer} from './cfgServer.vue'

src/views/admin/testp1/index.ts

@@ -0,0 +1 @@
+export {default as testp1} from './testp1.vue'

src/views/admin/testp1/testp1.ts

@@ -0,0 +1,95 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { GlobalStore, UserStore } from '@store'
+import { Getter } from "vuex-class"
+import { ICfgServer, IGlobalState, ITodo, ITodosState } from '../../../model/index'
+
+const namespace: string = 'GlobalModule'
+
+@Component({})
+export default class Testp1 extends Vue {
+  public myvar:number = 5
+  public paramcategory: string = ''
+  public mioobj: any
+
+  // @Getter('todos_dacompletare', { namespace })
+  // public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
+
+  @Getter('testpao1_getter_contatore', { namespace })
+  public testpao1: (state: IGlobalState, param1: number) => number
+
+  @Getter('testpao1_getter_array', { namespace })
+  public testpao1_array: (state: IGlobalState, miorec: ICfgServer) => ICfgServer[]
+
+  @Watch('GlobalStore.state.testp1.mioarray', { immediate: true, deep: true })
+  array_changed() {
+    console.log('*** array_changed *** ', GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1])
+  }
+
+  @Watch('$route.params.category') changecat() {
+    // this.mytypetransgroup = ''
+    console.log('PRIMA this.paramcategory', this.paramcategory)
+    this.paramcategory = this.$route.params.category
+    console.log('DOPO this.paramcategory', this.paramcategory)
+  }
+
+  created() {
+    this.mioobj = {
+      arr1: [{chiave: 'key1', userId: 'ALL', valore: 'val1'}],
+      arr2: [{chiave: 'key2', userId: 'ALL', valore: 'val2'}]
+    }
+  }
+
+  get getarr1 () {
+    // return this.mioobj.arr1
+    return this.mioobj['arr1']
+  }
+
+  get prova2() {
+    return GlobalStore.state.testp1.contatore
+  }
+
+  get provagetter() {
+    return GlobalStore.getters.testpao1_getter_contatore(130)
+  }
+
+  get provagetterarray() {
+    return GlobalStore.getters.testpao1_getter_array(GlobalStore.state.testp1.contatore)
+  }
+
+
+  TestBtnCambioaParamPassing () {
+    this.paramcategory += 's'
+  }
+
+  TestBtn() {
+    GlobalStore.state.testp1.contatore++
+  }
+
+  TestBtn2() {
+    GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', userId: UserStore.state.userId, valore: GlobalStore.state.testp1.contatore.toString() })
+  }
+
+  TestBtnModify() {
+    // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
+    GlobalStore.mutations.setPaoArray({chiave: 'pippo', userId: UserStore.state.userId, valore: '20' } )
+
+  }
+
+  TestBtnCambiaTutto() {
+    // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
+    GlobalStore.mutations.NewArray([{chiave: 'nuovorec1', userId: UserStore.state.userId, valore: '1' }, {chiave: 'nuovorec2', userId: UserStore.state.userId, valore: '2' }] )
+
+  }
+
+  TestBtnAction() {
+    GlobalStore.actions.prova()
+  }
+
+  TestBtnDelete() {
+    // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
+    GlobalStore.mutations.setPaoArray_Delete()
+  }
+
+}

src/views/admin/testp1/testp1.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        CATEGORY:  <strong>{{ paramcategory }}</strong> <br>
+
+        <label>TEST Prova Paolo</label><br>
+
+
+        GETTER CONTATORE:
+        {{ testpao1(300) }} <br>
+        ARRAY:
+        {{ testpao1_array(300) }} <br>
+
+        TEST OBJECT {{ mioobj }} <br>
+        ARR1 {{ getarr1 }} <br>
+        <!--ARR2 {{ mioobj.arr2 }} <br>-->
+
+        <!--<q-input v-model="testpao1(myvar)"></q-input>-->
+
+        <q-input v-model="prova2" float-label="PROVA2:"></q-input>
+
+        <q-input v-model="provagetter" float-label="PROVA GETTER:"></q-input>
+        <q-input v-model="provagetterarray" float-label="GETTER ARRAY:"></q-input>
+
+        <br>
+
+        <q-btn color="secondary" rounded icon="refresh"
+               @click="TestBtn" label="Test 1"/>
+
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtn2" label="ADD TO ARRAY"/>
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnModify" label="MODIFY"/>
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnAction" label="MODIF_BYACTION"/>
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnDelete" label="DEL LAST"/>
+        <!--<q-btn color="secondary" rounded icon="refresh" @click="TestBtnCambiaTutto" label="NEW ARR"/>-->
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnCambioaParamPassing" label="CAMBIA PARAM"/>
+
+    </div>
+</template>
+<script lang="ts" src="./testp1.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './testp1';
+</style>