Merge branch 'dev' into removeId

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "salix-front",
-    "version": "23.52.01",
+    "version": "24.02.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "23.52.01",
+            "version": "24.02.01",
             "dependencies": {
                 "@quasar/cli": "^2.3.0",
                 "@quasar/extras": "^1.16.4",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.00.01",
+    "version": "24.02.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

src/components/NavBar.vue

@@ -24,11 +24,8 @@ const pinnedModulesRef = ref();
 </script>
 
 <template>
-    <QHeader class="bg-dark" color="white" elevated>
+    <QHeader color="white" elevated>
-        <QToolbar
+        <QToolbar class="q-py-sm q-px-md">
-            class="q-py-sm q-px-md"
-            :class="{ 'q-gutter-x-sm': !quasar.platform.is.mobile }"
-        >
             <QBtn @click="stateStore.toggleLeftDrawer()" icon="menu" round dense flat>
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
@@ -108,6 +105,9 @@ const pinnedModulesRef = ref();
 .searchbar {
     width: max-content;
 }
+.q-header {
+    background-color: var(--vn-dark);
+}
 </style>
 <i18n>
 en:

src/components/UserPanel.vue

@@ -1,17 +1,18 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar } from 'quasar';
+import { Dark, Quasar, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
+import { localeEquivalence } from "src/i18n/index";
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
+const quasar = useQuasar();
 
 const userLocale = computed({
     get() {
@@ -20,13 +21,11 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        if (value === 'en') value = 'en-GB';
+        value = localeEquivalence[value] ?? value
 
-        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
-        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
         try {
-            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
+            /* @vite-ignore */
-            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
+            import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
                 Quasar.lang.set(lang.default);
             });
        } catch (error) {
@@ -81,6 +80,14 @@ function logout() {
     session.destroy();
     router.push('/login');
 }
+
+function copyUserToken(){
+    navigator.clipboard.writeText(session.getToken());
+    quasar.notify({
+        type: 'positive',
+        message: t('components.userPanel.copyToken'),
+    });
+}
 </script>
 
 <template>
@@ -122,7 +129,8 @@ function logout() {
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
+                <div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
+            </div>
 
                 <QBtn
                     id="logout"
@@ -143,4 +151,10 @@ function logout() {
 .panel {
     width: 150px;
 }
+
+.copyUserToken {
+   &:hover{
+    cursor: alias;
+   }
+}
 </style>

src/components/common/VnBreadcrumbs.vue

@@ -69,6 +69,10 @@ function getBreadcrumb(param) {
     > div {
         flex-wrap: nowrap;
     }
+    &--last,
+    &__separator {
+        color: var(--vn-label);
+    }
 }
 @media (max-width: $breakpoint-md) {
     .q-breadcrumbs {

src/components/ui/CardSummary.vue

@@ -97,7 +97,7 @@ watch(props, async () => {
             flex: 2;
         }
         > .q-card.vn-three {
-            flex: 3;
+            flex: 4;
         }
         > .q-card.vn-max {
             width: 100%;
@@ -116,17 +116,17 @@ watch(props, async () => {
                 margin-top: 5px;
                 .label {
                     color: var(--vn-label);
-                    width: 10em;
+                    width: 8em;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     margin-right: 10px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
                 }
                 .value {
                     color: var(--vn-text);
-                    width: max-content;
                     overflow: hidden;
-                    white-space: nowrap;
                 }
             }
             .header {

src/components/ui/VnAvatar.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { useSession } from 'src/composables/useSession';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 const $props = defineProps({
     worker: { type: Number, required: true },
     description: { type: String, default: null },
+    clickable: { type: Boolean, default: false },
 });
 const session = useSession();
 const token = session.getToken();
@@ -22,5 +24,6 @@ const token = session.getToken();
                 </p>
             </slot>
         </div>
+        <WorkerDescriptorProxy :v-if="$props.clickable" :id="$props.worker" />
     </div>
 </template>

src/components/ui/VnLv.vue

@@ -5,7 +5,7 @@ import { dashIfEmpty } from 'src/filters';
 const $props = defineProps({
     label: { type: String, default: null },
     value: {
-        type: [String, Boolean],
+        type: [String, Boolean, Number],
         default: null,
     },
     info: { type: String, default: null },
@@ -13,6 +13,13 @@ const $props = defineProps({
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 </script>
+<style scoped>
+.label,
+.value {
+    white-space: pre-line;
+    word-wrap: break-word;
+}
+</style>
 <template>
     <div class="vn-label-value">
         <div v-if="$props.label || $slots.label" class="label">

src/components/ui/VnSms.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { onBeforeMount } from 'vue';
+import { date } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnAvatar from '../ui/VnAvatar.vue';
+
+const $props = defineProps({
+    url: { type: String, default: null },
+    where: { type: Object, default: () => {} },
+});
+
+const filter = {
+    fields: ['smsFk'],
+    include: {
+        relation: 'sms',
+        scope: {
+            fields: [
+                'senderFk',
+                'sender',
+                'destination',
+                'message',
+                'statusCode',
+                'status',
+                'created',
+            ],
+            include: {
+                relation: 'sender',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        },
+    },
+};
+
+onBeforeMount(() => (filter.where = $props.where));
+
+function formatNumber(number) {
+    if (number.length <= 10) return number;
+    return number.slice(0, 4) + ' ' + number.slice(4);
+}
+</script>
+
+<template>
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                :data-key="$props.url"
+                :url="$props.url"
+                :filter="filter"
+                order="smsFk DESC"
+                :offset="100"
+                :limit="5"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard
+                        flat
+                        bordered
+                        class="card q-pa-md q-mb-sm smsCard"
+                        v-for="row of rows"
+                        :key="row.smsFk"
+                    >
+                        <QItem>
+                            <QItemSection side top>
+                                <VnAvatar
+                                    class="cursor-pointer"
+                                    :worker="row.sms.senderFk"
+                                    :title="row.sms.sender.name"
+                                    :clickable="true"
+                                />
+                            </QItemSection>
+                            <QSeparator />
+                            <QItemSection>
+                                <QItemLabel caption>{{
+                                    formatNumber(row.sms.destination)
+                                }}</QItemLabel>
+                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QItemLabel caption>{{
+                                    date.formatDate(
+                                        row.sms.created,
+                                        'YYYY-MM-DD HH:mm:ss'
+                                    )
+                                }}</QItemLabel>
+                                <QItemLabel class="row center">
+                                    <QChip
+                                        :color="
+                                            row.sms.status == 'OK'
+                                                ? 'positive'
+                                                : 'negative'
+                                        "
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.q-item__section--side {
+    align-items: center;
+}
+</style>

src/components/ui/VnSubToolbar.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+const stateStore = useStateStore();
+
+onMounted(() => {
+    stateStore.toggleSubToolbar();
+});
+
+onUnmounted(() => {
+    stateStore.toggleSubToolbar();
+});
+</script>
+
+<template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+</template>

src/composables/useArrayData.js

@@ -155,7 +155,9 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
+                    delete store.filter.where[
+                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
+                    ];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

src/composables/useUserConfig.js

@@ -16,7 +16,7 @@ export function useUserConfig() {
 
             return data;
         } catch (error) {
-            notify('globals.errors.userConfig', 'negative');
+            notify('errors.userConfig', 'negative');
             console.error('Error fetching user config:', error);
         }
     }

src/css/app.scss

@@ -17,9 +17,9 @@ a {
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
-    color: $input-text-color !important;
+    color:  var(--vn-text) ;
     font-family: $typography-font-family;
-    -webkit-text-fill-color: $input-text-color !important;
+    -webkit-text-fill-color: var(--vn-text) ;
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }

src/i18n/en/index.js

@@ -114,6 +114,7 @@ export default {
             createCustomer: 'Create customer',
             summary: 'Summary',
             basicData: 'Basic Data',
+            sms: 'Sms',
         },
         list: {
             phone: 'Phone',
@@ -741,6 +742,7 @@ export default {
     components: {
         topbar: {},
         userPanel: {
+            copyToken: 'Token copied to clipboard',
             settings: 'Settings',
             logOut: 'Log Out',
         },

src/i18n/es/index.js

@@ -113,6 +113,7 @@ export default {
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
             summary: 'Resumen',
+            sms: 'Sms',
         },
         list: {
             phone: 'Teléfono',
@@ -740,6 +741,7 @@ export default {
     components: {
         topbar: {},
         userPanel: {
+            copyToken: 'Token copiado al portapapeles',
             settings: 'Configuración',
             logOut: 'Cerrar sesión',
         },

src/i18n/index.js

@@ -1,6 +1,8 @@
 import en from './en';
 import es from './es';
-
+export const localeEquivalence = {
+     'en':'en-GB'
+}
 export default {
     en: en,
     es: es,

src/pages/Claim/Card/ClaimAction.vue

@@ -127,11 +127,14 @@ async function updateDestination(claimDestinationFk, row, options = {}) {
 }
 
 async function regularizeClaim() {
-    const query = `Claims/${claimId}/regularizeClaim`;
+    await axios.post(`Claims/${claimId}/regularizeClaim`);
-
-    await axios.post(query);
-    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
     await claimRef.value.fetch();
+    await arrayData.fetch({ append: false });
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
+    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
         quasar
             .dialog({
                 component: VnConfirm,
@@ -141,29 +144,19 @@ async function regularizeClaim() {
                 },
             })
             .onOk(async () => await onUpdateGreugeAccept());
-    } else {
-        quasar.notify({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
     }
-    await arrayData.fetch({ append: false });
-}
-
-async function updateGreuge(greuges) {
-    const { data } = await axios.post(`Greuges`, greuges);
-    quasar.notify({
-        message: t('globals.dataSaved'),
-        type: 'positive',
-    });
-    return data;
 }
 
 async function onUpdateGreugeAccept() {
-    const greugeTypeFreightId = await getGreugeTypeId();
+    const greugeTypeFreightId = (
-    const freightPickUpPrice = await getGreugeConfig();
+        await axios.get(`GreugeTypes/findOne`, {
+            filter: { where: { code: 'freightPickUp' } },
+        })
+    ).data.id;
+    const freightPickUpPrice = (await axios.get(`GreugeConfigs/findOne`)).data
+        .freightPickUpPrice;
 
-    await updateGreuge({
+    await axios.post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
         amount: freightPickUpPrice,
@@ -176,19 +169,6 @@ async function onUpdateGreugeAccept() {
     });
 }
 
-async function getGreugeTypeId() {
-    const params = { filter: { where: { code: 'freightPickUp' } } };
-    const query = `GreugeTypes/findOne`;
-    const { data } = await axios.get(query, { params });
-    return data.id;
-}
-
-async function getGreugeConfig() {
-    const query = `GreugeConfigs/findOne`;
-    const { data } = await axios.get(query);
-    return data.freightPickUpPrice;
-}
-
 async function save(data) {
     const query = `Claims/${claimId}/updateClaimAction`;
     await axios.patch(query, data);

src/pages/Claim/Card/ClaimCard.vue

@@ -7,8 +7,8 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -41,11 +41,7 @@ const entityId = computed(() => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Claim/Card/ClaimLines.vue

@@ -43,17 +43,20 @@ async function onFetchClaim(data) {
     fetchMana();
 }
 
-const amount = ref(0);
+const amount = ref();
-const amountClaimed = ref(0);
+const amountClaimed = ref();
 async function onFetch(rows) {
+    amount.value = 0;
+    amountClaimed.value = 0;
     if (!rows || !rows.length) return;
+
     amount.value = rows.reduce(
-        (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
+        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
         0
     );
 
     amountClaimed.value = rows.reduce(
-        (acumulator, line) => acumulator + line.sale.price * line.quantity,
+        (accumulator, line) => accumulator + line.sale.price * line.quantity,
         0
     );
 }
@@ -189,6 +192,7 @@ function showImportDialog() {
                 save-url="ClaimBeginnings/crud"
                 :filter="linesFilter"
                 @on-fetch="onFetch"
+                @save-changes="onFetch"
                 v-model:selected="selected"
                 :default-save="false"
                 :default-reset="false"

src/pages/Claim/ClaimList.vue

@@ -38,15 +38,6 @@ function viewSummary(id) {
         },
     });
 }
-
-function viewDescriptor(id) {
-    quasar.dialog({
-        component: CustomerDescriptorProxy,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -84,7 +75,7 @@ function viewDescriptor(id) {
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
-                order="id DESC"
+                order="claimStateFk"
                 auto-load
             >
                 <template #body="{ rows }">

src/pages/Customer/Card/CustomerSms.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+const route = useRoute();
+const id = route.params.id;
+
+const where = {
+    clientFk: id,
+    ticketFk: null,
+};
+</script>
+<template>
+    <div class="column items-center">
+        <VnSms url="clientSms" :where="where" />
+    </div>
+</template>

src/pages/InvoiceIn/Card/InvoiceInLog.vue

@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="InvoiceIn" />
+</template>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -203,7 +203,7 @@ function getLink(param) {
         @on-fetch="(data) => setData(data)"
     >
         <template #header="{ entity: invoiceIn }">
-            <div>{{ invoiceIn.id }} - {{ invoiceIn.supplier.name }}</div>
+            <div>{{ invoiceIn.id }} - {{ invoiceIn.supplier?.name }}</div>
         </template>
         <template #body="{ entity: invoiceIn }">
             <!--Basic Data-->
@@ -216,7 +216,7 @@ function getLink(param) {
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.supplier')"
-                    :value="invoiceIn.supplier.name"
+                    :value="invoiceIn.supplier?.name"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.supplierRef')"
@@ -224,7 +224,7 @@ function getLink(param) {
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.currency')"
-                    :value="invoiceIn.currency.code"
+                    :value="invoiceIn.currency?.code"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.docNumber')"
@@ -265,7 +265,7 @@ function getLink(param) {
                 </QCardSection>
                 <VnLv
                     :label="t('invoiceIn.summary.sage')"
-                    :value="invoiceIn.sageWithholding.withholding"
+                    :value="invoiceIn.sageWithholding?.withholding"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.vat')"
@@ -273,7 +273,7 @@ function getLink(param) {
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.company')"
-                    :value="invoiceIn.company.code"
+                    :value="invoiceIn.company?.code"
                 />
                 <VnLv
                     :label="t('invoiceIn.summary.booked')"

src/pages/InvoiceIn/InvoiceInList.vue

@@ -84,9 +84,9 @@ function viewSummary(id) {
                         :key="row.id"
                         :title="row.supplierRef"
                         @click="navigate(row.id)"
+                        :id="row.id"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('invoiceIn.list.supplierRef')"
                                 :value="row.supplierRef"
@@ -112,42 +112,34 @@ function viewSummary(id) {
                                 :label="t('invoiceIn.list.amount')"
                                 :value="toCurrency(row.amount)"
                             />
-                            <VnLv :label="t('invoiceIn.list.isBooked')">
+                            <VnLv
-                                <template #value>
+                                :label="t('invoiceIn.list.isBooked')"
-                                    <QCheckbox
+                                :value="!!row.isBooked"
-                                        class="no-pointer-events"
-                                        v-model="row.isBooked"
-                                        size="xs"
-                                        :true-value="1"
-                                        :false-value="0"
                             />
                         </template>
-                            </VnLv>
-                        </template>
                         <template #actions>
                             <QBtn
-                                flat
+                                :label="t('components.smartCard.openCard')"
-                                icon="arrow_circle_right"
                                 @click.stop="navigate(row.id)"
-                            >
+                                class="bg-vn-dark"
-                                <QTooltip>
+                                outline
-                                    {{ t('components.smartCard.openCard') }}
+                                type="reset"
-                                </QTooltip>
+                            />
-                            </QBtn>
+
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
                             <QBtn
-                                flat
+                                :label="t('components.smartCard.openSummary')"
-                                icon="cloud_download"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                type="submit"
+                                class="q-mt-sm"
+                            />
+                            <QBtn
+                                :label="t('Download')"
+                                class="q-mt-sm"
                                 @click.stop="downloadFile(row.dmsFk)"
-                            >
+                                type="submit"
-                                <QTooltip>
+                                color="primary"
-                                    {{ t('components.smartCard.downloadFile') }}
+                            />
-                                </QTooltip>
-                            </QBtn>
                         </template>
                     </CardList>
                 </template>
@@ -176,4 +168,5 @@ function viewSummary(id) {
 es:
     Search invoice: Buscar factura emitida
     You can search by invoice reference: Puedes buscar por referencia de la factura
+    Download: Descargar
 </i18n>

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,11 +27,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -174,7 +174,23 @@ const columns = ref([
 ]);
 
 const downloadCSV = async () => {
-    await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+    const params = filter.value;
+
+    const filterParams = {
+        limit: 20,
+        where: {
+            and: [],
+        },
+    };
+    for (const param in params) {
+        if (params[param]) filterParams.where.and.push({ [param]: params[param] });
+    }
+
+    await invoiceOutGlobalStore.getNegativeBasesCsv(
+        dateRange.from,
+        dateRange.to,
+        JSON.stringify(filterParams)
+    );
 };
 
 const search = async () => {
@@ -187,13 +203,13 @@ const search = async () => {
         }
     });
     const searchFilter = {
-        limit: 20
+        limit: 20,
-    }
+    };
 
     if (and.length) {
         searchFilter.where = {
-            and
+            and,
-        }
+        };
     }
 
     const params = {
@@ -230,9 +246,7 @@ const selectWorkerId = (id) => {
     selectedWorkerId.value = id;
 };
 
-onMounted(async () => {
+onMounted(() => refresh());
-    refresh();
-});
 </script>
 
 <template>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -15,7 +16,7 @@ const defaultInitialData = {
     priority: 0,
     code: null,
     isRecyclable: false,
-}
+};
 
 const parkingFilter = { fields: ['id', 'code'] };
 const parkingList = ref([]);
@@ -58,11 +59,7 @@ const shelvingFilter = {
 };
 </script>
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
+    <VnSubToolbar />
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
     <FetchData
         url="Parkings"
         :filter="parkingFilter"

src/pages/Ticket/Card/TicketSms.vue

@@ -1,118 +1,16 @@
 <script setup>
-import { date } from 'quasar';
+import { useRoute } from 'vue-router';
-import { computed } from 'vue';
+import VnSms from 'src/components/ui/VnSms.vue';
-import { useRouter } from 'vue-router';
 
-import { useSession } from 'src/composables/useSession';
+const route = useRoute();
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
+const id = route.params.id;
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 
-const router = useRouter();
+const where = {
-const session = useSession();
+    ticketFk: id,
-const token = session.getToken();
-
-const entityId = computed(function () {
-    return router.currentRoute.value.params.id;
-});
-
-const filter = {
-    fields: ['ticketFk', 'smsFk'],
-    include: {
-        relation: 'sms',
-        scope: {
-            fields: [
-                'senderFk',
-                'sender',
-                'destination',
-                'message',
-                'statusCode',
-                'status',
-                'created',
-            ],
-            include: {
-                relation: 'sender',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-        },
-    },
-    where: {
-        ticketFk: entityId,
-    },
 };
-
-function formatNumer(number) {
-    if (number.length <= 10) return number;
-    return number.slice(0, 4) + ' ' + number.slice(4);
-}
 </script>
-
 <template>
     <div class="column items-center">
-        <div class="list">
+        <VnSms url="clientSms" :where="where" />
-            <VnPaginate
-                data-key="TicketSms"
-                url="TicketSms"
-                :filter="filter"
-                order="smsFk DESC"
-                :offset="100"
-                :limit="5"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QCard
-                        flat
-                        bordered
-                        class="card q-pa-md"
-                        v-for="row of rows"
-                        :key="row.smsFk"
-                    >
-                        <QItem>
-                            <QItmSection top avatar>
-                                <QItemLabel class="column items-center">
-                                    <QAvatar>
-                                        <QImg
-                                            :src="`/api/Images/user/160x160/${row.sms.senderFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </QAvatar>
-                                    <span class="link">
-                                        {{ row.sms.sender.name }}
-                                        <WorkerDescriptorProxy :id="row.sms.senderFk" />
-                                    </span>
-                                </QItemLabel>
-                            </QItmSection>
-                            <QSeparator spaced inset="item" />
-                            <QItemSection>
-                                <QItemLabel caption>{{
-                                    formatNumer(row.sms.destination)
-                                }}</QItemLabel>
-                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
-                            </QItemSection>
-                            <QItemSection side top>
-                                <QItemLabel caption>{{
-                                    date.formatDate(
-                                        row.sms.created,
-                                        'YYYY-MM-DD HH:mm:ss'
-                                    )
-                                }}</QItemLabel>
-                                <QItemLabel>
-                                    <QChip
-                                        :color="
-                                            row.sms.status == 'OK'
-                                                ? 'positive'
-                                                : 'negative'
-                                        "
-                                    >
-                                        {{ row.sms.status }}
-                                    </QChip>
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QCard>
-                </template>
-            </VnPaginate>
-        </div>
     </div>
 </template>

src/pages/Ticket/Card/TicketSummary.vue

@@ -49,7 +49,7 @@ async function setData(data) {
 function formattedAddress() {
     if (!ticket.value) return '';
 
-    const address = this.ticket.address;
+    const address = ticket.value.address;
     const postcode = address.postalCode;
     const province = address.province ? `(${address.province.name})` : '';
 
@@ -58,7 +58,7 @@ function formattedAddress() {
 
 function isEditable() {
     try {
-        return !this.ticket.ticketState.state.alertLevel;
+        return !ticket.value.ticketState.state.alertLevel;
     } catch (e) {
         console.error(e);
     }
@@ -67,10 +67,10 @@ function isEditable() {
 }
 
 async function changeState(value) {
-    if (!this.ticket.id) return;
+    if (!ticket.value.id) return;
 
     const formData = {
-        ticketFk: this.ticket.id,
+        ticketFk: ticket.value.id,
         code: value,
     };
 

src/router/modules/customer.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'CustomerMain' },
     menus: {
         main: ['CustomerList', 'CustomerPayments'],
-        card: ['CustomerBasicData'],
+        card: ['CustomerBasicData', 'CustomerSms'],
     },
     children: [
         {
@@ -66,6 +66,15 @@ export default {
                     component: () =>
                         import('src/pages/Customer/Card/CustomerBasicData.vue'),
                 },
+                {
+                    path: 'sms',
+                    name: 'CustomerSms',
+                    meta: {
+                        title: 'sms',
+                        icon: 'sms',
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
+                },
             ],
         },
     ],

src/router/modules/invoiceIn.js

@@ -16,6 +16,7 @@ export default {
             'InvoiceInVat',
             'InvoiceInDueDay',
             'InvoiceInIntrastat',
+            'InvoiceInLog',
         ],
     },
     children: [
@@ -92,6 +93,15 @@ export default {
                     component: () =>
                         import('src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue'),
                 },
+                {
+                    name: 'InvoiceInLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/InvoiceIn/Card/InvoiceInLog.vue'),
+                },
             ],
         },
     ],

src/stores/invoiceOutGlobal.js

@@ -219,9 +219,9 @@ export const useInvoiceOutGlobalStore = defineStore({
             throw err;
         },
 
-        async getNegativeBasesCsv(from, to) {
+        async getNegativeBasesCsv(from, to, filter = {}) {
             try {
-                const params = { from: from, to: to };
+                const params = { from: from, to: to, filter };
                 const CSVResponse = await invoiceOutService.getNegativeBasesCsv(params);
 
                 if (CSVResponse.data && CSVResponse.data.error) throw new Error();

src/stores/useNavigationStore.js

@@ -11,13 +11,13 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'claim',
         'ticket',
         'invoiceOut',
+        'invoiceIn',
         'worker',
         'shelving',
         'wagon',
         'route',
         'supplier',
         'travel',
-        'invoiceIn',
     ];
     const pinnedModules = ref([]);
     const role = useRole();

src/stores/useStateStore.js

@@ -5,6 +5,7 @@ export const useStateStore = defineStore('stateStore', () => {
     const isMounted = ref(false);
     const leftDrawer = ref(false);
     const rightDrawer = ref(false);
+    const subToolbar = ref(false);
 
     function toggleLeftDrawer() {
         leftDrawer.value = !leftDrawer.value;
@@ -14,6 +15,10 @@ export const useStateStore = defineStore('stateStore', () => {
         rightDrawer.value = !rightDrawer.value;
     }
 
+    function toggleSubToolbar() {
+        subToolbar.value = !subToolbar.value;
+    }
+
     function setMounted() {
         isMounted.value = true;
     }
@@ -31,10 +36,7 @@ export const useStateStore = defineStore('stateStore', () => {
     }
 
     function isSubToolbarShown() {
-        return (
+        return subToolbar.value;
-            !!document.querySelector('#st-data') &&
-            !!document.querySelector('#st-actions')
-        );
     }
 
     return {
@@ -47,5 +49,6 @@ export const useStateStore = defineStore('stateStore', () => {
         isLeftDrawerShown,
         isRightDrawerShown,
         isSubToolbarShown,
+        toggleSubToolbar,
     };
 });

test/cypress/integration/invoiceIn/invoiceInList.spec.js

@@ -1,8 +1,8 @@
 /// <reference types="cypress" />
 describe('InvoiceInList', () => {
     const firstCard = '.q-card:nth-child(1)';
-    const firstId =
+    const firstChipId =
-        '.q-card:nth-child(1) .list-items > .vn-label-value:first-child > .value > span';
+        ':nth-child(1) > :nth-child(1) > .justify-between > .flex > .q-chip > .q-chip__content';
     const firstDetailBtn = '.q-card:nth-child(1) .q-btn:nth-child(2)';
     const summaryHeaders = '.summaryBody .header';
 
@@ -12,9 +12,10 @@ describe('InvoiceInList', () => {
     });
 
     it('should redirect on clicking a invoice', () => {
-        cy.get(firstId)
+        cy.get(firstChipId)
             .invoke('text')
-            .then((id) => {
+            .then((content) => {
+                const id = content.substring(4);
                 cy.get(firstCard).click();
                 cy.url().should('include', `/invoice-in/${id}/summary`);
             });

test/vitest/__tests__/components/common/VnSms.spec.js

@@ -0,0 +1,25 @@
+import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+describe('VnSms', () => {
+    let vm;
+
+    beforeAll(() => {
+        vm = createWrapper(VnSms, {
+            global: {
+                stubs: ['VnPaginate'],
+                mocks: {},
+            },
+        }).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should format number correctly', () => {
+        const formattedNumber = vm.formatNumber('123456789012');
+        expect(formattedNumber).toBe('1234 56789012');
+    });
+});