- Toggle Edit Values in CGridTableRec

- Choose the visible column in CGridTableRec

src/components/CGridTableRec/CGridTableRec.ts

@@ -37,9 +37,19 @@ export default class CGridTableRec extends Vue {
   public filter: string = ''
   public selected: any
   public dark: boolean = true
+  public funcActivated = []
 
   public returnedData
   public returnedCount
+  public colVisib: any[] = []
+
+  get canEdit() {
+    return this.funcActivated.includes(lists.MenuAction.CAN_EDIT_TABLE)
+  }
+
+  get lists() {
+    return lists
+  }
 
   get tableClass() {
     if (this.dark) {
@@ -90,6 +100,11 @@ export default class CGridTableRec extends Vue {
 
   public created() {
     // this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+    this.mycolumns.forEach((elem) => {
+      if (elem.field)
+        this.colVisib.push(elem.field)
+    })
+
   }
 
   get getrows() {
@@ -219,7 +234,7 @@ export default class CGridTableRec extends Vue {
   }
 
   public getclassCol(col) {
-    return col.disable ? '' : 'colmodif'
+    return (col.disable || !this.canEdit) ? '' : 'colmodif'
   }
 
   public saveFieldValue(mydata) {

src/components/CGridTableRec/CGridTableRec.vue

@@ -1,13 +1,6 @@
 <template>
     <div class="q-pa-sm">
-        <!--<div class="col-2 q-table__title">{{ mytitle }}</div>-->
-
-        <!--<q-space/>-->
-        <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
-
-
         <q-table
-                :title="mytitle"
                 :data="serverData"
                 :columns="mycolumns"
                 :filter="filter"
@@ -16,22 +9,64 @@
                 :loading="loading"
                 @request="onRequest"
                 binary-state-sort
+                :visible-columns="colVisib"
         >
 
 
+            <template v-slot:header="props">
+                <q-tr :props="props">
+                    <q-th
+                            v-for="col in props.cols"
+                            v-if="colVisib.includes(col.field)"
+                            :key="col.name"
+                            :props="props"
+                            class="text-italic text-red text-weight-bold"
+                    >
+                        {{ col.label }}
+                    </q-th>
+                </q-tr>
+            </template>
 
-            <!--<template v-slot:top="props">-->
+            <template v-slot:top="props">
+                <div class="col-2 q-table__title">{{ mytitle }}</div>
+
+                <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
+
+                <q-toggle v-model="funcActivated" :val="lists.MenuAction.CAN_EDIT_TABLE"
+                          :label="$t('grid.editvalues')"></q-toggle>
+
+                <q-space/>
+
+                <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
+
+                <q-select
+                        v-model="colVisib"
+                        multiple
+                        borderless
+                        dense
+                        options-dense
+                        display-value="Colonne"
+                        emit-value
+                        map-options
+                        :options="mycolumns"
+                        option-value="name"
+                        style="min-width: 150px">
+
+                </q-select>
+
+            </template>
 
             <q-tr slot="body" slot-scope="props" :props="props">
 
-                <q-td v-for="col in mycolumns" :key="col.name" :props="props">
+                <q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colVisib.includes(col.field)">
                     <div v-if="col.action">
                         <q-btn flat round color="red" icon="fas fa-trash-alt"
                                @click="clickFunz(props.row, col)"></q-btn>
                     </div>
                     <div v-else :class="getclassCol(col)">
                         {{ props.row[col.name] }}
-                        <q-popup-edit v-model="props.row[col.name]" :disable="col.disable" :title="col.title" buttons
+                        <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)">
                             <q-input v-model="props.row[col.name]"/>
 
@@ -47,7 +82,7 @@
                                     class="q-ml-md">
                             </q-btn>
             -->
-            <!--</template>-->
+            <!---->
         </q-table>
     </div>
 </template>