From 7deb7b6414b8474c9418e6af02892750397fc9f6 Mon Sep 17 00:00:00 2001
From: Surya Paolo <paolo.arena77@gmail.com>
Date: Fri, 2 Dec 2022 10:44:57 +0100
Subject: [PATCH] Added Bar Selector City at the Top !

---
 src/components/CBarSelection/CBarSelection.ts |   6 +
 .../CBarSelection/CBarSelection.vue           | 410 +++++++++---------
 src/components/CFinder/CFinder.vue            | 140 +++---
 src/components/CGridTableRec/CGridTableRec.ts |  57 ++-
 src/components/CMySelect/CMySelect.ts         |   3 +-
 src/components/CMySelect/CMySelect.vue        |   8 +-
 src/components/CTitlePage/CTitlePage.vue      |   1 +
 src/css/app.scss                              |   8 +-
 8 files changed, 328 insertions(+), 305 deletions(-)

diff --git a/src/components/CBarSelection/CBarSelection.ts b/src/components/CBarSelection/CBarSelection.ts
index 594680c7..31eaf38e 100755
--- a/src/components/CBarSelection/CBarSelection.ts
+++ b/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
diff --git a/src/components/CBarSelection/CBarSelection.vue b/src/components/CBarSelection/CBarSelection.vue
index daaccb55..1b5f849b 100755
--- a/src/components/CBarSelection/CBarSelection.vue
+++ b/src/components/CBarSelection/CBarSelection.vue
@@ -3,234 +3,210 @@
     :class="$q.screen.lt.sm ? `` : `q-pa-xs`"
     v-if="isfinishLoading && mycolumns"
   >
