Create items module base structure, item descriptor and add it to supplier consumption

src/components/RegularizeStockForm.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const props = defineProps({
+    itemFk: {
+        type: Number,
+        default: null,
+    },
+    warehouseFk: {
+        type: Boolean,
+        default: null,
+    },
+});
+
+const { t } = useI18n();
+
+const regularizeFormData = reactive({
+    itemFk: props.itemFk,
+    warehouseFk: props.warehouseFk,
+    quantity: null,
+});
+
+const warehousesOptions = ref([]);
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+};
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FormModelPopup
+        url-create="Items/regularize"
+        model="Items"
+        :title="t('Regularize stock')"
+        :form-initial-data="regularizeFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Type the visible quantity')"
+                        v-model.number="data.quantity"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        v-model="data.warehouseFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Warehouse: Almacén
+    Type the visible quantity: Introduce la cantidad visible
+    Regularize stock: Regularizar stock
+</i18n>

src/composables/useState.js

@@ -25,6 +25,7 @@ export function useState() {
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
                 companyFk: user.value.companyFk,
+                warehouseFk: user.value.warehouseFk,
             };
         });
     }
@@ -37,6 +38,7 @@ export function useState() {
             lang: data.lang,
             darkMode: data.darkMode,
             companyFk: data.companyFk,
+            warehouseFk: data.warehouseFk,
         };
     }
 

src/composables/useUserConfig.js

@@ -12,6 +12,7 @@ export function useUserConfig() {
             const user = state.getUser().value;
             user.darkMode = data.darkMode;
             user.companyFk = data.companyFk;
+            user.warehouseFk = data.warehouseFk;
             state.setUser(user);
 
             return data;

src/i18n/en/index.js

@@ -1060,6 +1060,25 @@ export default {
             totalEntries: 'Total entries',
         },
     },
