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

perf: AccountCard, BasicData, summary

This commit is contained in:
Javier Segarra 2024-05-21 08:52:19 +02:00
parent 026997a369
commit 2cae2168ac
6 changed files with 64 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/Account/AccountList.vue
View File

@ -21,17 +21,9 @@ const filter = {
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
};
const STATE_COLOR = {
pending: 'warning',
managed: 'info',
resolved: 'positive',
};
function getApiUrl() {
return new URL(window.location).origin;
}
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`);
@ -86,37 +78,12 @@ function navigate(event, id) {
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('account.list.customer')">
<template #value>
<span class="link" @click.stop>
{{ row.clientName }}
</span>
</template>
</VnLv>
<VnLv :label="t('account.list.assignedTo')">
<template #value>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
<VnLv :label="t('account.card.name')" :value="row.nickname">
</VnLv>
<VnLv
:label="t('account.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('account.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
:label="t('account.card.nickname')"
:value="row.username"
>
</VnLv>
</template>
<template #actions>

164
src/pages/Account/Card/AccountBasicData.vue
View File

@ -3,178 +3,52 @@ import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
const route = useRoute();
const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const accountFilter = {
fields: [
'id',
'clientFk',
'created',
'workerFk',
'accountStateFk',
'packages',
'pickup',
],
include: [
{
relation: 'client',
scope: {
fields: ['name'],
},
},
],
};
const accountStates = ref([]);
const accountStatesCopy = ref([]);
const optionsList = ref([]);
const workersOptions = ref([]);
function setAccountStates(data) {
accountStates.value = data;
accountStatesCopy.value = data;
}
async function getEnumValues() {
optionsList.value = [{ id: null, description: t('account.basicData.null') }];
const { data } = await axios.get(`Applications/get-enum-values`, {
params: {
schema: 'vn',
table: 'account',
column: 'pickup',
},
});
for (let value of data)
optionsList.value.push({
id: value,
description: t(`account.basicData.${value}`),
});
}
getEnumValues();
const statesFilter = {
options: accountStates,
filterFn: (options, value) => {
const search = value.toLowerCase();
if (value === '') return accountStatesCopy.value;
return options.value.filter((row) => {
const description = row.description.toLowerCase();
return description.indexOf(search) > -1;
});
},
where: { id: route.params.id },
fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
include: [],
};
</script>
<template>
<FetchData
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workersOptions = data)"
auto-load
/>
<FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
<FormModel
:url="`Accounts/${route.params.id}`"
:url-update="`Accounts/updateAccount/${route.params.id}`"
:url="`VnUsers/preview`"
:url-update="`VnUsers/${route.params.id}/update-user`"
:filter="accountFilter"
model="account"
model="Accounts"
auto-load
>
<template #form="{ data, validate, filter }">
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.client.name"
:label="t('account.basicData.customer')"
disable
/>
<VnInput v-model="data.name" :label="t('account.card.nickname')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
v-model="data.created"
:label="t('account.basicData.created')"
/>
<VnInput v-model="data.nickname" :label="t('account.card.alias')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput v-model="data.email" :label="t('account.card.email')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('account.basicData.assignedTo')"
v-model="data.workerFk"
:options="workersOptions"
option-value="id"
option-label="name"
emit-value
auto-load
:rules="validate('account.accountStateFk')"
>
<template #before>
<QAvatar color="orange">
<QImg
v-if="data.workerFk"
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
spinner-color="white"
/>
</QAvatar>
</template>
</VnSelect>
</div>
<div class="col">
<QSelect
v-model="data.accountStateFk"
:options="accountStates"
option-value="id"
option-label="description"
emit-value
:label="t('account.basicData.state')"
map-options
use-input
@filter="(value, update) => filter(value, update, statesFilter)"
:rules="validate('account.accountStateFk')"
:input-debounce="0"
>
</QSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
v-model.number="data.packages"
:label="t('globals.packages')"
:rules="validate('account.packages')"
type="number"
v-model="data.lang"
:options="['es', 'en']"
:label="t('account.card.lang')"
/>
</div>
<div class="col">
<QSelect
v-model="data.pickup"
:options="optionsList"
option-value="id"
option-label="description"
emit-value
:label="t('account.basicData.pickup')"
map-options
use-input
:input-debounce="0"
>
</QSelect>
</div>
</VnRow>
</template>
</FormModel>

50
src/pages/Account/Role/AccountRoles.vue
View File

@ -8,22 +8,16 @@ import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import AccountSummary from '../Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const STATE_COLOR = {
pending: 'warning',
managed: 'info',
resolved: 'positive',
const redirectToCreateView = () => {
router.push({ name: 'RoleCreate' });
};
function getApiUrl() {
return new URL(window.location).origin;
}
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`);
@ -49,37 +43,11 @@ function navigate(event, id) {
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('account.list.customer')">
<template #value>
<span class="link" @click.stop>
{{ row.clientName }}
</span>
</template>
</VnLv>
<VnLv :label="t('account.list.assignedTo')">
<template #value>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
</VnLv>
<VnLv :label="t('role.card.name')" :value="row.name"> </VnLv>
<VnLv
:label="t('account.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('account.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
:label="t('role.card.description')"
:value="row.description"
>
</VnLv>
</template>
<template #actions>
@ -101,5 +69,11 @@ function navigate(event, id) {
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
<QTooltip>
{{ t('New client') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>

11
src/pages/Account/locale/en.yml
View File

@ -15,11 +15,14 @@ account:
mailAlias: Mail Alias
mailForwarding: Mail Forwarding
card:
nickname: Usuario
name: Name
nickname: User
role: Rol
email: Email
alias: Alias
lang: Language
actions:
setPassword: Set password
disableAccount:
name: Disable account
title: La cuenta será deshabilitada
@ -32,3 +35,7 @@ role:
pageTitles:
inheritedRoles: Inherited Roles
subRoles: Sub Roles
card:
description: Description
id: Id
name: Name

8
src/pages/Account/locale/es.yml
View File

@ -16,7 +16,11 @@ account:
mailForwarding: Reenvío de correo
card:
nickname: Usuario
name: Nombre
role: Rol
email: Mail
alias: Alias
lang: dioma
actions:
setPassword: Establecer contraseña
disableAccount:
@ -41,3 +45,7 @@ role:
pageTitles:
inheritedRoles: Roles heredados
subRoles: Subroles
card:
description: Descripción
id: Idd
name: Nombre

47
src/router/modules/account.js
View File

@ -53,41 +53,18 @@ export default {
icon: 'group',
},
component: () => import('src/pages/Account/Role/AccountRoles.vue'),
// children: [
// {
// name: 'RoleCard',
// path: ':id',
// component: () =>
// import('src/pages/Account/Role/Card/RoleCard.vue'),
// redirect: { name: 'RoleSummary' },
// children: [
// {
// name: 'RoleSummary',
// path: 'summary',
// meta: {
// title: 'summary',
// icon: 'launch',
// },
// component: () =>
// import(
// 'src/pages/Account/Role/Card/RoleSummary.vue'
// ),
// },
// {
// name: 'RoleBasicData',
// path: 'basic-data',
// meta: {
// title: 'basicData',
// icon: 'vn:settings',
// },
// component: () =>
// import(
// 'src/pages/Account/Role/Card/RoleBasicData.vue'
// ),
// },
// ],
// },
// ],
children: [
{
name: 'RoleCreate',
path: 'create',
meta: {
title: 'RoleCreate',
icon: 'add',
},
component: () =>
import('src/pages/Account/Role/AccountRoles.vue'),
},
],
},
{
path: 'alias',