-    <div
-      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
-          size="sm"
-          dense
-          icon="fas fa-filter"
-          :label="$t('grid.showfilters')"
-          @click="showfilter = !showfilter"
-        ></q-btn>
-      </div>
-      <q-slide-transition>
-        <div class="row no-wrap shadow-1">
-          <q-header elevated>
-            <q-toolbar class="glossy" style="">
-              <div class="col-3">
-                <q-select
-                  v-model="tablesel"
-                  :options="optionsMainCards"
-                  emit-value
-                  borderless
-                  map-options
-                  behavior="menu"
-                  @update:model-value="gotoPageSel"
-                >
-                  <template v-slot:option="scope">
-                    <q-item v-bind="scope.itemProps">
-                      <q-item-section avatar>
-                        <q-icon :name="scope.opt.icon" />
-                      </q-item-section>
-                      <q-item-section>
-                        <q-item-label>{{ scope.opt.label }}</q-item-label>
-                        <!--<q-item-label caption>{{
+    <q-layout view="hHh lpR fFf" :class="`shadow-2 rounded-borders `">
+      <div>
+        <div v-if="prop_search || canEdit" class="q-my-xs text-right">
+          <q-btn
+            size="sm"
+            dense
+            icon="fas fa-filter"
+            :label="$t('grid.showfilters')"
+            @click="showfilter = !showfilter"
+          ></q-btn>
+        </div>
+        <q-slide-transition>
+          <div class="row no-wrap shadow-1">
+            <q-header elevated reveal>
+              <q-toolbar class="glossy" style="">
+                <div class="col-3">
+                  <q-select
+                    v-model="tablesel"
+                    :options="optionsMainCards"
+                    emit-value
+                    borderless
+                    map-options
+                    behavior="menu"
+                    @update:model-value="gotoPageSel"
+                  >
+                    <template v-slot:option="scope">
+                      <q-item v-bind="scope.itemProps">
+                        <q-item-section avatar>
+                          <q-icon :name="scope.opt.icon" />
+                        </q-item-section>
+                        <q-item-section>
+                          <q-item-label>{{ scope.opt.label }}</q-item-label>
+                          <!--<q-item-label caption>{{
                         scope.opt.description
                       }}</q-item-label>-->
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </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">
-                <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)"
-                  v-model:value="item.value"
-                  @update:value="searchval(item.value, item.table)"
-                  :addall="item.addall"
-                  :addnone="item.addnone"
-                  :addlast="true"
-                  :tablesel="
-                    item.type === costanti.FieldType.select_by_server
-                      ? item.tablesel
-                      : ''
-                  "
-                  :pickup="item.type === costanti.FieldType.select_by_server"
-                  label-color="white"
-                  class="combowidth"
-                  color="primary"
-                  :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"
-                  :useinput="
-                    item.useinput &&
-                    item.type !== costanti.FieldType.select_by_server
-                  "
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+                <q-space />
+                <q-btn
+                  size="sm"
+                  class="col-1 q-mx-xs"
+                  icon="fas fa-plus"
+                  @click="createNewRecordDialog"
                 >
-                </CMySelect>
+                </q-btn>
+                <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 && (item.value._id > 0) ? undefined : labelcombo(item)"
+                    v-model:value="item.value"
+                    @update:value="searchval(item.value, item.table)"
+                    :addall="item.addall"
+                    :addnone="item.addnone"
+                    :addlast="true"
+                    :tablesel="
+                      item.type === costanti.FieldType.select_by_server
+                        ? item.tablesel
+                        : ''
+                    "
+                    :pickup="item.type === costanti.FieldType.select_by_server"
+                    label-color="white"
+                    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
+                    "
+                  >
+                  </CMySelect>
 
-                <!--<div v-if="item.type === costanti.FieldType.multiselect_by_server">
+                  <!--<div v-if="item.type === costanti.FieldType.multiselect_by_server">
               item: {{ item}}
             </div>-->
 
-                <CMySelect
-                  v-if="item.type === costanti.FieldType.multiselect_by_server"
-                  :col="fieldsTable.getColByColumns(mycolumns, item.key)"
-                  :multiselect_by_server="true"
-                  :label="labelcombo(item)"
-                  v-model:arrvalue="item.arrvalue"
-                  @update:arrvalue="searchval(item.arrvalue, item.table)"
-                  :addall="item.addall"
-                  :addnone="item.addnone"
-                  :addlast="true"
-                  :tablesel="item.tablesel"
-                  :pickup="true"
-                  :param1="item.param1"
-                  label-color="primary"
-                  class="combowidth"
-                  color="primary"
-                  :icon_alternative="item.icon"
-                  :optval="fieldsTable.getKeyByTable(item.table)"
-                  :optlab="fieldsTable.getLabelByTable(item.table)"
-                  :filter="item.filter"
-                  :filter_extra="item.filter_extra"
-                  :options="valoriopt(item, false)"
-                  :useinput="true"
-                >
-                </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
-                  options-dense
-                  emit-value
-                  map-options
-                  :useinput="item.useinput"
-                  :options="valoriopt(item, item.addall, item.addnone)"
-                  :filter="item.filter"
-                  class="combowidth"
-                  :option-value="fieldsTable.getKeyByTable(item.table)"
-                >
-                  <template v-if="item.icon" v-slot:prepend>
-                    <q-icon :name="item.icon" />
-                  </template>
-                  <template
-                    v-if="item.arrvalue.length >= 1"
-                    v-slot:selected-item="scope"
+                  <CMySelect
+                    v-if="
+                      item.type === costanti.FieldType.multiselect_by_server
+                    "
+                    :col="fieldsTable.getColByColumns(mycolumns, item.key)"
+                    :multiselect_by_server="true"
+                    :label="labelcombo(item)"
+                    v-model:arrvalue="item.arrvalue"
+                    @update:arrvalue="searchval(item.arrvalue, item.table)"
+                    :addall="item.addall"
+                    :addnone="item.addnone"
+                    :addlast="true"
+                    :tablesel="item.tablesel"
+                    :pickup="true"
+                    :param1="item.param1"
+                    label-color="primary"
+                    class="comboselector"
+                    color="primary"
+                    :icon_alternative="item.icon"
+                    :optval="fieldsTable.getKeyByTable(item.table)"
+                    :optlab="fieldsTable.getLabelByTable(item.table)"
+                    :filter="item.filter"
+                    :filter_extra="item.filter_extra"
+                    :options="valoriopt(item, false)"
+                    :useinput="true"
                   >
-                    <div
-                      v-if="
-                        scope.opt[fieldsTable.getLabelByTable(item.table)] ||
-                        (scope.opt && checkIfShowRec(scope.opt))
-                      "
+                  </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
+                    options-dense
+                    emit-value
+                    map-options
+                    :useinput="item.useinput"
+                    :options="valoriopt(item, item.addall, item.addnone)"
+                    :filter="item.filter"
+                    class="comboselector"
+                    :option-value="fieldsTable.getKeyByTable(item.table)"
+                  >
+                    <template v-if="item.icon" v-slot:prepend>
+                      <q-icon :name="item.icon" />
+                    </template>
+                    <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"
-                        />
-                        {{
+                      <div
+                        v-if="
                           scope.opt[fieldsTable.getLabelByTable(item.table)] ||
-                          scope.opt
-                        }}
-                      </q-chip>
-                    </div>
-                  </template>
-                  <template
-                    v-slot:option="{ itemProps, opt, selected, toggleOption }"
-                  >
-                    <q-item v-bind="itemProps">
-                      <q-item-section>
-                        <q-item-label>{{
-                          opt[fieldsTable.getLabelByTable(item.table)]
-                        }}</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-toolbar>
-          </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>
+                          (scope.opt && checkIfShowRec(scope.opt))
+                        "
+                      >
+                        <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)
+                            ] || scope.opt
+                          }}
+                        </q-chip>
+                      </div>
+                    </template>
+                    <template
+                      v-slot:option="{ itemProps, opt, selected, toggleOption }"
+                    >
+                      <q-item v-bind="itemProps">
+                        <q-item-section>
+                          <q-item-label>{{
+                            opt[fieldsTable.getLabelByTable(item.table)]
+                          }}</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-toolbar>
+            </q-header>
+          </div>
+        </q-slide-transition>
       </div>
