- aggiornamento catalogo: lista titoli del catalogo

- scheda prodotto libro
- migliorata tabella prodotto

src/components/CMySelect/CMySelect.ts

@@ -13,7 +13,7 @@ import { tools } from '@tools'
 
 export default defineComponent({
   name: 'CMySelect',
-  emits: ['update:value', 'update:arrvalue', 'changeval'],
+  emits: ['update:value', 'update:arrvalue', 'changeval', 'clear'],
   props: {
     options: {
       type: Array,
@@ -141,6 +141,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
     withToggle: {
       type: Boolean,
       default: false,
@@ -171,6 +175,11 @@ export default defineComponent({
 
     const optionsreal: any = []
 
+    const selectMultiServer = ref(null)
+    const selectPickup = ref(null)
+    const selectMultiple = ref(null)
+    const selectGeneric = ref(null)
+
     const valoriload = computed(() => {
       return updateArrOptions()
     })
@@ -317,7 +326,29 @@ export default defineComponent({
 
     function mounted() {
       optionsreal.value = props.options
+      if (props.focus) {
+        focusVisibleSelect()
+      }
+
       update()
+
+    }
+
+    function focusVisibleSelect() {
+
+      try {
+        if (selectMultiServer.value && props.multiselect_by_server) {
+          selectMultiServer.value.focus()
+        } else if (selectPickup.value && props.pickup) {
+          selectPickup.value.focus()
+        } else if (selectMultiple.value && props.multiple) {
+          selectMultiple.value.focus()
+        } else {
+          selectGeneric.value.focus()
+        }
+      } catch (e) {
+        console.error('Err', e)
+      }
     }
 
     function update() {
@@ -778,7 +809,7 @@ export default defineComponent({
     }
 
     function getOptionLabel(option: any): string {
-      console.log('getOptionLabel', option)
+      // console.log('getOptionLabel', option)
       if (typeof props.optlab === 'function') {
         return props.optlab(option); // Se optlab è una funzione, chiamala
       } else {
@@ -786,6 +817,11 @@ export default defineComponent({
       }
     }
 
+    function clear() {
+      emit('clear')
+      myvalue.value = ''
+    }
+
     onMounted(mounted)
 
 
@@ -804,6 +840,7 @@ export default defineComponent({
       selectText,
       getLabelValue,
       getOptionLabel,
+      clear,
     }
   }
 })

src/components/CMySelect/CMySelect.vue

@@ -2,6 +2,7 @@
   <div class="text-center">
     <div v-if="multiselect_by_server">
       <q-select
+        ref="selectMultiServer"
         :model-value="myarrvalue"
         @update:model-value="changeval"
         v-bind="$attrs"
@@ -27,15 +28,16 @@
         :class="myclass ? myclass : 'combowidth'"
         style="min-width: 250px !important"
       >
-        <template v-if="getIcon() && !sola_lettura" v-slot:prepend>
+        <template
+          v-if="getIcon() && !sola_lettura"
+          v-slot:prepend
+        >
           <q-icon :name="getIcon()" />
         </template>
 
         <template v-slot:no-option>
           <q-item>
-            <q-item-section class="text-grey">
-              Digita il testo da cercare
-            </q-item-section>
+            <q-item-section class="text-grey"> Digita il testo da cercare </q-item-section>
           </q-item>
         </template>
 
@@ -64,9 +66,7 @@
         <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-label>{{ opt[fieldsTable.getLabelByTable(tablesel)] }}</q-item-label>
             </q-item-section>
             <q-item-section side>
               <q-toggle
@@ -80,6 +80,7 @@
     </div>
     <div v-else-if="pickup">
       <q-select
+        ref="selectPickup"
         v-if="pickup"
         :model-value="myvalue"
         @update:model-value="changeval"
@@ -94,30 +95,26 @@
         :options="valori"
         :option-value="optval"
         :option-label="getOptionLabel"
-        :use-chips="myvalue && myvalue !== '' ? true : false"
+        :use-chips="tools.isValueNotEmpty(myvalue)"
         stack-label
+        clearable
         :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
         @filter="filterFn"
-        @clear="myvalue = ''"
+        @clear="clear"
         v-bind="$attrs"
-
       >
-        <template v-slot:append>
+        <template
+          v-if="getIcon()"
+          v-slot:prepend
+        >
           <q-icon
-            v-if="myvalue !== ''"
-            class="cursor-pointer"
-            name="clear"
-            @click.stop.prevent="myvalue = ''"
+            size="xs"
+            :name="getIcon()"
           />
         </template>
-        <template v-if="getIcon()" v-slot:prepend>
-          <q-icon size="xs" :name="getIcon()" />
-        </template>
         <template v-slot:no-option>
           <q-item>
-            <q-item-section class="text-grey">
-              Digita il testo da cercare
-            </q-item-section>
+            <q-item-section class="text-grey"> Digita il testo da cercare </q-item-section>
           </q-item>
         </template>
         <template v-slot:option="scope">
@@ -125,16 +122,15 @@
             <q-item-section>
               <q-item-label>
                 {{ tools.getValueByFunzOrVal(scope.opt, optlab) }}
-                </q-item-label
-              >
+              </q-item-label>
             </q-item-section>
           </q-item>
         </template>
-
       </q-select>
     </div>
     <div v-else-if="multiple">
       <q-select
+        ref="selectMultiple"
         :multiple="true"
         :model-value="myarrvalue"
         label-color="primary"
@@ -159,7 +155,10 @@
       >
         <!--options-selected-class="text-deep-blue"-->
 
-        <template v-if="getIcon()" v-slot:prepend>
+        <template
+          v-if="getIcon()"
+          v-slot:prepend
+        >
           <q-icon :name="getIcon()" />
         </template>
         <template v-slot:selected-item="scope">
@@ -188,12 +187,12 @@
         >
           <q-item v-bind="itemProps">
             <q-item-section>
-              <q-item-label>{{
-                tools.getValueByFunzOrVal(opt, optlab)
-              }}</q-item-label>
-              <q-item-label v-if="'hint' in opt" class="hint">{{
-                opt['hint']
-              }}</q-item-label>
+              <q-item-label>{{ tools.getValueByFunzOrVal(opt, optlab) }}</q-item-label>
+              <q-item-label
+                v-if="'hint' in opt"
+                class="hint"
+                >{{ opt['hint'] }}</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
               <q-toggle
@@ -207,6 +206,7 @@
     </div>
     <div v-else>
       <q-select
+        ref="selectGeneric"
         :multiple="false"
         rounded
         outlined
@@ -228,7 +228,10 @@
         v-bind="$attrs"
         :class="myclass ? myclass : 'combowidth'"
       >
-        <template v-if="getIcon()" v-slot:prepend>
+        <template
+          v-if="getIcon()"
+          v-slot:prepend
+        >
           <q-icon :name="getIcon()" />
         </template>
         <template v-slot:option="scope">
@@ -237,12 +240,12 @@
               <q-icon :name="scope.opt.icon ? scope.opt.icon : ''" />
             </q-item-section>
             <q-item-section>
-              <q-item-label>{{
-                tools.getValueByFunzOrVal(scope.opt, optlab)
-              }}</q-item-label>
-              <q-item-label v-if="'hint' in scope.opt" class="hint">{{
-                scope.opt['hint']
-              }}</q-item-label>
+              <q-item-label>{{ tools.getValueByFunzOrVal(scope.opt, optlab) }}</q-item-label>
+              <q-item-label
+                v-if="'hint' in scope.opt"
+                class="hint"
+                >{{ scope.opt['hint'] }}</q-item-label
+              >
             </q-item-section>
           </q-item>
         </template>
@@ -251,8 +254,7 @@
   </div>
 </template>
 
-<script lang="ts" src="./CMySelect.ts">
-</script>
+<script lang="ts" src="./CMySelect.ts"></script>
 
 <style lang="scss" scoped>
 @import './CMySelect.scss';