+    item: {
+        pageTitles: {
+            items: 'Items',
+            list: 'List',
+            diary: 'Diary',
+            tags: 'Tags',
+        },
+        descriptor: {
+            item: 'Item',
+            buyer: 'Buyer',
+            color: 'Color',
+            category: 'Category',
+            stems: 'Stems',
+            visible: 'Visible',
+            available: 'Available',
+            warehouseText: 'Calculated on the warehouse of { warehouseName }',
+            itemDiary: 'Item diary',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {

src/i18n/es/index.js

@@ -1060,6 +1060,25 @@ export default {
             totalEntries: 'Ent. totales',
         },
     },
+    item: {
+        pageTitles: {
+            items: 'Artículos',
+            list: 'Listado',
+            diary: 'Histórico',
+            tags: 'Etiquetas',
+        },
+        descriptor: {
+            item: 'Artículo',
+            buyer: 'Comprador',
+            color: 'Color',
+            category: 'Categoría',
+            stems: 'Tallos',
+            visible: 'Visible',
+            available: 'Disponible',
+            warehouseText: 'Calculado sobre el almacén de { warehouseName }',
+            itemDiary: 'Registro de compra-venta',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {

src/pages/Item/Card/ItemCard.vue

@@ -0,0 +1,25 @@
+<script setup>
+import LeftMenu from 'components/LeftMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import ItemDescriptor from './ItemDescriptor.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <ItemDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>

src/pages/Item/Card/ItemDescriptor.vue

@@ -0,0 +1,260 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import RegularizeStockForm from 'components/RegularizeStockForm.vue';
+
+import { useState } from 'src/composables/useState';
+import useCardDescription from 'src/composables/useCardDescription';
+import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+    dated: {
+        type: String,
+        default: null,
+    },
+});
+
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { getToken } = useSession();
+const state = useState();
+const user = state.getUser();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const regularizeStockFormDialog = ref(null);
+const item = ref(null);
+const available = ref(null);
+const visible = ref(null);
+const _warehouseFk = ref(null);
+const warehouseText = ref(null);
+const warehouseFk = computed({
+    get() {
+        return _warehouseFk.value;
+    },
+    set(val) {
+        _warehouseFk.value = val;
+        if (val) {
+            updateStock();
+            getWarehouseName(val);
+        }
+    },
+});
+const showWarehouseIconTooltip = ref(true);
+
+onMounted(() => {
+    warehouseFk.value = user.value.warehouseFk;
+});
+
+function getItemAvatar() {
+    const token = getToken();
+    return `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}`;
+}
+
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    if (!entity) return;
+    data.value = useCardDescription(entity.name, entity.id);
+};
+
+const getWarehouseName = async (warehouseFk) => {
+    try {
+        showWarehouseIconTooltip.value = false;
+
+        const filter = {
+            where: { id: warehouseFk },
+        };
+
+        const { data } = await axios.get('Warehouses/findOne', { filter });
+
+        warehouseText.value = t('item.descriptor.warehouseText', {
+            warehouseName: data.name,
+        });
+
+        showWarehouseIconTooltip.value = true;
+    } catch (err) {
+        console.error('Error finding warehouse');
+    }
+};
+
+const updateStock = async () => {
+    try {
+        available.value = null;
+        visible.value = null;
+
+        const params = {
+            warehouseFk: warehouseFk.value,
+            dated: $props.dated,
+        };
+
+        const { data } = await axios.get(`Items/${entityId.value}/getVisibleAvailable`, {
+            params,
+        });
+
+        available.value = data.available;
+        visible.value = data.visible;
+    } catch (err) {
+        console.error('Error updating stock');
+    }
+};
+
+const openRegularizeStockForm = () => {
+    regularizeStockFormDialog.value.show();
+};
+
+const cloneItem = async () => {
+    try {
+        const { data } = await axios.post(`Items/${entityId.value}/clone`);
+        router.push({ name: 'ItemTags', params: { id: data.id } });
+    } catch (err) {
+        console.error('Error cloning item');
+    }
+};
+
+const openCloneDialog = async () => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t("All it's properties will be copied"),
+                message: t('Do you want to clone this item?'),
+            },
+        })
+        .onOk(async () => {
+            await cloneItem();
+        });
+};
+</script>
+
+<template>
+    <CardDescriptor
+        data-key="ItemData"
+        module="Item"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :summary="$props.summary"
+        :url="`Items/${entityId}/getCard`"
+        @on-fetch="
+            (data) => {
+                item = data;
+                setData(data);
+            }
+        "
+    >
+        <template #menu="{}">
+            <QItem v-ripple clickable @click="openRegularizeStockForm()">
+                <QItemSection>
+                    {{ t('Regularize stock') }}
+                    <QDialog ref="regularizeStockFormDialog">
+                        <RegularizeStockForm
+                            :item-fk="entityId"
+                            :warehouse-fk="warehouseFk"
+                            @on-data-saved="updateStock()"
+                        />
+                    </QDialog>
+                </QItemSection>
+            </QItem>
+            <QItem v-ripple clickable @click="openCloneDialog()">
+                <QItemSection>
+                    {{ t('Clone') }}
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #before>
+            <QImg :src="getItemAvatar()" class="photo">
+                <template #error>
+                    <div
+                        class="absolute-full picture text-center q-pa-md flex flex-center"
+                    >
+                        <div>
+                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
+                                <QIcon name="vn:item" />
+                            </div>
+                            <div class="text-grey-5" style="opacity: 0.4">
+                                {{ t('item.descriptor.item') }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </QImg>
+            <div class="row justify-between full-width bg-primary">
+                <div class="col column items-center">
+                    <span class="text-uppercase">
+                        {{ t('item.descriptor.visible') }}
+                    </span>
+                    <span class="text-weight-bold text-h5">{{ visible }}</span>
+                </div>
+                <div class="col column items-center">
+                    <span class="text-uppercase">
+                        {{ t('item.descriptor.available') }}
+                    </span>
+                    <span class="text-weight-bold text-h5">{{ available }}</span>
+                </div>
+                <div class="col column items-center justify-center">
+                    <QIcon name="info" class="cursor-pointer" size="md">
+                        <QTooltip>{{ warehouseText }}</QTooltip>
+                    </QIcon>
+                </div>
+            </div>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('item.descriptor.buyer')">
+                <template #value>
+                    <span class="link">
+                        {{ t('item.descriptor.buyer') }}
+                        <WorkerDescriptorProxy :id="entity.itemType?.worker?.id" />
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv :label="t('item.descriptor.color')" :value="entity.value5"> </VnLv>
+            <VnLv :label="t('item.descriptor.color')" :value="entity.value6" />
+            <VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
+        </template>
+        <template #actions="{}">
+            <QCardActions>
+                <QBtn
+                    :to="{ name: 'ItemDiary' }"
+                    size="md"
+                    icon="vn:transaction"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('item.descriptor.itemDiary') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+
+<i18n>
+es:
+    Regularize stock: Regularizar stock
+    Clone: Clonar
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+</i18n>
+
+<style lang="scss" scoped>
+.photo {
+    height: 256px;
+}
+</style>

src/pages/Item/Card/ItemDescriptorProxy.vue

@@ -0,0 +1,26 @@
+<script setup>
+import ItemDescriptor from './ItemDescriptor.vue';
+import ItemSummaryDialog from './ItemSummaryDialog.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    dated: {
+        type: String,
+        default: null,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <ItemDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="ItemSummaryDialog"
+            :dated="dated"
+        />
+    </QPopupProxy>
+</template>

src/pages/Item/Card/ItemDiary.vue

@@ -0,0 +1 @@
+<template>Item diary (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>

src/pages/Item/Card/ItemSummary.vue

@@ -0,0 +1 @@
+<template>Item summary</template>

src/pages/Item/Card/ItemSummaryDialog.vue

@@ -0,0 +1,5 @@
+<template>
+    <QDialog
+        >Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
+    >
+</template>

src/pages/Item/Card/ItemTags.vue

@@ -0,0 +1 @@
+<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>

src/pages/Item/ItemList.vue

@@ -0,0 +1 @@
+<template>Item list</template>

src/pages/Item/ItemMain.vue

@@ -0,0 +1,18 @@
+<script setup>
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -7,6 +7,7 @@ import { useQuasar } from 'quasar';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 import { toDate } from 'src/filters';
 import { dashIfEmpty } from 'src/filters';
@@ -174,7 +175,10 @@ onMounted(async () => {
                     <QTd no-hover>{{ row.invoiceNumber }}</QTd>
                 </QTr>
                 <QTr v-for="(buy, index) in row.buys" :key="index">
-                    <QTd no-hover> {{ buy.itemName }}</QTd>
+                    <QTd no-hover>
+                        <QBtn flat color="blue" dense>{{ buy.itemName }}</QBtn>
+                        <ItemDescriptorProxy :id="buy.itemFk" />
+                    </QTd>
 
                     <QTd no-hover>
                         <span>{{ buy.subName }}</span>

src/router/modules/index.js

@@ -1,3 +1,4 @@
+import Item from './item';
 import Customer from './customer';
 import Ticket from './ticket';
 import Claim from './claim';
@@ -14,6 +15,7 @@ import Department from './department';
 import Entry from './entry';
 
 export default [
+    Item,
     Customer,
     Ticket,
     Claim,

src/router/modules/item.js

@@ -0,0 +1,70 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/item',
+    name: 'Item',
+    meta: {
+        title: 'items',
+        icon: 'vn:item',
+    },
+    component: RouterView,
+    redirect: { name: 'ItemMain' },
+    menus: {
+        main: [],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'ItemMain',
+            component: () => import('src/pages/Item/ItemMain.vue'),
+            redirect: { name: 'Itemlist' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ItemList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Item/ItemList.vue'),
+                },
+            ],
+        },
+        {
+            name: 'ItemCard',
+            path: ':id',
+            component: () => import('src/pages/Item/Card/ItemCard.vue'),
+            redirect: { name: 'ItemSummary' },
+            children: [
+                {
+                    name: 'ItemSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemSummary.vue'),
+                },
+                {
+                    path: 'diary',
+                    name: 'ItemDiary',
+                    meta: {
+                        title: 'diary',
+                        icon: 'vn:transaction',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemDiary.vue'),
+                },
+                {
+                    path: 'tags',
+                    name: 'ItemTags',
+                    meta: {
+                        title: 'Tags',
+                        icon: 'vn:tags',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemTags.vue'),
+                },
+            ],
+        },
+    ],
+};

src/router/routes.js

@@ -1,3 +1,4 @@
+import item from './modules/item';
 import customer from './modules/customer';
 import ticket from './modules/ticket';
 import claim from './modules/claim';
@@ -51,6 +52,7 @@ const routes = [
                 component: () => import('../pages/Dashboard/DashboardMain.vue'),
             },
             // Module routes
+            item,
             customer,
             ticket,
             claim,

src/stores/useNavigationStore.js

@@ -7,19 +7,19 @@ import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
     const modules = [
-        'customer',
-        'claim',
-        'ticket',
-        'invoiceOut',
-        'invoiceIn',
-        'worker',
         'shelving',
         'order',
-        'wagon',
+        'customer',
-        'route',
-        'supplier',
-        'travel',
         'entry',
+        'travel',
+        'invoiceOut',
+        'invoiceIn',
+        'supplier',
+        'claim',
+        'route',
+        'ticket',
+        'worker',
+        'wagon',
     ];
     const pinnedModules = ref([]);
     const role = useRole();