-    </div>
+      <div class="q-my-md">
+        <slot />
+      </div>
+    </q-layout>
   </div>
 </template>
 <script lang="ts" src="./CBarSelection.ts">
diff --git a/src/components/CFinder/CFinder.vue b/src/components/CFinder/CFinder.vue
index 2a871fe9..72ed5c0a 100755
--- a/src/components/CFinder/CFinder.vue
+++ b/src/components/CFinder/CFinder.vue
@@ -1,79 +1,79 @@
 <template>
-  <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">
-        <q-btn-toggle
-          v-model="myrecfiltertoggle"
-          push
-          glossy
-          toggle-color="primary"
-          :options="myoptions"
-        />
-      </div>
-      <div v-if="false" class="q-mr-sm">
-        <q-input
-          v-model="search"
-          filled
-          dense
-          type="search"
-          debounce="500"
-          :hint="t('finder.search_skill')"
-          v-on:keyup.enter="doSearch"
+  <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">
+          <q-btn-toggle
+            v-model="myrecfiltertoggle"
+            push
+            glossy
+            toggle-color="primary"
+            :options="myoptions"
+          />
+        </div>
+        <div v-if="false" class="q-mr-sm">
+          <q-input
+            v-model="search"
+            filled
+            dense
+            type="search"
+            debounce="500"
+            :hint="t('finder.search_skill')"
+            v-on:keyup.enter="doSearch"
+          >
+            <template v-slot:after>
+              <q-btn
+                dense
+                label=""
+                color="primary"
+                @click="doSearch"
+                icon="search"
+              ></q-btn>
+            </template>
+          </q-input>
+        </div>
+
+        <CGridTableRec
+          v-if="searchList.length > 0"
+          :prop_mytable="table"
+          prop_mytitle=""
+          :prop_mycolumns="col"
+          :prop_colkey="prop_colkey"
+          :col_title="col_title"
+          :col_footer="col_footer"
+          :col_tabfooter="col_tabfooter"
+          :vertical="costanti.VISUTABLE_LISTA"
+          :prop_pagination="mypagination"
+          :showType="showType"
+          :hint="hint"
+          :nodataLabel="noMsgRecord"
+          :prop_search="true"
+          :finder="true"
+          :choose_visutype="visuType"
+          :butt_modif_new="true && !noButtAdd"
+          noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
+          :arrfilters="arrfilterand"
+          :filtercustom="filtercustom"
+          :prop_searchList="searchList"
+          :defaultnewrec="getdefaultnewrec"
+          :selector="selector"
+          labelBtnAddRow="NONE"
+          :labelBtnAddExtra="noButtAdd ? `` : ``"
+          :extraparams="extraparams()"
         >
