Merge branch '7129-finishMigration' of https://gitea.verdnatura.es/verdnatura/salix-front into 7129-finishMigration

src/components/CrudModel.vue

@@ -98,19 +98,17 @@ defineExpose({
 });
 
 async function fetch(data) {
-    if (data && Array.isArray(data)) {
-        let $index = 0;
-        data.map((d) => (d.$index = $index++));
-    }
-
     resetData(data);
-
     emit('onFetch', data);
     return data;
 }
 
 function resetData(data) {
     if (!data) return;
+    if (data && Array.isArray(data)) {
+        let $index = 0;
+        data.map((d) => (d.$index = $index++));
+    }
     originalData.value = JSON.parse(JSON.stringify(data));
     formData.value = JSON.parse(JSON.stringify(data));
 
@@ -299,7 +297,7 @@ watch(formUrl, async () => {
         :url="url"
         :limit="limit"
         @on-fetch="fetch"
-        @on-change="resetData"
+        @on-change="fetch"
         :skeleton="false"
         ref="vnPaginateRef"
         v-bind="$attrs"

src/components/FormModel.vue

@@ -90,7 +90,7 @@ const $props = defineProps({
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
-    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`,
+    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
 ).value;
 const componentIsRendered = ref(false);
 const arrayData = useArrayData(modelValue);
@@ -137,7 +137,7 @@ onMounted(async () => {
                     JSON.stringify(newVal) !== JSON.stringify(originalData.value);
                 isResetting.value = false;
             },
-            { deep: true },
+            { deep: true }
         );
     }
 });
@@ -145,7 +145,7 @@ onMounted(async () => {
 if (!$props.url)
     watch(
         () => arrayData.store.data,
-        (val) => updateAndEmit('onFetch', val),
+        (val) => updateAndEmit('onFetch', val)
     );
 
 watch(formUrl, async () => {
@@ -239,7 +239,7 @@ function filter(value, update, filterOptions) {
         (ref) => {
             ref.setOptionIndex(-1);
             ref.moveOptionSelection(1, true);
-        },
+        }
     );
 }
 
@@ -261,13 +261,7 @@ defineExpose({
 </script>
 <template>
     <div class="column items-center full-width">
-        <QForm
-            
-            @submit="save"
-            @reset="reset"
-            class="q-pa-md"
-            id="formModel"
-        >
+        <QForm @submit="save" @reset="reset" class="q-pa-md" id="formModel">
             <QCard>
                 <slot
                     v-if="formData"
@@ -276,15 +270,18 @@ defineExpose({
                     :validate="validate"
                     :filter="filter"
                 />
-                <SkeletonForm v-else/>
+                <SkeletonForm v-else />
             </QCard>
         </QForm>
     </div>
     <Teleport
         to="#st-actions"
-        v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+        v-if="
+            $props.defaultActions &&
+            stateStore?.isSubToolbarShown() &&
+            componentIsRendered
+        "
     >
-        <div v-if="$props.defaultActions">
         <QBtnGroup push class="q-gutter-x-sm">
             <slot name="moreActions" />
             <QBtn
@@ -337,7 +334,6 @@ defineExpose({
                 :title="t(defaultButtons.save.label)"
             />
         </QBtnGroup>
-        </div>
     </Teleport>
 
     <QInnerLoading

src/components/FormModelPopup.vue

@@ -23,16 +23,12 @@ const formModelRef = ref(null);
 const closeButton = ref(null);
 
 const onDataSaved = (formData, requestResponse) => {
-    closeForm();
+    if (closeButton.value) closeButton.value.click();
     emit('onDataSaved', formData, requestResponse);
 };
 
 const isLoading = computed(() => formModelRef.value?.isLoading);
 
-const closeForm = async () => {
-    if (closeButton.value) closeButton.value.click();
-};
-
 defineExpose({
     isLoading,
     onDataSaved,

src/components/VnTable/VnColumn.vue

@@ -5,6 +5,7 @@ import { dashIfEmpty } from 'src/filters';
 
 /* basic input */
 import VnSelect from 'components/common/VnSelect.vue';
+import VnSelectCache from 'components/common/VnSelectCache.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
@@ -42,6 +43,17 @@ const $props = defineProps({
     },
 });
 
+const defaultSelect = {
+    attrs: {
+        row: $props.row,
+        disable: !$props.isEditable,
+        class: 'fit',
+    },
+    forceAttrs: {
+        label: $props.showLabel && $props.column.label,
+    },
+};
+
 const defaultComponents = {
     input: {
         component: markRaw(VnInput),
@@ -104,14 +116,12 @@ const defaultComponents = {
         },
     },
     select: {
+        component: markRaw(VnSelectCache),
+        ...defaultSelect,
+    },
+    rawSelect: {
         component: markRaw(VnSelect),
-        attrs: {
-            disable: !$props.isEditable,
-            class: 'fit',
-        },
-        forceAttrs: {
-            label: $props.showLabel && $props.column.label,
-        },
+        ...defaultSelect,
     },
     icon: {
         component: markRaw(QIcon),

src/components/VnTable/VnOrder.vue

@@ -53,7 +53,7 @@ defineExpose({ orderBy });
         @click="orderBy(name, model?.direction)"
         class="row items-center no-wrap cursor-pointer"
     >
-        <span>{{ label }}</span>
+        <span :title="label">{{ label }}</span>
         <QChip
             v-if="name"
             :label="!vertical && model?.index"
@@ -69,8 +69,9 @@ defineExpose({ orderBy });
                 model?.index ? 'color-vn-text' : 'bg-transparent',
                 vertical ? 'q-px-none' : '',
             ]"
-            class="no-box-shadow q-mr-lg"
+            class="no-box-shadow"
             :clickable="true"
+            style="min-width: 40px"
         >
             <div
                 class="column flex-center"

src/components/VnTable/VnTable.vue

@@ -351,11 +351,7 @@ defineExpose({
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh
-                            v-if="col.visible ?? true"
-                            auto-width
-                            style="min-width: 100px"
-                        >
+                        <QTh v-if="col.visible ?? true" auto-width>
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
@@ -404,7 +400,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="getColAlign(col)"
+                            :class="[getColAlign(col), col.class, col.columnField?.class]"
                             v-if="col.visible ?? true"
                         >
                             <slot :name="`column-${col.name}`" :col="col" :row="row">

src/components/common/VnBreadcrumbs.vue

@@ -18,7 +18,7 @@ watchEffect(() => {
         (matched) => Object.keys(matched.meta).length
     );
     breadcrumbs.value.length = 0;
-
+    if (!matched.value[0]) return;
     if (matched.value[0].name != 'Dashboard') {
         root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());
 

src/components/common/VnSelect.vue

@@ -75,6 +75,7 @@ const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
 const dataRef = ref();
+const lastVal = ref();
 
 const value = computed({
     get() {
@@ -85,14 +86,31 @@ const value = computed({
     },
 });
 
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+watch(modelValue, (newValue) => {
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        fetchFilter(newValue);
+});
+
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.url && $props.modelValue && !findKeyInOptions())
+        fetchFilter($props.modelValue);
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+});
+
+function findKeyInOptions() {
+    if (!$props.options) return;
+    return filter($props.modelValue, $props.options)?.length;
+}
+
 function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-onMounted(() => {
-    setOptions(options.value);
-    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
-});
 
 function filter(val, options) {
     const search = val.toString().toLowerCase();
@@ -125,15 +143,21 @@ async function fetchFilter(val) {
     const defaultWhere = $props.useLike
         ? { [key]: { like: `%${val}%` } }
         : { [key]: val };
-    const where = { ...defaultWhere, ...$props.where };
+    const where = { ...(val ? defaultWhere : {}), ...$props.where };
     const fetchOptions = { where, order: sortBy, limit };
     if (fields) fetchOptions.fields = fields;
     return dataRef.value.fetch(fetchOptions);
 }
 
 async function filterHandler(val, update) {
-    if (!$props.defaultFilter) return update();
+    if (!val && lastVal.value === val) {
+        lastVal.value = val;
+        return update();
+    }
+    lastVal.value = val;
     let newOptions;
+
+    if (!$props.defaultFilter) return update();
     if ($props.url) {
         newOptions = await fetchFilter(val);
     } else newOptions = filter(val, myOptionsOriginal.value);
@@ -149,19 +173,6 @@ async function filterHandler(val, update) {
         }
     );
 }
-
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
-watch(modelValue, (newValue) => {
-    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
-        fetchFilter(newValue);
-});
-
-onMounted(async () => {
-    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-});
 </script>
 
 <template>

src/components/common/VnSelectCache.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref, onBeforeMount, useAttrs } from 'vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const $props = defineProps({
+    row: {
+        type: [Object],
+        default: null,
+    },
+    find: {
+        type: String,
+        default: null,
+    },
+});
+const options = ref([]);
+onBeforeMount(async () => {
+    const { url } = useAttrs();
+    const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
+    if (findBy) options.value = [$props.row[findBy]];
+});
+</script>
+
+<template>
+    <VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
+</template>

src/components/ui/CatalogItem.vue

@@ -52,6 +52,10 @@ const dialog = ref(null);
                         :value="item?.[`value${index + 4}`]"
                     />
                 </template>
+                <div v-if="item.minQuantity" class="min-quantity">
+                    <QIcon name="production_quantity_limits" size="xs" />
+                    {{ item.minQuantity }}
+                </div>
                 <div class="footer">
                     <div class="price">
                         <p v-if="isCatalog">
@@ -133,6 +137,11 @@ const dialog = ref(null);
     }
 }
 
+.min-quantity {
+    text-align: right;
+    color: $negative !important;
+}
+
 .footer {
     .price {
         overflow: hidden;

src/composables/useArrayData.js

@@ -178,7 +178,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     async function addOrder(field, direction = 'ASC') {
         const newOrder = field + ' ' + direction;
-        let order = store.order ?? [];
+        let order = store.order || [];
         if (typeof order == 'string') order = [order];
 
         let index = order.findIndex((o) => o.split(' ')[0] === field);

src/css/app.scss

@@ -231,3 +231,26 @@ input::-webkit-inner-spin-button {
 *::-webkit-scrollbar-track {
     background: transparent;
 }
+
+.q-table {
+    thead,
+    tbody {
+        th {
+            .q-select {
+                max-width: 120px;
+            }
+        }
+        td {
+            padding: 1px 10px 1px 10px;
+            max-width: 100px;
+            div span {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+        .expand {
+            max-width: 400px;
+        }
+    }
+}

src/pages/Customer/CustomerList.vue

@@ -42,6 +42,9 @@ const columns = computed(() => [
         name: 'name',
         isTitle: true,
         create: true,
+        columnField: {
+            class: 'expand',
+        },
     },
     {
         align: 'left',
@@ -49,6 +52,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.socialName'),
         isTitle: true,
         create: true,
+        columnField: {
+            class: 'expand',
+        },
     },
     {
         align: 'left',
@@ -78,8 +84,8 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
-        component: 'number',
         columnFilter: {
+            component: 'number',
             inWhere: true,
         },
     },
@@ -87,8 +93,8 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
-        component: 'number',
         columnFilter: {
+            component: 'number',
             inWhere: true,
         },
     },
@@ -130,6 +136,9 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnField: {
+            class: 'expand',
+        },
     },
     {
         align: 'left',
@@ -179,8 +188,8 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.created'),
         name: 'created',
         format: ({ created }) => toDate(created),
-        component: 'date',
         columnFilter: {
+            component: 'date',
             alias: 'c',
             inWhere: true,
         },

src/stores/useNavigationStore.js

@@ -21,9 +21,9 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'route',
         'ticket',
         'worker',
+        'account',
         'wagon',
         'zone',
-        'account',
     ];
     const pinnedModules = ref([]);
     const role = useRole();