- Added CDateTime component (to save in the db)... in the component CGridTableRec and for CEventsCalendar

src/components/CDateTime/CDateTime.scss

@@ -0,0 +1,6 @@
+.calendar_comp{
+  max-width: 170px;
+  @media (max-width: 400px) {
+    max-width: 400px;
+  }
+}

src/components/CDateTime/CDateTime.ts

@@ -0,0 +1,79 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { date } from 'quasar'
+import { CalendarStore } from '../../store/Modules'
+
+@Component({
+  name: 'CDateTime'
+})
+
+export default class CDateTime extends Vue {
+  public $q
+  public $t
+  @Prop() public value!: Date
+  @Prop({ required: false, default: '' }) public label: string
+  @Prop({ required: false, default: '' }) public data_class!: string
+  @Prop({ required: false, default: false }) public readonly!: boolean
+  @Prop({ required: false, default: false }) public disable!: boolean
+  @Prop({ required: false, default: '' }) public bgcolor!: string
+  @Prop({ required: false, default: false }) public dense: boolean
+
+  public mystyleicon: string = 'font-size: 1.5rem;'
+  public showDateTimeScroller: boolean = false
+  public saveit: boolean = false
+  public myvalue: Date = new Date()
+  public valueprec: Date = new Date()
+
+  get getclass() {
+    return 'calendar_comp ' + this.data_class
+  }
+
+  @Watch('showDateTimeScroller')
+  public Opening() {
+    if (this.showDateTimeScroller) {
+      this.saveit = false
+      this.valueprec = this.myvalue
+      this.$emit('show')
+    } else {
+      if (!this.saveit)
+        this.myvalue = this.valueprec
+    }
+  }
+
+  public savetoclose() {
+    this.saveit = true
+    this.showDateTimeScroller = false
+    this.$emit('savetoclose', this.myvalue, this.valueprec)
+  }
+
+  get scrollerPopupStyle280() {
+    if (this.$q.screen.lt.sm) {
+      return {
+        width: '100vw',
+        height: '100vh'
+      }
+    } else {
+      return {
+        maxHeight: '400px',
+        height: '400px',
+        width: '280px'
+      }
+    }
+  }
+
+  get locale() {
+    return CalendarStore.state.locale
+  }
+
+  public mounted() {
+    this.myvalue = this.value
+  }
+
+  public changeval(newval) {
+    console.log('changeval', newval)
+    this.$emit('update:value', newval)
+  }
+}

src/components/CDateTime/CDateTime.vue

@@ -0,0 +1,46 @@
+<template>
+    <q-input v-model="myvalue"
+             color="blue-6"
+             outlined
+             :label="label"
+             :bg-color="bgcolor"
+             :readonly="readonly"
+             :disable="disable"
+             :dense="dense"
+             mask="####-##-## ##:##"
+             debounce="500"
+             @input="changeval"
+             :class="getclass">
+
+        <template #append>
+            <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy v-model="showDateTimeScroller">
+
+                    <q-date-time-scroller
+                            v-model="myvalue"
+                            :locale="locale"
+                            :hour24-format="true"
+                            :rounded-borders="true"
+                            border-color="#2196f3"
+                            bar-color="#2196f3"
+                            color="white"
+                            background-color="primary"
+                            inner-color="primary"
+                            inner-background-color="white"
+                            :style="scrollerPopupStyle280"
+                            @input="changeval"
+                            @close="() => { savetoclose();  }"
+                    />
+
+                </q-popup-proxy>
+            </q-icon>
+        </template>
+    </q-input>
+</template>
+
+<script lang="ts" src="./CDateTime.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CDateTime.scss';
+</style>

src/components/CDateTime/index.ts

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

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -247,13 +247,6 @@ $graytext: #555;
   color: white;
 }
 
