Added Bar Selector City at the Top !

src/components/CBarSelection/CBarSelection.ts

@@ -136,7 +136,13 @@ export default defineComponent({
       tablesel.value = props.table
     })
 
+    watch(() => globalStore.myselector.data, (newval, oldval) => {
+      const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
+      if (rec) {
+        rec.value = globalStore.myselector.data
+      }
 
+    })
 
     const labelcombo = computed(() => (item: any) => {
       let lab = item.label

src/components/CBarSelection/CBarSelection.vue

@@ -3,10 +3,7 @@
     :class="$q.screen.lt.sm ? `` : `q-pa-xs`"
     v-if="isfinishLoading && mycolumns"
   >
-    <div
+    <q-layout view="hHh lpR fFf" :class="`shadow-2 rounded-borders `">
-      class="centermydiv q-mx-sm"
-      :style="`text-align: center; background-color: ${mycolor}`"
-    ></div>
       <div>
         <div v-if="prop_search || canEdit" class="q-my-xs text-right">
           <q-btn
@@ -19,7 +16,7 @@
         </div>
         <q-slide-transition>
           <div class="row no-wrap shadow-1">
-          <q-header elevated>
+            <q-header elevated reveal>
               <q-toolbar class="glossy" style="">
                 <div class="col-3">
                   <q-select
@@ -48,21 +45,24 @@
                 </div>
                 <q-space />
                 <q-btn
-
                   size="sm"
                   class="col-1 q-mx-xs"
                   icon="fas fa-plus"
                   @click="createNewRecordDialog"
                 >
                 </q-btn>
-              <div class="col" v-for="(item, index) in searchList" :key="index">
+                <div
+                  class="col"
+                  v-for="(item, index) in searchList"
+                  :key="index"
+                >
                   <CMySelect
                     :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                     v-if="
                       item.type === costanti.FieldType.select ||
                       item.type === costanti.FieldType.select_by_server
                     "
-                  :label="item.value ? '' : labelcombo(item)"
+                    :label="item.value && (item.value._id > 0) ? undefined : labelcombo(item)"
                     v-model:value="item.value"
                     @update:value="searchval(item.value, item.table)"
                     :addall="item.addall"
@@ -75,14 +75,16 @@
                     "
                     :pickup="item.type === costanti.FieldType.select_by_server"
                     label-color="white"
-                  class="combowidth"
+                    myclass="comboselector"
                     color="primary"
+                    :dense="true"
                     :icon_alternative="item.icon"
                     :optval="fieldsTable.getKeyByTable(item.table)"
                     :optlab="fieldsTable.getLabelByTable(item.table)"
                     :options="valoriopt(item, false)"
                     :filter="item.filter"
                     :filter_extra="item.filter_extra"
+                    style="font-size: 0.8rem !important;"
                     :useinput="
                       item.useinput &&
                       item.type !== costanti.FieldType.select_by_server
@@ -95,7 +97,9 @@
             </div>-->
 
                   <CMySelect
-                  v-if="item.type === costanti.FieldType.multiselect_by_server"
+                    v-if="
+                      item.type === costanti.FieldType.multiselect_by_server
+                    "
                     :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                     :multiselect_by_server="true"
                     :label="labelcombo(item)"
@@ -108,7 +112,7 @@
                     :pickup="true"
                     :param1="item.param1"
                     label-color="primary"
-                  class="combowidth"
+                    class="comboselector"
                     color="primary"
                     :icon_alternative="item.icon"
                     :optval="fieldsTable.getKeyByTable(item.table)"
@@ -136,7 +140,7 @@
                     :useinput="item.useinput"
                     :options="valoriopt(item, item.addall, item.addnone)"
                     :filter="item.filter"
-                  class="combowidth"
+                    class="comboselector"
                     :option-value="fieldsTable.getKeyByTable(item.table)"
                   >
                     <template v-if="item.icon" v-slot:prepend>
@@ -168,8 +172,9 @@
                             size="12px"
                           />
                           {{
-                          scope.opt[fieldsTable.getLabelByTable(item.table)] ||
+                            scope.opt[
-                          scope.opt
+                              fieldsTable.getLabelByTable(item.table)
+                            ] || scope.opt
                           }}
                         </q-chip>
                       </div>
@@ -197,40 +202,11 @@
             </q-header>
           </div>
         </q-slide-transition>
-
-      <div
-        v-if="prop_search || canEdit"
-        class="row justify-center vertical-middle"
-      >
-        <div v-if="prop_search" class="q-mr-sm full-width">
-          <q-input
-            v-model="search"
-            filled
-            dense
-            type="search"
-            debounce="500"
-            :hint="hint"
-            label="Cerca"
-            v-on:keyup.enter="doSearch"
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" />
-            </template>
-            <template v-if="searchList" v-slot:after>
-              <q-btn
-                dense
-                label=""
-                color="primary"
-                @click="showfilter = !showfilter"
-                icon="fas fa-filter"
-              ></q-btn>
-            </template>
-          </q-input>
-        </div>
-
-        <q-space></q-space>
       </div>
+      <div class="q-my-md">
+        <slot />
       </div>
+    </q-layout>
   </div>
 </template>
 <script lang="ts" src="./CBarSelection.ts">

src/components/CFinder/CFinder.vue

@@ -1,5 +1,5 @@
 <template>
-  <CTitlePage :ind="ind" :table="table"/>
+  <CTitlePage :ind="ind" :table="table">
     <div class="bi-border-all">
       <div class="q-ma-xs q-gutter-xs">
         <div v-if="showFilterPersonal" class="text-center">
@@ -64,7 +64,6 @@
         </CGridTableRec>
       </div>
 
-
       <q-page-scroller
         position="bottom-right"
         :scroll-offset="850"
@@ -74,6 +73,7 @@
         <q-btn fab icon="keyboard_arrow_up" color="accent" />
       </q-page-scroller>
     </div>
+  </CTitlePage>
 </template>
 
 <script lang="ts" src="./CFinder.ts">

src/components/CGridTableRec/CGridTableRec.ts

@@ -247,9 +247,11 @@ export default defineComponent({
       default: '',
     },
   },
-  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
+  components: {
+    CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
     CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
-    CMyRecCircuitCard },
+    CMyRecCircuitCard
+  },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -352,6 +354,17 @@ export default defineComponent({
       const rec = searchList.value.find((myrec) => myrec.table === globalStore.myselector.table) // check if exist
       if (rec) {
         rec.value = globalStore.myselector.data
+
+        // Reset others tables
+        const rec2 = searchList.value.find((myrec) => myrec.table === toolsext.TABREGIONS) // check if exist
+        if (rec2) {
+          rec2.value = costanti.FILTER_TUTTI
+        }
+        const rec3 = searchList.value.find((myrec) => myrec.table === toolsext.TABPROVINCE) // check if exist
+        if (rec3) {
+          rec3.value = costanti.FILTER_TUTTI
+        }
+
       }
 
       if (value) {
@@ -454,9 +467,10 @@ export default defineComponent({
             if (arrvalues)
               trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
           }
-          if (valsaved && trovato)
+          if (valsaved && trovato) {
             item.value = valsaved
-          else {
+            globalStore.myselector.data = item.value
+          } else {
             if (arrvalues) {
               item.value = costanti.FILTER_TUTTI
             }
@@ -478,6 +492,11 @@ export default defineComponent({
               item.value = costanti.FILTER_TUTTI
             }
           }
+          if (item.value === costanti.FILTER_TUTTI) {
+            globalStore.myselector.data = { _id: 0, comune: '' }
+          } else {
+            globalStore.myselector.data = item.value
+          }
         }
       }
 
@@ -504,6 +523,22 @@ export default defineComponent({
           tools.setCookie(tools.COOK_SEARCH + table + '_' + recSector.value, newval)
         }
         // setCategBySector('sectorgoods', table, newval)
+      } else if (table === toolsext.TABCITIES) {
+        const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
+        if (rec) {
+          if (rec.value === costanti.FILTER_TUTTI) {
+            globalStore.myselector.data = { _id: 0, comune: '' }
+          } else {
+            globalStore.myselector.data = rec.value
+          }
+        }
+
+      } else if (table === toolsext.TABPROVINCE) {
+        const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABPROVINCE) // check if exist
+        if (rec) {
+          globalStore.myselector.data = { _id: 0, comune: '' }
+        }
+
       }
 
 
@@ -1944,7 +1979,7 @@ export default defineComponent({
       return actualDate.value
     }
 
-    function onLoadScroll (index: number, done: any) {
+    function onLoadScroll(index: number, done: any) {
       if (index > 1) {
         // console.log('onLoadScroll', index, 'RECLOAD', numRecLoaded.value, 'ROWS: ', pagination.value.rowsNumber)
         if (numRecLoaded.value < pagination.value.rowsNumber || (pagination.value.rowsNumber <= 0 && clickbuttsearch.value)) {
@@ -1962,7 +1997,7 @@ export default defineComponent({
       }
     }
 
-    function wrapCsvValue (val: any, formatFn?: any, row?: any, col?: IColGridTable) {
+    function wrapCsvValue(val: any, formatFn?: any, row?: any, col?: IColGridTable) {
       let formatted = formatFn !== void 0
         ? formatFn(val, row)
         : val
@@ -1992,7 +2027,7 @@ export default defineComponent({
     }
 
     // onMounted(mounted)
-    function exportTable () {
+    function exportTable() {
       // console.log('row', serverData.value)
       // console.log('mycolumns.value', mycolumns.value)
       // naive encoding to csv format

src/components/CMySelect/CMySelect.ts

@@ -27,7 +27,8 @@ export default defineComponent({
     value: [String, Number, Object],
     label: {
       type: String,
-      required: true,
+      required: false,
+      default: undefined,
     },
     myclass: {
       type: String,

src/components/CMySelect/CMySelect.vue

@@ -76,26 +76,24 @@
         v-if="pickup"
         :model-value="myvalue"
         @update:model-value="changeval"
-        clearable
         rounded
         outlined
+        :dense="dense"
         options-dense
         use-input
+        :label="label"
         input-debounce="300"
-        :dense="dense"
         :input-class="myclass"
         :options="valori"
         :option-value="optval"
         :option-label="optlab"
         map-options
         @filter="filterFn"
-        :label="label"
         options-selected-class="text-deep-blue"
         v-bind="$attrs"
-        class="combowidth"
       >
         <template v-if="getIcon()" v-slot:prepend>
-          <q-icon :name="getIcon()" />
+          <q-icon size="xs" :name="getIcon()" />
         </template>
         <template v-slot:no-option>
           <q-item>

src/components/CTitlePage/CTitlePage.vue

@@ -22,6 +22,7 @@
       :prop_search="false"
       :table="table"
     >
+      <slot />
     </CBarSelection>
   </div>
 </template>

src/css/app.scss

@@ -1003,7 +1003,7 @@ h3 {
   place-content: center;
 }
 
-.combowidth {
+.combowidth, .comboselector {
   min-width: 190px;
 
   @media (max-width: 450px) {
@@ -1012,6 +1012,12 @@ h3 {
   }
 }
 
+.comboselector {
+  font-size: 0.85rem !important;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
 .myimg-view {
   border-radius: 5px !important;
   height: 90px;