Merge pull request 'Supplier list and supplier create view' (#7) from feature/ms-24-SuppliersList into dev

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

src/components/ui/CardSummary.vue

@@ -73,6 +73,7 @@ watch(props, async () => {
 
 .cardSummary {
     width: 100%;
+
     .summaryHeader {
         text-align: center;
         font-size: 20px;
@@ -85,6 +86,7 @@ watch(props, async () => {
         justify-content: space-evenly;
         gap: 15px;
         padding: 15px;
+        background-color: var(--vn-gray);
 
         > .q-card.vn-one {
             flex: 1;

src/i18n/en/index.js

@@ -402,6 +402,11 @@ export default {
                 noTicketsToInvoice: "There aren't clients to invoice",
                 criticalInvoiceError: 'Critical invoicing error, process stopped',
             },
+            table: {
+                client: 'Client',
+                addressId: 'Address id',
+                streetAddress: 'Street',
+            },
         },
         negativeBases: {
             from: 'From',
@@ -533,6 +538,49 @@ export default {
             },
         },
     },
+    supplier: {
+        pageTitles: {
+            suppliers: 'Suppliers',
+            list: 'List',
+            create: 'Create',
+            summary: 'Summary',
+        },
+        list: {
+            payMethod: 'Pay method',
+            payDeadline: 'Pay deadline',
+            payDay: 'Pay day',
+            account: 'Account',
+            newSupplier: 'New supplier',
+        },
+        summary: {
+            responsible: 'Responsible',
+            notes: 'Notes',
+            verified: 'Verified',
+            isActive: 'Is active',
+            billingData: 'Billing data',
+            payMethod: 'Pay method',
+            payDeadline: 'Pay deadline',
+            payDay: 'Día de pago',
+            account: 'Account',
+            fiscalData: 'Fiscal data',
+            sageTaxType: 'Sage tax type',
+            sageTransactionType: 'Sage transaction type',
+            sageWithholding: 'Sage withholding',
+            supplierActivity: 'Supplier activity',
+            healthRegister: 'Healt register',
+            fiscalAddress: 'Fiscal address',
+            socialName: 'Social name',
+            taxNumber: 'Tax number',
+            street: 'Street',
+            city: 'City',
+            postCode: 'Postcode',
+            province: 'Province',
+            country: 'Country',
+        },
+        create: {
+            supplierName: 'Supplier name',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {

src/i18n/es/index.js

@@ -404,6 +404,11 @@ export default {
                 noTicketsToInvoice: 'No hay clientes para facturar',
                 criticalInvoiceError: 'Error crítico en la facturación, proceso detenido',
             },
+            table: {
+                client: 'Cliente',
+                addressId: 'Id dirección',
+                streetAddress: 'Dirección fiscal',
+            },
         },
         negativeBases: {
             from: 'Desde',
@@ -535,6 +540,49 @@ export default {
             },
         },
     },
+    supplier: {
+        pageTitles: {
+            suppliers: 'Proveedores',
+            list: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+        },
+        list: {
+            payMethod: 'Método de pago',
+            payDeadline: 'Plazo de pago',
+            payDay: 'Día de pago',
+            account: 'Cuenta',
+            newSupplier: 'Nuevo proveedor',
+        },
+        summary: {
+            responsible: 'Responsable',
+            notes: 'Notas',
+            verified: 'Verificado',
+            isActive: 'Está activo',
+            billingData: 'Billing data',
+            payMethod: 'Método de pago',
+            payDeadline: 'Plazo de pago',
+            payDay: 'Día de pago',
+            account: 'Account',
+            fiscalData: 'Data fiscal',
+            sageTaxType: 'Tipo de impuesto Sage',
+            sageTransactionType: 'Tipo de transacción Sage',
+            sageWithholding: 'Retención sage',
+            supplierActivity: 'Actividad proveedor',
+            healthRegister: 'Pasaporte sanitario',
+            fiscalAddress: 'Dirección fiscal',
+            socialName: 'Razón social',
+            taxNumber: 'NIF/CIF',
+            street: 'Dirección',
+            city: 'Población',
+            postCode: 'Código postal',
+            province: 'Provincia',
+            country: 'País',
+        },
+        create: {
+            supplierName: 'Nombre del proveedor',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -49,13 +49,30 @@ const tableColumnComponents = {
     },
 };
 
-const columns = ref([
-    { label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
-    { label: 'Cliente', field: 'clientName', name: 'clientName', align: 'left' },
-    { label: 'Id dirección', field: 'id', name: 'id', align: 'left' },
-    { label: 'Dirección fiscal', field: 'nickname', name: 'nickname', align: 'left' },
-    { label: 'Error', field: 'message', name: 'message', align: 'left' },
-]);
+const columns = computed(() => {
+    return [
+        { label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
+        {
+            label: t('invoiceOut.globalInvoices.table.client'),
+            field: 'clientName',
+            name: 'clientName',
+            align: 'left',
+        },
+        {
+            label: t('invoiceOut.globalInvoices.table.addressId'),
+            field: 'id',
+            name: 'id',
+            align: 'left',
+        },
+        {
+            label: t('invoiceOut.globalInvoices.table.streetAddress'),
+            field: 'nickname',
+            name: 'nickname',
+            align: 'left',
+        },
+        { label: 'Error', field: 'message', name: 'message', align: 'left' },
+    ];
+});
 
 const cardStatusText = computed(() => {
     return t(`status.${status.value}`);

src/pages/Supplier/Card/SupplierCard.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <!-- Aca iría left menu y descriptor -->
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
+
+<i18n>
+</i18n>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { onMounted, ref, computed, onUpdated } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardSummary from 'components/ui/CardSummary.vue';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { useRole } from 'src/composables/useRole';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const roleState = useRole();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const summaryRef = ref();
+const supplier = ref();
+const supplierUrl = ref();
+
+onMounted(async () => {
+    await roleState.fetch();
+    supplierUrl.value = (await getUrl('supplier/')) + entityId.value;
+});
+
+async function setData(data) {
+    if (data) {
+        supplier.value = data;
+    }
+}
+
+const isAdministrative = computed(() => {
+    return roleState.hasAny(['administrative']);
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`Suppliers/${entityId}/getSummary`"
+        @on-fetch="(data) => setData(data)"
+    >
+        <template #header-left>
+            <QIcon name="open_in_new" color="white" size="25px" />
+        </template>
+        <template #header>
+            <span>{{ supplier.name }} - {{ supplier.id }}</span>
+        </template>
+
+        <template #body>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('globals.summary.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('globals.summary.basicData') }}</span>
+                <VnLv label="Id" :value="supplier.id" />
+                <VnLv label="Alias" :value="supplier.nickname" />
+                <VnLv :label="t('supplier.summary.responsible')">
+                    <template #value>
+                        <span class="link">
+                            {{ supplier.worker?.user?.nickname || '-' }}
+                            <WorkerDescriptorProxy
+                                :id="supplier.worker?.user?.id"
+                                v-if="supplier.worker?.user?.id"
+                            />
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
+                    <template #value>
+                        <span> {{ supplier.note || '-' }} </span>
+                    </template>
+                </VnLv>
+                <QCheckbox
+                    v-model="supplier.isSerious"
+                    :label="t('verified')"
+                    disable
+                    dense
+                    class="full-width q-mb-xs"
+                />
+                <QCheckbox
+                    v-model="supplier.isActive"
+                    :label="t('isActive')"
+                    disable
+                    dense
+                    class="full-width q-mb-xs"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.billingData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.billingData') }}</span>
+                <VnLv
+                    :label="t('supplier.summary.payMethod')"
+                    :value="supplier.payMethod?.name || '-'"
+                />
+                <VnLv
+                    :label="t('supplier.summary.payDeadline')"
+                    :value="supplier.payDem?.payDem || '-'"
+                />
+                <VnLv :label="t('supplier.summary.payDay')" :value="supplier.payDay" />
+                <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.fiscalData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
+                <VnLv
+                    :label="t('supplier.summary.sageTaxType')"
+                    :value="supplier.sageTaxType?.vat || '-'"
+                />
+                <VnLv
+                    :label="t('supplier.summary.sageTransactionType')"
+                    :value="supplier.sageTransactionType?.transaction || '-'"
+                />
+                <VnLv
+                    :label="t('supplier.summary.sageWithholding')"
+                    :value="supplier.sageWithholding?.withholding || '-'"
+                />
+                <VnLv
+                    :label="t('supplier.summary.supplierActivity')"
+                    :value="supplier.supplierActivity?.name || '-'"
+                />
+                <VnLv
+                    :label="t('supplier.summary.healthRegister')"
+                    :value="supplier.healthRegister"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                    {{ t('supplier.summary.fiscalAddress') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
+                <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
+                <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />
+                <VnLv :label="t('supplier.summary.street')" :value="supplier.street" />
+                <VnLv :label="t('supplier.summary.city')" :value="supplier.city" />
+                <VnLv
+                    :label="t('supplier.summary.postCode')"
+                    :value="supplier.postCode"
+                />
+                <VnLv
+                    :label="t('supplier.summary.province')"
+                    :value="supplier.province?.name || '-'"
+                />
+                <VnLv
+                    :label="t('supplier.summary.country')"
+                    :value="supplier.country?.country || '-'"
+                />
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped>
+.notes {
+    width: max-content;
+}
+.cardSummary .summaryBody > .q-card > .taxes {
+    border: 2px solid gray;
+    padding: 0;
+
+    > .vn-label-value {
+        text-align: right;
+        display: flex;
+        flex-direction: row;
+        margin-top: 5px;
+        justify-content: flex-end;
+        padding-right: 20px;
+    }
+}
+</style>

src/pages/Supplier/Card/SupplierSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import SupplierSummary from './SupplierSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <SupplierSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Supplier/SupplierCreate.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import suppliersService from 'src/services/Suppliers.service';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const newSupplierName = ref();
+
+const createSupplier = async () => {
+    const params = { name: newSupplierName.value };
+    const response = await suppliersService.createSupplier(params);
+    router.push({ path: `/supplier/${response.data.id}` });
+};
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+
+    <QPage class="q-pa-md">
+        <QForm @submit="createSupplier()" class="text-white">
+            <QCard class="card">
+                <QInput
+                    v-model="newSupplierName"
+                    :label="t('supplier.create.supplierName')"
+                    class="full-width"
+                />
+            </QCard>
+            <QBtn
+                :label="t('globals.create')"
+                type="submit"
+                color="primary"
+                class="q-mt-md"
+            />
+            <QBtn :label="t('globals.cancel')" class="q-mt-md" flat />
+        </QForm>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: #292929;
+    padding: 40px;
+}
+</style>
+
+<i18n>
+
+</i18n>

src/pages/Supplier/SupplierList.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useRouter } from 'vue-router';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import CardList2 from 'src/components/ui/CardList2.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { useQuasar } from 'quasar';
+import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/supplier/${id}` });
+}
+
+const redirectToCreateView = () => {
+    router.push({ name: 'SupplierCreate' });
+};
+
+const viewSummary = (id) => {
+    quasar.dialog({
+        component: SupplierSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+};
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SuppliersList"
+                :limit="20"
+                :label="t('Search suppliers')"
+            />
+        </Teleport>
+    </template>
+
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
+                <template #body="{ rows }">
+                    <CardList2
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.socialName"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv label="NIF/CIF" :value="row.nif" />
+                            <VnLv label="Alias" :value="row.nickname" />
+                            <VnLv
+                                :label="t('supplier.list.payMethod')"
+                                :value="row.payMethod"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.payDeadline')"
+                                :title-label="t('invoiceOut.list.created')"
+                                :value="row.payDem"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.payDay')"
+                                :value="row.payDay"
+                            />
+                            <VnLv
+                                :label="t('supplier.list.account')"
+                                :value="row.account"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                                <QTooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </CardList2>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QTooltip>
+                {{ t('supplier.list.newSupplier') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+    {
+        "en": {
+            Search suppliers: Search suppliers
+        },
+        "es": {
+            Search suppliers: Buscar proveedores
+        }
+    }
+</i18n>

src/pages/Supplier/SupplierMain.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+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/router/modules/Supplier.js

@@ -0,0 +1,61 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/supplier',
+    name: 'Supplier',
+    meta: {
+        title: 'suppliers',
+        icon: 'vn:supplier',
+    },
+    component: RouterView,
+    redirect: { name: 'SupplierMain' },
+    menus: {
+        main: ['SupplierList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'SupplierMain',
+            component: () => import('src/pages/Supplier/SupplierMain.vue'),
+            redirect: { name: 'SupplierList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'SupplierList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Supplier/SupplierList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'SupplierCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Supplier/SupplierCreate.vue'),
+                },
+            ],
+        },
+        {
+            name: 'SupplierCard',
+            path: ':id',
+            component: () => import('src/pages/Supplier/Card/SupplierCard.vue'),
+            redirect: { name: 'SupplierSummary' },
+            children: [
+                {
+                    name: 'SupplierSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Supplier/Card/SupplierSummary.vue'),
+                },
+            ],
+        },
+    ],
+};

src/router/modules/index.js

@@ -5,13 +5,6 @@ import InvoiceOut from './invoiceOut';
 import Worker from './worker';
 import Wagon from './wagon';
 import Route from './route';
+import Supplier from './Supplier';
 
-export default [
-    Customer,
-    Ticket,
-    Claim,
-    InvoiceOut,
-    Worker,
-    Wagon,
-    Route
-]
+export default [Customer, Ticket, Claim, InvoiceOut, Worker, Wagon, Route, Supplier];

src/router/routes.js

@@ -4,6 +4,7 @@ import claim from './modules/claim';
 import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
 import wagon from './modules/wagon';
+import supplier from './modules/Supplier';
 import route from './modules/route';
 
 const routes = [
@@ -49,13 +50,14 @@ const routes = [
             claim,
             worker,
             invoiceOut,
+            wagon,
+            route,
+            supplier,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
-            wagon,
-            route,
         ],
     },
 ];

src/services/Suppliers.service.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const suppliersService = {
+    createSupplier: async (formData) => {
+        try {
+            return await axios.post('Suppliers/newSupplier', formData);
+        } catch (err) {
+            console.error(`Error creating new supplier`, err);
+            return err.response;
+        }
+    },
+};
+
+export default suppliersService;

src/stores/useNavigationStore.js

@@ -6,7 +6,16 @@ import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
-    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon', 'route'];
+    const modules = [
+        'customer',
+        'claim',
+        'ticket',
+        'invoiceOut',
+        'worker',
+        'wagon',
+        'route',
+        'supplier',
+    ];
     const pinnedModules = ref([]);
     const role = useRole();