Updated ticket module
gitea/salix-front/pipeline/head There was a failure building this commit
Details
gitea/salix-front/pipeline/head There was a failure building this commit
Details
This commit is contained in:
parent
dac5a0b4e1
commit
c0454ed3e8
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="header bg-primary q-pa-sm q-mb-md">
|
||||
<q-skeleton type="rect" square />
|
||||
</div>
|
||||
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<q-skeleton type="rect" class="q-mb-md" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-skeleton type="rect" class="q-mb-md" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-skeleton type="rect" class="q-mb-md" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-skeleton type="rect" class="q-mb-md" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-skeleton type="rect" class="q-mb-md" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
<q-skeleton type="text" square />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.col {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
|
||||
$primary: #1976d2;
|
||||
$primary: #ff9800;
|
||||
$secondary: #26a69a;
|
||||
$accent: #9c27b0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import toLowerCase from './toLowerCase';
|
||||
import toDate from './toDate';
|
||||
import toCurrency from './toCurrency';
|
||||
import toPercentage from './toPercentage';
|
||||
|
||||
export {
|
||||
toLowerCase,
|
||||
toDate,
|
||||
toCurrency,
|
||||
toPercentage,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export default function (value, symbol = 'EUR', fractionSize = 2) {
|
||||
if (!value) return;
|
||||
if (value == null || value === '') return;
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export default function (value, fractionSize = 2) {
|
||||
if (value == null || value === '') return;
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
||||
const options = {
|
||||
style: 'percent',
|
||||
minimumFractionDigits: fractionSize,
|
||||
maximumFractionDigits: fractionSize
|
||||
};
|
||||
|
||||
return new Intl.NumberFormat(locale, options)
|
||||
.format(parseFloat(value));
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -44,6 +44,7 @@ export default {
|
|||
customers: 'Customers',
|
||||
list: 'List',
|
||||
createCustomer: 'Create customer',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data'
|
||||
},
|
||||
list: {
|
||||
|
|
@ -53,22 +54,75 @@ export default {
|
|||
moreOptions: 'More options'
|
||||
},
|
||||
card: {
|
||||
customerList: 'Customer list',
|
||||
customerId: 'Claim ID',
|
||||
salesPerson: 'Sales person',
|
||||
credit: 'Credit',
|
||||
securedCredit: 'Secured credit',
|
||||
payMethod: 'Pay method',
|
||||
debt: 'Debt'
|
||||
debt: 'Debt',
|
||||
isDisabled: 'Customer is disabled',
|
||||
isFrozen: 'Customer is frozen',
|
||||
hasDebt: 'Customer has debt',
|
||||
notChecked: 'Customer not checked',
|
||||
noWebAccess: 'Web access is disabled'
|
||||
},
|
||||
summary: {
|
||||
basicData: 'Basic data',
|
||||
fiscalAddress: 'Fiscal address',
|
||||
fiscalData: 'Fiscal data',
|
||||
billingData: 'Billing data',
|
||||
consignee: 'Consignee',
|
||||
businessData: 'Business data',
|
||||
financialData: 'Financial data',
|
||||
customerId: 'Customer ID',
|
||||
socialName: 'Social name',
|
||||
name: 'Name',
|
||||
contact: 'Contact',
|
||||
phone: 'Phone',
|
||||
mobile: 'Mobile',
|
||||
email: 'Email',
|
||||
salesPerson: 'Sales person',
|
||||
contactChannel: 'Contact channel',
|
||||
socialName: 'Social name',
|
||||
fiscalId: 'Fiscal ID',
|
||||
postcode: 'Postcode',
|
||||
province: 'Province',
|
||||
country: 'Country',
|
||||
street: 'Address',
|
||||
isEqualizated: 'Is equalizated',
|
||||
isActive: 'Is active',
|
||||
invoiceByAddress: 'Invoice by address',
|
||||
verifiedData: 'Verified data',
|
||||
hasToInvoice: 'Has to invoice',
|
||||
notifyByEmail: 'Notify by email',
|
||||
vies: 'VIES',
|
||||
payMethod: 'Pay method',
|
||||
bankAccount: 'Bank account',
|
||||
dueDay: 'Due day',
|
||||
hasLcr: 'Has LCR',
|
||||
hasCoreVnl: 'Has core VNL',
|
||||
hasB2BVnl: 'Has B2B VNL',
|
||||
addressName: 'Address name',
|
||||
addressCity: 'City',
|
||||
addressStreet: 'Street',
|
||||
username: 'Username',
|
||||
webAccess: 'Web access',
|
||||
totalGreuge: 'Total greuge',
|
||||
mana: 'Mana',
|
||||
priceIncreasingRate: 'Price increasing rate',
|
||||
averageInvoiced: 'Average invoiced',
|
||||
claimRate: 'Claming rate',
|
||||
risk: 'Risk',
|
||||
riskInfo: 'Invoices minus payments plus orders not yet invoiced',
|
||||
credit: 'Credit',
|
||||
creditInfo: `Company's maximum risk`,
|
||||
securedCredit: 'Secured credit',
|
||||
securedCreditInfo: `Solunion's maximum risk`,
|
||||
balance: 'Balance',
|
||||
balanceInfo: 'Invoices minus payments',
|
||||
balanceDue: 'Balance due',
|
||||
balanceDueInfo: 'Deviated invoices minus payments',
|
||||
recoverySince: 'Recovery since',
|
||||
},
|
||||
basicData: {
|
||||
socialName: 'Fiscal name',
|
||||
|
|
@ -87,6 +141,24 @@ export default {
|
|||
list: 'List',
|
||||
createTicket: 'Create ticket',
|
||||
basicData: 'Basic Data'
|
||||
},
|
||||
list: {
|
||||
nickname: 'Nickname',
|
||||
state: 'State',
|
||||
shipped: 'Shipped',
|
||||
landed: 'Landed',
|
||||
salesPerson: 'Sales person',
|
||||
total: 'Total'
|
||||
},
|
||||
card: {
|
||||
ticketId: 'Ticket ID',
|
||||
state: 'State',
|
||||
customerId: 'Customer ID',
|
||||
salesPerson: 'Sales person',
|
||||
agency: 'Agency',
|
||||
shipped: 'Shipped',
|
||||
warehouse: 'Warehouse',
|
||||
customerCard: 'Customer card'
|
||||
}
|
||||
},
|
||||
claim: {
|
||||
|
|
@ -146,6 +218,11 @@ export default {
|
|||
noData: 'No data to display',
|
||||
openCard: 'View card',
|
||||
openSummary: 'Open summary'
|
||||
},
|
||||
card: {
|
||||
mainList: 'Main list',
|
||||
summary: 'Summary',
|
||||
moreOptions: 'More options',
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export default {
|
|||
customers: 'Clientes',
|
||||
list: 'Listado',
|
||||
createCustomer: 'Crear cliente',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos'
|
||||
},
|
||||
list: {
|
||||
|
|
@ -54,8 +55,73 @@ export default {
|
|||
},
|
||||
card: {
|
||||
customerId: 'ID cliente',
|
||||
salesPerson: 'Comercial',
|
||||
credit: 'Crédito',
|
||||
securedCredit: 'Crédito asegurado'
|
||||
securedCredit: 'Crédito asegurado',
|
||||
payMethod: 'Método de pago',
|
||||
debt: 'Riesgo',
|
||||
isDisabled: 'El cliente está desactivado',
|
||||
isFrozen: 'El cliente está congelado',
|
||||
hasDebt: 'El cliente tiene riesgo',
|
||||
notChecked: 'El cliente no está comprobado',
|
||||
noWebAccess: 'El acceso web está desactivado'
|
||||
},
|
||||
summary: {
|
||||
basicData: 'Datos básicos',
|
||||
fiscalAddress: 'Dirección fiscal',
|
||||
fiscalData: 'Datos fiscales',
|
||||
billingData: 'Datos de facturación',
|
||||
consignee: 'Consignatario',
|
||||
businessData: 'Datos comerciales',
|
||||
financialData: 'Datos financieros',
|
||||
customerId: 'ID cliente',
|
||||
name: 'Nombre',
|
||||
contact: 'Contacto',
|
||||
phone: 'Teléfono',
|
||||
mobile: 'Móvil',
|
||||
email: 'Email',
|
||||
salesPerson: 'Comercial',
|
||||
contactChannel: 'Canal de contacto',
|
||||
socialName: 'Razón social',
|
||||
fiscalId: 'NIF/CIF',
|
||||
postcode: 'Código postal',
|
||||
province: 'Provincia',
|
||||
country: 'País',
|
||||
street: 'Calle',
|
||||
isEqualizated: 'Equalizado',
|
||||
isActive: 'Activo',
|
||||
invoiceByAddress: 'Facturar por consignatario',
|
||||
verifiedData: 'Datos verificados',
|
||||
hasToInvoice: 'Facturar',
|
||||
notifyByEmail: 'Notificar por email',
|
||||
vies: 'VIES',
|
||||
payMethod: 'Método de pago',
|
||||
bankAccount: 'Cuenta bancaria',
|
||||
dueDay: 'Día de pago',
|
||||
hasLcr: 'Recibido LCR',
|
||||
hasCoreVnl: 'Recibido core VNL',
|
||||
hasB2BVnl: 'Recibido B2B VNL',
|
||||
addressName: 'Nombre de la dirección',
|
||||
addressCity: 'Ciudad',
|
||||
addressStreet: 'Calle',
|
||||
username: 'Usuario',
|
||||
webAccess: 'Acceso web',
|
||||
totalGreuge: 'Greuge total',
|
||||
mana: 'Maná',
|
||||
priceIncreasingRate: 'Ratio de incremento de precio',
|
||||
averageInvoiced: 'Facturación media',
|
||||
claimRate: 'Ratio de reclamaciones',
|
||||
risk: 'Riesgo',
|
||||
riskInfo: 'Facturas menos recibos mas pedidos sin facturar',
|
||||
credit: 'Crédito',
|
||||
creditInfo: `Riesgo máximo asumido por la empresa`,
|
||||
securedCredit: 'Crédito asegurado',
|
||||
securedCreditInfo: `Riesgo máximo asumido por Solunion`,
|
||||
balance: 'Balance',
|
||||
balanceInfo: 'Facturas menos recibos',
|
||||
balanceDue: 'Saldo vencido',
|
||||
balanceDueInfo: 'Facturas fuera de plazo menos recibos',
|
||||
recoverySince: 'Recobro desde',
|
||||
},
|
||||
basicData: {
|
||||
socialName: 'Nombre fiscal',
|
||||
|
|
@ -74,6 +140,24 @@ export default {
|
|||
list: 'Listado',
|
||||
createTicket: 'Crear ticket',
|
||||
basicData: 'Datos básicos'
|
||||
},
|
||||
list: {
|
||||
nickname: 'Alias',
|
||||
state: 'Estado',
|
||||
shipped: 'Enviado',
|
||||
landed: 'Entregado',
|
||||
salesPerson: 'Comercial',
|
||||
total: 'Total'
|
||||
},
|
||||
card: {
|
||||
ticketId: 'ID ticket',
|
||||
state: 'Estado',
|
||||
customerId: 'ID cliente',
|
||||
salesPerson: 'Comercial',
|
||||
agency: 'Agencia',
|
||||
shipped: 'Enviado',
|
||||
warehouse: 'Almacén',
|
||||
customerCard: 'Ficha del cliente'
|
||||
}
|
||||
},
|
||||
claim: {
|
||||
|
|
@ -133,6 +217,11 @@ export default {
|
|||
noData: 'Sin datos que mostrar',
|
||||
openCard: 'Ver ficha',
|
||||
openSummary: 'Abrir detalles'
|
||||
},
|
||||
card: {
|
||||
mainList: 'Listado principal',
|
||||
summary: 'Resumen',
|
||||
moreOptions: 'Más opciones',
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,29 +50,32 @@ function stateColor(code) {
|
|||
<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>
|
||||
<q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'ClaimSummary', params: { id: route.params.id } }">
|
||||
<q-btn round flat dense size="md" icon="launch" color="white">
|
||||
<q-tooltip>Claim summary</q-tooltip>
|
||||
<q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
|
||||
<q-btn round flat dense size="md" icon="more_vert" color="white">
|
||||
<q-tooltip>More options</q-tooltip>
|
||||
<q-menu>
|
||||
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||||
<!-- <q-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-menu> -->
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="claim.client" class="q-py-sm">
|
||||
<h5>{{ claim.client.name }}</h5>
|
||||
<q-list>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
{{ claim.client.name }}
|
||||
<q-tooltip>{{ claim.client.name }}</q-tooltip>
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
|
||||
|
|
@ -158,6 +161,12 @@ function stateColor(code) {
|
|||
</q-page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-scrollarea__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.descriptor {
|
||||
h5 {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import { toDate } from 'src/filters';
|
||||
import SkeletonSummary from 'src/components/SkeletonSummary';
|
||||
|
||||
onMounted(() => fetch());
|
||||
|
||||
|
|
@ -91,59 +92,62 @@ function stateColor(code) {
|
|||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="summary container">
|
||||
<q-card v-if="claim">
|
||||
<div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(claim.created) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(claim.claimState.code)" dense>
|
||||
{{ claim.claimState.description }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
|
||||
<q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
|
||||
<q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<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-section class="q-pa-md">
|
||||
<h6>Action</h6>
|
||||
<q-separator />
|
||||
<div id="slider-container">
|
||||
<q-slider
|
||||
v-model="claim.responsibility"
|
||||
label
|
||||
:label-value="'Responsibility'"
|
||||
label-always
|
||||
color="primary"
|
||||
markers
|
||||
:marker-labels="[
|
||||
{ value: 1, label: 'Company' },
|
||||
{ value: 5, label: 'Person' },
|
||||
]"
|
||||
:min="1"
|
||||
:max="5"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card>
|
||||
<skeleton-summary v-if="!claim" />
|
||||
<template v-if="claim">
|
||||
<div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(claim.created) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(claim.claimState.code)" dense>
|
||||
{{ claim.claimState.description }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
|
||||
<q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
|
||||
<q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<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-section class="q-pa-md">
|
||||
<h6>Action</h6>
|
||||
<q-separator />
|
||||
<div id="slider-container">
|
||||
<q-slider
|
||||
v-model="claim.responsibility"
|
||||
label
|
||||
:label-value="'Responsibility'"
|
||||
label-always
|
||||
color="primary"
|
||||
markers
|
||||
:marker-labels="[
|
||||
{ value: 1, label: 'Company' },
|
||||
{ value: 5, label: 'Person' },
|
||||
]"
|
||||
:min="1"
|
||||
:max="5"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@ function showPreview(id) {
|
|||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.list.state') }}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(row.claimState.code)" dense>{{
|
||||
row.claimState.description
|
||||
}}</q-chip>
|
||||
<q-chip :color="stateColor(row.claimState.code)" dense>
|
||||
{{ row.claimState.description }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
|
|||
|
|
@ -31,29 +31,32 @@ async function fetch() {
|
|||
<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-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<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-tooltip>{{ t('components.card.summary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
|
||||
<q-btn round flat dense size="md" icon="more_vert" color="white">
|
||||
<q-tooltip>More options</q-tooltip>
|
||||
<q-menu>
|
||||
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||||
<!-- <q-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-menu> -->
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="customer" class="q-py-sm">
|
||||
<h5>{{ customer.name }}</h5>
|
||||
<q-list>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
{{ customer.name }}
|
||||
<q-tooltip>{{ customer.name }}</q-tooltip>
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.card.customerId') }}</q-item-label>
|
||||
|
|
@ -87,22 +90,22 @@ async function fetch() {
|
|||
</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-tooltip>{{ t('customer.card.isDisabled') }}</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-tooltip>{{ t('customer.card.isFrozen') }}</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-tooltip>{{ t('customer.card.hasDebt') }}</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-tooltip>{{ t('customer.card.notChecked') }}</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-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-card-actions>
|
||||
<q-card-actions>
|
||||
<!-- <q-card-actions>
|
||||
<q-btn size="md" icon="vn:ticket" color="primary">
|
||||
<q-tooltip>Ticket list</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -122,7 +125,7 @@ async function fetch() {
|
|||
<q-btn size="md" icon="expand_more" color="primary">
|
||||
<q-tooltip>More options</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card-actions> -->
|
||||
</div>
|
||||
<!-- Skeleton -->
|
||||
<div id="descriptor-skeleton" v-if="!customer">
|
||||
|
|
@ -149,7 +152,7 @@ async function fetch() {
|
|||
<q-item-section avatar>
|
||||
<q-icon name="vn:settings" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
|
||||
<q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
|
||||
</q-item>
|
||||
<!-- <q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ 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';
|
||||
import { toCurrency, toPercentage, toDate } from 'src/filters';
|
||||
import SkeletonSummary from 'src/components/SkeletonSummary';
|
||||
|
||||
onMounted(() => fetch());
|
||||
|
||||
|
|
@ -26,18 +27,59 @@ function fetch() {
|
|||
customer.value = data;
|
||||
});
|
||||
}
|
||||
|
||||
const balanceDue = computed(() => {
|
||||
const [defaulter] = customer.value.defaulters;
|
||||
|
||||
return defaulter.amount;
|
||||
});
|
||||
|
||||
const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
|
||||
|
||||
const claimRate = computed(() => {
|
||||
const data = customer.value;
|
||||
|
||||
return data.claimsRatio.claimingRate * 100;
|
||||
});
|
||||
|
||||
const priceIncreasingRate = computed(() => {
|
||||
const data = customer.value;
|
||||
|
||||
return data.claimsRatio.priceIncreasing / 100;
|
||||
});
|
||||
|
||||
const debtWarning = computed(() => {
|
||||
const data = customer.value;
|
||||
|
||||
return data.debt.debt > data.credit ? 'negative' : '';
|
||||
});
|
||||
|
||||
const creditWarning = computed(() => {
|
||||
const data = customer.value;
|
||||
const tooMuchInsurance = data.credit > data.creditInsurance;
|
||||
const noCreditInsurance = data.credit && data.creditInsurance == null;
|
||||
|
||||
return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
|
||||
});
|
||||
</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-card>
|
||||
<skeleton-summary v-if="!customer" />
|
||||
<template 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">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.basicData') }}
|
||||
<router-link :to="{ name: 'CustomerBasicData' }">
|
||||
<q-icon name="open_in_new" />
|
||||
</router-link>
|
||||
</q-item-label>
|
||||
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
|
||||
|
|
@ -46,8 +88,8 @@ function fetch() {
|
|||
</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-label caption>{{ t('customer.summary.name') }}</q-item-label>
|
||||
<q-item-label>{{ customer.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
|
|
@ -56,6 +98,12 @@ function fetch() {
|
|||
<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.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.phone') }}</q-item-label>
|
||||
|
|
@ -74,12 +122,6 @@ function fetch() {
|
|||
<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>
|
||||
|
|
@ -87,66 +129,308 @@ function fetch() {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.fiscalAddress') }}
|
||||
</q-item-label>
|
||||
<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.fiscalId') }}</q-item-label>
|
||||
<q-item-label>{{ customer.fi }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.postcode') }}</q-item-label>
|
||||
<q-item-label>{{ customer.postcode }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.province') }}</q-item-label>
|
||||
<q-item-label>{{ customer.province.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.country') }}</q-item-label>
|
||||
<q-item-label>{{ customer.country.country }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.street') }}</q-item-label>
|
||||
<q-item-label>{{ customer.street }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.fiscalData') }}
|
||||
</q-item-label>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.isEqualizated"
|
||||
:label="t('customer.summary.isEqualizated')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.isActive"
|
||||
:label="t('customer.summary.isActive')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.hasToInvoiceByAddress"
|
||||
:label="t('customer.summary.invoiceByAddress')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.isTaxDataChecked"
|
||||
:label="t('customer.summary.verifiedData')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.hasToInvoice"
|
||||
:label="t('customer.summary.hasToInvoice')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.isToBeMailed"
|
||||
:label="t('customer.summary.notifyByEmail')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox v-model="customer.isVies" :label="t('customer.summary.vies')" disable />
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.billingData') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.payMethod') }}</q-item-label>
|
||||
<q-item-label>{{ customer.payMethod.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.bankAccount') }}</q-item-label>
|
||||
<q-item-label>{{ customer.iban }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.dueDay') }}</q-item-label>
|
||||
<q-item-label>{{ customer.dueDay }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.hasLcr"
|
||||
:label="t('customer.summary.hasLcr')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.hasCoreVnl"
|
||||
:label="t('customer.summary.hasCoreVnl')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.hasSepaVnl"
|
||||
:label="t('customer.summary.hasB2BVnl')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.consignee') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.addressName') }}</q-item-label>
|
||||
<q-item-label>{{ customer.defaultAddress.nickname }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.addressCity') }}</q-item-label>
|
||||
<q-item-label>{{ customer.defaultAddress.city }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.addressStreet') }}</q-item-label>
|
||||
<q-item-label>{{ customer.defaultAddress.street }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.webAccess') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.username') }}</q-item-label>
|
||||
<q-item-label>{{ customer.account.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-checkbox
|
||||
v-model="customer.account.active"
|
||||
:label="t('customer.summary.webAccess')"
|
||||
disable
|
||||
/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.businessData') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.totalGreuge') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(customer.totalGreuge) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="customer.mana">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.mana') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(customer.mana.mana) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.priceIncreasingRate')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ toPercentage(priceIncreasingRate) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="customer.averageInvoiced">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.averageInvoiced') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(customer.averageInvoiced.invoiced) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.claimRate') }}</q-item-label>
|
||||
<q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.financialData') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.risk') }}</q-item-label>
|
||||
<q-item-label :class="debtWarning">
|
||||
{{ toCurrency(customer.debt.debt) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{ t('customer.summary.riskInfo') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.credit') }}</q-item-label>
|
||||
<q-item-label :class="creditWarning">
|
||||
{{ toCurrency(customer.credit) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{ t('customer.summary.creditInfo') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.securedCredit') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(customer.creditInsurance) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{ t('customer.summary.securedCreditInfo') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.balance') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(customer.sumRisk) || toCurrency(0) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{ t('customer.summary.balanceInfo') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.balanceDue') }}</q-item-label>
|
||||
<q-item-label :class="balanceDueWarning">
|
||||
{{ toCurrency(balanceDue) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{ t('customer.summary.balanceDueInfo') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="customer.recovery">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.recoverySince') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(customer.recovery.started) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</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> -->
|
||||
</template>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
|
|
@ -160,10 +444,32 @@ function fetch() {
|
|||
|
||||
.q-card {
|
||||
width: 100%;
|
||||
max-width: 950px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.summary {
|
||||
.q-list {
|
||||
.q-item__label--header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.col {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,185 @@
|
|||
<script setup>
|
||||
import { computed } 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 { toDate } from 'src/filters';
|
||||
|
||||
const route = useRoute();
|
||||
const state = useState();
|
||||
const router = useRouter();
|
||||
const entityId = computed(function () {
|
||||
return router.currentRoute.value.params.id;
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(async () => {
|
||||
await fetch();
|
||||
});
|
||||
|
||||
const ticket = ref(null);
|
||||
|
||||
async function fetch() {
|
||||
const entityId = route.params.id;
|
||||
|
||||
const { data } = await axios.get(`Tickets/${entityId}/summary`);
|
||||
|
||||
if (data) ticket.value = data;
|
||||
}
|
||||
|
||||
function stateColor(state) {
|
||||
if (state.code === 'OK') return 'text-green';
|
||||
if (state.code === 'FREE') return 'text-blue-3';
|
||||
if (state.alertLevel === 1) return 'text-orange';
|
||||
if (state.alertLevel === 0) return 'text-red';
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<router-link :to="{ path: '/customer/list' }">
|
||||
<q-icon name="arrow_back" size="md" color="primary" />
|
||||
</router-link>
|
||||
<div>Customer ID: {{ entityId }}</div>
|
||||
<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-primary q-pa-sm">
|
||||
<router-link :to="{ path: '/ticket/list' }">
|
||||
<q-btn round flat dense size="md" icon="view_list" color="white">
|
||||
<q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'TicketSummary', params: { id: route.params.id } }">
|
||||
<q-btn round flat dense size="md" icon="launch" color="white">
|
||||
<q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
|
||||
<q-btn round flat dense size="md" icon="more_vert" color="white">
|
||||
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||||
<!-- <q-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</q-list>
|
||||
</q-menu> -->
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="ticket" class="q-py-sm">
|
||||
<q-list>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
{{ ticket.nickname }}
|
||||
<q-tooltip>{{ ticket.nickname }}</q-tooltip>
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
|
||||
<q-item-label>#{{ ticket.id }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
|
||||
<q-item-label :class="stateColor(ticket.ticketState.state)">
|
||||
{{ ticket.ticketState.state.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.clientFk }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.warehouse.name }}</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>{{ t('customer.card.isDisabled') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
|
||||
<q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
|
||||
<q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
|
||||
<q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
|
||||
<q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
|
||||
</q-icon>
|
||||
</q-card-actions> -->
|
||||
<q-card-actions>
|
||||
<q-btn size="md" icon="vn:client" color="primary">
|
||||
<q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
<!-- Skeleton -->
|
||||
<div id="descriptor-skeleton" v-if="!ticket">
|
||||
<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-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: 'TicketBasicData' }" clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="vn:settings" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('ticket.pageTitles.basicData') }}</q-item-section>
|
||||
</q-item> -->
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
<router-view></router-view>
|
||||
</q-page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-scrollarea__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.descriptor {
|
||||
h5 {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.q-card__actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,110 +1,140 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
import SmartCard from 'src/components/SmartCard.vue';
|
||||
import { toDate, toCurrency } from 'src/filters/index';
|
||||
// import CustomerSummary from './Card/CustomerSummary.vue';
|
||||
|
||||
const customers = [
|
||||
{
|
||||
id: 1101,
|
||||
name: 'Bruce Wayne',
|
||||
username: 'batman',
|
||||
email: 'batman@gotham',
|
||||
phone: '555-555-5555',
|
||||
expanded: ref(false),
|
||||
},
|
||||
{
|
||||
id: 1102,
|
||||
name: 'James Gordon',
|
||||
username: 'jamesgordon',
|
||||
email: 'jamesgordon@gotham',
|
||||
phone: '555-555-1111',
|
||||
expanded: ref(false),
|
||||
},
|
||||
];
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'client',
|
||||
scope: {
|
||||
include: {
|
||||
relation: 'salesPersonUser',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'ticketState',
|
||||
scope: {
|
||||
fields: ['stateFk', 'code', 'alertLevel'],
|
||||
include: {
|
||||
relation: 'state',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function stateColor(state) {
|
||||
if (state.code === 'OK') return 'green';
|
||||
if (state.code === 'FREE') return 'blue-3';
|
||||
if (state.alertLevel === 1) return 'orange';
|
||||
if (state.alertLevel === 0) return 'red';
|
||||
}
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/customer/${id}` });
|
||||
router.push({ path: `/ticket/${id}` });
|
||||
}
|
||||
|
||||
const preview = ref({
|
||||
shown: false,
|
||||
});
|
||||
|
||||
function showPreview(id) {
|
||||
preview.value.shown = true;
|
||||
preview.value.data = {
|
||||
customerId: id,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="column items-center q-gutter-y-md">
|
||||
<q-card v-for="customer in customers" :key="customer.id" class="card">
|
||||
<!-- v-ripple :to="{ path: '/dashboard' }" -->
|
||||
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
||||
<q-item-section class="q-pa-md">
|
||||
<div class="text-h6">{{ customer.name }}</div>
|
||||
<q-item-label caption>@{{ customer.username }}</q-item-label>
|
||||
<div class="q-mt-md">
|
||||
<q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<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-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>Phone</q-item-label>
|
||||
<q-item-label>{{ customer.phone }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-btn color="grey-7" round flat icon="more_vert">
|
||||
<q-menu cover auto-close>
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section>Action 1</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section>Action 2</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
<q-card-actions vertical class="justify-between">
|
||||
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
|
||||
<q-btn flat round color="accent" icon="preview" />
|
||||
<q-btn flat round color="accent" icon="vn:ticket" />
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
color="grey"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
:icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
|
||||
@click="customer.expanded.value = !customer.expanded.value"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card-actions>
|
||||
</q-item>
|
||||
<q-slide-transition>
|
||||
<div v-show="customer.expanded.value">
|
||||
<q-separator />
|
||||
<q-card-section class="text-subitle2">
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section>
|
||||
<q-item-label>Address</q-item-label>
|
||||
<q-item-label caption>Avenue 11</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
<smart-card url="/Tickets" :filter="filter" sort-by="id DESC" @on-navigate="navigate" auto-load>
|
||||
<template #labels="{ row }">
|
||||
<q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.list.nickname') }}</q-item-label>
|
||||
<q-item-label>{{ row.nickname }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.list.state') }}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(row.ticketState)" dense>
|
||||
{{ row.ticketState.state.name }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.list.shipped') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(row.shipped) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.list.landed') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(row.landed) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section v-if="row.client.salesPersonUser">
|
||||
<q-item-label caption>{{ t('ticket.list.salesPerson') }}</q-item-label>
|
||||
<q-item-label>{{ row.client.salesPersonUser.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.list.total') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(row.totalWithVat) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<q-btn color="grey-7" round flat icon="more_vert">
|
||||
<q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
|
||||
<q-menu cover auto-close>
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="add" />
|
||||
</q-item-section>
|
||||
<q-item-section>Add a note</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="history" />
|
||||
</q-item-section>
|
||||
<q-item-section>Display customer history</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 60em;
|
||||
}
|
||||
</style>
|
||||
<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" @click="showPreview(row.id)">
|
||||
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round color="grey-7" icon="vn:ticket">
|
||||
<q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</template>
|
||||
</smart-card>
|
||||
</q-page>
|
||||
<!-- <q-dialog v-model="preview.shown">
|
||||
<customer-summary :customer-id="preview.data.customerId" />
|
||||
</q-dialog> -->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ export default {
|
|||
name: 'Ticket',
|
||||
path: '/ticket',
|
||||
meta: {
|
||||
roles: ['developer'],
|
||||
title: 'tickets',
|
||||
icon: 'vn:ticket'
|
||||
},
|
||||
|
|
@ -43,8 +42,16 @@ export default {
|
|||
name: 'TicketCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
|
||||
redirect: { name: 'TicketBasicData' },
|
||||
redirect: { name: 'TicketSummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'TicketSummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary'
|
||||
},
|
||||
component: () => import('src/pages/Ticket/Card/TicketSummary.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TicketBasicData',
|
||||
path: 'basic-data',
|
||||
|
|
|
|||
Loading…
Reference in New Issue