- 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>

src/statics/i18n.js

@@ -2,6 +2,10 @@ import msg_website from '../db/i18n_website'
 
 const msgglobal = {
   it: {
+    grid: {
+      editvalues: 'Modifica Valori',
+      showprevedit: 'Mostra Eventi Passati'
+    },
     otherpages: {
       admin : {
         menu: 'Amministrazione',
@@ -229,6 +233,10 @@ const msgglobal = {
     cookies: 'Usiamo i Cookie per una migliore prestazione web.'
   },
   es: {
+    grid: {
+      editvalues: 'Cambiar valores',
+      showprevedit: 'Mostrar eventos pasados'
+    },
     otherpages: {
       admin : {
         menu: 'Administración',
@@ -450,6 +458,10 @@ const msgglobal = {
     cookies: 'Utilizamos cookies para un mejor rendimiento web.'
   },
   fr: {
+    grid: {
+      editvalues: 'Changer les valeurs',
+      showprevedit: 'Afficher les événements passés'
+    },
     otherpages: {
       admin : {
         menu: 'Administration',
@@ -670,6 +682,10 @@ const msgglobal = {
     cookies: 'Nous utilisons des cookies pour améliorer les performances Web.'
   },
   enUs: {
+    grid: {
+      editvalues: 'Edit Values',
+      showprevedit: 'Show Past Events'
+    },
     otherpages: {
       admin : {
         menu: 'Administration',
@@ -889,6 +905,10 @@ const msgglobal = {
     cookies: 'We use cookies for better web performance.'
   },
   de: {
+    grid: {
+      editvalues: 'Edit Values',
+      showprevedit: 'Show Past Events'
+    },
     otherpages: {
       admin : {
         menu: 'Administration',

src/store/Modules/lists.ts

@@ -16,6 +16,9 @@ export const lists = {
     THEMEBG: 211,
 
     DELETE_RECTABLE: 300,
+
+    CAN_EDIT_TABLE: 400,
+    SHOW_PREV_REC: 401,
   },
 
   selectTheme: [

src/views/admin/cfgServer/cfgServer.ts

@@ -29,7 +29,7 @@ export default class CfgServer extends Vue {
     { name: 'valore', label: 'Valore', field: 'valore', sortable: false }
   ]
 
-  public visibleColumns: ['chiave', 'userid', 'valore']
+  public colVisib: ['chiave', 'userid', 'valore']
   public separator: 'horizontal'
   public filter: string = ''
   public selected: any[] = []