Lista Città (prese dal server: pickup)

src/components/CMySelect/CMySelect.ts

@@ -9,12 +9,19 @@ import { shared_consts } from '@/common/shared_vuejs'
 
 export default defineComponent({
   name: 'CMySelect',
-  emits: ['update:value', 'changeval'],
+  emits: ['update:value', 'update:arrvalue', 'changeval'],
   props: {
     options: {
       type: Array,
       required: true,
     },
+    arrvalue: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
     value: [String, Number],
     label: {
       type: String,
@@ -68,6 +75,10 @@ export default defineComponent({
       type: Function,
       required: false,
     },
+    multiselect_by_server: {
+      type: Boolean,
+      default: false,
+    }
   },
   components: {},
   setup(props, { emit }) {
@@ -80,6 +91,8 @@ export default defineComponent({
     const valori = ref(<any>[])
 
     const myvalue = ref(<string | number>'')
+    const myarrvalue = ref(<any[]>[])
+    const arrtempOpt = ref(<any[]>[])
 
     const valoriload = computed(() => {
       let myarr = props.options
@@ -97,78 +110,167 @@ export default defineComponent({
     })
 
     watch(() => props.options, (value: any, oldval: any) => {
-      valori.value = valoriload.value
+        if (!props.multiselect_by_server) {
+          valori.value = valoriload.value
+          // console.log('@@@ VALORI CHANGED (1)', valori.value)
+        }
       },
     )
     watch(() => props.value, (value: any, oldval: any) => {
-      mounted()
+        mounted()
       },
     )
 
+    watch(() => props.arrvalue, (value: any, oldval: any) => {
+        console.log(' MODIF props.arrvalue', props.arrvalue)
+        // mounted()
+      },
+    )
 
-    function changeval(newval: any) {
-      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 saveOptInCookie(arrval: any) {
 
-    function mounted() {
-      // console.log('mounted myselect', props.options)
-      if (props.options) {
-        const rec: any = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
+      if (arrval) {
+        for (const id of arrval) {
+          let trovato = arrtempOpt.value.find((rec) => rec._id === id)
+          if (!trovato) {
+            const rec = valori.value.find((rec: any) => rec._id === id)
+            if (rec) {
+              console.log('SAVE OPT rec', rec)
+              arrtempOpt.value.push({ _id: id, comune: rec.comune })
+              let num = localStorage.getItem(props.tablesel + 'NUM') || 0
+              try {
+                if (!num) {
+                  num = 0
+                } else {
+                  num = parseInt(num.toString())
+                }
+              } catch (e) {
+                num = 0
+              }
+              console.log('-----------  valori.value', valori.value)
+              console.log('-----------  arrtempOpt.value', arrtempOpt.value)
 
-        if (rec) {
-          if (props.funcgetvaluebyid)
-            myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`])
-          else
-            myvalue.value = rec[`${props.optlab}`]
-        } else {
-          if (!props.useinput) {
-            if (props.value) {
-              myvalue.value = props.value
+              localStorage.setItem(props.tablesel + num + 'ID', rec._id)
+              localStorage.setItem(props.tablesel + num + 'COMUNE', rec.comune)
+
+              num += 1
+              localStorage.setItem(props.tablesel + 'NUM', num.toString())
             }
           }
         }
       }
+    }
+
+
+    function changeval(newval: any) {
+      console.log(' ½½½½½½½ changeval', newval)
+      if (props.multiselect_by_server) {
+        // localStorage.setItem(props.tablesel + '_' + newval, valori.value[newval])
+        myarrvalue.value = newval && newval['arrvalue'] ? newval['arrvalue'] : newval
+        saveOptInCookie(newval)
+
+        console.log(' ----- Myselect changeval Arrvalue', myarrvalue.value)
+        emit('update:arrvalue', myarrvalue.value)
+        emit('changeval', myarrvalue.value)
+
+
+      } else {
+        if (props.tablesel === shared_consts.TAB_COUNTRY)
+          myvalue.value = newval && newval['value'] ? newval['value'] : newval
+        else if (props.tablesel === shared_consts.TAB_CITIES)
+          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() {
+      console.log(' #### mounted myselect', props.options, 'arrvalue', myarrvalue.value)
+      let rec: any
+      if (props.options) {
+        if (!props.multiselect_by_server) {
+          rec = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
+        }
+      }
+      if (props.multiselect_by_server) {
+        const num = parseInt(localStorage.getItem(props.tablesel + 'NUM')!)
+        console.log('num LOADED ', num)
+        for (let i = 0; i < num; i++) {
+          const itemId = parseInt(localStorage.getItem(props.tablesel + i + 'ID')!)
+          const itemcomune = localStorage.getItem(props.tablesel + i + 'COMUNE')
+          if (itemId) {
+            arrtempOpt.value.push({ _id: itemId, comune: itemcomune })
+          }
+        }
+
+        myarrvalue.value = []
+        for (const val of props.arrvalue) {
+          rec = arrtempOpt.value.find((myrec: any) => val === (myrec[`${props.optval}`]))
+          if (rec) {
+            myarrvalue.value.push(rec[`${props.optval}`])
+          }
+        }
+      }
+      if (rec) {
+        if (props.funcgetvaluebyid)
+          myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`])
+        else
+          myvalue.value = rec[`${props.optlab}`]
+      } else {
+        // if (!props.useinput) {
+        if (props.value) {
+          myvalue.value = props.value
+        }
+        // }
+      }
       // 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()
+          if (val.length <= 1) {
+            valori.value = arrtempOpt.value
             return
           }
 
           let mystr = val.toLocaleLowerCase()
 
+          console.log('props.tablesel', props.tablesel)
+
           if (fieldsTable.tableRemotePickup.includes(props.tablesel)) {
-            // if (myvalue.value.length > 1) {
             try {
               if (mystr !== '')
-                myarr = await globalStore.loadPickup({ table: props.tablesel, search: mystr })
+                return globalStore.loadPickup({ table: props.tablesel, search: mystr })
+                  .then((ris) => {
+                    myarr = props.options
+                    if (ris) {
+                      valori.value = ris
+                      if (props.multiselect_by_server) {
+                        console.log('@@@ VALORI CHANGED (2)', valori.value)
+                      }
+                    }
 
-              if (myarr === null){
-                abort()
+                  })
+
+              if (myarr === null) {
+                valori.value = arrtempOpt.value
                 return
               }
-            }catch (e) {
-              abort()
+            } catch (e) {
+              valori.value = arrtempOpt.value
               return
             }
             // const needle = val.toLocaleLowerCase()
             // optFiltered.value = optFiltered.value.filter((v: any) => v.toLocaleLowerCase().indexOf(needle) > -1)
-            // }
           } else {
             myarr = props.options
           }
@@ -183,9 +285,14 @@ export default defineComponent({
             myarr = [myobj, ...myarr]
           }
 
-          valori.value = myarr
+          if (myarr.length > 0) {
+            valori.value = myarr
+            if (props.multiselect_by_server) {
+              console.log('@@@ VALORI CHANGED (3)', valori.value)
+            }
+          }
 
-          console.log('tablesel', props.tablesel, 'filterFn', myarr)
+          console.log('*** OUT: tablesel', props.tablesel, 'filterFn', myarr)
         },
         // "ref" is the Vue reference to the QSelect
         (ref: any) => {
@@ -197,15 +304,32 @@ export default defineComponent({
       )
     }
 
+    function abortFilterFn() {
+      console.log('delayed filter aborted')
+    }
+
+    function checkIfShowRec(rec: any) {
+      return (rec._id > 0 && typeof rec._id === 'number') || rec._id !== 'number'
+    }
+
     onMounted(mounted)
 
-    valori.value = valoriload.value
+    if (!props.multiselect_by_server) {
+      valori.value = valoriload.value
+      console.log('@@@ VALORI CHANGED (4)', valori.value)
+    } else {
+      valori.value = arrtempOpt.value
+    }
 
     return {
       changeval,
       myvalue,
+      myarrvalue,
       valori,
       filterFn,
+      fieldsTable,
+      checkIfShowRec,
+      abortFilterFn,
     }
   }
 })

src/components/CMySelect/CMySelect.vue

@@ -1,6 +1,69 @@
 <template>
   <div class="text-center">
-    <div v-if="useinput">
+    <div v-if="multiselect_by_server">
+      <q-select
+        :model-value="myarrvalue"
+        label-color="primary"
+        :label="label"
+        @filter="filterFn"
+        @filter-abort="abortFilterFn"
+        @update:model-value="changeval"
+        input-debounce="300"
+        rounded
+        outlined
+        fill-input
+        multiple
+        options-dense
+        map-options
+        stack-label
+        emit-value
+        :use-input="true"
+        :dense="dense"
+        :input-class="myclass"
+        :options="valori"
+        :option-value="optval"
+        class="combowidth"
+      >
+
+        <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="{ itemProps, opt, selected, toggleOption }">
+          <q-item v-bind="itemProps">
+
+            <q-item-section>
+              <q-item-label>{{ opt[fieldsTable.getLabelByTable(tablesel)] }}</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>
+        <template v-slot:selected-item="scope">
+          <div v-if="scope.opt[fieldsTable.getLabelByTable(tablesel)]">
+            <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="" size="12px"/>
+              {{ scope.opt[fieldsTable.getLabelByTable(tablesel)] }}
+            </q-chip>
+          </div>
+        </template>
+
+      </q-select>
+
+    </div>
+    <div v-else-if="useinput">
       <q-select
         :multiple="multiple"
         rounded
@@ -9,6 +72,7 @@
         :input-class="myclass"
         :model-value="myvalue"
         :use-input="useinput"
+        @filter="filterFn"
         input-debounce="0"
         @new-value="newvaluefunc"
         new-value-mode="add-unique"
@@ -52,11 +116,8 @@
         </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-label> {{ scope.opt[optlab] }}</q-item-label>
             </q-item-section>
           </q-item>
         </template>