Entry descriptor

src/components/ui/CardDescriptor.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, useSlots, ref, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 

src/i18n/en/index.js

@@ -335,6 +335,11 @@ export default {
             buyingValue: 'Buying value',
             packagingFk: 'Box',
         },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+        },
     },
     ticket: {
         pageTitles: {

src/i18n/es/index.js

@@ -334,6 +334,11 @@ export default {
             buyingValue: 'Coste',
             packagingFk: 'Embalaje',
         },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+        },
     },
     ticket: {
         pageTitles: {

src/pages/Entry/Card/EntryCard.vue

@@ -1,15 +1,29 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
+
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import EntryDescriptor from './EntryDescriptor.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 <template>
-    <!-- Entry searchbar -->
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="EntryList"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
-            <!-- EntryDescriptor -->
+            <EntryDescriptor />
             <QSeparator />
             <LeftMenu source="card" />
         </QScrollArea>
@@ -22,3 +36,9 @@ const stateStore = useStateStore();
         </QPage>
     </QPageContainer>
 </template>
+
+<i18n>
+es:
+    Search entries: Buscar entradas
+    You can search by entry reference: Puedes buscar por referencia de la entrada
+</i18n>

src/pages/Entry/Card/EntryDescriptor.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+import { toDate } from 'src/filters';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entryFilter = {
+    include: [
+        {
+            relation: 'travel',
+            scope: {
+                fields: ['id', 'landed', 'agencyModeFk', 'warehouseOutFk'],
+                include: [
+                    {
+                        relation: 'agency',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                    {
+                        relation: 'warehouseOut',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                    {
+                        relation: 'warehouseIn',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'supplier',
+            scope: {
+                fields: ['id', 'nickname'],
+            },
+        },
+    ],
+};
+
+const getEntryRedirectionFilter = (entry) => {
+    let entryTravel = entry && entry.travel;
+
+    if (!entryTravel || !entryTravel.landed) return null;
+
+    const date = new Date(entryTravel.landed);
+    date.setHours(0, 0, 0, 0);
+
+    const from = new Date(date.getTime());
+    from.setDate(from.getDate() - 10);
+
+    const to = new Date(date.getTime());
+    to.setDate(to.getDate() + 10);
+
+    return JSON.stringify({
+        supplierFk: entry.supplierFk,
+        from,
+        to,
+    });
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) =>
+    (data.value = useCardDescription(entity.supplier.nickname, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="Entry"
+        :url="`Entries/${entityId}`"
+        :filter="entryFilter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="entryData"
+    >
+        <template #body="{ entity }">
+            <VnLv
+                :label="t('entry.descriptor.agency')"
+                :value="entity.travel.agency.name"
+            />
+            <VnLv
+                :label="t('entry.descriptor.landed')"
+                :value="toDate(entity.travel.landed)"
+            />
+            <VnLv
+                :label="t('entry.descriptor.warehouseOut')"
+                :value="entity.travel.warehouseOut.name"
+            />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    :to="`/supplier/${entity.supplier.id}`"
+                    size="md"
+                    icon="vn:supplier"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Supplier card') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'TravelMain',
+                        query: {
+                            params: JSON.stringify({
+                                agencyModeFk: entity.travel?.agencyModeFk,
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="local_airport"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'EntryMain',
+                        query: {
+                            params: getEntryRedirectionFilter(entity),
+                        },
+                    }"
+                    size="md"
+                    icon="vn:entry"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All entries with current supplier') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+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
+</i18n>

src/pages/Entry/Card/EntryDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import EntryDescriptor from './EntryDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <EntryDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Entry/EntryList.vue

@@ -1,28 +1,19 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 function navigate(id) {
     router.push({ path: `/entry/${id}` });
 }
@@ -42,16 +33,6 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
-
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
             <VnPaginate

src/pages/Entry/EntryMain.vue

@@ -1,11 +1,24 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
 import LeftMenu from 'src/components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="EntryList"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />
@@ -15,3 +28,9 @@ const stateStore = useStateStore();
         <RouterView></RouterView>
     </QPageContainer>
 </template>
+
+<i18n>
+es:
+    Search entries: Buscar entradas
+    You can search by entry reference: Puedes buscar por referencia de la entrada
+</i18n>