- 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/.eslintrc.js
+++ b/.eslintrc.js
@@ -93,15 +93,9 @@ module.exports = {
    // 'multiline-ternary': 'off',
    'vue/max-attributes-per-line': [
      'error', {
-        'singleline': {
-          'max': 6,
-          'allowFirstLine': true,
-        },
-        'multiline': {
-          'max': 6,
-          'allowFirstLine': false,
-        },
-      }],
+        'singleline': 15,
+        'multiline': 15
+    }],
    'import/first': 'off',
    'import/named': 'off',
    'import/namespace': 'error',
@@ -124,6 +118,7 @@ module.exports = {
    '@typescript-eslint/semi': 'off',
    '@typescript-eslint/object-curly-spacing': 'off',
    '@typescript-eslint/restrict-plus-operands': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',

    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -153,6 +148,7 @@ module.exports = {
    'no-extra-boolean-cast': 'off',
    'max-attributes-per-line': 'off',
    'vue/no-v-model-argument': 'off',
+    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/ban-types': [
      'error',
      {
--- a/package.json
+++ b/package.json
@@ -23,36 +23,36 @@
    "generate-sw": "workbox generateSW workbox-config.js"
  },
  "dependencies": {
-    "@quasar/extras": "^1.11.1",
+    "@quasar/extras": "^1.12.1",
    "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.6",
-    "@vue/compat": "^3.2.19",
-    "@vue/compiler-sfc": "^3.2.19",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "@vuelidate/core": "^2.0.0-alpha.27",
-    "@vuelidate/validators": "^2.0.0-alpha.23",
-    "acorn": "^8.5.0",
-    "autoprefixer": "^10.3.7",
+    "@vue/compat": "^3.2.22",
+    "@vue/compiler-sfc": "^3.2.22",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vuelidate/core": "^2.0.0-alpha.32",
+    "@vuelidate/validators": "^2.0.0-alpha.25",
+    "acorn": "^8.6.0",
+    "autoprefixer": "^10.4.0",
    "axios": "0.21.4",
    "bcryptjs": "^2.4.3",
-    "core-js": "^3.18.2",
+    "core-js": "^3.19.1",
    "crypto": "^1.0.1",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.26.0",
    "dotenv": "^10.0.0",
-    "echarts": "^5.2.1",
+    "echarts": "^5.2.2",
    "eslint-plugin-quasar": "^1.0.0",
-    "graphql": "^15.6.1",
-    "graphql-tag": "^2.12.5",
+    "graphql": "^16.0.1",
+    "graphql-tag": "^2.12.6",
    "gsap": "^3.8.0",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
    "normalize.css": "^8.0.1",
-    "npm": "^7.24.2",
+    "npm": "^8.1.4",
    "nprogress": "^0.2.0",
-    "pinia": "^2.0.0-rc.11",
+    "pinia": "^2.0.4",
    "prerender-spa-plugin": "^3.4.0",
-    "quasar": "^2.1.0",
+    "quasar": "^2.3.3",
    "quasar-extras": "^2.0.9",
    "register-service-worker": "^1.7.2",
    "vee-validate": "^4.4.10",
@@ -74,47 +74,47 @@
    "vuex-typex": "^3.1.9"
  },
  "devDependencies": {
-    "@babel/eslint-parser": "^7.15.7",
-    "@quasar/app": "^3.1.2",
+    "@babel/eslint-parser": "^7.16.3",
+    "@quasar/app": "^3.2.3",
    "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.6",
    "@types/bcryptjs": "^2.4.2",
    "@types/dotenv": "^8.2.0",
    "@types/googlemaps": "^3.43.3",
-    "@types/jest": "^27.0.2",
-    "@types/js-cookie": "^3.0.0",
-    "@types/node": "14.14.45",
+    "@types/jest": "^27.0.3",
+    "@types/js-cookie": "^3.0.1",
+    "@types/node": "16.11.10",
    "@types/nprogress": "^0.2.0",
    "@types/vue-tel-input": "^2.1.2",
    "@types/vuelidate": "^0.7.15",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint": "^8.3.0",
    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^7.19.1",
+    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-vue": "^8.1.1",
    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.5.0",
    "http-proxy-middleware": "^2.0.1",
-    "jest": "^27.2.4",
+    "jest": "^27.3.1",
    "json-loader": "^0.5.7",
    "node-sass": "^6.0.1",
-    "npm-check-updates": "^11.8.5",
+    "npm-check-updates": "^12.0.2",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.9",
-    "postcss-loader": "^6.1.1",
-    "sass-loader": "^12.1.0",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
+    "sass-loader": "^12.3.0",
    "strip-ansi": "=7.0.1",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.0.7",
    "ts-loader": "^9.2.6",
    "tslint": "^6.1.3",
    "tslint-config-standard": "^9.0.0",
    "tslint-loader": "^3.5.4",
-    "typescript": "^4.4.3",
+    "typescript": "^4.5.2",
    "vue-cli-plugin-element-ui": "^1.1.4",
    "vueify": "^9.4.1",
-    "workbox-webpack-plugin": "^6.3.0"
+    "workbox-webpack-plugin": "^6.4.1"
  },
  "browser": {
    "crypto": false
@@ -131,7 +131,7 @@
    "last 5 Opera versions"
  ],
  "engines": {
-    "node": ">= 14.15.0",
+    "node": ">= 14.17.0",
    "npm": ">= 6.14.8",
    "yarn": ">= 1.21.1"
  }
--- a/src/common/axios.ts.off
+++ b/src/common/axios.ts.off
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,5 +1,5 @@
 export * from './pattern'
-export * from './axios'
+// export * from './axios'
 export * from './debounce'
 export * from './message'
 export { default as GlobalConfig } from '../config'
--- a/src/components/CGallery/CGallery.scss
+++ b/src/components/CGallery/CGallery.scss
@@ -44,10 +44,12 @@ $grayshadow: #555;
  min-width: 200px;
  padding: 1rem 1rem;
  height: 350px;
+  margin: auto;
 }

 .my-card-gallery-view {
  width: 100px;
  height: 100px;
  padding: 0.5rem 0.5rem;
+  margin: auto;
 }
--- a/src/components/CGallery/CGallery.ts
+++ b/src/components/CGallery/CGallery.ts
@@ -25,7 +25,7 @@ export default defineComponent({
      required: true,
    },
    imgGall: {
-      type: Object as PropType<IImgGallery | string | undefined>,
+      type: Object as PropType<IImgGallery | string | undefined | null>,
      required: true,
    },
  },
--- a/src/components/CGallery/CGallery.vue
+++ b/src/components/CGallery/CGallery.vue
@@ -31,7 +31,6 @@
                v-model="order">-->

        <div v-for="(mygallery, index) in getlistimages()" :key="index">
-          mygallery : {{ mygallery }}
          <div
            class="q-pa-sm q-gutter-sm"
            @dragenter="onDragEnter"
--- 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">
--- a/src/components/CMyChipList/CMyChipList.ts
+++ b/src/components/CMyChipList/CMyChipList.ts
@@ -53,6 +53,7 @@ export default defineComponent({
    })

    function refreshval() {
+      console.log('refreshval')
      myarrvalues.value = []

      // console.log('options', props.options)
--- a/src/components/CMyEditor/CMyEditor.ts
+++ b/src/components/CMyEditor/CMyEditor.ts
@@ -106,7 +106,7 @@ export default defineComponent({
    ])

    function changeval(newval: any) {
-      // console.log('changeval', newval)
+      console.log('myEditor: changeval', newval)
      emit('update:value', newval)
    }

--- a/src/components/CMyEditor/CMyEditor.vue
+++ b/src/components/CMyEditor/CMyEditor.vue
@@ -29,7 +29,6 @@
            toolbar-toggle-color="yellow-8"
            toolbar-bg="primary"
            :toolbar="toolbarcomp"
-            debounce="500"
            :fonts="myfonts"
            @update:model-value="changeval"
            @paste="evt => pasteCapture(evt)"
--- a/src/components/CMyPopupEdit/CMyPopupEdit.scss
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.scss
@@ -0,0 +1,6 @@
+.editor{
+  border: solid 2px #1c64aa;
+  border-radius: 5px;
+  padding: 2px;
+  height: 60px;
+}
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, PropType, ref, toRef, watch } from 'vue'
+import { defineComponent, onMounted, onBeforeMount, PropType, ref, toRef, watch } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 import { useUserStore } from '@store/UserStore'
 import { useGlobalStore } from '@store/globalStore'
@@ -40,6 +40,11 @@ export default defineComponent({
      required: false,
      default: false,
    },
+    isInModif: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
    field: {
      type: String,
      required: false,
@@ -143,7 +148,12 @@ export default defineComponent({
    const { setValDb, getValDb } = MixinBase()
    const { getMyUsername } = MixinUsers()

+    watch(() => props.row, (newval, oldval) => {
+      refresh()
+    })
+
    function crea() {
+      // console.log('crea', isFieldDb())

      if (isFieldDb()) {
        // mykey -> field
@@ -170,7 +180,7 @@ export default defineComponent({
          }]
        }

-        console.log('col', col.value);
+        // console.log('col', col.value);
      } else {
        col.value = {...props.mycol}
      }
@@ -192,8 +202,11 @@ export default defineComponent({
    }

    function changeval(newval: any) {
-      // console.log('changeval update:row', newval)
+      console.log('changeval update:row', newval)
      emit('update:row', props.row)
+      if (props.isInModif)
+        OpenEdit()
+
    }

    function getrealval(newval: any) {
@@ -203,11 +216,14 @@ export default defineComponent({
    }

    function changevalRec(newval: any) {
+      console.log('popypedit: changevalRec', newval)
      // console.log('row', props.row, 'col', props.mycol, 'newval', newval)
      // console.log('row[col.value.name]', props.row[col.value.name])
      myrow.value[col.value.name] = newval
      // console.log('changevalRec update:row', newval)
      emit('update:row', props.row)
+      if (props.isInModif)
+        OpenEdit()
    }

    function changevalRecHours(newval: any) {
@@ -224,7 +240,8 @@ export default defineComponent({
    }

    function mounted() {
-      // console.log('mounted')
+
+      // console.log('mounted', 'isFieldDb()', isFieldDb())
      if (isFieldDb()) {

      } else {
@@ -245,9 +262,11 @@ export default defineComponent({
        }
      }

+      // console.log('popupedit: myvalue.value', myvalue.value)
+
      if (col.value.fieldtype === costanti.FieldType.listimages) {
        if (myvalue.value === '' || myvalue.value === undefined) {
-          console.log('set default myvalue.value ')
+          // console.log('set default myvalue.value ')
          myvalue.value = {
            title: 'Galleria',
            directory: 'none',
@@ -261,6 +280,11 @@ export default defineComponent({
      // console.log('myvalueprec', myvalueprec)
    }

+    function refresh() {
+      mounted()
+    }
+
+
    function OpenEdit() {
      // console.log('OpenEdit')
      emit('show')
@@ -504,7 +528,7 @@ export default defineComponent({
    }


-    onMounted(mounted)
+    onBeforeMount(mounted)

    crea()

--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -34,7 +34,7 @@
            :readonly="false"
            :minuteinterval="minuteinterval"
            :dense="true"
-            @update:model-value="changevalRec"
+            @update:valueDate="changevalRec"
            canEdit="true"
            @savetoclose="SaveValueInt"
            @show="OpenEdit"
@@ -88,7 +88,7 @@
            :directory="getDirectoryGall()"
            :imgGall="myvalue" :edit="isviewfield()"
            @showandsave="Savedb"
-            @update:model-value="changevalRec"
+            @update:imgGall="changevalRec"
          >

          </CGallery>
@@ -100,7 +100,7 @@
              :directory="getDirectoryGall()"
              :imgGall="myvalue" :edit="isviewfield()"
              :single="isFieldDb()"
-              @update:model-value="changevalRec"
+              @update:imgGall="changevalRec"
              @showandsave="Savedb">

            </CGallery>
@@ -134,7 +134,7 @@
          <CMyChipList
            :type="costanti.FieldType.binary"
            :value="myvalue"
-            @update:model-value="changevalRec"
+            @update:value="changevalRec"
            :options="globalStore.getTableJoinByName(col.jointable)"
            :optval="fieldsTable.getKeyByTable(col.jointable)"
            :optlab="fieldsTable.getLabelByTable(col.jointable)"
@@ -152,7 +152,6 @@
            :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
        </div>
        <div v-else-if="col.fieldtype === costanti.FieldType.select">
-          myvalue: {{ myvalue }}
          <CMyChipList
            @update:model-value="changevalRec"
            myclass="text-center"
@@ -163,6 +162,19 @@
            :optlab="fieldsTable.getLabelByTable(col.jointable)"
            :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.star5">
+          <q-rating
+            :model-value="`${myvalue}` - 1"
+            @update:model-value="changevalRec"
+            size="1.5rem"
+            style="display: block !important;"
+            :color="tools.getColByLevel(myvalue)"
+            icon="star_border"
+            icon-selected="star"
+            :max="5"
+            :readonly="true"
+          />
+        </div>
        <div v-else-if="col.fieldtype === costanti.FieldType.boolean">
          <q-toggle
            dark color="green"
@@ -170,289 +182,484 @@
            :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
            @update:model-value="changevalRec"></q-toggle>
        </div>
-        <div v-else-if="col.fieldtype === costanti.FieldType.html">
+        <div v-else-if="col.fieldtype === costanti.FieldType.html" class="editor">
          <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
          </div>
        </div>
      </div>
    </div>
-    <div v-else>
-      <div v-if="col.fieldtype === costanti.FieldType.listimages">
-        <CGallery
-          :title="getTitleGall()"
-          :directory="getDirectoryGall()"
-          :imgGall="myvalue" :edit="isviewfield()"
-          @showandsave="Savedb">
-
-        </CGallery>
-      </div>
-      <div v-else-if="col.fieldtype === costanti.FieldType.image">
-
-        <CGallery
-          :title="getTitleGall()"
-          :directory="getDirectoryGall()"
-          :single="isFieldDb()"
-          :imgGall="myImgGall" :edit="isviewfield()"
-          @showandsave="Savedb">
-
-        </CGallery>
-      </div>
-      <div v-else-if="col.fieldtype === costanti.FieldType.nationality">
-        <div>
-          {{ myvalue }}
-        </div>
-      </div>
-      <div v-else-if="col.fieldtype === costanti.FieldType.intcode">
-        <div>
-          {{ myvalue }}
-        </div>
-      </div>
-      <div v-else>
+    <div v-else class="flex justify-center" :class="{ editor: (col.fieldtype === costanti.FieldType.html) && !isInModif }">
+      <div v-if="!isInModif">
        <!-- Edit Value -->
-        <span v-if="col.fieldtype === costanti.FieldType.date">
-                <CDateTime
-                  v-if="myvalue"
-                  :label="col.label"
-                  class="cursor-pointer"
-                  v-model:value="myvalue"
-                  :readonly="false"
-                  :minuteinterval="minuteinterval"
-                  :dense="true"
-                  :canEdit="canEdit"
-                  @savetoclose="SaveValueInt"
-                  @show="OpenEdit">
-                </CDateTime>
-            </span>
-        <span v-else-if="col.fieldtype === costanti.FieldType.onlydate">
+        <div v-if="col.fieldtype === costanti.FieldType.listimages">
+          <CGallery
+            :title="getTitleGall()"
+            :directory="getDirectoryGall()"
+            :imgGall="myvalue" :edit="isviewfield()"
+            @showandsave="Savedb">

-                <CDateTime
-                  :label="col.label"
-                  class="cursor-pointer"
-                  :valueDate="myvalue"
-                  v-model:value="myvalue"
-                  :readonly="false"
-                  :minuteinterval="minuteinterval"
-                  :dense="true"
-                  :canEdit="canEdit"
-                  @savetoclose="SaveValueInt"
-                  @show="OpenEdit"
-                  view="date">
-                </CDateTime>
-            </span>
-        <div v-else>
+          </CGallery>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.image">
+
+          <CGallery
+            :title="getTitleGall()"
+            :directory="getDirectoryGall()"
+            :single="isFieldDb()"
+            :imgGall="myImgGall" :edit="isviewfield()"
+            @showandsave="Savedb">
+
+          </CGallery>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.nationality">
          <div>
-            <div v-if="col.fieldtype === costanti.FieldType.binary">
-              <CMyChipList
-                :type="costanti.FieldType.binary"
-                :value="myvalue"
-                :options="globalStore.getTableJoinByName(col.jointable)"
-                :optval="fieldsTable.getKeyByTable(col.jointable)"
-                :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-            </div>
-            <!-- Show Value -->
-            <div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
-              <CMyChipList
-                :type="costanti.FieldType.multiselect"
-                :value="myvalue"
-                :options="globalStore.getTableJoinByName(col.jointable)"
-                :optval="fieldsTable.getKeyByTable(col.jointable)"
-                :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-            </div>
-            <div v-else-if="col.fieldtype === costanti.FieldType.select">
-              <CMyChipList
-                myclass="text-center"
-                :type="costanti.FieldType.select"
-                :value="myvalue"
-                :options="globalStore.getTableJoinByName(col.jointable)"
-                :optval="fieldsTable.getKeyByTable(col.jointable)"
-                :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-            </div>
-            <div v-else-if="col.fieldtype === costanti.FieldType.boolean">
-              <q-toggle
-                dark color="green" v-model="myvalue" :label="col.title"
-                :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
-                @update:model-value="Savedb"></q-toggle>
-            </div>
-            <div v-else-if="col.fieldtype === costanti.FieldType.html">
-              <div v-if="isFieldDb()">
-                <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>
-              </div>
-              <div v-else>
-                <q-dialog v-model="visueditor" no-backdrop-dismiss persistent full-height full-width>
-                  <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
-                    <q-card-section>
-                      <CMyEditor
-                        v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
-                        @showandsave="Savedb" @annulla="visueditor=false">
-
-                      </CMyEditor>
-                    </q-card-section>
-                  </q-card>
-                </q-dialog>
-              </div>
-            </div>
-            <div v-else>
-              <span v-html="visuValByType(myvalue, col, row)"></span>
-            </div>
-
-            <q-popup-edit
-              v-if="canEdit && col.fieldtype !== costanti.FieldType.html"
-              v-model="myvalue"
-              :disable="col.disable"
-              :title="col.title ? col.title : col.titlepopupedit"
-              buttons
-              persistent
-              @save="SaveValueInt"
-              @show="OpenEdit"
-              v-slot="scope">
-
-              <div v-if="col.fieldtype === costanti.FieldType.boolean">
-                <q-checkbox v-model="scope.value" :label="col.title">
-                </q-checkbox>
-                <span v-html="visuValByType(myvalue, col, row)"></span>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.string">
-                <q-input
-                  v-model="scope.value"
-                  autogrow
-                  @keyup.enter.stop
-                  autofocus>
-
-                </q-input>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.password">
-                <q-input
-                  v-model="scope.value"
-                  type="password"
-                  @keyup.enter="scope.set"
-                  autofocus>
-
-                </q-input>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.number">
-                <q-input
-                  v-model="scope.value" type="number"
-                  autofocus>
-
-                </q-input>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.hours">
-                <div v-if="isFieldDb()">
-                  <CMySelect
-                    label="Ore" v-model:value="myvalue"
-                    optval="_id" optlab="label"
-                    :useinput="false"
-                    :options="tools.SelectHours">
-                  </CMySelect>
-                </div>
-                <div v-else>
-                  <q-input
-                    v-model="scope.value" type="number"
-                    autofocus>
-
-                  </q-input>
-                </div>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.binary">
-
-                <CMyToggleList
-                  :label="col.titlepopupedit"
-                  :options="globalStore.getTableJoinByName(col.jointable)"
-                  v-model:value="scope.value"
-                  :optval="fieldsTable.getKeyByTable(col.jointable)"
-                  :optlab="fieldsTable.getLabelByTable(col.jointable)">
-                </CMyToggleList>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.select">
-                <CMySelect
-                  :label="col.label"
-                  v-model:value="scope.value"
-                  :optval="fieldsTable.getKeyByTable(col.jointable)"
-                  :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                  :options="globalStore.getTableJoinByName(col.jointable)"
-                  :useinput="false">
-                </CMySelect>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.nationality">
-                <div class="justify-center q-gutter-sm clgutter q-mt-sm">
-                  <q-input
-                    v-model="countryname"
-                    :readonly="true"
-                    rounded dense
-                    debounce="1000"
-                    @keyup.enter="scope.set"
-                    :label="title"
-                  >
-
-                    <template v-slot:prepend>
-                      <div style="font-size: 1rem;">
-                        <!--<vue-country-code
-                          :defaultCountry="scope.value"
-                          :disabledFetchingCountry="true"
-                          @onSelect="selectcountry"
-                          :preferredCountries="tools.getprefCountries"
-                          :dropdownOptions="{ disabledDialCode: true }">
-
-                        </vue-country-code>-->
-                      </div>
-                    </template>
-                  </q-input>
-                  <div style="height: 180px;">
-
-                  </div>
-                </div>
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.intcode">
-
-                <!--                <vue-tel-input
-                                  @country-changed="intcode_change"
-                                  :value="scope.value"
-                                  @update:model-value="oninput"
-                                  :placeholder="$t('reg.cell')"
-                                  :enabledCountryCode="true"
-                                  inputClasses="clCell"
-                                  wrapperClasses="clCellCode">
-                                </vue-tel-input>
-                                -->
-
-              </div>
-              <div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
-
-                <q-select
-                  v-model="scope.value"
-                  rounded
-                  outlined
-                  multiple
-                  dense
-                  options-dense
-                  :display-value="fieldsTable.getTitleByTable(col.jointable)"
-                  emit-value
-                  map-options
-                  :options="globalStore.getTableJoinByName(col.jointable)"
-                  style="min-width: 150px"
-                  :option-value="fieldsTable.getKeyByTable(col.jointable)"
-                  @update:model-value="changeval">
-
-                  <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
-                    <q-item v-bind="itemProps">
-
-                      <q-item-section>
-                        <q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
-                      </q-item-section>
-                      <q-item-section side>
-                        <q-toggle :model-value="selected" @update:model-value="toggleOption(opt)"/>
-                      </q-item-section>
-                    </q-item>
-                  </template>
-
-                </q-select>
-              </div>
-            </q-popup-edit>
+            {{ myvalue }}
          </div>
        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.intcode">
+          <div>
+            {{ myvalue }}
+          </div>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.date">
+          <CDateTime
+            v-if="myvalue"
+            :label="col.label"
+            class="cursor-pointer"
+            v-model:value="myvalue"
+            :readonly="false"
+            :minuteinterval="minuteinterval"
+            :dense="true"
+            :canEdit="canEdit"
+            @savetoclose="SaveValueInt"
+            @show="OpenEdit">
+          </CDateTime>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.onlydate">
+
+          <CDateTime
+            :label="col.label"
+            class="cursor-pointer"
+            :valueDate="myvalue"
+            v-model:value="myvalue"
+            :readonly="false"
+            :minuteinterval="minuteinterval"
+            :dense="true"
+            :canEdit="canEdit"
+            @savetoclose="SaveValueInt"
+            @show="OpenEdit"
+            view="date">
+          </CDateTime>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.binary">
+          <CMyChipList
+            :type="costanti.FieldType.binary"
+            :value="myvalue"
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            :optval="fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="fieldsTable.getLabelByTable(col.jointable)"
+            :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+        </div>
+        <!-- Show Value -->
+        <div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
+          <CMyChipList
+            :type="costanti.FieldType.multiselect"
+            @update:value="changevalRec"
+            :value="myvalue"
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            :optval="fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="fieldsTable.getLabelByTable(col.jointable)"
+            :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.select">
+          <CMyChipList
+            myclass="text-center"
+            :type="costanti.FieldType.select"
+            @update:model-value="changevalRec"
+            v-model:value="myvalue"
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            :optval="fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="fieldsTable.getLabelByTable(col.jointable)"
+            :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.star5">
+          <q-rating
+            :model-value="`${myvalue}` - 1"
+            @update:model-value="changevalRec"
+            size="1.5rem"
+            style="display: block !important;"
+            :color="tools.getColByLevel(myvalue)"
+            icon="star_border"
+            icon-selected="star"
+            :max="5"
+            :readonly="true"
+          />
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.boolean">
+          <q-toggle
+            dark color="green" v-model="myvalue" :label="col.title"
+            :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
+            @update:model-value="Savedb"></q-toggle>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.html">
+          <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>
+          <div v-if="!isFieldDb()">
+            <q-dialog v-model="visueditor" no-backdrop-dismiss persistent full-height full-width>
+              <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                <q-card-section>
+                  <CMyEditor
+                    v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
+                    @showandsave="Savedb" @annulla="visueditor=false">
+
+                  </CMyEditor>
+                </q-card-section>
+              </q-card>
+            </q-dialog>
+          </div>
+        </div>
+        <div v-else>
+          <span v-html="visuValByType(myvalue, col, row)"></span>
+        </div>
+        <q-popup-edit
+          v-if="(canEdit && col.fieldtype !== costanti.FieldType.html)"
+          v-model="myvalue"
+          :disable="col.disable"
+          :title="col.title ? col.title : col.titlepopupedit"
+          buttons
+          persistent
+          @save="SaveValueInt"
+          @show="OpenEdit"
+          v-slot="scope">
+
+          <div v-if="col.fieldtype === costanti.FieldType.boolean">
+            <q-checkbox v-model="scope.value" :label="col.title">
+            </q-checkbox>
+            <span v-html="visuValByType(myvalue, col, row)"></span>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.string">
+            <q-input
+              v-model="scope.value"
+              autogrow
+              @keyup.enter.stop
+              autofocus>
+
+            </q-input>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.password">
+            <q-input
+              v-model="scope.value"
+              type="password"
+              @keyup.enter="scope.set"
+              autofocus>
+
+            </q-input>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.number">
+            <q-input
+              v-model="scope.value" type="number"
+              autofocus>
+
+            </q-input>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.hours">
+            <div v-if="isFieldDb()">
+              <CMySelect
+                label="Ore" v-model:value="myvalue"
+                optval="_id" optlab="label"
+                :useinput="false"
+                :options="tools.SelectHours">
+              </CMySelect>
+            </div>
+            <div v-else>
+              <q-input
+                v-model="scope.value" type="number"
+                autofocus>
+
+              </q-input>
+            </div>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.binary">
+
+            <CMyToggleList
+              :label="col.titlepopupedit"
+              :options="globalStore.getTableJoinByName(col.jointable)"
+              v-model:value="scope.value"
+              :optval="fieldsTable.getKeyByTable(col.jointable)"
+              :optlab="fieldsTable.getLabelByTable(col.jointable)">
+            </CMyToggleList>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.select">
+            <CMySelect
+              :label="col.label"
+              v-model:value="scope.value"
+              :optval="fieldsTable.getKeyByTable(col.jointable)"
+              :optlab="fieldsTable.getLabelByTable(col.jointable)"
+              :options="globalStore.getTableJoinByName(col.jointable)"
+              :useinput="false">
+            </CMySelect>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.star5">
+            <CMySelect
+              :label="col.label"
+              v-model:value="scope.value"
+              :optval="fieldsTable.getKeyByTable(col.jointable)"
+              :optlab="fieldsTable.getLabelByTable(col.jointable)"
+              :options="globalStore.getTableJoinByName(col.jointable)"
+              :useinput="false">
+            </CMySelect>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.nationality">
+            <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+              <q-input
+                v-model="countryname"
+                :readonly="true"
+                rounded dense
+                debounce="1000"
+                @keyup.enter="scope.set"
+                :label="title"
+              >
+
+                <template v-slot:prepend>
+                  <div style="font-size: 1rem;">
+                    <!--<vue-country-code
+                      :defaultCountry="scope.value"
+                      :disabledFetchingCountry="true"
+                      @onSelect="selectcountry"
+                      :preferredCountries="tools.getprefCountries"
+                      :dropdownOptions="{ disabledDialCode: true }">
+
+                    </vue-country-code>-->
+                  </div>
+                </template>
+              </q-input>
+              <div style="height: 180px;">
+
+              </div>
+            </div>
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.intcode">
+
+            <!--                <vue-tel-input
+                              @country-changed="intcode_change"
+                              :value="scope.value"
+                              @update:model-value="oninput"
+                              :placeholder="$t('reg.cell')"
+                              :enabledCountryCode="true"
+                              inputClasses="clCell"
+                              wrapperClasses="clCellCode">
+                            </vue-tel-input>
+                            -->
+
+          </div>
+          <div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
+
+            <q-select
+              v-model="scope.value"
+              rounded
+              outlined
+              multiple
+              dense
+              options-dense
+              :display-value="fieldsTable.getTitleByTable(col.jointable)"
+              emit-value
+              map-options
+              :options="globalStore.getTableJoinByName(col.jointable)"
+              style="min-width: 150px"
+              :option-value="fieldsTable.getKeyByTable(col.jointable)"
+              @update:model-value="changeval">
+
+              <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+                <q-item v-bind="itemProps">
+
+                  <q-item-section>
+                    <q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-toggle :model-value="selected" @update:model-value="toggleOption(opt)"/>
+                  </q-item-section>
+                </q-item>
+              </template>
+
+            </q-select>
+          </div>
+        </q-popup-edit>
+      </div>
+      <div v-else>
+        <!-- IN MODIFICA !-->
+        <div v-if="col.fieldtype === costanti.FieldType.boolean">
+          <q-checkbox
+            v-model="myvalue"
+            @update:model-value="changevalRec"
+            :label="col.title">
+          </q-checkbox>
+          <span v-html="visuValByType(myvalue, col, row)"></span>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.string">
+          <q-input
+            v-model="myvalue"
+            @update:model-value="changevalRec"
+            autogrow
+            @keyup.enter.stop
+            autofocus>
+
+          </q-input>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.password">
+          <q-input
+            v-model="myvalue"
+            @update:model-value="changevalRec"
+            type="password"
+            @keyup.enter="scope.set"
+            autofocus>
+
+          </q-input>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.number">
+          <q-input
+            v-model="myvalue" @update:model-value="changevalRec"
+            type="number"
+            autofocus>
+
+          </q-input>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.hours">
+          <div v-if="isFieldDb()">
+            <CMySelect
+              label="Ore"
+              v-model:value="myvalue"
+              @update:value="changevalRec"
+              optval="_id" optlab="label"
+              :useinput="false"
+              :options="tools.SelectHours">
+            </CMySelect>
+          </div>
+          <div v-else>
+            <q-input
+              v-model="myvalue" type="number"
+              @update:value="changevalRec"
+              autofocus>
+
+            </q-input>
+          </div>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.binary">
+
+          <CMyToggleList
+            :label="col.titlepopupedit"
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            v-model:value="myvalue"
+            @update:value="changevalRec"
+            :optval="fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="fieldsTable.getLabelByTable(col.jointable)">
+          </CMyToggleList>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.select">
+          <CMySelect
+            :label="col.label"
+            v-model:value="myvalue"
+            @update:value="changevalRec"
+            :optval="fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="fieldsTable.getLabelByTable(col.jointable)"
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            :useinput="false">
+          </CMySelect>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.star5">
+          <CMySelect
+            :label="col.label"
+            v-model:value="myvalue"
+            @update:value="changevalRec"
+            :optval="fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="fieldsTable.getLabelByTable(col.jointable)"
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            :useinput="false">
+          </CMySelect>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.nationality">
+          <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+            <q-input
+              v-model:value="countryname"
+              @update:value="changevalRec"
+              :readonly="true"
+              rounded dense
+              debounce="1000"
+              @keyup.enter="scope.set"
+              :label="title"
+            >
+
+              <template v-slot:prepend>
+                <div style="font-size: 1rem;">
+                  <!--<vue-country-code
+                    :defaultCountry="myvalue"
+                    :disabledFetchingCountry="true"
+                    @onSelect="selectcountry"
+                    :preferredCountries="tools.getprefCountries"
+                    :dropdownOptions="{ disabledDialCode: true }">
+
+                  </vue-country-code>-->
+                </div>
+              </template>
+            </q-input>
+            <div style="height: 180px;">
+
+            </div>
+          </div>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.intcode">
+
+          <!--                <vue-tel-input
+                            @country-changed="intcode_change"
+                            :value="myvalue"
+                            @update:model-value="oninput"
+                            :placeholder="$t('reg.cell')"
+                            :enabledCountryCode="true"
+                            inputClasses="clCell"
+                            wrapperClasses="clCellCode">
+                          </vue-tel-input>
+                          -->
+
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
+
+          <q-select
+            v-model="myvalue"
+            rounded
+            outlined
+            multiple
+            dense
+            options-dense
+            :display-value="fieldsTable.getTitleByTable(col.jointable)"
+            emit-value
+            map-options
+            :options="globalStore.getTableJoinByName(col.jointable)"
+            style="min-width: 150px"
+            :option-value="fieldsTable.getKeyByTable(col.jointable)"
+            @update:model-value="changevalRec">
+
+            <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+              <q-item v-bind="itemProps">
+
+                <q-item-section>
+                  <q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-toggle :model-value="selected" @update:value="toggleOption(opt)"/>
+                </q-item-section>
+              </q-item>
+            </template>
+
+          </q-select>
+        </div>
+        <div v-else-if="col.fieldtype === costanti.FieldType.html">
+          <div v-if="!isFieldDb()">
+              <CMyEditor
+                v-model:value="myvalue" :title="col.title" @keyup.enter.stop
+                @update:value="changevalRec"
+                @showandsave="Savedb">
+              </CMyEditor>
+          </div>
+        </div>
+
      </div>
    </div>
  </div>
--- a/src/components/CMySelect/CMySelect.ts
+++ b/src/components/CMySelect/CMySelect.ts
@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar'

 export default defineComponent({
  name: 'CMySelect',
+  emits: ['update:value', 'changeval'],
  props: {
    options: {
      type: Array,
@@ -67,16 +68,15 @@ export default defineComponent({
    }

    function mounted() {
-      console.log('mounted', mounted)
+      // console.log('mounted myselect', props.options)
      if (props.options) {
        const rec: any = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
-        /*
-        console.log('rec', rec, 'props.useinput', props.useinput)
+
+        /*console.log('rec', rec, 'props.useinput', props.useinput)
        console.log('props.value', props.value)
        console.log('options', props.options)
        console.log('optval', props.optval)
-        console.log('optlab', props.optlab)
-         */
+        console.log('optlab', props.optlab)*/

        if (rec) {
          if (props.funcgetvaluebyid)
@@ -84,7 +84,7 @@ export default defineComponent({
          else
            myvalue.value = rec[`${props.optlab}`]

-          // console.log('myvalue', myvalue, 'optval', optval, 'rec', rec[`${optval}`])
+          // console.log('myvalue', myvalue, 'optval', props.optval, 'rec', rec[`${props.optval}`])
        } else {
          if (!props.useinput) {
            if (props.value) {
@@ -93,6 +93,7 @@ export default defineComponent({
          }
        }
      }
+      // console.log('cmyselect: myvalue.value', myvalue.value)
    }

    onMounted(mounted)
--- a/src/components/CMySelect/CMySelect.vue
+++ b/src/components/CMySelect/CMySelect.vue
@@ -16,8 +16,7 @@
        :option-label="optlab"
        @update:model-value="changeval"
        :label="label"
-        :dense="dense"
-      >
+        :dense="dense">
      </q-select>
    </div>
    <div v-else>
@@ -35,9 +34,7 @@
        :label="label"
        emit-value
        map-options
-        style="min-width: 170px; max-width: 400px;"
-      >
-
+        style="min-width: 170px; max-width: 400px;">
      </q-select>
    </div>
  </div>
--- a/src/components/CSkill/CSkill.ts
+++ b/src/components/CSkill/CSkill.ts
@@ -9,6 +9,7 @@ import { useGlobalStore } from '@store/globalStore'
 import { useUserStore } from '@store/UserStore'
 import { colmySkills } from '@store/Modules/fieldsTable'
 import { CGridTableRec } from '@/components/CGridTableRec'
+import { IMySkill, ISkill } from 'model'

 export default defineComponent({
  name: 'CSkill',
@@ -47,10 +48,25 @@ export default defineComponent({
      const data = await globalStore.saveSubRec(mydata)
    }

+    function getdefaultnewrec(): any {
+      return {
+        _id: 0,
+        idSkill: 0,
+        idStatusSkill: [],
+        idCity: [],
+        NumLevel: 0,
+        photos: [],
+        note: '',
+        subTitle: '',
+      }
+    }
+
+
    return {
      tools,
      costanti,
      colmySkills,
+      getdefaultnewrec,
    }
  },
 })
--- a/src/components/CSkill/CSkill.vue
+++ b/src/components/CSkill/CSkill.vue
@@ -1,42 +1,21 @@
 <template>
  <div>
-    Competenze:<br>
    <div class="q-ma-sm q-gutter-sm q-pa-xs">
      <CGridTableRec
        prop_mytable="myskills"
-        prop_mytitle="Mie Competenze"
+        prop_mytitle=""
        :prop_mycolumns="colmySkills"
        prop_colkey="idSkill"
+        :vertical="true"
        nodataLabel="Nessuna Competenza inserita"
-        noresultLabel="Il filtro selezionato non ha trovato nessun risultato">
+        :prop_search="false"
+        noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
+        :defaultnewrec="getdefaultnewrec">

      </CGridTableRec>
    </div>
-
-    <div class="row">
-      <!--
-      <q-btn
-        flat dense color="primary"
-        :label="$t('grid.addrecord')"
-        @click="createNewRecordInUserTable">
-
-      </q-btn>
-
-      <CMyFieldDb
-        title="Competenza"
-        table="users"
-        mykey="profile"
-        mysubkey="myskills"
-        indrec=0
-        mysubsubkey="idSkill"
-        :type="costanti.FieldType.binary">
-      </CMyFieldDb>
-      -->
-    </div>
  </div>

-  Servizi:<br>
-
 </template>

 <script lang="ts" src="./CSkill.ts">
--- a/src/root/home/home.vue
+++ b/src/root/home/home.vue
@@ -2,10 +2,6 @@
  <q-page class="">
    <h1>Inizio:</h1>

-    <CSkill>
-
-    </CSkill>
-
    <!--<CChartMap
      title="Mappa"
      subtitle="cartina..."
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -174,7 +174,7 @@ const msg_it = {
      deletetherecord: 'Eliminare il Record?',
      deletedrecord: 'Record Cancellato',
      recdelfailed: 'Errore durante la cancellazione del Record',
-      duplicatedrecord: 'Record Duplicato',
+      duplicatedrecord: 'Vuoi Duplicare il record',
      recdupfailed: 'Errore durante la duplicazione del Record',
    },
    components: {
--- a/src/store/Api/index.ts
+++ b/src/store/Api/index.ts
@@ -103,7 +103,7 @@ export const Api = {
    // eslint-disable-next-line @typescript-eslint/no-misused-promises
    return new Promise((resolve, reject) => sendRequest(url, method, mydataout)
      .then((res) => {
-        console.log('status:', res.status)
+        // console.log('status:', res.status)

        setTimeout(() => {
          if (method === 'get') {
--- a/src/store/Modules/costanti.ts
+++ b/src/store/Modules/costanti.ts
@@ -32,6 +32,7 @@ export const costanti = {
    binary: 8,
    html: 16,
    select: 32,
+    star5: 40,
    number: 64,
    typeinrec: 128,
    multiselect: 256,
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -16,6 +16,19 @@ const DeleteRec = {
  visuonlyEditVal: true,
 }

+const ModifRec = {
+  name: 'modifrec',
+  label_trans: 'reg.edit',
+  align: 'right',
+  field: costanti.NOFIELD,
+  sortable: false,
+  icon: 'fas fa-pencil-alt',
+  action: lists.MenuAction.CAN_EDIT_TABLE,
+  askaction: '',
+  required: true,
+  visuonlyEditVal: true,
+}
+
 const DuplicateRec = {
  name: 'copyrec',
  label_trans: 'event.duplicate',
@@ -321,8 +334,8 @@ export const colSkills = [
  }),
  AddCol({ name: 'color', label_trans: 'products.color' }),
  AddCol({ name: 'theme', label_trans: 'products.theme' }),
-  AddCol(DeleteRec),
  AddCol(DuplicateRec),
+  AddCol(DeleteRec),
 ]

 export const colmySkills = [
@@ -338,7 +351,7 @@ export const colmySkills = [
  AddCol({
    name: 'numLevel',
    label_trans: 'level.name',
-    fieldtype: costanti.FieldType.select,
+    fieldtype: costanti.FieldType.star5,
    jointable: 'levels',
  }),
  AddCol({
@@ -361,8 +374,9 @@ export const colmySkills = [
  }),
  AddCol({ name: 'subTitle', label_trans: 'event.title' }),
  AddCol({ name: 'note', label_trans: 'proj.longdescr', fieldtype: costanti.FieldType.html }),
-  AddCol(DeleteRec),
  AddCol(DuplicateRec),
+  AddCol(ModifRec),
+  AddCol(DeleteRec),
 ]

 export const colStatusSkills = [
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -4340,6 +4340,23 @@ export const tools = {
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0])
    return arr // for testing
  },
+  getColByLevel(level: number) {
+    let col = ''
+    if (level === 0){
+      col = 'grey-5'
+    } else if (level === 1){
+      col = 'red-5'
+    } else if (level === 2){
+      col = 'orange-5'
+    } else if (level === 3){
+      col = 'yellow-5'
+    } else if (level === 4){
+      col = 'blue-5'
+    } else if (level === 5){
+      col = 'green-5'
+    }
+    return col
+  }
 // getLocale() {
  //   if (navigator.languages && navigator.languages.length > 0) {
  //     return navigator.languages[0]
--- a/src/views/login/signup/signup.ts
+++ b/src/views/login/signup/signup.ts
@@ -6,7 +6,7 @@ import { useUserStore } from '@store/UserStore'
 import { useRoute } from 'vue-router'

 export default defineComponent({
-  name: 'Signup',
+  name: 'SignUp',
  components: { CSignUp },
  props: {},
  setup() {
@@ -21,15 +21,6 @@ export default defineComponent({
      adult.value = !!$route.params.invited
    })

-    function created() {
-      // if (!tools.getCookie(tools.APORTADOR_SOLIDARIO, ''))
-      //   tools.setCookie(tools.APORTADOR_SOLIDARIO, $route.params.invited)
-    }
-
-    created()
-
-    return {
-
-    }
+    return {}
  },
 })
--- a/src/views/pages/estimate/estimate.ts
+++ b/src/views/pages/estimate/estimate.ts
@@ -7,7 +7,7 @@ import { IEstimate } from '@src/model'
 import { tools } from '@src/store/Modules/tools'

 export default defineComponent({
-  name: 'Estimate',
+  name: 'EstimateMy',
  props: {
    mystr: {
      type: String,
--- a/src/views/updatepassword/updatepassword.ts
+++ b/src/views/updatepassword/updatepassword.ts
@@ -18,7 +18,7 @@ import { complexity } from '../../validation'


 export default defineComponent({
-  name: 'Updatepassword',
+  name: 'UpdatePassword',
  components: { Logo, CTitleBanner },
  setup(props, { emit }) {
    const $q = useQuasar()
--- a/src/views/user/profile/profile.ts
+++ b/src/views/user/profile/profile.ts
@@ -1,6 +1,7 @@
 import { CMyFieldDb } from '@/components/CMyFieldDb'
 import { CTitleBanner } from '@/components/CTitleBanner'
 import { CProfile } from '@/components/CProfile'
+import { CSkill } from '@/components/CSkill'
 import { tools } from '@store/Modules/tools'
 import { defineComponent } from 'vue'
 import { useUserStore } from '@store/UserStore'
@@ -13,8 +14,8 @@ import { costanti } from '@costanti'


 export default defineComponent({
-  name: 'Profile',
-  components: { CProfile, CTitleBanner, CMyFieldDb },
+  name: 'ProfileMy',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill },
  props: {},
  setup() {
    const userStore = useUserStore()
--- a/src/views/user/profile/profile.vue
+++ b/src/views/user/profile/profile.vue
@@ -84,6 +84,16 @@

    </CTitleBanner>

+    <CTitleBanner
+      class="q-pa-xs" title="Competenze e Talenti" bgcolor="bg-primary" clcolor="text-white"
+      myclass="myshad" :canopen="true">
+
+      <CSkill>
+
+      </CSkill>
+
+
+    </CTitleBanner>
    <CTitleBanner
      class="q-pa-xs" title="Informazioni su di te" bgcolor="bg-primary" clcolor="text-white"
      myclass="myshad" :canopen="true">
--- a/yarn.lock
+++ b/yarn.lock