- CMyPopupEdit

- Star - Insert and Edit - Update quasar 3.2.4
2021-12-02 10:12:57 +01:00
parent ea9822e5f6
commit 5ae0518030
32 changed files with 3849 additions and 3335 deletions
--- a/src/components/CGridTableRec/CGridTableRec.scss
+++ b/src/components/CGridTableRec/CGridTableRec.scss
@@ -20,3 +20,10 @@
    font-size: 1rem;
  }
 }
+
+.q-table {
+  &__col {
+    font-size: 1rem;
+    color: gray;
+  }
+}
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -3,7 +3,16 @@ import { useI18n } from '@src/boot/i18n'

 import { tools } from '../../store/Modules/tools'

-import { IColGridTable, IFilter, ITableRec, IPagination, IParamDialog, IEvents, IDataToSet } from '../../model'
+import {
+  IColGridTable,
+  IFilter,
+  ITableRec,
+  IPagination,
+  IParamDialog,
+  IEvents,
+  IDataToSet,
+  IMySkill
+} from '../../model'
 import { lists } from '../../store/Modules/lists'
 import { IParamsQuery } from '../../model/GlobalStore'
 import { CMyPopupEdit } from '../CMyPopupEdit'
@@ -39,6 +48,16 @@ export default defineComponent({
      required: false,
      default: '',
    },
+    prop_search: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    vertical: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
    prop_codeId: {
      type: String,
      required: false,
@@ -105,8 +124,9 @@ export default defineComponent({
    const addRow = ref('Aggiungi')

    const newRecordBool = ref(false)
+    const editRecordBool = ref(false)
    const newRecord: any = ref({})
-    const savenewRec = ref(false)
+    const recModif: any = ref({})

    const mytable = ref('')
    const mytitle = ref('')
@@ -275,6 +295,12 @@ export default defineComponent({
    }


+    function refresh_arr() {
+      const myarr = [...serverData.value]
+      serverData.value = []
+      serverData.value = [...myarr]
+    }
+
    function refresh_table() {
      onRequest({
        pagination: pagination.value
@@ -327,11 +353,14 @@ export default defineComponent({
      }
    }

-    function selItem(item: any, col: IColGridTable) {
-      console.log('selItem', item)
+    function selItem(item: any, col: IColGridTable, inmodif?: boolean) {
+      console.log('selItem', item, col)
      rowsel = item
      idsel = item._id
      colsel.value = col
+      if (inmodif) {
+
+      }
    }

    function undoVal() {
@@ -373,11 +402,16 @@ export default defineComponent({
    }

    function annulla(val: any) {
-      // console.log('annulla')
-      globalStore.DeleteRec({ table: mytable.value, id: newRecord.value._id })
-        .then((ris) => {
-          return true
-        })
+      console.log('annulla')
+      if (newRecord.value) {
+        globalStore.DeleteRec({ table: mytable.value, id: newRecord.value._id })
+          .then((ris) => {
+            // console.log('deleted', ris)
+            serverData.value.pop(ris)
+            newRecord.value = null
+            return true
+          })
+      }
    }

    function SaveValue(newVal: any, valinitial: any) {
@@ -391,11 +425,6 @@ export default defineComponent({
      }

      if (myfield) {
-        if (colsel.value) {
-          // console.log('rowsel[myfield]', rowsel[myfield], 'field', myfield)
-          // console.log('subf', subf)
-        }
-
        if (colsel.value) {
          // Update value in table memory
          if (subf !== '') {
@@ -465,18 +494,13 @@ export default defineComponent({

      const mydata: any = {
        table: mytable.value,
-        data: function () {
-          return {}
-        }
+        data: {}
      }

-      mydata.data = props.defaultnewrec
+      if (props.defaultnewrec)
+        mydata.data = props.defaultnewrec()

-      // const mykey = fieldsTable.getKeyByTable(mytable)
-
-      // mydata.data[mykey] = ''
-
-      // console.log('mydata', mydata)
+      // console.log('DATA=', mydata.data)

      newRecord.value = await globalStore.saveTable(mydata)
      newRecordBool.value = true
@@ -484,26 +508,10 @@ export default defineComponent({
    }

    async function createNewRecord() {
-      console.log('createNewRecord')
-      loading.value = true

-      const mydata: any = {
-        table: mytable.value,
-        data: {}
-      }
+      await createNewRecordDialog()

-      if (props.defaultnewrec) {
-        mydata.data = props.defaultnewrec
-      }
-
-      // const mykey = fieldsTable.getKeyByTable(mytable)
-
-      // mydata.data[mykey] = ''
-
-      console.log('mydata', mydata)
-      const data = await globalStore.saveTable(mydata)
-
-      serverData.value.push(data)
+      serverData.value.push(newRecord.value)
      pagination.value.rowsNumber++

      loading.value = false
@@ -549,7 +557,7 @@ export default defineComponent({
          tablesel.value = mytable.value
      }

-      console.log('2) tablesel', tablesel.value)
+      // console.log('2) tablesel', tablesel.value)

      changeTable(tablesel.value)

@@ -590,25 +598,34 @@ export default defineComponent({
          param2: item,
        }

-        return $q.dialog({
-          message: translate(col.askaction) + '?',
-          html: true,
-          ok: {
-            label: ok,
-            push: true,
-          },
-          title: 'Action',
-          cancel: true,
-          persistent: false,
-        }).onOk(() => {
-          // console.log('OK')
-          exec_func_table(table, col.action, par)
-          return true
-        }).onCancel(() => {
-          // console.log('CANCEL')
-          exec_func_table(table, funccancel, par)
-          return false
-        })
+        if (col.action === lists.MenuAction.CAN_EDIT_TABLE) {
+          console.log('Edit', item)
+          selItem(item, col)
+          recModif.value = item
+          editRecordBool.value = true
+        } else {
+
+
+          return $q.dialog({
+            message: translate(col.askaction) + '?',
+            html: true,
+            ok: {
+              label: ok,
+              push: true,
+            },
+            title: 'Action',
+            cancel: true,
+            persistent: false,
+          }).onOk(() => {
+            // console.log('OK')
+            exec_func_table(table, col.action, par)
+            return true
+          }).onCancel(() => {
+            // console.log('CANCEL')
+            exec_func_table(table, funccancel, par)
+            return false
+          })
+        }

      }
    }
@@ -617,7 +634,7 @@ export default defineComponent({
      if (action === lists.MenuAction.DELETE_RECTABLE) {
        if ((serverData.value.length > 0) && item) {
          serverData.value.splice(serverData.value.indexOf(item), 1)
-          refresh_table()
+          refresh_arr()
        }
      } else if (action === lists.MenuAction.DUPLICATE_RECTABLE) {
        // Add record duplicated
@@ -638,6 +655,21 @@ export default defineComponent({
      }
    }

+    function clByCol(col: IColGridTable) {
+      if (!visuIntestazCol(col)) {
+        return 'row justify-center vertical-middle'
+      } else {
+        return ''
+      }
+    }
+    function visuIntestazCol(col: IColGridTable) {
+      if (col.fieldtype === costanti.FieldType.html || col.fieldtype === costanti.FieldType.listimages) {
+        return false
+      } else {
+        return true
+      }
+    }
+
    function changeCol(newval: any) {
      // console.log('changecol', mytable.value)
      if (!!mytable.value) {
@@ -666,7 +698,7 @@ export default defineComponent({
        }
      }

-      console.log('tablesel', tablesel.value, 'mytab', mytab)
+      // console.log('tablesel', tablesel.value, 'mytab', mytab)

      if (mytab) {
        mytitle.value = mytab.label
@@ -774,29 +806,55 @@ export default defineComponent({

    async function saveNewRecord() {
      console.log('saveNewRecord')
-      savenewRec.value = true
      const mydata = {
        table: mytable.value,
        data: {}
      }

-      mydata.data = newRecord
+      mydata.data = newRecord.value

      const data = await globalStore.saveTable(mydata)
        .then((ris) => {
          if (ris) {
            // console.log('ris', ris)
            newRecordBool.value = false
-            refresh()
+            const indrec = serverData.value.findIndex((rec: IMySkill) => rec._id === ris._id)
+            console.log('indrec', indrec, serverData.value[indrec])
+            if (indrec >= 0)
+              serverData.value[indrec] = ris
+            else
+              serverData.value.push(ris)
+
+            newRecord.value = null
+            // refresh()
+          }
+        })
+    }
+
+    async function saverecModif() {
+      console.log('saverecModif')
+      const mydata = {
+        table: mytable.value,
+        data: {}
+      }
+
+      mydata.data = recModif.value
+
+      const data = await globalStore.saveTable(mydata)
+        .then((ris) => {
+          if (ris) {
+            // console.log('ris', ris)
+            editRecordBool.value = false
+            const indrec = serverData.value.findIndex((rec: IMySkill) => rec._id === ris._id)
+            console.log('indrec', indrec, serverData.value[indrec])
+            if (indrec >= 0)
+              serverData.value[indrec] = ris
          }
        })
    }

    function hidewindow() {
-      console.log('hidewindow')
-      if (!savenewRec.value) {
-        annulla(0)
-      }
+      annulla(0)
    }

    function getlabelAddRow() {
@@ -826,6 +884,8 @@ export default defineComponent({
      saveFieldValue,
      clickFunz,
      visCol,
+      visuIntestazCol,
+      clByCol,
      changeCol,
      changeTable,
      doSearch,
@@ -836,6 +896,7 @@ export default defineComponent({
      selectionclick,
      getusernamesel,
      saveNewRecord,
+      saverecModif,
      hidewindow,
      isfinishLoading,
      getlabelAddRow,
@@ -858,11 +919,15 @@ export default defineComponent({
      myfilter,
      disabilita,
      newRecordBool,
+      editRecordBool,
+      newRecord,
+      recModif,
      lists,
      refresh,
      spinner_visible,
      tablesel,
      myfilterand,
+      tools,
    }
  }
 })
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -8,7 +8,61 @@
        @click="createNewRecordDialog"></q-btn>
    </div>

+    <div
+      v-if="prop_search"
+      class="row justify-center vertical-middle">
+
+      <q-input
+        v-model="search" filled dense type="search" debounce="500" hint="Cerca"
+        v-on:keyup.enter="doSearch">
+        <template v-slot:after>
+          <q-btn v-if="mytable" dense label="" color="primary" @click="refresh" icon="search"></q-btn>
+        </template>
+      </q-input>
+
+      <q-space></q-space>
+
+      <q-select
+        v-if="mytable"
+        v-model="colVisib"
+        rounded
+        outlined
+        multiple
+        dense
+        options-dense
+        :display-value="$t('grid.columns')"
+        emit-value
+        map-options
+        :options="mycolumns"
+        option-value="name"
+        @update:model-value="changeCol">
+
+      </q-select>
+
+    </div>
+    <div class="q-gutter-md q-ma-xs row">
+      <div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
+      <q-space></q-space>
+      <q-btn
+        v-if="mytable" rounded dense size="sm" flat :color="canEdit ? 'positive' : 'light-gray'"
+        :disable="disabilita()"
+        :val="lists.MenuAction.CAN_EDIT_TABLE"
+        icon="fas fa-pencil-alt" @update:model-value="changefuncAct"
+        @click="canEdit = !canEdit">
+      </q-btn>
+      <q-btn
+        v-if="mytable" rounded dense size="sm" flat color="light-gray"
+        :disable="loading"
+        icon="fas fa-plus"
+        @click="createNewRecord">
+
+      </q-btn>
+    </div>
+    <q-inner-loading :showing="spinner_visible">
+      <q-spinner-tail size="2em" color="primary"/>
+    </q-inner-loading>
    <q-table
+      :grid="vertical"
      flat
      bordered
      class="my-sticky-header-table"
@@ -32,7 +86,6 @@
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th>
-
          </q-th>
          <q-th
            v-for="col in props.cols" :key="col.name"
@@ -47,53 +100,7 @@
        </q-tr>
      </template>

-
-      <template v-slot:top-right>
-        <div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
-
-        <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
-
-        <q-input
-          v-model="search" filled dense type="search" debounce="500" 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="canEdit" :disable="disabilita()" :val="lists.MenuAction.CAN_EDIT_TABLE"
-          class="q-mx-sm"
-          :label="$t('grid.editvalues')" @update:model-value="changefuncAct">
-        </q-toggle>
-
-        <q-btn
-          v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
-          :label="$t('grid.addrecord')"
-          @click="createNewRecord">
-
-        </q-btn>
-
-        <q-space/>
-
-        <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
-
-        <q-select
-          v-if="mytable"
-          v-model="colVisib"
-          rounded
-          outlined
-          multiple
-          dense
-          options-dense
-          :display-value="$t('grid.columns')"
-          emit-value
-          map-options
-          :options="mycolumns"
-          option-value="name"
-          @update:model-value="changeCol">
-
-        </q-select>
-
+      <template v-slot:top-right v-if="tablesList || arrfilters">
        <q-select
          v-if="tablesList"
          v-model="tablesel"
@@ -107,12 +114,6 @@
        >
        </q-select>

-
-        <q-inner-loading :showing="spinner_visible">
-          <q-spinner-tail size="2em" color="primary"/>
-        </q-inner-loading>
-
-
        <div class="row">
          <q-toggle
            v-for="(filter, index) of arrfilters"
@@ -135,7 +136,6 @@
            <div
              v-if="colVisib.includes(col.field + col.subfield)" class="tdclass">
              <div :class="getclrow(props.row)">
-
                <CMyPopupEdit
                  :table="prop_mytable"
                  :canEdit="canEdit"
@@ -169,6 +169,66 @@
        <br>
      </template>

+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card :class="props.selected ? 'bg-grey-2' : ''">
+            <q-list dense>
+              <div v-for="col in mycolumns" :key="col.name">
+                <q-item v-if="colVisib.includes(col.field + col.subfield)" :class="clByCol(col)">
+                  <q-item-section avatar v-if="visuIntestazCol(col)">
+                    <q-item-label class="q-table__col">{{ col.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                      <div class="tdclass">
+                        <div :class="getclrow(props.row)">
+
+                          <CMyPopupEdit
+                            :table="prop_mytable"
+                            :canEdit="canEdit"
+                            :disable="disabilita()"
+                            :mycol="col"
+                            v-model:row="props.row"
+                            :field="col.field"
+                            :subfield="col.subfield"
+                            minuteinterval="1"
+                            @save="SaveValue"
+                            @show="selItem(props.row, col)"
+                            @showandsave="showandsel">
+
+                          </CMyPopupEdit>
+                        </div>
+                      </div>
+                  </q-item-section>
+                </q-item>
+              </div>
+              <div>
+                <q-item-section>
+                  <q-item-label class="q-table__col"></q-item-label>
+                </q-item-section>
+                <q-item class="row justify-center">
+                  <q-item-section side>
+                    <q-item-label caption>
+                      <q-item>
+                        <div v-for="col in mycolumns" :key="col.name">
+                          <div v-if="colExtra.includes(col.name) && col.action" class="tdclass">
+                            <q-btn
+                              flat round color="red" :icon="col.icon" size="sm"
+                              @click="clickFunz(props.row, col)"></q-btn>
+                          </div>
+                        </div>
+                      </q-item>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </div>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
+
      <!--
                      <q-btn
                              flat round dense
@@ -223,7 +283,7 @@
    </div>
    <q-dialog v-model="newRecordBool" @hide="hidewindow">
      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
-        <q-toolbar class="bg-primary text-white">
+        <q-toolbar class="bg-primary text-white centeritems">
          <q-toolbar-title>
            {{ mytitle }}
          </q-toolbar-title>
@@ -260,6 +320,44 @@
        </q-card-actions>
      </q-card>
    </q-dialog>
+    <q-dialog v-model="editRecordBool">
+      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-toolbar class="bg-primary text-white centeritems">
+          <q-toolbar-title>
+            {{ mytitle }}
+          </q-toolbar-title>
+          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+        </q-toolbar>
+        <q-card-section class="inset-shadow">
+          <div
+            v-for="col in mycolumns" :key="col.name">
+            <div
+              v-if="colVisib.includes(col.field + col.subfield)">
+              <div>
+                <CMyPopupEdit
+                  :table="prop_mytable"
+                  :canEdit="true"
+                  :mycol="col"
+                  :isInModif="true"
+                  v-model:row="recModif"
+                  :field="col.field"
+                  :subfield="col.subfield"
+                  minuteinterval="1"
+                  @save="SaveValue"
+                  @show="selItem(recModif, col, true)"
+                  @showandsave="showandsel">
+
+                </CMyPopupEdit>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="center">
+          <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saverecModif"></q-btn>
+          <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
  </div>
 </template>
 <script lang="ts" src="./CGridTableRec.ts">