Add CMyToogleList and CMyChipList to views Binary choice number 2, 4, 8... show the Values Selected (join with other table)

src/common/shared_vuejs.ts

@@ -1,21 +1,20 @@
 export const shared_consts = {
 
   Permissions: {
-    Normal: {
-      value: 0,
-      label: '[None]'
-    },
     Admin: {
       value: 1,
-      label: 'Admin'
+      label: 'pages.Admin',
+      icon: 'fas fa-user-shield'
     },
     Manager: {
       value: 2,
-      label: 'Manager'
+      label: 'otherpages.manage.manager',
+      icon: 'fas fa-tools'
     },
     Teacher: {
       value: 4,
-      label: 'Teacher'
+      label: 'event.teacher',
+      icon: 'fas fa-user-tie'
     }
   },
 

src/components/CDateTime/CDateTime.ts

@@ -38,8 +38,12 @@ export default class CDateTime extends Vue {
       this.valueprec = this.myvalue
       this.$emit('show')
     } else {
-      if (!this.saveit)
+      if (!this.saveit) {
+        if (this.myvalue !== this.valueprec) {
           this.myvalue = this.valueprec
+          tools.showNeutralNotif(this.$q, this.$t('db.reccanceled'))
+        }
+      }
     }
   }
 
@@ -73,7 +77,7 @@ export default class CDateTime extends Vue {
   }
 
   public changeval(newval) {
-    console.log('changeval', newval)
+    // console.log('changeval', newval)
     this.$emit('update:value', newval)
   }
 }

src/components/CGridTableRec/CGridTableRec.ts

@@ -12,9 +12,11 @@ import { lists } from '../../store/Modules/lists'
 import { IParamsQuery } from '../../model/GlobalStore'
 import { fieldsTable } from '../../store/Modules/fieldsTable'
 import { CDateTime } from '../CDateTime'