-          <template v-slot:after>
-            <q-btn
-              dense
-              label=""
-              color="primary"
-              @click="doSearch"
-              icon="search"
-            ></q-btn>
-          </template>
-        </q-input>
+        </CGridTableRec>
       </div>
 
-      <CGridTableRec
-        v-if="searchList.length > 0"
-        :prop_mytable="table"
-        prop_mytitle=""
-        :prop_mycolumns="col"
-        :prop_colkey="prop_colkey"
-        :col_title="col_title"
-        :col_footer="col_footer"
-        :col_tabfooter="col_tabfooter"
-        :vertical="costanti.VISUTABLE_LISTA"
-        :prop_pagination="mypagination"
-        :showType="showType"
-        :hint="hint"
-        :nodataLabel="noMsgRecord"
-        :prop_search="true"
-        :finder="true"
-        :choose_visutype="visuType"
-        :butt_modif_new="true && !noButtAdd"
-        noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
-        :arrfilters="arrfilterand"
-        :filtercustom="filtercustom"
-        :prop_searchList="searchList"
-        :defaultnewrec="getdefaultnewrec"
-        :selector="selector"
-        labelBtnAddRow="NONE"
-        :labelBtnAddExtra="noButtAdd ? `` : ``"
-        :extraparams="extraparams()"
+      <q-page-scroller
+        position="bottom-right"
+        :scroll-offset="850"
+        :offset="[18, 18]"
+        style="opacity: 0.3"
       >
-      </CGridTableRec>
+        <q-btn fab icon="keyboard_arrow_up" color="accent" />
+      </q-page-scroller>
     </div>
-
-
-    <q-page-scroller
-      position="bottom-right"
-      :scroll-offset="850"
-      :offset="[18, 18]"
-      style="opacity: 0.3"
-    >
-      <q-btn fab icon="keyboard_arrow_up" color="accent" />
-    </q-page-scroller>
-  </div>
+  </CTitlePage>
 </template>
 
 <script lang="ts" src="./CFinder.ts">
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index a9cb7da2..a2a60b67 100755
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/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,13 +354,24 @@ 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) {
         refresh()
       }
     },
-  )
+    )
 
 
     watch(() => searchList.value, (to: any, from: any) => {
@@ -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: '' }
+        }
+
       }
 
 
@@ -1004,8 +1039,8 @@ export default defineComponent({
 
       onUpdateData(0,
         {
-        pagination: pagination.value
-      }, done)
+          pagination: pagination.value
+        }, done)
     }
 
 
@@ -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
@@ -2005,7 +2040,7 @@ export default defineComponent({
           row,
           col
         )).join(','))
-        ).join('\r\n')
+      ).join('\r\n')
 
       const status = exportFile(
         'export-' + mytable.value + '_' + tools.getstrYYMMDDHHMMDateTime(tools.getDateNow()) + '.csv',
diff --git a/src/components/CMySelect/CMySelect.ts b/src/components/CMySelect/CMySelect.ts
index 6c9bdf43..65981286 100755
--- a/src/components/CMySelect/CMySelect.ts
+++ b/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,
diff --git a/src/components/CMySelect/CMySelect.vue b/src/components/CMySelect/CMySelect.vue
index 21b1d2c0..b2231d93 100755
--- a/src/components/CMySelect/CMySelect.vue
+++ b/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>
diff --git a/src/components/CTitlePage/CTitlePage.vue b/src/components/CTitlePage/CTitlePage.vue
index 55dfa4b3..9503e716 100755
--- a/src/components/CTitlePage/CTitlePage.vue
+++ b/src/components/CTitlePage/CTitlePage.vue
@@ -22,6 +22,7 @@
       :prop_search="false"
       :table="table"
     >
+      <slot />
     </CBarSelection>
   </div>
 </template>
diff --git a/src/css/app.scss b/src/css/app.scss
index ed85e7ec..2df43dd6 100755
--- a/src/css/app.scss
+++ b/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;