- Finished Booking an Event

- Starting UsersList (creating CGridTableRec component to view and edit a db table)

src/components/CGridTableRec/CGridTableRec.ts

@@ -0,0 +1,67 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+import { UserStore } from '../../store/Modules/index'
+import { tools } from '../../store/Modules/tools'
+
+import { shared_consts } from '../../common/shared_vuejs'
+import { ICategory } from '../../model'
+
+@Component({
+
+})
+export default class CGridTableRec extends Vue {
+  @Prop({required: true}) public mytitle: string
+  @Prop({required: true}) public mylist: any[]
+  @Prop({required: true}) public mycolumns: any[]
+  @Prop({required: true}) public colkey: string
+  public $q
+  public $t
+  public loading: boolean = false
+  public paginationControl: {
+    page: number,
+    rowsPerPage: number // specifying this determines pagination is server-side
+  } = { page: 1, rowsPerPage: 10 }
+
+  public serverData: any [] = []
+
+  public idsel: string = ''
+  public colsel: string = ''
+
+  public separator: 'horizontal'
+  public filter: string = ''
+  public selected: any[] = []
+  public dark: boolean = true
+
+  get tableClass() {
+    if (this.dark) {
+      return 'bg-black'
+    }
+  }
+
+  public selItem(item, colsel) {
+    console.log('item', item)
+    this.idsel = item._id
+    this.colsel = colsel
+    console.log('this.idsel', this.idsel)
+  }
+
+  public SaveValue(newVal, valinitial) {
+    console.log('SaveValue', newVal, 'selected', this.selected)
+
+    const mydata = {}
+
+    mydata[this.colsel] = newVal
+    mydata[this.colkey] = this.idsel
+
+    console.log('this.idsel', this.idsel, 'this.colsel', this.colsel)
+    console.table(mydata)
+
+    this.$emit('save', mydata)
+  }
+
+  public created() {
+
+    this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+  }
+}

src/components/CGridTableRec/CGridTableRec.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="q-pa-sm">
+        <q-table
+                :title="mytitle"
+                :data="serverData"
+                :columns="mycolumns"
+                :filter="filter"
+                :pagination.sync="paginationControl"
+                :row-key="colkey">
+
+            <!--<template v-slot:top="props">-->
+            <div class="col-2 q-table__title">{{ mytitle }}</div>
+
+            <q-space/>
+
+            <q-tr slot="body" slot-scope="props" :props="props">
+
+                <q-td v-for="col in mycolumns" :key="col.name" :props="props">
+                    <div v-if="col.action">
+                        <q-btn flat round color="red" icon="fas fa-trash-alt"
+                               @click="col.clickfunz"></q-btn>
+                    </div>
+                    <div v-else>
+                        {{ props.row[col.name] }}
+                        <q-popup-edit v-model="props.row[col.name]" :disable="col.disable" :title="col.title" buttons
+                                      @save="SaveValue" @show="selItem(props.row, col.field)">
+                            <q-input v-model="props.row[col.name]"/>
+
+                        </q-popup-edit>
+                    </div>
+                </q-td>
+            </q-tr>
+            <!--
+                            <q-btn
+                                    flat round dense
+                                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
+                                    @click="props.toggleFullscreen"
+                                    class="q-ml-md">
+                            </q-btn>
+            -->
+            <!--</template>-->
+        </q-table>
+    </div>
+</template>
+<script lang="ts" src="./CGridTableRec.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CGridTableRec.scss';
+</style>

src/components/CGridTableRec/index.ts

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