+import { CMyToggleList } from '../CMyToggleList'
+import { CMyChipList } from '../CMyChipList'
 
 @Component({
-  components: { CDateTime }
+  components: { CDateTime, CMyToggleList, CMyChipList }
 })
 export default class CGridTableRec extends Vue {
   @Prop({ required: false }) public prop_mytable: string
@@ -81,9 +83,6 @@ export default class CGridTableRec extends Vue {
     this.rowsel = item
     this.idsel = item._id
     this.colsel = col
-
-    this.updateValueExtra(col, this.rowsel[col.name])
-    // console.log('this.idsel', this.idsel)
   }
 
   public undoVal() {
@@ -363,7 +362,7 @@ export default class CGridTableRec extends Vue {
     }
   }
 
-  public visuValByType(col, val) {
+  public visuValByType(col: IColGridTable, val) {
     if (col.fieldtype === tools.FieldType.date) {
       if (val === undefined) {
         return '[]'
@@ -374,9 +373,9 @@ export default class CGridTableRec extends Vue {
       return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else if (col.fieldtype === tools.FieldType.binary) {
       if (val === undefined)
-        return '[]'
+        return '[---]'
       else
-        return val
+        return fieldsTable.getArrStrByValueBinary(this, col, val)
     } else {
       if (val === undefined)
         return '[]'
@@ -435,37 +434,4 @@ export default class CGridTableRec extends Vue {
     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

@@ -119,29 +119,28 @@
                     </div>
                     <div v-else-if="col.fieldtype === tools.FieldType.binary">
                         <div :class="getclassCol(col)">
-                            {{ visuValByType(col, props.row[col.name]) }}
+
+                            <CMyChipList
+                                    :value="props.row[col.name]"
+                                    :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                                    :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                                    :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                                    :opticon="db_fieldsTable.getIconByTable(col.jointable)"
+                            ></CMyChipList>
+
                             <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
+                                <CMyToggleList :label="col.title"
-                                        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)"
+                                               :value.sync="props.row[col.name]"
-                                        :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
+                                               :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-                                        style="min-width: 150px">
+                                               :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
 
-                                </q-select>
+                                >
 
-                                <q-input v-model="props.row[col.name]"/>
+                                </CMyToggleList>
-                                {{ visuValByType(col, props.row[col.name]) }}
 
                             </q-popup-edit>
                         </div>

src/components/CMyChipList/CMyChipList.scss

@@ -0,0 +1,5 @@
+.clchip{
+  display: flex;
+  //flex: 1;
+  //flex-direction: column;
+}

src/components/CMyChipList/CMyChipList.ts

@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+@Component({
+  name: 'CMyChipList'
+})
+
+export default class CMyChipList extends Vue {
+  public $t
+  @Prop({ required: true }) public options: []
+  @Prop({ required: true }) public value
+  @Prop({ required: true, default: '' }) public optlab
+  @Prop({ required: true, default: '' }) public optval
+  @Prop({ required: false, default: '' }) public myclass
+  @Prop({ required: false, default: '' }) public opticon
+  @Prop({ required: false, default: '' }) public optcolor
+
+  public myvalue = ''
+  public myarrvalues = []
+
+  get tools() {
+    return tools
+  }
+
+  public mounted() {
+    this.myarrvalues = []
+
+    console.table(this.options)
+    this.options.forEach((rec, index) => {
+      if (tools.isBitActive(this.value, rec[this.optval])) {
+        const mydata = {
+          label: this.$t(rec[this.optlab]),
+          value: rec[this.optval],
+          valbool: tools.isBitActive(this.value, rec[this.optval]),
+          icon: '',
+          color: tools.getColorByIndexBest(index)
+        }
+
+        if (this.opticon)
+          mydata.icon = rec[this.opticon]
+        if (this.optcolor)
+          mydata.color = rec[this.optcolor]
+
+        this.myarrvalues.push(mydata)
+      }
+    })
+
+    if (this.myarrvalues.length === 0)
+      this.myarrvalues.push({ label: this.$t('otherpages.manage.nessuno'), color: 'gray' })
+
+    console.log('arrvalues=', this.myarrvalues)
+
+  }
+}

src/components/CMyChipList/CMyChipList.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="clchip">
+        <div v-for="(rec, index) in myarrvalues">
+            <q-chip dense
+                    :color="rec.color"
+                    text-color="white"
+                    :icon="rec.icon">
+                {{rec.label}}
+            </q-chip>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyChipList.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyChipList.scss';
+</style>

src/components/CMyChipList/index.ts

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

src/components/CMySelect/CMySelect.ts

@@ -31,7 +31,7 @@ export default class CMySelect extends Vue {
   }
 
   public changeval(newval) {
-    console.log('changeval', newval)
+    // console.log('changeval', newval)
     // const newvallab = newval[`${this.optval}`]
     // this.myvalue = newvallab
     this.$emit('update:value', newval)

src/components/CMyToggleList/CMyToggleList.scss

@@ -0,0 +1,5 @@
+.cltoggle{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}

src/components/CMyToggleList/CMyToggleList.ts

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+@Component({
+  name: 'CMyToggleList'
+})
+
+export default class CMyToggleList extends Vue {
+  public $t
+  @Prop({ required: true }) public options: []
+  @Prop({ required: true }) public value
+  @Prop({ required: true, default: '' }) public label
+  @Prop({ required: false, default: '' }) public myclass
+  @Prop({ required: true, default: '' }) public optlab
+  @Prop({ required: true, default: '' }) public optval
+
+  public myvalue = ''
+  public myarrvalues = []
+
+  get tools() {
+    return tools
+  }
+
+  public changeval(newval) {
+    // Update value
+    const totale = this.myarrvalues.filter((rec) => rec.valbool).reduce((sum, rec) => sum + rec.value, 0)
+    this.myvalue = totale
+
+    // Refresh value
+    this.$emit('update:value', this.myvalue)
+  }
+
+  public mounted() {
+    this.myarrvalues = []
+
+    console.table(this.options)
+    this.options.forEach((rec) => {
+      const mydata = {
+        label: this.$t(rec[this.optlab]),
+        value: rec[this.optval],
+        valbool: tools.isBitActive(this.value, rec[this.optval])
+      }
+      this.myarrvalues.push(mydata)
+    })
+
+  }
+}

src/components/CMyToggleList/CMyToggleList.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <div class="cltoggle" v-for="(rec, index) in myarrvalues">
+            <q-toggle
+                    v-model="rec.valbool"
+                    :label="rec.label"
+                    :color="tools.getColorByIndexBest(index)"
+                    keep-color
+                    @input="changeval">
+            </q-toggle>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyToggleList.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyToggleList.scss';
+</style>

src/components/CMyToggleList/index.ts

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

src/components/index.ts

@@ -7,6 +7,8 @@ export * from './CBook'
 export * from './CMyPage'
 export * from './CTitle'
 export * from './CMySelect'
+export * from './CMyToggleList'
+export * from './CMyChipList'
 export * from './CMyEditor'
 export * from './CImgText'
 export * from './CImgTitle'

src/model/GlobalStore.ts

@@ -239,6 +239,8 @@ export interface ITableRec {
   value: string
   columns: IColGridTable[]
   colkey: string
+  collabel: string
+  colicon?: string
 }
 
 export interface IDataPass {

src/statics/i18n.js

@@ -18,7 +18,9 @@ const msgglobal = {
         tableslist: 'Lista Tabelle',
       },
       manage: {
-        menu: 'Gestione'
+        menu: 'Gestione',
+        manager: 'Gestore',
+        nessuno: 'Nessuno'
       },
       messages: {
         menu: 'I tuoi Messaggi'
@@ -50,6 +52,7 @@ const msgglobal = {
     db: {
       recupdated: 'Record Aggiornato',
       recfailed: 'Errore durante aggiornamento Record',
+      reccanceled: 'Annullato Aggiornamento. Ripristinato valore precendente',
       deleterecord: 'Elimina Record',
       deletetherecord: 'Eliminare il Record?',
       deletedrecord: 'Record Cancellato',
@@ -196,6 +199,10 @@ const msgglobal = {
       themecolor: 'Tema Colore',
       themebgcolor: 'Tema Colore Sfondo'
     },
+    where: {
+      code: 'Id',
+      whereicon: 'Icona',
+    },
     cal: {
       booked: 'Prenotato',
       booked_error: 'Prenotazione non avvenuta. Riprovare più tardi',
@@ -304,7 +311,9 @@ const msgglobal = {
         tableslist: 'Listado de tablas',
       },
       manage: {
-        menu: 'Gestionar'
+        menu: 'Gestionar',
+        manager: 'Gerente',
+        nessuno: 'Nadie'
       },
       messages: {
         menu: 'Tus mensajes'
@@ -336,6 +345,7 @@ const msgglobal = {
     db: {
       recupdated: 'Registro Actualizado',
       recfailed: 'Error durante el registro de actualización',
+      reccanceled: 'Actualización cancelada Restaurar valor anterior',
       deleterecord: 'Eliminar registro',
       deletetherecord: '¿Eliminar el registro?',
       deletedrecord: 'Registro cancelado',
@@ -476,6 +486,10 @@ const msgglobal = {
       themecolor: 'Tema Colores',
       themebgcolor: 'Tema Colores Fondo'
     },
+    where: {
+      code: 'Id',
+      whereicon: 'Icono',
+    },
     cal: {
       booked: 'Reservado',
       booked_error: 'Reserva fallida. Intenta nuevamente más tarde',
@@ -581,7 +595,9 @@ const msgglobal = {
         tableslist: 'Liste des tables',
       },
       manage: {
-        menu: 'Gérer'
+        menu: 'Gérer',
+        manager: 'Directeur',
+        nessuno: 'Aucun'
       },
       messages: {
         menu: 'Vos messages'
@@ -613,6 +629,7 @@ const msgglobal = {
     db: {
       recupdated: 'Enregistrement mis à jour',
       recfailed: 'Erreur lors de la mise à jour',
+      reccanceled: 'Mise à jour annulée. Restaurer la valeur précédente',
       deleterecord: 'Supprimer l\'enregistrement',
       deletetherecord: 'Supprimer l\'enregistrement?',
       deletedrecord: 'Enregistrement annulé',
@@ -752,6 +769,10 @@ const msgglobal = {
       themecolor: 'Tema Colores',
       themebgcolor: 'Tema Colores Fondo'
     },
+    where: {
+      code: 'Id',
+      whereicon: 'icône',
+    },
     cal: {
       booked: 'Réservé',
       booked_error: 'La réservation a échoué. Réessayez plus tard',
@@ -857,7 +878,9 @@ const msgglobal = {
         tableslist: 'List of tables',
       },
       manage: {
-        menu: 'Manage'
+        menu: 'Manage',
+        manager: 'Manager',
+        nessuno: 'None'
       },
       messages: {
         menu: 'Your Messages'
@@ -889,6 +912,7 @@ const msgglobal = {
     db: {
       recupdated: 'Record Updated',
       recfailed: 'Error during update Record',
+      reccanceled: 'Canceled Update. Restore previous value',
       deleterecord: 'Delete Record',
       deletetherecord: 'Delete the Record?',
       deletedrecord: 'Record Deleted',
@@ -1027,6 +1051,10 @@ const msgglobal = {
       themecolor: 'Theme Color',
       themebgcolor: 'Theme Color Background'
     },
+    where: {
+      code: 'Id',
+      whereicon: 'Icon',
+    },
     cal: {
       booked: 'Booked',
       booked_error: 'Reservation failed. Try again later',
@@ -1132,7 +1160,9 @@ const msgglobal = {
         tableslist: 'List of tables',
       },
       manage: {
-        menu: 'Manage'
+        menu: 'Manage',
+        manager: 'Manager',
+        nessuno: 'None'
       },
       messages: {
         menu: 'Your Messages'
@@ -1164,6 +1194,7 @@ const msgglobal = {
     db: {
       recupdated: 'Record Updated',
       recfailed: 'Error during update Record',
+      reccanceled: 'Canceled Update. Restore previous value',
       deleterecord: 'Delete Record',
       deletetherecord: 'Delete the Record?',
       deletedrecord: 'Record Deleted',
@@ -1304,6 +1335,10 @@ const msgglobal = {
       themecolor: 'Theme Color',
       themebgcolor: 'Theme Color Background'
     },
+    where: {
+      code: 'Id',
+      whereicon: 'Icon',
+    },
     cal: {
       booked: 'Booked',
       booked_error: 'Reservation failed. Try again later',

src/store/Modules/fieldsTable.ts

@@ -40,7 +40,7 @@ function AddCol(params: IColGridTable) {
 
 const colTableWhere = [
   AddCol({ name: 'code', label_trans: 'where.code' }),
-  AddCol({ name: 'placename', label_trans: 'where.placename' }),
+  AddCol({ name: 'placename', label_trans: 'cal.where' }),
   AddCol({ name: 'whereicon', label_trans: 'where.whereicon' }),
   AddCol(DeleteRec)
 ]
@@ -111,6 +111,30 @@ const colTableEvents = [
 ]
 
 export const fieldsTable = {
+  getArrStrByValueBinary(mythis, col: IColGridTable, val) {
+    const arr = this.getArrByValueBinary(mythis, col, val)
+    if (arr.length > 0)
+      return arr.join(' - ')
+    else
+      return '[---]'
+  },
+
+  getArrByValueBinary(mythis, col: IColGridTable, val) {
+    if (col.jointable) {
+      const mylist = this.getTableJoinByName(col.jointable)
+      const key = this.getKeyByTable(col.jointable)
+      const myres = []
+      mylist.forEach((myrec) => {
+        if (tools.isBitActive(val, myrec[key]))
+          myres.push(mythis.$t(myrec.label))
+      })
+
+      return myres
+    } else {
+      return []
+    }
+  },
+
   getColByTable(table) {
     if (table === 'permissions') {
       return ['value', 'label']
@@ -118,7 +142,7 @@ export const fieldsTable = {
   },
   getTableJoinByName(table) {
     if (table === 'permissions') {
-      return [shared_consts.Permissions.Normal, shared_consts.Permissions.Admin, shared_consts.Permissions.Manager, shared_consts.Permissions.Teacher]
+      return [shared_consts.Permissions.Admin, shared_consts.Permissions.Manager, shared_consts.Permissions.Teacher]
     }
   },
   getrecTableList(mytable) {
@@ -131,36 +155,56 @@ export const fieldsTable = {
     else
       return '_id'
   },
+  getLabelByTable(mytable): string {
+    const myrec = this.getrecTableList(mytable)
+    if (myrec)
+      return ((myrec.collabel) ? myrec.collabel : 'label')
+    else
+      return 'label'
+  },
+  getIconByTable(mytable): string {
+    const myrec = this.getrecTableList(mytable)
+    if (myrec)
+      return ((myrec.icon) ? myrec.icon : '')
+    else
+      return ''
+  },
   tablesList: [
     {
       value: 'operators',
       label: 'Insegnanti',
       columns: colTableOperator,
-      colkey: '_id'
+      colkey: '_id',
+      collabel: 'username'
     },
     {
       value: 'wheres',
       label: 'Luoghi',
       columns: colTableWhere,
-      colkey: '_id'
+      colkey: '_id',
+      collabel: 'placename'
     },
     {
       value: tools.TABEVENTS,
       label: 'Eventi',
       columns: colTableEvents,
-      colkey: '_id'
+      colkey: '_id',
+      collabel: 'title'
     },
     {
       value: 'contribtype',
       label: 'Tipi di Contributi',
       columns: colcontribtype,
-      colkey: '_id'
+      colkey: '_id',
+      collabel: 'label'
     },
     {
       value: 'permissions',
       label: 'Permessi',
       columns: colTablePermission,
-      colkey: 'value'
+      colkey: 'value',
+      collabel: 'label',
+      colicon: 'icon'
     }
   ],
 

src/store/Modules/tools.ts

@@ -37,6 +37,23 @@ export interface INotify {
 }
 
 export const tools = {
+  listBestColor: [
+    'blue',
+    'green',
+    'purple',
+    'deep-purple',
+    'indigo',
+    'light-blue',
+    'cyan',
+    'teal',
+    'lime',
+    'orange',
+    'deeporange',
+    'grey',
+    'blue-gray',
+    'yellow'
+  ],
+
   TABEVENTS: 'myevents',
 
   MAX_CHARACTERS: 60,
@@ -1405,6 +1422,10 @@ export const tools = {
     tools.showNotif(q, msg, { color: 'negative', icon: 'notifications' })
   },
 
+  showNeutralNotif(q: any, msg) {
+    tools.showNotif(q, msg, { color: 'warning', icon: 'notifications' })
+  },
+
   showNotif(q: any, msg, data ?: INotify | null
   ) {
     let myicon = data ? data.icon : 'ion-add'
@@ -2494,7 +2515,10 @@ export const tools = {
   },
 
   isBitActive(bit, whattofind) {
+    if (whattofind > 0)
       return ((bit & whattofind) === whattofind)
+    else
+      return false
   },
 
   SetBit(myval, bit) {
@@ -2513,6 +2537,13 @@ export const tools = {
       .filter(e => arr[e]).map(e => arr[e])
 
     return unique
+  },
+
+  getColorByIndexBest(index) {
+    if (index < this.listBestColor.length - 1)
+      return this.listBestColor[index]
+    else
+      return 'primary'
   }
 
 // getLocale() {