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

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
-                                        v-model="col.resultjoin"
-                                        multiple
-                                        borderless
-                                        dense
-                                        options-dense
-                                        display-value="Valori:"
-                                        emit-value
-                                        map-options
+                                <CMyToggleList :label="col.title"
                                         :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                                        @input="setResultJoin(col, props.row)"
-                                        :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
-                                        style="min-width: 150px">
+                                               :value.sync="props.row[col.name]"
+                                               :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                                               :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
 
-                                </q-select>
+                                >
 
-                                <q-input v-model="props.row[col.name]"/>
-                                {{ visuValByType(col, props.row[col.name]) }}
+                                </CMyToggleList>
 
                             </q-popup-edit>
                         </div>