- Finished Booking an Event

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

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -128,7 +128,13 @@ $graytext: #555;
     margin: 10px;
     border: solid 1px #4198ef;
     border-radius: 1rem;
+    padding: 2px;
   }
+  &__table tr {
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+  }
+
 
   &__align_center_mobile {
     text-align: left;

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -20,7 +20,6 @@ import QDateTimeScroller from '@quasar/quasar-app-extension-qscroller/src/compon
 import { CTodo } from '@src/components/todos/CTodo'
 import { SingleProject } from '@src/components/projects/SingleProject'
 import { IEvents } from '@src/model'
-import { BookingStore } from '@store'
 import { IBookedEvent, IBookedEventPage, EState } from '@src/model/Calendar'
 import { costanti } from '@src/store/Modules/costanti'
 import router from '@router'
@@ -48,6 +47,7 @@ export default class CEventsCalendar extends Vue {
   }
 
   public formbookEventDefault: IBookedEvent = {
+    userId: '',
     msgbooking: '',
     infoevent: '',
     numpeople: 1,
@@ -584,6 +584,7 @@ export default class CEventsCalendar extends Vue {
       // self.bookEventForm.booked = self.bookEventForm.bookedcheck
 
       const data: IBookedEvent = {
+        userId: UserStore.state.userId,
         id_bookedevent: myevent._id,
         numpeople: self.bookEventForm.numpeople,
         infoevent: tools.gettextevent(myevent),

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'

src/components/CSignIn/CSignIn.ts

@@ -151,7 +151,7 @@ export default class CSignIn extends Vue {
           //     console.log('ERROR Subscription = ' + e)
           //   })
         } else {
-          this.$emit('SignIncheckErrors', riscode)
+          this.$emit('checkErrors', riscode)
         }
 
         this.iswaitingforRes = false
@@ -160,7 +160,7 @@ export default class CSignIn extends Vue {
       .catch((error) => {
         // console.log('ERROR SIGNIN = ' + error)
 
-        this.$emit('SignIncheckErrors', error)
+        this.$emit('checkErrors', error)
       })
     // console.log('   END submit')
   }

src/components/Header/Header.vue

@@ -141,7 +141,7 @@
                     <q-btn class="absolute-top-right" style="margin-right: 10px; color: white;"
                            dense flat round icon="close" @click="right = !right">
                     </q-btn>
-                    <div v-if="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }}</div>
+                    <div v-if="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }} <span v-if="isAdmin"> [Admin]</span></div>
                     <div v-else class="text-user text-italic bg-red">
                         {{ $t('user.loggati') }}
                     </div>

src/components/index.ts

@@ -16,3 +16,4 @@ export * from './CDate'
 export * from './BannerCookies'
 export * from './PagePolicy'
 export * from './FormNewsletter'
+export * from './CGridTableRec'