forked from verdnatura/salix-front
Suppliers list and suppliers create view
This commit is contained in:
parent
222a970a26
commit
14788b7f7c
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -389,6 +389,26 @@ export default {
|
|||
shipped: 'Shipped',
|
||||
totalWithVat: 'Amount',
|
||||
},
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
globalInvoices: {
|
||||
errors: {
|
||||
chooseValidClient: 'Choose a valid client',
|
||||
chooseValidCompany: 'Choose a valid company',
|
||||
chooseValidPrinter: 'Choose a valid printer',
|
||||
fillDates: 'Invoice date and the max date should be filled',
|
||||
invoiceDateLessThanMaxDate: "Invoice date can't be less than max date",
|
||||
invoiceWithFutureDate: 'Exists an invoice with a future date',
|
||||
noTicketsToInvoice: "There aren't clients to invoice",
|
||||
criticalInvoiceError: 'Critical invoicing error, process stopped',
|
||||
},
|
||||
table: {
|
||||
client: 'Client',
|
||||
addressId: 'Address id',
|
||||
streetAddress: 'Street',
|
||||
},
|
||||
},
|
||||
>>>>>>> Stashed changes
|
||||
},
|
||||
worker: {
|
||||
pageTitles: {
|
||||
|
|
@ -504,6 +524,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: {
|
||||
|
|
|
|||
|
|
@ -389,6 +389,28 @@ export default {
|
|||
shipped: 'F. envío',
|
||||
totalWithVat: 'Importe',
|
||||
},
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
globalInvoices: {
|
||||
errors: {
|
||||
chooseValidClient: 'Selecciona un cliente válido',
|
||||
chooseValidCompany: 'Selecciona una empresa válida',
|
||||
chooseValidPrinter: 'Selecciona una impresora válida',
|
||||
fillDates:
|
||||
'La fecha de la factura y la fecha máxima deben estar completas',
|
||||
invoiceDateLessThanMaxDate:
|
||||
'La fecha de la factura no puede ser menor que la fecha máxima',
|
||||
invoiceWithFutureDate: 'Existe una factura con una fecha futura',
|
||||
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',
|
||||
},
|
||||
},
|
||||
>>>>>>> Stashed changes
|
||||
},
|
||||
worker: {
|
||||
pageTitles: {
|
||||
|
|
@ -504,6 +526,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: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted, computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import InvoiceOutGlobalForm from './InvoiceOutGlobalForm.vue';
|
||||
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { QBadge, QBtn } from 'quasar';
|
||||
import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
|
||||
|
||||
// invoiceOutGlobalStore state and getters
|
||||
const {
|
||||
status,
|
||||
getPercentage,
|
||||
getAddressNumber,
|
||||
getNAddresses,
|
||||
nPdfs,
|
||||
totalPdfs,
|
||||
errors,
|
||||
} = storeToRefs(invoiceOutGlobalStore);
|
||||
|
||||
const selectedCustomerId = ref(null);
|
||||
|
||||
const tableColumnComponents = {
|
||||
clientId: {
|
||||
component: QBtn,
|
||||
props: { flat: true, color: 'blue' },
|
||||
event: (prop) => selectCustomerId(prop.value),
|
||||
},
|
||||
clientName: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
},
|
||||
id: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
},
|
||||
nickname: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
},
|
||||
message: {
|
||||
component: QBadge,
|
||||
props: { color: 'red' },
|
||||
},
|
||||
};
|
||||
|
||||
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}`);
|
||||
});
|
||||
|
||||
const percentageStatusText = computed(() => {
|
||||
return `${getPercentage.value}% (${getAddressNumber.value} ${t('of')} ${
|
||||
getNAddresses.value
|
||||
})`;
|
||||
});
|
||||
|
||||
const pdfStatusText = computed(() => {
|
||||
return `${nPdfs.value} ${t('of')} ${totalPdfs.value} PDFs`;
|
||||
});
|
||||
|
||||
const rows = computed(() => {
|
||||
if (!errors && !errors.length > 0) return [];
|
||||
return errors.value.map((row) => {
|
||||
return {
|
||||
...row.client,
|
||||
message: row.message,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const selectCustomerId = (id) => {
|
||||
selectedCustomerId.value = id;
|
||||
};
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => {
|
||||
stateStore.rightDrawer = false;
|
||||
invoiceOutGlobalStore.$reset();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<InvoiceOutGlobalForm />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QCard v-if="status" class="card">
|
||||
<QCardSection class="card-section">
|
||||
<span class="status-text">{{ cardStatusText }}</span>
|
||||
<span class="text">{{ percentageStatusText }}</span>
|
||||
<span class="text">{{ pdfStatusText }}</span>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
|
||||
<QTable
|
||||
v-if="rows.length > 0"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
hide-bottom
|
||||
row-key="id"
|
||||
class="full-width q-mt-md"
|
||||
>
|
||||
<template #body-cell="props">
|
||||
<QTd :props="props">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
v-bind="tableColumnComponents[props.col.name].props"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
class="col-content"
|
||||
>
|
||||
{{ props.value }}
|
||||
<QPopupProxy>
|
||||
<CustomerDescriptor
|
||||
v-if="selectedCustomerId === props.value"
|
||||
:id="selectedCustomerId"
|
||||
/>
|
||||
</QPopupProxy>
|
||||
</component>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background-color: #292929;
|
||||
padding: 16px;
|
||||
|
||||
.card-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
.col-content {
|
||||
border-radius: 4px;
|
||||
padding: 6px 6px 6px 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"status": {
|
||||
"packageInvoicing": "Build packaging tickets",
|
||||
"invoicing": "Invoicing client",
|
||||
"stopping": "Stopping process",
|
||||
"done": "Ended process"
|
||||
},
|
||||
"of": "of"
|
||||
},
|
||||
"es": {
|
||||
"status":{
|
||||
"packageInvoicing": "Generación de tickets de empaque",
|
||||
"invoicing": "Facturando a cliente",
|
||||
"stopping": "Deteniendo proceso",
|
||||
"done": "Proceso detenido",
|
||||
},
|
||||
"of": "de"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -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];
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue