Merge pull request 'feature/ApplyFilterSectionToEntryList' (#76) from feature/ApplyFilterSectionToEntryList into dev

Reviewed-on: hyervoni/salix-front-mindshore#76

src/css/app.scss

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

src/i18n/es/index.js

@@ -339,7 +339,7 @@ export default {
             description: 'Descripción',
         },
         descriptor: {
-            agency: 'Agency',
+            agency: 'Agencia',
             landed: 'F. entrega',
             warehouseOut: 'Alm. salida',
         },

src/pages/Entry/Card/EntryDescriptor.vue

@@ -8,6 +8,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 
 import { toDate } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
 
 const $props = defineProps({
     id: {
@@ -23,6 +24,7 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
+const { openReport } = usePrintService();
 
 const entryFilter = {
     include: [
@@ -61,6 +63,14 @@ const entryFilter = {
     ],
 };
 
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) =>
+    (data.value = useCardDescription(entity.supplier.nickname, entity.id));
+
 const getEntryRedirectionFilter = (entry) => {
     let entryTravel = entry && entry.travel;
 
@@ -82,13 +92,9 @@ const getEntryRedirectionFilter = (entry) => {
     });
 };
 
-const entityId = computed(() => {
+const showEntryReport = () => {
-    return $props.id || route.params.id;
+    openReport(`Entries/${route.params.id}/entry-order-pdf`);
-});
+};
-
-const data = ref(useCardDescription());
-const setData = (entity) =>
-    (data.value = useCardDescription(entity.supplier.nickname, entity.id));
 </script>
 
 <template>
@@ -101,6 +107,18 @@ const setData = (entity) =>
         @on-fetch="setData"
         data-key="entryData"
     >
+        <template #menu="{ entity }">
+            <QItem v-ripple clickable @click="showEntryReport(entity)">
+                <QItemSection>{{ t('Show entry report') }}</QItemSection>
+            </QItem>
+            <QItem v-ripple clickable>
+                <QItemSection>
+                    <RouterLink :to="{ name: 'EntryList' }" class="color-vn-text">
+                        {{ t('Go to module index') }}
+                    </RouterLink>
+                </QItemSection>
+            </QItem>
+        </template>
         <template #body="{ entity }">
             <VnLv
                 :label="t('entry.descriptor.agency')"
@@ -115,6 +133,21 @@ const setData = (entity) =>
                 :value="entity.travel.warehouseOut.name"
             />
         </template>
+        <template #icons="{ entity }">
+            <QCardActions class="q-gutter-x-md">
+                <QIcon
+                    v-if="entity.isExcludedFromAvailable"
+                    name="vn:inventory"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('Inventory entry') }}</QTooltip>
+                </QIcon>
+                <QIcon v-if="entity.isRaid" name="vn:web" color="primary" size="xs">
+                    <QTooltip>{{ t('Virtual entry') }}</QTooltip>
+                </QIcon>
+            </QCardActions>
+        </template>
         <template #actions="{ entity }">
             <QCardActions>
                 <QBtn
@@ -162,4 +195,8 @@ es:
     Supplier card: Ficha del proveedor
     All travels with current agency: Todos los envíos con la agencia actual
     All entries with current supplier: Todas las entradas con el proveedor actual
+    Show entry report: Ver informe del pedido
+    Go to module index: Ir al índice del modulo
+    Inventory entry: Es inventario
+    Virtual entry: Es una redada
 </i18n>

src/pages/Entry/EntryFilter.vue

@@ -0,0 +1,246 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const currenciesOptions = ref([]);
+const companiesOptions = ref([]);
+const suppliersOptions = ref([]);
+</script>
+
+<template>
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="currenciesRef"
+        url="Currencies"
+        :filter="{ fields: ['id', 'name'] }"
+        order="code"
+        @on-fetch="(data) => (currenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname', 'name'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.search"
+                            :label="t('params.search')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.reference"
+                            :label="t('params.reference')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.invoiceNumber"
+                            :label="t('params.invoiceNumber')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.travelFk"
+                            :label="t('params.travelFk')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.companyFk')"
+                            v-model="params.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.currencyFk')"
+                            v-model="params.currencyFk"
+                            :options="currenciesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.supplierFk')"
+                            v-model="params.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{
+                                            scope.opt?.name + ': ' + scope.opt?.nickname
+                                        }}</QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('params.created')"
+                            is-outlined
+                            v-model="params.created"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('params.from')"
+                            is-outlined
+                            v-model="params.from"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('params.to')"
+                            is-outlined
+                            v-model="params.to"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
+                            :label="t('params.isBooked')"
+                            v-model="params.isBooked"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                    <QItemSection>
+                        <QCheckbox
+                            :label="t('params.isConfirmed')"
+                            v-model="params.isConfirmed"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
+                            :label="t('params.isOrdered')"
+                            v-model="params.isOrdered"
+                            toggle-indeterminate
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        search: General search
+        reference: Reference
+        invoiceNumber: Invoice number
+        travelFk: Travel
+        companyFk: Company
+        currencyFk: Currency
+        supplierFk: Supplier
+        from: From
+        to: To
+        created: Created
+        isBooked: Booked
+        isConfirmed: Confirmed
+        isOrdered: Ordered
+es:
+    params:
+        search: Búsqueda general
+        reference: Referencia
+        invoiceNumber: Núm. factura
+        travelFk: Envío
+        companyFk: Empresa
+        currencyFk: Moneda
+        supplierFk: Proveedor
+        from: Desde
+        to: Hasta
+        created: Fecha creación
+        isBooked: Asentado
+        isConfirmed: Confirmado
+        isOrdered: Pedida
+</i18n>

src/pages/Entry/EntryList.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -7,9 +8,12 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
+import EntryFilter from './EntryFilter.vue';
 
+import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 
+const stateStore = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -30,9 +34,18 @@ function viewSummary(id) {
         },
     });
 }
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
 </script>
 
 <template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <EntryFilter data-key="EntryList" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
             <VnPaginate

src/pages/Travel/Card/TravelSummary.vue

@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
 import { QCheckbox, QIcon } from 'quasar';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnRow from 'components/ui/VnRow.vue';
 
 import travelService from 'src/services/travel.service';
 import { toDate, toCurrency } from 'src/filters';
@@ -219,10 +218,7 @@ const openEntryDescriptor = () => {};
 
         <template #body>
             <QCard class="vn-one">
-                <VnLv
+                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
-                    :label="t('globals.shipped')"
-                    :value="toDate(travel.shipped)"
-                />
                 <VnLv
                     :label="t('globals.wareHouseOut')"
                     :value="travel.warehouseOut?.name"
@@ -239,10 +235,7 @@ const openEntryDescriptor = () => {};
                 </VnLv>
             </QCard>
             <QCard class="vn-one">
-                <VnLv
+                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
-                    :label="t('globals.landed')"
-                    :value="toDate(travel.landed)"
-                />
                 <VnLv
                     :label="t('globals.wareHouseIn')"
                     :value="travel.warehouseIn?.name"