-.calendar_comp{
-  max-width: 170px;
-  @media (max-width: 400px) {
-    max-width: 400px;
-  }
-}
-
 .myflex{
   display: flex;
   flex: 1;

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -31,11 +31,12 @@ import { lists } from '../../store/Modules/lists'
 import { GlobalStore, MessageStore } from '../../store/Modules'
 import { IMessagePage, IMessage, IIdentity, MsgDefault } from '../../model'
 import MixinUsers from '../../mixins/mixin-users'
+import { CDateTime } from '../CDateTime'
 
 @Component({
   mixins: [MixinUsers],
   name: 'CEventsCalendar',
-  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor }
+  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor, CDateTime }
 })
 export default class CEventsCalendar extends Vue {
   public $q
@@ -110,9 +111,6 @@ export default class CEventsCalendar extends Vue {
   public dragging = false
   public draggedEvent = null
   public ignoreNextSwipe = false
-  public showDateScrollerAllDay = false
-  public showDateTimeScrollerStart = false
-  public showDateTimeScrollerEnd = false
 
   public resources = [
     {
@@ -319,21 +317,6 @@ export default class CEventsCalendar extends Vue {
     }
   }
 
-  get scrollerPopupStyle280() {
-    if (this.$q.screen.lt.sm) {
-      return {
-        width: '100vw',
-        height: '100vh'
-      }
-    } else {
-      return {
-        maxHeight: '400px',
-        height: '400px',
-        width: '280px'
-      }
-    }
-  }
-
   get tools() {
     return tools
   }

src/components/CEventsCalendar/CEventsCalendar.vue

@@ -121,58 +121,16 @@
                             <!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
 
                             <div class="q-gutter-sm row myflex">
-                                <q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
-                                         :label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##"
-                                         class="calendar_comp">
-                                    <template #append>
-                                        <q-icon name="event" class="cursor-pointer">
-                                            <q-popup-proxy v-model="showDateTimeScrollerStart">
-
-                                                <q-date-time-scroller
-                                                        v-model="eventForm.dateTimeStart"
-                                                        :locale="locale"
-                                                        :hour24-format="true"
-                                                        :rounded-borders="true"
-                                                        border-color="#2196f3"
-                                                        bar-color="#2196f3"
-                                                        color="white"
-                                                        background-color="primary"
-                                                        inner-color="primary"
-                                                        inner-background-color="white"
-                                                        :style="scrollerPopupStyle280"
-                                                        @close="() => { showDateTimeScrollerStart = false }"
-                                                />
-
-                                            </q-popup-proxy>
-                                        </q-icon>
-                                    </template>
-                                </q-input>
-                                <q-input color="blue-6" outlined v-model="eventForm.dateTimeEnd"
-                                         :label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##"
-                                         class="calendar_comp">
-                                    <template #append>
-                                        <q-icon name="event" class="cursor-pointer">
-                                            <q-popup-proxy v-model="showDateTimeScrollerEnd">
-
-                                                <q-date-time-scroller
-                                                        v-model="eventForm.dateTimeEnd"
-                                                        :locale="locale"
-                                                        :hour24-format="true"
-                                                        :rounded-borders="true"
-                                                        border-color="#2196f3"
-                                                        bar-color="#2196f3"
-                                                        color="white"
-                                                        background-color="primary"
-                                                        inner-color="primary"
-                                                        inner-background-color="white"
-                                                        :style="scrollerPopupStyle280"
-                                                        @close="() => { showDateTimeScrollerEnd = false }"
-                                                />
-
-                                            </q-popup-proxy>
-                                        </q-icon>
-                                    </template>
-                                </q-input>
+                                <CDateTime
+                                        :value.sync="eventForm.dateTimeStart"
+                                        :label="$t('cal.eventstartdatetime')"
+                                        :readonly="false">
+                                </CDateTime>
+                                <CDateTime
+                                        :value.sync="eventForm.dateTimeEnd"
+                                        :label="$t('cal.enterEndDateTime')"
+                                        :readonly="false">
+                                </CDateTime>
                                 <q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
                             </div>
 

src/components/CGridTableRec/CGridTableRec.scss

@@ -1,3 +1,8 @@
 .colmodif {
   cursor: pointer;
 }
+
+.coldate {
+  max-width: 250px;
+  min-width: 200px;
+}

src/components/CGridTableRec/CGridTableRec.ts

@@ -9,8 +9,13 @@ import { ICategory, IColGridTable, ITableRec } from '../../model'
 import { CTodo } from '../todos/CTodo'
 import { SingleProject } from '../projects/SingleProject'
 import { lists } from '../../store/Modules/lists'
+import { IParamsQuery } from '../../model/GlobalStore'
+import { fieldsTable } from '../../store/Modules/fieldsTable'
+import { CDateTime } from '../CDateTime'
 
-@Component({})
+@Component({
+  components: { CDateTime }
+})
 export default class CGridTableRec extends Vue {
   @Prop({ required: false }) public prop_mytable: string
   @Prop({ required: true }) public prop_mytitle: string
@@ -24,6 +29,7 @@ export default class CGridTableRec extends Vue {
   public mytitle: string
   public mycolumns: any[]
   public colkey: string
+  public search: string = ''
 
   public tablesel: string = ''
 
@@ -42,12 +48,12 @@ export default class CGridTableRec extends Vue {
   public spinner_visible: boolean = false
 
   public idsel: string = ''
-  public colsel: string = ''
+  public colsel: IColGridTable = {name: ''}
   public valPrec: string = ''
 
   public separator: 'horizontal'
   public filter: string = ''
-  public selected: any
+  public rowsel: any
   public dark: boolean = true
   public funcActivated = []
 
@@ -70,25 +76,27 @@ export default class CGridTableRec extends Vue {
     }
   }
 
-  public selItem(item, colsel) {
+  public selItem(item, col: IColGridTable) {
     // console.log('item', item)
-    this.selected = item
+    this.rowsel = item
     this.idsel = item._id
-    this.colsel = colsel
+    this.colsel = col
+
+    this.updateValueExtra(col, this.rowsel[col.name])
     // console.log('this.idsel', this.idsel)
   }
 
   public undoVal() {
-    console.log('undoVal', 'colsel', this.colsel, 'valprec', this.valPrec, 'this.colkey', this.colkey, 'this.selected', this.selected)
+    console.log('undoVal', 'colsel', this.colsel, 'valprec', this.valPrec, 'this.colkey', this.colkey, 'this.selected', this.rowsel)
     console.table(this.serverData)
     if (this.colsel)
-      this.selected[this.colsel] = this.valPrec
+      this.rowsel[this.colsel.field] = this.valPrec
     // this.serverData[this.colsel] = this.valPrec
 
   }
 
   public SaveValue(newVal, valinitial) {
-    // console.log('SaveValue', newVal, 'selected', this.selected)
+    console.log('SaveValue', newVal, 'rowsel', this.rowsel)
 
     const mydata = {
       id: this.idsel,
@@ -96,7 +104,7 @@ export default class CGridTableRec extends Vue {
       fieldsvalue: {}
     }
 
-    mydata.fieldsvalue[this.colsel] = newVal
+    mydata.fieldsvalue[this.colsel.field] = newVal
 
     this.valPrec = valinitial
 
@@ -135,7 +143,7 @@ export default class CGridTableRec extends Vue {
 
   public onRequest(props) {
     const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
-    const filter = props.filter
+    const filter = this.filter
 
     if (!this.mytable)
       return
@@ -146,7 +154,7 @@ export default class CGridTableRec extends Vue {
 
     // update rowsCount with appropriate value
 
-    // get all rows if "All" (0) is selected
+    // get all rows if "All" (0) is rowsel
     const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage
 
     // calculate starting row of data
@@ -193,7 +201,7 @@ export default class CGridTableRec extends Vue {
         myobj[sortBy] = 1
     }
 
-    const params = {
+    const params: IParamsQuery = {
       table: this.mytable,
       startRow,
       endRow,
@@ -269,7 +277,10 @@ export default class CGridTableRec extends Vue {
   }
 
   public getclassCol(col) {
-    return (col.disable || !this.canEdit) ? '' : 'colmodif'
+    let mycl = (col.disable || !this.canEdit) ? '' : 'colmodif'
+    mycl += (col.fieldtype === tools.FieldType.date) ? ' coldate flex flex-container' : ''
+
+    return mycl
   }
 
   public async createNewRecord() {
@@ -279,6 +290,11 @@ export default class CGridTableRec extends Vue {
       table: this.mytable,
       data: {}
     }
+
+    // const mykey = fieldsTable.getKeyByTable(this.mytable)
+
+    // mydata.data[mykey] = ''
+
     const data = await GlobalStore.actions.saveTable(mydata)
 
     this.serverData.push(data)
@@ -307,9 +323,13 @@ export default class CGridTableRec extends Vue {
   }
 
   public refresh() {
+    if (this.search !== '')
+      this.filter = this.search
+    else
+      this.filter = ''
+
     this.onRequest({
-      pagination: this.pagination,
-      filter: undefined
+      pagination: this.pagination
     })
   }
 
@@ -319,6 +339,7 @@ export default class CGridTableRec extends Vue {
     }
   }
 
+
   public ActionAfterYes(action, item, data) {
     if (action === lists.MenuAction.DELETE_RECTABLE) {
       if (this.serverData.length > 0)
@@ -343,14 +364,19 @@ export default class CGridTableRec extends Vue {
   }
 
   public visuValByType(col, val) {
-    if (col.fieldtype === 'date') {
+    if (col.fieldtype === tools.FieldType.date) {
       if (val === undefined) {
         return '[]'
       } else {
         return tools.getstrDateTime(val)
       }
-    } else if (col.fieldtype === 'boolean') {
+    } else if (col.fieldtype === tools.FieldType.boolean) {
       return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
+    } else if (col.fieldtype === tools.FieldType.binary) {
+      if (val === undefined)
+        return '[]'
+      else
+        return val
     } else {
       if (val === undefined)
         return '[]'
@@ -395,4 +421,51 @@ export default class CGridTableRec extends Vue {
     this.updatedcol()
     this.refresh()
   }
+
+  get tools() {
+    return tools
+  }
+
+  get db_fieldsTable() {
+    return fieldsTable
+  }
+
+  public doSearch() {
+
+    this.refresh()
+  }
+
+  public setResultJoin(col: IColGridTable, row) {
+    let myval = 0
+    const tabjoin = fieldsTable.getTableJoinByName(col.jointable)
+    col.resultjoin.forEach((mycol) => {
+      myval = tools.SetBit(myval, mycol)
+    })
+
+    row[col.name] = myval
+
+    console.log('col.resultjoin')
+    console.table(col.resultjoin)
+    console.log('row[col.name]', row[col.name])
+  }
+
+  public updateValueExtra(col: IColGridTable, myval) {
+    if (col.jointable) {
+      const tabjoin = fieldsTable.getTableJoinByName(col.jointable)
+      const arr = []
+      if (myval !== undefined && tabjoin !== undefined) {
+        tabjoin.forEach((mybit) => {
+          if (tools.isBitActive(myval, mybit.value))
+            arr.push(mybit)
+        })
+      }
+
+      col.resultjoin = arr
+
+      console.log('col', col.field, 'myval', myval, 'arr', arr)
+      console.log('resultjoin')
+      console.table(col.resultjoin)
+    }
+  }
+
 }

src/components/CGridTableRec/CGridTableRec.vue

@@ -35,11 +35,16 @@
 
                 <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
 
+                <q-input v-model="search" filled dense type="search" hint="Search" v-on:keyup.enter="doSearch">
+                    <template v-slot:after>
+                        <q-btn v-if="mytable" label="" color="primary" @click="refresh" icon="search"></q-btn>
+                    </template>
+                </q-input>
                 <q-toggle v-if="mytable" v-model="funcActivated" :val="lists.MenuAction.CAN_EDIT_TABLE" class="q-mx-sm"
                           :label="$t('grid.editvalues')"></q-toggle>
 
-                <q-btn v-if="mytable" label="Refresh" color="primary" @click="refresh" class="q-mx-sm"></q-btn>
-                <q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit" :label="$t('grid.addrecord')"
+                <q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
+                       :label="$t('grid.addrecord')"
                        @click="createNewRecord"></q-btn>
 
                 <q-space/>
@@ -84,47 +89,26 @@
 
             <q-tr v-if="mytable" slot="body" slot-scope="props" :props="props">
                 <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colVisib.includes(col.field)">
-                    <div v-if="col.fieldtype === 'date'">
-                        <div style="max-width: 250px; min-width: 200px">
-                            <div class="flex flex-container">
-                                <q-icon name="event" class="cursor-pointer">
-                                    <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
-                                                  v-model="props.row[col.name]" :disable="col.disable"
-                                                  :title="col.title" buttons
-                                                  @save="SaveValue" @show="selItem(props.row, col.field)">
-                                        <q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm"/>
-
-                                    </q-popup-edit>
-                                    <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
-                                    <!--<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />-->
-                                    <!--</q-popup-proxy>-->
-                                </q-icon>
-                                <div>
-                                    {{ visuValByType(col, props.row[col.name]) }}
-                                </div>
-
-                                <q-icon name="access_time" class="cursor-pointer">
-                                    <q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
-                                                  v-model="props.row[col.name]" :disable="col.disable"
-                                                  :title="col.title" buttons
-                                                  @save="SaveValue" @show="selItem(props.row, col.field)">
-                                        <q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h/>
-
-                                    </q-popup-edit>
-
-                                    <!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
-                                    <!--<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />-->
-                                    <!--</q-popup-proxy>-->
-                                </q-icon>
-                            </div>
+                    <div v-if="col.fieldtype === tools.FieldType.date">
+                        <div :class="getclassCol(col)">
+                            <CDateTime
+                                    class="cursor-pointer"
+                                    :value.sync="props.row[col.name]"
+                                    :label="col.title"
+                                    :dense="true"
+                                    :readonly="true"
+                                    @savetoclose="SaveValue"
+                                    @show="selItem(props.row, col)"
+                                    >
+                            </CDateTime>
                         </div>
                     </div>
-                    <div v-else-if="col.fieldtype === 'boolean'">
+                    <div v-else-if="col.fieldtype === tools.FieldType.boolean">
                         <div :class="getclassCol(col)">
                             {{ visuValByType(col, props.row[col.name]) }}
                             <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
                                           :title="col.title" buttons
-                                          @save="SaveValue" @show="selItem(props.row, col.field)">
+                                          @save="SaveValue" @show="selItem(props.row, col)">
                                 <q-checkbox v-model="props.row[col.name]" label="">
 
                                 </q-checkbox>
@@ -133,12 +117,41 @@
                             </q-popup-edit>
                         </div>
                     </div>
+                    <div v-else-if="col.fieldtype === tools.FieldType.binary">
+                        <div :class="getclassCol(col)">
+                            {{ visuValByType(col, props.row[col.name]) }}
+                            <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
+                                          :title="col.title" buttons
+                                          @save="SaveValue" @show="selItem(props.row, col)">
+
+                                <q-select
+                                        v-model="col.resultjoin"
+                                        multiple
+                                        borderless
+                                        dense
+                                        options-dense
+                                        display-value="Valori:"
+                                        emit-value
+                                        map-options
+                                        :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                                        @input="setResultJoin(col, props.row)"
+                                        :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
+                                        style="min-width: 150px">
+
+                                </q-select>
+
+                                <q-input v-model="props.row[col.name]"/>
+                                {{ visuValByType(col, props.row[col.name]) }}
+
+                            </q-popup-edit>
+                        </div>
+                    </div>
                     <div v-else>
                         <div :class="getclassCol(col)">
                             {{ visuValByType(col, props.row[col.name]) }}
                             <q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
                                           :title="col.title" buttons
-                                          @save="SaveValue" @show="selItem(props.row, col.field)">
+                                          @save="SaveValue" @show="selItem(props.row, col)">
                                 <q-input v-model="props.row[col.name]"/>
 
                             </q-popup-edit>

src/components/index.ts

@@ -15,6 +15,7 @@ export * from './CSignIn'
 export * from './CSignUp'
 export * from './CEventsCalendar'
 export * from './CDate'
+export * from './CDateTime'
 export * from './BannerCookies'
 export * from './PagePolicy'
 export * from './FormNewsletter'