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

2024-07-15 10:42:12 +02:00 · 2024-07-15 10:42:12 +02:00 · 9a115dac3c
parent 6007e0c7cc fea9c8b7fb
commit 9a115dac3c
14 changed files with 194 additions and 120 deletions
--- a/src/components/CrudModel.vue
+++ b/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"
--- a/src/components/FormModel.vue
+++ b/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,70 +270,72 @@ 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
-                    :label="tMobile(defaultButtons.reset.label)"
-                    :color="defaultButtons.reset.color"
-                    :icon="defaultButtons.reset.icon"
-                    flat
-                    @click="reset"
-                    :disable="!hasChanges"
-                    :title="t(defaultButtons.reset.label)"
-                />
-                <QBtnDropdown
-                    v-if="$props.goTo"
-                    @click="saveAndGo"
-                    :label="tMobile('globals.saveAndContinue')"
-                    :title="t('globals.saveAndContinue')"
-                    :disable="!hasChanges"
-                    color="primary"
-                    icon="save"
-                    split
-                >
-                    <QList>
-                        <QItem
-                            clickable
-                            v-close-popup
-                            @click="save"
-                            :title="t('globals.save')"
-                        >
-                            <QItemSection>
-                                <QItemLabel>
-                                    <QIcon
-                                        name="save"
-                                        color="white"
-                                        class="q-mr-sm"
-                                        size="sm"
-                                    />
-                                    {{ t('globals.save').toUpperCase() }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </QBtnDropdown>
-                <QBtn
-                    v-else
-                    :label="tMobile('globals.save')"
-                    color="primary"
-                    icon="save"
-                    @click="save"
-                    :disable="!hasChanges"
-                    :title="t(defaultButtons.save.label)"
-                />
-            </QBtnGroup>
-        </div>
+        <QBtnGroup push class="q-gutter-x-sm">
+            <slot name="moreActions" />
+            <QBtn
+                :label="tMobile(defaultButtons.reset.label)"
+                :color="defaultButtons.reset.color"
+                :icon="defaultButtons.reset.icon"
+                flat
+                @click="reset"
+                :disable="!hasChanges"
+                :title="t(defaultButtons.reset.label)"
+            />
+            <QBtnDropdown
+                v-if="$props.goTo"
+                @click="saveAndGo"
+                :label="tMobile('globals.saveAndContinue')"
+                :title="t('globals.saveAndContinue')"
+                :disable="!hasChanges"
+                color="primary"
+                icon="save"
+                split
+            >
+                <QList>
+                    <QItem
+                        clickable
+                        v-close-popup
+                        @click="save"
+                        :title="t('globals.save')"
+                    >
+                        <QItemSection>
+                            <QItemLabel>
+                                <QIcon
+                                    name="save"
+                                    color="white"
+                                    class="q-mr-sm"
+                                    size="sm"
+                                />
+                                {{ t('globals.save').toUpperCase() }}
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </QList>
+            </QBtnDropdown>
+            <QBtn
+                v-else
+                :label="tMobile('globals.save')"
+                color="primary"
+                icon="save"
+                @click="save"
+                :disable="!hasChanges"
+                :title="t(defaultButtons.save.label)"
+            />
+        </QBtnGroup>
    </Teleport>
-    
+
    <QInnerLoading
        :showing="isLoading"
        :label="t('globals.pleaseWait')"
--- a/src/components/FormModelPopup.vue
+++ b/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,
--- a/src/components/VnTable/VnColumn.vue
+++ b/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),
--- a/src/components/VnTable/VnOrder.vue
+++ b/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"
--- a/src/components/VnTable/VnTable.vue
+++ b/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">
--- a/src/components/common/VnBreadcrumbs.vue
+++ b/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());

--- a/src/components/common/VnSelect.vue
+++ b/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>
--- a/src/components/common/VnSelectCache.vue
+++ b/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>
--- a/src/components/ui/CatalogItem.vue
+++ b/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;
--- a/src/composables/useArrayData.js
+++ b/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);
--- a/src/css/app.scss
+++ b/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;
+        }
+    }
+}
--- a/src/pages/Customer/CustomerList.vue
+++ b/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,
        },
--- a/src/stores/useNavigationStore.js
+++ b/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();