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'] } }, include: { relation: 'role', scope: { fields: ['id', 'name'] } },
}; };
const STATE_COLOR = {
pending: 'warning',
managed: 'info',
resolved: 'positive',
};
function getApiUrl() { function getApiUrl() {
return new URL(window.location).origin; return new URL(window.location).origin;
} }
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) { function navigate(event, id) {
if (event.ctrlKey || event.metaKey) if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`); return window.open(`${getApiUrl()}/#/account/${id}/summary`);
@ -86,37 +78,12 @@ function navigate(event, id) {
v-for="row of rows" v-for="row of rows"
> >
<template #list-items> <template #list-items>
<VnLv :label="t('account.list.customer')"> <VnLv :label="t('account.card.name')" :value="row.nickname">
<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>
<VnLv <VnLv
:label="t('account.list.created')" :label="t('account.card.nickname')"
:value="toDate(row.created)" :value="row.username"
/> >
<VnLv :label="t('account.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv> </VnLv>
</template> </template>
<template #actions> <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 { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const accountFilter = { const accountFilter = {
fields: [ where: { id: route.params.id },
'id', fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
'clientFk', include: [],
'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;
});
},
}; };
</script> </script>
<template> <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 <FormModel
:url="`Accounts/${route.params.id}`" :url="`VnUsers/preview`"
:url-update="`Accounts/updateAccount/${route.params.id}`" :url-update="`VnUsers/${route.params.id}/update-user`"
:filter="accountFilter" :filter="accountFilter"
model="account" model="Accounts"
auto-load auto-load
> >
<template #form="{ data, validate, filter }"> <template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnInput <VnInput v-model="data.name" :label="t('account.card.nickname')" />
v-model="data.client.name"
:label="t('account.basicData.customer')"
disable
/>
</div> </div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnInputDate <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
v-model="data.created" </div>
:label="t('account.basicData.created')" </VnRow>
/> <VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput v-model="data.email" :label="t('account.card.email')" />
</div> </div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<VnSelect <VnSelect
:label="t('account.basicData.assignedTo')" v-model="data.lang"
v-model="data.workerFk" :options="['es', 'en']"
:options="workersOptions" :label="t('account.card.lang')"
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"
/> />
</div> </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> </VnRow>
</template> </template>
</FormModel> </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 CardList from 'src/components/ui/CardList.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import AccountSummary from '../Card/AccountSummary.vue'; import AccountSummary from '../Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const STATE_COLOR = { const redirectToCreateView = () => {
pending: 'warning', router.push({ name: 'RoleCreate' });
managed: 'info',
resolved: 'positive',
}; };
function getApiUrl() { function getApiUrl() {
return new URL(window.location).origin; return new URL(window.location).origin;
} }
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) { function navigate(event, id) {
if (event.ctrlKey || event.metaKey) if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`); return window.open(`${getApiUrl()}/#/account/${id}/summary`);
@ -49,37 +43,11 @@ function navigate(event, id) {
v-for="row of rows" v-for="row of rows"
> >
<template #list-items> <template #list-items>
<VnLv :label="t('account.list.customer')"> <VnLv :label="t('role.card.name')" :value="row.name"> </VnLv>
<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 <VnLv
:label="t('account.list.created')" :label="t('role.card.description')"
:value="toDate(row.created)" :value="row.description"
/> >
<VnLv :label="t('account.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv> </VnLv>
</template> </template>
<template #actions> <template #actions>
@ -101,5 +69,11 @@ function navigate(event, id) {
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>
<QPageSticky :offset="[20, 20]">
<QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
<QTooltip>
{{ t('New client') }}
</QTooltip>
</QPageSticky>
</QPage> </QPage>
</template> </template>

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

@ -15,11 +15,14 @@ account:
mailAlias: Mail Alias mailAlias: Mail Alias
mailForwarding: Mail Forwarding mailForwarding: Mail Forwarding
card: card:
nickname: Usuario name: Name
nickname: User
role: Rol role: Rol
email: Email
alias: Alias
lang: Language
actions: actions:
setPassword: Set password setPassword: Set password
disableAccount: disableAccount:
name: Disable account name: Disable account
title: La cuenta será deshabilitada title: La cuenta será deshabilitada
@ -32,3 +35,7 @@ role:
pageTitles: pageTitles:
inheritedRoles: Inherited Roles inheritedRoles: Inherited Roles
subRoles: Sub 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 mailForwarding: Reenvío de correo
card: card:
nickname: Usuario nickname: Usuario
name: Nombre
role: Rol role: Rol
email: Mail
alias: Alias
lang: dioma
actions: actions:
setPassword: Establecer contraseña setPassword: Establecer contraseña
disableAccount: disableAccount:
@ -41,3 +45,7 @@ role:
pageTitles: pageTitles:
inheritedRoles: Roles heredados inheritedRoles: Roles heredados
subRoles: Subroles 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', icon: 'group',
}, },
component: () => import('src/pages/Account/Role/AccountRoles.vue'), component: () => import('src/pages/Account/Role/AccountRoles.vue'),
// children: [ children: [
// { {
// name: 'RoleCard', name: 'RoleCreate',
// path: ':id', path: 'create',
// component: () => meta: {
// import('src/pages/Account/Role/Card/RoleCard.vue'), title: 'RoleCreate',
// redirect: { name: 'RoleSummary' }, icon: 'add',
// children: [ },
// { component: () =>
// name: 'RoleSummary', import('src/pages/Account/Role/AccountRoles.vue'),
// 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'
// ),
// },
// ],
// },
// ],
}, },
{ {
path: 'alias', path: 'alias',