- select specializz.

src/components/CGridTableRec/CGridTableRec.scss

@@ -35,3 +35,9 @@
   align-items: center;
   justify-content: center;
 }
+
+.riduci_pad {
+  min-height: 30px;
+  padding: 4px 8px !important;
+}
+

src/components/CGridTableRec/CGridTableRec.ts

@@ -204,6 +204,18 @@ export default defineComponent({
 
     const mycodeid = toRef(props, 'prop_codeId')
 
+    const valoriopt = computed(() => (item: any, addall: boolean) => {
+      // console.log('valoriopt', item.table)
+      return globalStore.getTableJoinByName(item.table, addall, item.filter)
+    })
+
+    const labelcombo = computed(() => (item: any) => {
+      let lab = item.label
+      if (item.showcount)
+        lab += ' (' + valoriopt.value(item, false).length + ')'
+      return lab
+    })
+
     watch(searchList.value, (to: any, from: any) =>  {
       console.log('watch searchlist', to)
       refresh()
@@ -212,6 +224,37 @@ export default defineComponent({
     function searchval(newval: any, table: any) {
       console.log('searchval', newval, table)
       tools.setCookie(tools.COOK_SEARCH + table, newval)
+
+      if (table === 'skills') {
+        const recSector = searchList.value.find((rec) => rec.table === 'sectors')
+        if (recSector)
+          tools.setCookie(tools.COOK_SEARCH + table + '_' + recSector.value, newval)
+      }
+
+      if (table === 'sectors') {
+        for (const item of searchList.value) {
+          if ((item.table === 'subskills')) {
+            // item.arrvalue = [costanti.FILTER_TUTTI]
+          }
+          if (item.table === 'skills') {
+            // console.log('---PRIMA ', item.value)
+            const valsaved = tools.getCookie(tools.COOK_SEARCH + 'skills' + '_' + newval, costanti.FILTER_TUTTI)
+            if (valsaved)
+              item.value = valsaved
+            else
+              item.value = costanti.FILTER_TUTTI
+            // console.log('---DOPO ', item.value)
+          }
+        }
+      }
+      /*if (table === 'skills') {
+        for (const item of searchList.value) {
+          if (item.table === 'subskills') {
+            item.arrvalue = [costanti.FILTER_TUTTI]
+          }
+        }
+      } */
+
       refresh()
     }
 
@@ -267,16 +310,24 @@ export default defineComponent({
       let filtersearch2: any[] = []
 
       let recSector = null;
+      let recSkill = null;
       let idSector = 0;
+      let idSkill = 0;
       if (searchList.value) {
         recSector = searchList.value.find((item: ISearchList) => item.table === 'sectors')
         idSector = recSector ? recSector.value : 0
       }
 
+      if (searchList.value) {
+        recSkill = searchList.value.find((item: ISearchList) => item.table === 'skills')
+        idSkill = recSkill ? recSkill.value : 0
+      }
+
       // console.table(searchList.value)
 
       if (searchList.value) {
-        searchList.value.forEach((item: ISearchList) => {
+        for (const item of searchList.value) {
+        //searchList.value.forEach((item: ISearchList) => {
           if (!item.notinsearch) {
             let objitem: any = {}
             if (item.value > 0) {
@@ -304,15 +355,22 @@ export default defineComponent({
               if (arr2.length > 0)
                 filtersearch.push(obj2)
             } else {
-              if (item.table === 'skills' && item.value === costanti.FILTER_TUTTI) {
+              if ((item.table === 'skills') && item.value === costanti.FILTER_TUTTI) {
                 let obj2: any = {}
                 // idSector
                 obj2['sector._id'] = idSector
                 filtersearch2.push(obj2)
               }
+              if ((item.table === 'subskills') && item.value === costanti.FILTER_TUTTI) {
+                let obj2: any = {}
+                // idSector
+                obj2['myskill._id'] = idSkill
+                filtersearch2.push(obj2)
+              }
             }
+
           }
-        })
+        }
       }
 
       console.log('filtersearch', filtersearch)
@@ -1146,6 +1204,8 @@ export default defineComponent({
       searchval,
       canModifyThisRec,
       checkIfShowRec,
+      valoriopt,
+      labelcombo,
     }
   }
 })

src/components/CGridTableRec/CGridTableRec.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-xs" v-if="isfinishLoading">
+  <div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
     <div class="centermydiv q-ma-sm" style="text-align: center">
       <q-btn
         v-if="mytable && visButtRow()" rounded dense color="primary"
@@ -8,39 +8,7 @@
         @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.screen.lt.sm ? `` : `q-gutter-md q-ma-xs`  + ` row`">
       <div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
       <q-space></q-space>
       <div v-if="butt_modif_new">
@@ -128,60 +96,61 @@
         </div>
       </template>
 
+      <template v-slot:top-left>
 
-      <template v-slot:top-left v-if="searchList">
-        <div class="row text-blue">
-          <div v-for="(item, index) in searchList" :key="index">
+        <div v-if="searchList"
+          :class="$q.screen.lt.sm ? `` : `row`  + ` text-blue`">
+          <span v-for="(item, index) in searchList" :key="index">
             <CMySelect
               v-if="item.type === costanti.FieldType.select"
-              :label="item.label"
+              :label="labelcombo(item)"
               v-model:value="item.value"
               @update:value="searchval(item.value, item.table)"
               :addall="true"
               label-color="primary"
+              class="combowidth"
               color="primary"
               :optval="fieldsTable.getKeyByTable(item.table)"
               :optlab="fieldsTable.getLabelByTable(item.table)"
-              :options="globalStore.getTableJoinByName(item.table, true, item.filter)"
-              :useinput="false"
-            >
+              :options="valoriopt(item, false)"
+              :useinput="false">
             </CMySelect>
 
             <q-select
               v-if="item.type === costanti.FieldType.multiselect"
               v-model="item.arrvalue"
+              label-color="primary"
+              :label="labelcombo(item)"
               @update:model-value="searchval(item.arrvalue, item.table)"
               rounded
+              dense
               outlined
               multiple
-              dense
               options-dense
-              :display-value="fieldsTable.getTitleByTable(item.table)"
               emit-value
               map-options
               stack-label
-              :options="globalStore.getTableJoinByName(item.table, item.filter)"
-              style="min-width: 150px"
+              :options="valoriopt(item, item.addall)"
+              class="combowidth"
               :option-value="fieldsTable.getKeyByTable(item.table)"
             >
 
               <template
                 v-if="item.arrvalue.length >= 1"
                 v-slot:selected-item="scope">
-                <q-chip
-                  removable
-                  dense
-                  @remove="scope.removeAtIndex(scope.index)"
-                  v-if="checkIfShowRec(scope.opt)"
-                  color="white"
-                  text-color="mycol"
-                  class="q-my-none q-ml-xs q-mr-none"
-                >
-                  <q-avatar color="primary" text-color="white" :icon="item.icon" size="12px"/>
-                  {{ scope.opt[fieldsTable.getLabelByTable(item.table)] }}
-                </q-chip>
-                <div v-if="scope.opt === -100 && item.arrvalue.length === 1">
-                  {{ fieldsTable.getTitleByTable(item.table) }}
+                <div v-if="scope.opt[fieldsTable.getLabelByTable(item.table)]">
+                  <q-chip
+                    removable
+                    dense
+                    @remove="scope.removeAtIndex(scope.index)"
+                    v-if="checkIfShowRec(scope.opt)"
+                    color="white"
+                    text-color="mycol"
+                    class="q-my-none q-ml-xs q-mr-none"
+                  >
+                    <q-avatar color="primary" text-color="white" :icon="item.icon" size="12px"/>
+                    {{ scope.opt[fieldsTable.getLabelByTable(item.table)] }}
+                  </q-chip>
                 </div>
               </template>
               <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
@@ -197,8 +166,43 @@
               </template>
 
             </q-select>
-          </div>
+          </span>
         </div>
+
+        <div
+          class="row justify-center vertical-middle">
+
+          <div v-if="prop_search" class="q-mr-sm">
+            <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>
+          </div>
+
+          <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 v-if="pagination.rowsNumber > 0">{{ pagination.rowsNumber }} elementi trovati</div>
       </template>
 
       <template v-slot:body="props">
@@ -245,6 +249,7 @@
         <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"
@@ -271,7 +276,7 @@
             <q-card-section class="inset-shadow">
               <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 v-if="colVisib.includes(col.field + col.subfield)" :class="clByCol(col)" class="riduci_pad">
                     <q-item-section avatar v-if="visuIntestazCol(col)">
                       <q-item-label class="q-table__col">{{ col.label }}</q-item-label>
                     </q-item-section>