This commit is contained in:
William Buezas 2024-05-29 08:01:37 -03:00
parent 0659eac652
commit b5e72aec7c
4 changed files with 76 additions and 211 deletions

View File

@ -1,37 +1,82 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'filters/index';
import { ref } from 'vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import AccountSummary from '../Card/AccountSummary.vue';
import { ref } from 'vue';
import RoleForm from './Card/RoleForm.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import AccountRolesFilter from './AccountRolesFilter.vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const roleCreateDialogRef = ref(null);
const openCreateModal = () => {
roleCreateDialogRef.value.show();
const exprBuilder = (param, value) => {
switch (param) {
case 'search':
return /^\d+$/.test(value)
? { id: value }
: {
or: [
{ name: { like: `%${value}%` } },
{ nickname: { like: `%${value}%` } },
],
};
case 'name':
case 'description':
return { [param]: { like: `%${value}%` } };
}
};
function getApiUrl() {
return new URL(window.location).origin;
}
function navigate(event, id) {
const openCreateModal = () => roleCreateDialogRef.value.show();
const getApiUrl = () => new URL(window.location).origin;
const navigate = (event, id) => {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`);
router.push({ path: `/role/${id}/summary` });
}
};
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="RolesList"
url="VnRoles"
:label="t('role.searchRoles')"
:info="t('role.searchInfo')"
:expr-builder="exprBuilder"
/>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<!-- <AccountFilter data-key="RolesList" /> -->
<AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
@ -41,7 +86,7 @@ function navigate(event, id) {
<CardList
:id="row.id"
:key="row.id"
:title="row.clientName"
:title="row.name"
@click="navigate($event, row.id)"
v-for="row of rows"
>
@ -57,13 +102,6 @@ function navigate(event, id) {
</div>
</template>
<template #actions>
<QBtn
:label="t('globals.description')"
@click.stop
outline
style="margin-top: 15px"
>
</QBtn>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, AccountSummary)"
@ -85,11 +123,8 @@ function navigate(event, id) {
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="openCreateModal()" />
<QTooltip>
{{ t('account.pageTitles.newRole') }}
{{ t('role.newRole') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<i18n>
New rol: Nuevo role
</i18n>

View File

@ -1,12 +1,8 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
@ -15,211 +11,37 @@ const props = defineProps({
required: true,
},
});
const workers = ref();
const states = ref();
</script>
<template>
<FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
<FetchData
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<strong>{{ t(`role.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<template #body="{ params }">
<QItem class="q-my-sm">
<QItemSection>
<VnInput
:label="t('Customer ID')"
v-model="params.clientFk"
:label="t('role.name')"
v-model="params.name"
lazy-rules
is-outlined
>
<template #prepend>
<QIcon name="badge" size="xs"></QIcon> </template
></VnInput>
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItem class="q-my-sm">
<QItemSection>
<VnInput
:label="t('Client Name')"
v-model="params.clientName"
:label="t('role.description')"
v-model="params.description"
lazy-rules
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect
:label="t('Salesperson')"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect
:label="t('Attender')"
v-model="params.attenderFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect
:label="t('Responsible')"
v-model="params.accountResponsibleFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!states">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="states">
<VnSelect
:label="t('State')"
v-model="params.accountStateFk"
@update:model-value="searchFn()"
:options="states"
option-value="id"
option-label="description"
emit-value
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<!-- <QItem>
<QItemSection>
<qSelect
:label="t('Item')"
v-model="params.itemFk"
:options="items"
:loading="loading"
@filter="filterFn"
@virtual-scroll="onScroll"
option-value="id"
option-label="name"
emit-value
map-options
/>
</QItemSection>
</QItem> -->
<QItem>
<QItemSection>
<VnInputDate
v-model="params.created"
:label="t('Created')"
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
search: Contains
clientFk: Customer
clientName: Customer
salesPersonFk: Salesperson
attenderFk: Attender
accountResponsibleFk: Responsible
accountStateFk: State
created: Created
myTeam: My team
es:
params:
search: Contiene
clientFk: Cliente
clientName: Cliente
salesPersonFk: Comercial
attenderFk: Asistente
accountResponsibleFk: Responsable
accountStateFk: Estado
created: Creada
Customer ID: ID cliente
Client Name: Nombre del cliente
Salesperson: Comercial
Attender: Asistente
Responsible: Responsable
State: Estado
Item: Artículo
Created: Creada
More options: Más opciones
myTeam: Mi equipo
</i18n>

View File

@ -36,11 +36,15 @@ role:
pageTitles:
inheritedRoles: Inherited Roles
subRoles: Sub Roles
card:
description: Description
id: Id
name: Name
newRole: New role
searchRoles: Search role
searchInfo: Search role by id or name
name: Name
description: Description
ldap:
enableSync: Enable synchronization
server: Server

View File

@ -51,7 +51,11 @@ role:
description: Descripción
id: Idd
name: Nombre
newRole: Nuevo rol
searchRoles: Buscar roles
searchInfo: Buscar rol por id o nombre
name: Nombre
description: Descripción
ldap:
enableSync: Habilitar sincronización
server: Servidor