- Codice internazionale numero + Country

src/components/CMySelect/CMySelect.ts

@@ -4,6 +4,8 @@ import { useUserStore } from '@store/UserStore'
 import { useGlobalStore } from '@store/globalStore'
 import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { shared_consts } from '@/common/shared_vuejs'
 
 export default defineComponent({
   name: 'CMySelect',
@@ -23,6 +25,11 @@ export default defineComponent({
       required: false,
       default: ''
     },
+    tablesel: {
+      type: String,
+      required: false,
+      default: ''
+    },
     optlab: [String, Function],
     optval: {
       type: String,
@@ -33,6 +40,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    pickup: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     addall: {
       type: Boolean,
       required: false,
@@ -64,9 +76,12 @@ export default defineComponent({
     const userStore = useUserStore()
     const globalStore = useGlobalStore()
 
+    const optFiltered = ref(<any>[])
+    const valori = ref(<any>[])
+
     const myvalue = ref(<string | number>'')
 
-    const valori = computed(() => {
+    const valoriload = computed(() => {
       let myarr = props.options
       if (props.addall) {
         let myobj: any = {}
@@ -82,10 +97,15 @@ export default defineComponent({
     })
 
     function changeval(newval: any) {
-      console.log('changeval', newval)
-      myvalue.value = newval
-      emit('update:value', newval)
-      emit('changeval', newval)
+      if (props.tablesel === shared_consts.TAB_COUNTRY)
+        myvalue.value = newval && newval['value'] ? newval['value'] : newval
+      else if (props.tablesel === shared_consts.TAB_PHONES)
+        myvalue.value = newval && newval['code'] ? newval['code'] : newval
+      else
+        myvalue.value = newval
+      console.log('Myselect changeval', myvalue.value)
+      emit('update:value', myvalue.value)
+      emit('changeval', myvalue.value)
     }
 
     function mounted() {
@@ -117,12 +137,63 @@ export default defineComponent({
       // console.log('cmyselect: myvalue.value', myvalue.value)
     }
 
+    function filterFn(val: any, update: any, abort: any) {
+      update(
+        async () => {
+          console.log('Filter val', val, val.length)
+          let myarr: any = []
+
+          if (val.length < 1) {
+            abort()
+            return
+          }
+
+          let mystr = val.toLocaleLowerCase()
+
+          if (fieldsTable.tableRemotePickup.includes(props.tablesel)) {
+            // if (myvalue.value.length > 1) {
+            if (mystr !== '')
+              myarr = await globalStore.loadPickup({ table: props.tablesel, search: mystr })
+            // const needle = val.toLocaleLowerCase()
+            // optFiltered.value = optFiltered.value.filter((v: any) => v.toLocaleLowerCase().indexOf(needle) > -1)
+            // }
+          } else {
+            myarr = props.options
+          }
+
+          if (props.addall) {
+            let myobj: any = {}
+            if (typeof props.optlab === 'string') {
+              myobj[props.optlab] = '(Tutti)'
+              myobj[props.optval] = costanti.FILTER_TUTTI
+            }
+
+            myarr = [myobj, ...myarr]
+          }
+
+          valori.value = myarr
+
+          console.log('tablesel', props.tablesel, 'filterFn', myarr)
+        },
+        // "ref" is the Vue reference to the QSelect
+        (ref: any) => {
+          if (val !== '' && ref.options.length > 0) {
+            ref.setOptionIndex(-1) // reset optionIndex in case there is something selected
+            ref.moveOptionSelection(1, true) // focus the first selectable option and do not update the input-value
+          }
+        }
+      )
+    }
+
     onMounted(mounted)
 
+    valori.value = valoriload.value
+
     return {
       changeval,
       myvalue,
       valori,
+      filterFn,
     }
   }
 })

src/components/CMySelect/CMySelect.vue

@@ -22,6 +22,47 @@
     </div>
     <div v-else>
       <q-select
+        v-if="pickup"
+        filled
+        :model-value="myvalue"
+        clearable
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="300"
+        :dense="dense"
+        :input-class="myclass"
+        :options="valori"
+        :option-value="optval"
+        :option-label="optlab"
+        map-options
+        @filter="filterFn"
+        @update:model-value="changeval"
+        :label="label"
+        options-selected-class="text-deep-orange"
+        v-bind="$attrs"
+        style="width: 250px"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section avatar>
+              {{ scope.opt.flag }}
+            </q-item-section>
+            <q-item-section>
+              <q-item-label> {{ scope.opt.value }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        v-else
         :multiple="multiple"
         rounded
         outlined