- CMyPopupEdit

- Star
- Insert and Edit
- Update quasar 3.2.4

.eslintrc.js

@@ -93,14 +93,8 @@ module.exports = {
     // 'multiline-ternary': 'off',
     'vue/max-attributes-per-line': [
       'error', {
-        'singleline': {
+        'singleline': 15,
-          'max': 6,
+        'multiline': 15
-          'allowFirstLine': true,
-        },
-        'multiline': {
-          'max': 6,
-          'allowFirstLine': false,
-        },
     }],
     'import/first': 'off',
     'import/named': 'off',
@@ -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',
       {

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/compat": "^3.2.22",
-    "@vue/compiler-sfc": "^3.2.19",
+    "@vue/compiler-sfc": "^3.2.22",
-    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-standard": "^5.1.2",
-    "@vuelidate/core": "^2.0.0-alpha.27",
+    "@vuelidate/core": "^2.0.0-alpha.32",
-    "@vuelidate/validators": "^2.0.0-alpha.23",
+    "@vuelidate/validators": "^2.0.0-alpha.25",
-    "acorn": "^8.5.0",
+    "acorn": "^8.6.0",
-    "autoprefixer": "^10.3.7",
+    "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": "^16.0.1",
-    "graphql-tag": "^2.12.5",
+    "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",
+    "@babel/eslint-parser": "^7.16.3",
-    "@quasar/app": "^3.1.2",
+    "@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/jest": "^27.0.3",
-    "@types/js-cookie": "^3.0.0",
+    "@types/js-cookie": "^3.0.1",
-    "@types/node": "14.14.45",
+    "@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/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.4.0",
-    "eslint": "^7.32.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-promise": "^5.1.1",
-    "eslint-plugin-vue": "^7.19.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": "^8.3.11",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.0",
-    "sass-loader": "^12.1.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"
   }

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'

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

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

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"

src/components/CGridTableRec/CGridTableRec.scss

@@ -20,3 +20,10 @@
     font-size: 1rem;
   }
 }
+
+.q-table {
+  &__col {
+    font-size: 1rem;
+    color: gray;
+  }
+}

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) {
+    function selItem(item: any, col: IColGridTable, inmodif?: boolean) {
-      console.log('selItem', item)
+      console.log('selItem', item, col)
       rowsel = item
       idsel = item._id
       colsel.value = col
+      if (inmodif) {
+
+      }
     }
 
     function undoVal() {
@@ -373,12 +402,17 @@ export default defineComponent({
     }
 
     function annulla(val: any) {
-      // console.log('annulla')
+      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) {
       // console.log('SaveValue', newVal)
@@ -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 () {
+        data: {}
-          return {}
-        }
       }
 
-      mydata.data = props.defaultnewrec
+      if (props.defaultnewrec)
+        mydata.data = props.defaultnewrec()
 
-      // const mykey = fieldsTable.getKeyByTable(mytable)
+      // console.log('DATA=', mydata.data)
-
-      // mydata.data[mykey] = ''
-
-      // console.log('mydata', mydata)
 
       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 = {
+      await createNewRecordDialog()
-        table: mytable.value,
-        data: {}
-      }
 
-      if (props.defaultnewrec) {
+      serverData.value.push(newRecord.value)
-        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)
       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,6 +598,14 @@ export default defineComponent({
           param2: item,
         }
 
+        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,
@@ -609,6 +625,7 @@ export default defineComponent({
             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,30 +806,56 @@ 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)
     }
-    }
 
     function getlabelAddRow() {
       return props.labelBtnAddRow
@@ -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,
     }
   }
 })

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 v-if="tablesList || arrfilters">
-      <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>
-
         <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">

src/components/CMyChipList/CMyChipList.ts

@@ -53,6 +53,7 @@ export default defineComponent({
     })
 
     function refreshval() {
+      console.log('refreshval')
       myarrvalues.value = []
 
       // console.log('options', props.options)

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

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

src/components/CMyPopupEdit/CMyPopupEdit.scss

@@ -0,0 +1,6 @@
+.editor{
+  border: solid 2px #1c64aa;
+  border-radius: 5px;
+  padding: 2px;
+  height: 60px;
+}

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

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,13 +182,15 @@
             :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-else class="flex justify-center" :class="{ editor: (col.fieldtype === costanti.FieldType.html) && !isInModif }">
+      <div v-if="!isInModif">
+        <!-- Edit Value -->
         <div v-if="col.fieldtype === costanti.FieldType.listimages">
           <CGallery
             :title="getTitleGall()"
@@ -207,9 +221,7 @@
             {{ myvalue }}
           </div>
         </div>
-      <div v-else>
+        <div v-else-if="col.fieldtype === costanti.FieldType.date">
-        <!-- Edit Value -->
-        <span v-if="col.fieldtype === costanti.FieldType.date">
           <CDateTime
             v-if="myvalue"
             :label="col.label"
@@ -222,8 +234,8 @@
             @savetoclose="SaveValueInt"
             @show="OpenEdit">
           </CDateTime>
-            </span>
+        </div>
-        <span v-else-if="col.fieldtype === costanti.FieldType.onlydate">
+        <div v-else-if="col.fieldtype === costanti.FieldType.onlydate">
 
           <CDateTime
             :label="col.label"
@@ -238,10 +250,8 @@
             @show="OpenEdit"
             view="date">
           </CDateTime>
-            </span>
+        </div>
-        <div v-else>
+        <div v-else-if="col.fieldtype === costanti.FieldType.binary">
-          <div>
-            <div v-if="col.fieldtype === costanti.FieldType.binary">
           <CMyChipList
             :type="costanti.FieldType.binary"
             :value="myvalue"
@@ -254,6 +264,7 @@
         <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)"
@@ -264,12 +275,26 @@
           <CMyChipList
             myclass="text-center"
             :type="costanti.FieldType.select"
-                :value="myvalue"
+            @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"
@@ -277,10 +302,8 @@
             @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-if="!isFieldDb()">
-              <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>
@@ -297,9 +320,8 @@
         <div v-else>
           <span v-html="visuValByType(myvalue, col, row)"></span>
         </div>
-
         <q-popup-edit
-              v-if="canEdit && col.fieldtype !== costanti.FieldType.html"
+          v-if="(canEdit && col.fieldtype !== costanti.FieldType.html)"
           v-model="myvalue"
           :disable="col.disable"
           :title="col.title ? col.title : col.titlepopupedit"
@@ -376,6 +398,16 @@
               :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
@@ -452,7 +484,182 @@
           </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>

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)

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>

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,
     }
   },
 })

src/components/CSkill/CSkill.vue

@@ -1,41 +1,20 @@
 <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>
 

src/root/home/home.vue

@@ -2,10 +2,6 @@
   <q-page class="">
     <h1>Inizio:</h1>
 
-    <CSkill>
-
-    </CSkill>
-
     <!--<CChartMap
       title="Mappa"
       subtitle="cartina..."

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

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') {

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,

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

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]

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() {
+    return {}
-      // if (!tools.getCookie(tools.APORTADOR_SOLIDARIO, ''))
-      //   tools.setCookie(tools.APORTADOR_SOLIDARIO, $route.params.invited)
-    }
-
-    created()
-
-    return {
-
-    }
   },
 })

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,

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

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',
+  name: 'ProfileMy',
-  components: { CProfile, CTitleBanner, CMyFieldDb },
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill },
   props: {},
   setup() {
     const userStore = useUserStore()

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