wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Customer basic data & skeleton

This commit is contained in:
Joan Sanchez 2022-10-20 13:42:49 +02:00
parent e6419af4e8
commit dac5a0b4e1
15 changed files with 692 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/SkeletonForm.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-skeleton type="QInput" square />
</div>
<div class="col">
<q-skeleton type="QInput" square />
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-skeleton type="QInput" square />
</div>
<div class="col">
<q-skeleton type="QInput" square />
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-skeleton type="QInput" square />
</div>
<div class="col">
<q-skeleton type="QInput" square />
</div>
</div>
<div class="row q-gutter-md">
<q-skeleton type="QBtn" />
<q-skeleton type="QBtn" />
</div>
</template>

13
src/composables/useValidator.js
View File

@ -33,13 +33,24 @@ export function useValidator() {
return validations(validation)[validation.validation];
});
if (property === 'socialName') {
console.log(modelValidations[property])
}
return rules;
}
const { t } = useI18n();
const validations = function (validation) {
return {
presence: (value) => !validator.isEmpty(value ? String(value) : '') || t(validation.message),
presence: (value) => {
let message = `Value can't be empty`;
if (validation.message)
message = t(validation.message) || validation.message
return !validator.isEmpty(value ? String(value) : '') || message
},
length: (value) => {
const options = {
min: validation.min || validation.is,

4
src/filters/index.js
View File

@ -1,7 +1,9 @@
import toLowerCase from './toLowerCase';
import toDate from './toDate';
import toCurrency from './toCurrency';
export {
toLowerCase,
toDate
toDate,
toCurrency,
};

21
src/filters/toCurrency.js Normal file
View File

@ -0,0 +1,21 @@
import { useI18n } from 'vue-i18n';
export default function (value, symbol = 'EUR', fractionSize = 2) {
if (!value) return;
const { locale } = useI18n();
const options = {
style: 'currency',
currency: symbol,
minimumFractionDigits: fractionSize,
maximumFractionDigits: fractionSize
};
const lang = locale.value == 'es' ? 'de' : locale.value;
return new Intl.NumberFormat(lang, options)
.format(value);
}

49
src/i18n/en/index.js
View File

@ -13,7 +13,8 @@ export default {
logOut: 'Log out',
dataSaved: 'Data saved',
save: 'Save',
reset: 'Reset'
reset: 'Reset',
noChanges: 'No changes to save'
},
moduleIndex: {
allModules: 'All modules'
@ -50,6 +51,34 @@ export default {
email: 'Email',
customerOrders: 'Display customer orders',
moreOptions: 'More options'
},
card: {
customerId: 'Claim ID',
salesPerson: 'Sales person',
credit: 'Credit',
securedCredit: 'Secured credit',
payMethod: 'Pay method',
debt: 'Debt'
},
summary: {
customerId: 'Customer ID',
socialName: 'Social name',
contact: 'Contact',
phone: 'Phone',
mobile: 'Mobile',
email: 'Email',
salesPerson: 'Sales person',
contactChannel: 'Contact channel',
},
basicData: {
socialName: 'Fiscal name',
businessType: 'Business type',
contact: 'Contact',
email: 'Email',
phone: 'Phone',
mobile: 'Mobile',
salesPerson: 'Sales person',
contactChannel: 'Contact channel'
}
},
ticket: {
@ -83,14 +112,6 @@ export default {
customerSummary: 'Customer summary',
claimedTicket: 'Claimed ticket'
},
basicData: {
customer: 'Customer',
assignedTo: 'Assigned',
created: 'Created',
state: 'State',
packages: 'Packages',
picked: 'Picked',
},
summary: {
customer: 'Customer',
assignedTo: 'Assigned',
@ -105,7 +126,15 @@ export default {
quantity: 'Quantity'
}
},
}
},
basicData: {
customer: 'Customer',
assignedTo: 'Assigned',
created: 'Created',
state: 'State',
packages: 'Packages',
picked: 'Picked',
},
},
components: {
topbar: {},

15
src/i18n/es/index.js
View File

@ -51,6 +51,21 @@ export default {
email: 'Email',
customerOrders: 'Mostrar órdenes del cliente',
moreOptions: 'Más opciones'
},
card: {
customerId: 'ID cliente',
credit: 'Crédito',
securedCredit: 'Crédito asegurado'
},
basicData: {
socialName: 'Nombre fiscal',
businessType: 'Tipo de negocio',
contact: 'Contacto',
email: 'Email',
phone: 'Teléfono',
mobile: 'Móvil',
salesPerson: 'Comercial',
contactChannel: 'Canal de contacto'
}
},
ticket: {

6
src/pages/Claim/Card/ClaimBasicData.vue
View File

@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'src/components/SkeletonForm.vue';
onMounted(() => {
fetch();
@ -50,7 +51,7 @@ const workersCopy = ref([]);
function fetchWorkers() {
const filter = {
where: {
role: 'employee',
role: 'salesPerson',
},
};
const options = { params: { filter } };
@ -134,13 +135,14 @@ function onReset() {
<q-page class="q-pa-md">
<div class="container">
<q-card class="q-pa-md">
<skeleton-form v-if="!claim" />
<q-form v-if="claim" @submit="save" @reset="onReset" greedy>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input v-model="claim.client.name" :label="t('claim.basicData.customer')" disable />
</div>
<div class="col">
<q-input v-model="claim.created" mask="####-##-##" fill-mask="_">
<q-input v-model="claim.created" mask="####-##-##" fill-mask="_" autofocus>
<template #append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">

6
src/pages/Claim/Card/ClaimCard.vue
View File

@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { toDate } from 'src/filters/index';
import { toDate } from 'src/filters';
const route = useRoute();
const { t } = useI18n();
@ -47,7 +47,7 @@ function stateColor(code) {
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit text-grey-8 descriptor">
<div class="header bg-orange q-pa-sm">
<div class="header bg-primary q-pa-sm">
<router-link :to="{ path: '/claim/list' }">
<q-btn round flat dense size="md" icon="view_list" color="white">
<q-tooltip>Claim list</q-tooltip>
@ -144,7 +144,7 @@ function stateColor(code) {
<q-separator />
<q-list>
<q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple active-class="text-orange">
<q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="vn:settings" />
</q-item-section>

2
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -92,7 +92,7 @@ function stateColor(code) {
<q-page class="q-pa-md">
<div class="summary container">
<q-card v-if="claim">
<div class="header bg-orange q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
<div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
<q-list>
<q-item>
<q-item-section>

3
src/pages/Claim/ClaimList.vue
View File

@ -39,6 +39,7 @@ function navigate(id) {
const preview = ref({
shown: false,
});
function showPreview(id) {
preview.value.shown = true;
preview.value.data = {
@ -58,7 +59,7 @@ function showPreview(id) {
<q-item-label>{{ row.client.name }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('claim.list.assigned') }}</q-item-label>
<q-item-label caption>{{ t('claim.list.assignedTo') }}</q-item-label>
<q-item-label>{{ row.worker.user.name }}</q-item-label>
</q-item-section>
</q-item>

245
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -1,5 +1,248 @@
<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'src/components/SkeletonForm.vue';
onMounted(() => {
fetch();
fetchWorkers();
fetchBusinessTypes();
fetchContactChannels();
});
const route = useRoute();
const quasar = useQuasar();
const { t } = useI18n();
const { validate } = useValidator();
const session = useSession();
const token = session.getToken();
const customer = ref(null);
const customerCopy = ref(null);
const hasChanges = ref(false);
function fetch() {
const id = route.params.id;
const filter = {
include: [],
};
const options = { params: { filter } };
axios.get(`Clients/${id}`, options).then(({ data }) => {
customer.value = data;
customerCopy.value = Object.assign({}, data);
watch(customer.value, () => (hasChanges.value = true));
});
}
const businessTypes = ref([]);
function fetchBusinessTypes() {
axios.get(`BusinessTypes`).then(({ data }) => {
businessTypes.value = data;
});
}
const contactChannels = ref([]);
function fetchContactChannels() {
axios.get(`ContactChannels`).then(({ data }) => {
contactChannels.value = data;
});
}
const workers = ref([]);
const workersCopy = ref([]);
function fetchWorkers() {
const filter = {
where: {
role: 'salesPerson',
},
};
const options = { params: { filter } };
axios.get(`Workers/activeWithRole`, options).then(({ data }) => {
workers.value = data;
workersCopy.value = data;
});
}
function filter(value, update, options, originalOptions, filter) {
update(
() => {
if (value === '') {
options.value = originalOptions.value;
return;
}
options.value = options.value.filter(filter);
},
(ref) => {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
}
);
}
function filterWorkers(value, update) {
const search = value.toLowerCase();
filter(value, update, workers, workersCopy, (row) => {
const id = row.id;
const name = row.name.toLowerCase();
const idMatch = id == search;
const nameMatch = name.indexOf(search) > -1;
return idMatch || nameMatch;
});
}
function save() {
const id = route.params.id;
const formData = customer.value;
if (!hasChanges.value) {
return quasar.notify({
type: 'negative',
message: t('globals.noChanges'),
});
}
axios.patch(`Clients/${id}`, formData).then((hasChanges.value = false));
}
function onReset() {
customer.value = customerCopy.value;
hasChanges.value = false;
}
</script>
<template>
<q-page class="q-pa-md">
<q-card class="q-pa-md">Basic Data</q-card>
<div class="container">
<q-card class="q-pa-md">
<skeleton-form v-if="!customer" />
<q-form v-if="customer" @submit="save" @reset="onReset" greedy>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input
v-model="customer.socialName"
:label="t('customer.basicData.socialName')"
:rules="validate('client.socialName')"
autofocus
/>
</div>
<div class="col">
<q-select
v-model="customer.businessTypeFk"
:options="businessTypes"
option-value="code"
option-label="description"
emit-value
:label="t('customer.basicData.businessType')"
map-options
:rules="validate('client.businessTypeFk')"
:input-debounce="0"
/>
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input
v-model="customer.contact"
:label="t('customer.basicData.contact')"
:rules="validate('client.contact')"
clearable
/>
</div>
<div class="col">
<q-input
v-model="customer.email"
type="email"
:label="t('customer.basicData.email')"
:rules="validate('client.email')"
clearable
/>
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input
v-model="customer.phone"
:label="t('customer.basicData.phone')"
:rules="validate('client.phone')"
clearable
/>
</div>
<div class="col">
<q-input
v-model="customer.mobile"
:label="t('customer.basicData.mobile')"
:rules="validate('client.mobile')"
clearable
/>
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-select
v-model="customer.salesPersonFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
:label="t('customer.basicData.salesPerson')"
map-options
use-input
@filter="filterWorkers"
:rules="validate('client.salesPersonFk')"
:input-debounce="0"
>
<template #before>
<q-avatar color="orange">
<q-img
v-if="customer.salesPersonFk"
:src="`/api/Images/user/160x160/${customer.salesPersonFk}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
</template>
</q-select>
</div>
<div class="col">
<q-select
v-model="customer.contactChannelFk"
:options="contactChannels"
option-value="id"
option-label="name"
emit-value
:label="t('customer.basicData.contactChannel')"
map-options
:rules="validate('client.contactChannelFk')"
:input-debounce="0"
/>
</div>
</div>
<div>
<q-btn :label="t('globals.save')" type="submit" color="primary" />
<q-btn :label="t('globals.reset')" type="reset" class="q-ml-sm" color="primary" flat />
</div>
</q-form>
</q-card>
</div>
</q-page>
</template>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
}
.q-card {
width: 800px;
}
</style>

153
src/pages/Customer/Card/CustomerCard.vue
View File

@ -1,23 +1,26 @@
<script setup>
import { computed, ref, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { toCurrency } from 'src/filters';
const route = useRoute();
const state = useState();
const router = useRouter();
const { t } = useI18n();
onMounted(async () => {
await fetch();
});
const entityId = computed(function () {
return router.currentRoute.value.params.id;
});
const customer = ref({});
const customer = ref(null);
async function fetch() {
const { data } = await axios.get(`Clients/${entityId.value}`);
const entityId = route.params.id;
const { data } = await axios.get(`Clients/${entityId}/getCard`);
if (data) customer.value = data;
}
@ -25,13 +28,13 @@ async function fetch() {
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit text-grey-8 descriptor">
<div class="header bg-orange q-pa-sm">
<div class="header bg-primary q-pa-sm">
<router-link :to="{ path: '/customer/list' }">
<q-btn round flat dense size="md" icon="view_list" color="white">
<q-tooltip>Customer list</q-tooltip>
</q-btn>
</router-link>
<router-link :to="{ path: '/customer/list' }">
<router-link :to="{ name: 'CustomerSummary', params: { id: route.params.id } }">
<q-btn round flat dense size="md" icon="launch" color="white">
<q-tooltip>Customer preview</q-tooltip>
</q-btn>
@ -48,55 +51,107 @@ async function fetch() {
</q-btn>
</div>
<h5>{{ customer.name }}</h5>
<div v-if="customer" class="q-py-sm">
<h5>{{ customer.name }}</h5>
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.card.customerId') }}</q-item-label>
<q-item-label>#{{ customer.id }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
<q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.credit) }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
<q-item-label>{{ customer.payMethod.name }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.debt) }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-card-actions class="q-gutter-md">
<q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
<q-tooltip>Customer is disabled</q-tooltip>
</q-icon>
<q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
<q-tooltip>Customer is frozen</q-tooltip>
</q-icon>
<q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
<q-tooltip>Customer has debt</q-tooltip>
</q-icon>
<q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
<q-tooltip>Customer not checked</q-tooltip>
</q-icon>
<q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
<q-tooltip>Web access is disabled</q-tooltip>
</q-icon>
</q-card-actions>
<q-card-actions>
<q-btn size="md" icon="vn:ticket" color="primary">
<q-tooltip>Ticket list</q-tooltip>
</q-btn>
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>Customer ID</q-item-label>
<q-item-label>#{{ customer.id }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>Email</q-item-label>
<q-item-label>{{ customer.email }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-btn size="md" icon="vn:invoice-out" color="primary">
<q-tooltip>Invoice Out list</q-tooltip>
</q-btn>
<q-card-actions>
<q-btn size="md" icon="vn:ticket" color="orange">
<q-tooltip>Ticket list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:basketadd" color="primary">
<q-tooltip>Order list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:invoice-out" color="orange">
<q-tooltip>Invoice Out list</q-tooltip>
</q-btn>
<q-btn size="md" icon="face" color="primary">
<q-tooltip>View user</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:basketadd" color="orange">
<q-tooltip>Order list</q-tooltip>
</q-btn>
<q-btn size="md" icon="expand_more" color="primary">
<q-tooltip>More options</q-tooltip>
</q-btn>
</q-card-actions>
</div>
<!-- Skeleton -->
<div id="descriptor-skeleton" v-if="!customer">
<div class="col q-pl-sm q-pa-sm">
<q-skeleton type="text" square height="45px" />
<q-skeleton type="text" square height="18px" />
<q-skeleton type="text" square height="18px" />
<q-skeleton type="text" square height="18px" />
</div>
<q-btn size="md" icon="face" color="orange">
<q-tooltip>View user</q-tooltip>
</q-btn>
<q-btn size="md" icon="expand_more" color="orange">
<q-tooltip>More options</q-tooltip>
</q-btn>
</q-card-actions>
<q-card-actions>
<q-skeleton size="40px" />
<q-skeleton size="40px" />
<q-skeleton size="40px" />
<q-skeleton size="40px" />
<q-skeleton size="40px" />
</q-card-actions>
</div>
<q-separator />
<q-list>
<q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple active-class="text-orange">
<q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="person" />
<q-icon name="vn:settings" />
</q-item-section>
<q-item-section>Basic data</q-item-section>
<q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
</q-item>
<q-item clickable v-ripple>
<!-- <q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="notes" />
</q-item-section>
@ -111,7 +166,7 @@ async function fetch() {
<q-item-section>Option</q-item-section>
</q-item>
</q-list>
</q-expansion-item>
</q-expansion-item> -->
</q-list>
</q-scroll-area>
</q-drawer>

188
src/pages/Customer/Card/CustomerSummary.vue Normal file
View File

@ -0,0 +1,188 @@
<script setup>
import { onMounted, defineProps, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
// import { toDate } from 'src/filters';
onMounted(() => fetch());
const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
customerId: {
type: Number,
default: 0,
},
});
const entityId = computed(() => $props.customerId || route.params.id);
const customer = ref(null);
function fetch() {
const id = entityId.value;
axios.get(`Clients/${id}/summary`).then(({ data }) => {
customer.value = data;
});
}
</script>
<template>
<q-page class="q-pa-md">
<div class="summary container">
<q-card v-if="customer">
<div class="header bg-primary q-pa-sm q-mb-md">{{ customer.id }} - {{ customer.name }}</div>
<div class="row q-pa-md q-col-gutter-md q-mb-md">
<div class="col">
<div class="text-h6 text-grey">Basic data</div>
<q-scroll-area class="fit descriptor">
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
<q-item-label>{{ customer.id }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
<q-item-label>{{ customer.socialName }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.contact') }}</q-item-label>
<q-item-label>{{ customer.contact }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.phone') }}</q-item-label>
<q-item-label>{{ customer.phone }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.mobile') }}</q-item-label>
<q-item-label>{{ customer.mobile }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.email') }}</q-item-label>
<q-item-label>{{ customer.email }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label>
<q-item-label>{{ customer.salesPersonUser.name }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.contactChannel') }}</q-item-label>
<q-item-label>{{ customer.contactChannel.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</div>
<div class="col">
<q-list>
<q-item-label header>Fiscal address</q-item-label>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
<q-item-label>{{ customer.id }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
<q-item-label>{{ customer.socialName }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col">
<q-list>
<q-item-label header>Fiscal data</q-item-label>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
<q-item-label>{{ customer.id }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
<q-item-label>{{ customer.socialName }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
<div class="row q-pa-md q-col-gutter-md q-mb-md">
<div class="col">
<div class="text-h6 text-grey">Basic data</div>
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
<q-item-label>{{ customer.id }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
<q-item-label>{{ customer.socialName }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
<!-- <q-card-section class="q-pa-md">
<h6>{{ t('claim.summary.details.title') }}</h6>
<q-table :columns="detailsColumns" :rows="salesClaimed" flat></q-table>
</q-card-section> -->
</q-card>
</div>
</q-page>
</template>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
}
.q-card {
width: 100%;
max-width: 950px;
}
.summary {
.header {
text-align: center;
font-size: 18px;
}
#slider-container {
max-width: 80%;
margin: 0 auto;
.q-slider {
.q-slider__marker-labels:nth-child(1) {
transform: none;
}
.q-slider__marker-labels:nth-child(2) {
transform: none;
left: auto !important;
right: 0%;
}
}
}
}
</style>

18
src/pages/Customer/CustomerList.vue
View File

@ -1,7 +1,9 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import SmartCard from 'src/components/SmartCard.vue';
import CustomerSummary from './Card/CustomerSummary.vue';
const router = useRouter();
const { t } = useI18n();
@ -9,6 +11,17 @@ const { t } = useI18n();
function navigate(id) {
router.push({ path: `/customer/${id}` });
}
const preview = ref({
shown: false,
});
function showPreview(id) {
preview.value.shown = true;
preview.value.data = {
customerId: id,
};
}
</script>
<template>
@ -54,7 +67,7 @@ function navigate(id) {
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
<q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
</q-btn>
<q-btn flat round color="grey-7" icon="preview">
<q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
</q-btn>
<q-btn flat round color="grey-7" icon="vn:ticket">
@ -63,4 +76,7 @@ function navigate(id) {
</template>
</smart-card>
</q-page>
<q-dialog v-model="preview.shown">
<customer-summary :customer-id="preview.data.customerId" />
</q-dialog>
</template>

11
src/router/modules/customer.js
View File

@ -4,7 +4,6 @@ export default {
path: '/customer',
name: 'Customer',
meta: {
roles: ['developer'],
title: 'customers',
icon: 'vn:client'
},
@ -41,8 +40,16 @@ export default {
name: 'CustomerCard',
path: ':id',
component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
redirect: { name: 'CustomerBasicData' },
redirect: { name: 'CustomerSummary' },
children: [
{
name: 'CustomerSummary',
path: 'summary',
meta: {
title: 'summary'
},
component: () => import('src/pages/Customer/Card/CustomerSummary.vue'),
},
{
path: 'basic-data',
name: 'CustomerBasicData',