verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

6943-customer_migration_subsection-v2 #591

Merged
alexm merged 6 commits from 6943-customer_migration_subsection-v2 into dev 2024-08-07 08:57:13 +00:00
Conversation 0 Commits 6 Files Changed 10 +174 -563
10 changed files with 174 additions and 563 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/FormModel.vue
View File

@ -100,7 +100,6 @@ const isResetting = ref(false);
const hasChanges = ref(!$props.observeFormChanges);
const originalData = ref({});
const formData = computed(() => state.get(modelValue));
const formUrl = computed(() => $props.url);
const defaultButtons = computed(() => ({
save: {
color: 'primary',
@ -148,11 +147,14 @@ if (!$props.url)
(val) => updateAndEmit('onFetch', val)
);
watch(formUrl, async () => {
originalData.value = null;
reset();
await fetch();
});
watch(
() => [$props.url, $props.filter],
alexm commented 2024-08-05 12:05:11 +00:00
Review
Copy Link

Aixina detecta els canvis del filter també

Aixina detecta els canvis del filter també
alexm commented 2024-08-06 05:42:34 +00:00
Review
Copy Link

Pot ser en algun cas done fallo, en VnPaginate me ha pasat que detectava si en el onMounted fea un fetch, despres detectava el canvi de url/filter i tambe fea el fetch. De moment ho dixaria aixina. Prove a tirar els e2e

PD: els he tirat i no he vist ningun fallo

Pot ser en algun cas done fallo, en VnPaginate me ha pasat que detectava si en el onMounted fea un fetch, despres detectava el canvi de url/filter i tambe fea el fetch. De moment ho dixaria aixina. Prove a tirar els e2e PD: els he tirat i no he vist ningun fallo
async () => {
originalData.value = null;
reset();
await fetch();
}
);
onBeforeRouteLeave((to, from, next) => {
if (hasChanges.value && $props.observeFormChanges)

47
src/components/ui/VnSms.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onBeforeMount } from 'vue';
import { watch, computed } from 'vue';
import { date } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnAvatar from '../ui/VnAvatar.vue';
@ -10,31 +10,32 @@ const $props = defineProps({
where: { type: Object, default: () => {} },
});
const filter = {
fields: ['smsFk'],
include: {
relation: 'sms',
scope: {
fields: [
'senderFk',
'sender',
'destination',
'message',
'statusCode',
'status',
'created',
],
include: {
relation: 'sender',
scope: {
fields: ['name'],
const filter = computed(() => {
return {
fields: ['smsFk'],
include: {
relation: 'sms',
scope: {
fields: [
'senderFk',
'sender',
'destination',
'message',
'statusCode',
'status',
'created',
],
include: {
relation: 'sender',
scope: {
fields: ['name'],
},
},
},
},
},
};
onBeforeMount(() => (filter.where = $props.where));
...{ where: $props.where },
};
});
function formatNumber(number) {
if (number.length <= 10) return number;

3
src/i18n/locale/en.yml
View File

@ -90,6 +90,9 @@ globals:
salesPerson: SalesPerson
send: Send
code: Code
since: Since
from: From
to: To
pageTitles:
logIn: Login
summary: Summary

7
src/i18n/locale/es.yml
View File

@ -90,6 +90,9 @@ globals:
salesPerson: Comercial
send: Enviar
code: Código
since: Desde
from: Desde
to: Hasta
pageTitles:
logIn: Inicio de sesión
summary: Resumen
@ -697,8 +700,6 @@ invoiceOut:
percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
negativeBases:
from: Desde
to: Hasta
company: Empresa
country: País
clientId: Id cliente
@ -1240,8 +1241,6 @@ components:
# LatestBuysFilter
salesPersonFk: Comprador
supplierFk: Proveedor
from: Desde
to: Hasta
active: Activo
visible: Visible
floramondo: Floramondo

260
src/pages/Customer/Card/CustomerLog.vue
View File

@ -1,262 +1,6 @@
<script setup>
import { onBeforeMount, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const { t } = useI18n();
const route = useRoute();
const stateStore = useStateStore();
const clientLogs = ref(null);
const urlClientLogsEditors = ref(null);
const urlClientLogsModels = ref(null);
const clientLogsModelsOptions = ref([]);
const clientLogsOptions = ref([]);
const clientLogsEditorsOptions = ref([]);
const radioButtonValue = ref('all');
const insert = ref(false);
const update = ref(false);
const deletes = ref(false);
const select = ref(false);
const neq = ref(null);
const inq = ref([]);
const filterClientLogs = {
fields: [
'id',
'originFk',
'userFk',
'action',
'changedModel',
'oldInstance',
'newInstance',
'creationDate',
'changedModel',
'changedModelId',
'changedModelValue',
'description',
],
include: [
{
relation: 'user',
scope: {
fields: ['nickname', 'name', 'image'],
include: { relation: 'worker', scope: { fields: ['id'] } },
},
},
],
order: ['creationDate DESC', 'id DESC'],
limit: 20,
};
const filterClientLogsEditors = {
fields: ['id', 'nickname', 'name', 'image'],
order: 'nickname',
limit: 30,
};
const filterClientLogsModels = { order: ['changedModel'] };
const urlBase = `ClientLogs/${route.params.id}`;
onBeforeMount(() => {
stateStore.rightDrawer = true;
filterClientLogs.where = {
and: [
{ originFk: `${route.params.id}` },
{ userFk: { neq: radioButtonValue.value } },
{ action: { inq: inq.value } },
],
};
urlClientLogsEditors.value = `${urlBase}/editors`;
urlClientLogsModels.value = `${urlBase}/models`;
});
const getClientLogs = async (value, status) => {
if (status === 'neq') {
neq.value = value;
} else {
setInq(value, status);
}
filterClientLogs.where = {
and: [
{ originFk: `${route.params.id}` },
{ userFk: { neq: neq.value } },
{ action: { inq: inq.value } },
],
};
clientLogs.value?.fetch();
};
const setInq = (value, status) => {
if (status) {
if (!inq.value.includes(value)) {
inq.value.push(value);
}
} else {
inq.value = inq.value.filter((item) => item !== value);
}
};
import VnLog from 'src/components/common/VnLog.vue';
</script>
<template>
<FetchData
:filter="filterClientLogs"
@on-fetch="(data) => (clientLogsOptions = data)"
auto-load
url="ClientLogs"
ref="clientLogs"
/>
<FetchData
:filter="filterClientLogsEditors"
@on-fetch="(data) => (clientLogsEditorsOptions = data)"
auto-load
:url="urlClientLogsEditors"
/>
<FetchData
:filter="filterClientLogsModels"
@on-fetch="(data) => (clientLogsModelsOptions = data)"
auto-load
:url="urlClientLogsModels"
/>
<h5 class="flex justify-center color-vn-label">
{{ t('globals.noResults') }}
</h5>
<QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
<div class="q-mt-sm q-px-md">
<VnInput :label="t('Search')" clearable>
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip>
{{ t('Search by id or concept') }}
</QTooltip>
</QIcon>
</template>
</VnInput>
<VnSelect
:label="t('Entity')"
:options="[]"
class="q-mt-md"
hide-selected
option-label="name"
option-value="id"
/>
<div class="q-mt-lg">
<QRadio
:dark="true"
:label="t('All')"
@update:model-value="getClientLogs($event, 'neq')"
dense
v-model="radioButtonValue"
val="all"
/>
</div>
<div class="q-mt-md">
<QRadio
:dark="true"
:label="t('User')"
@update:model-value="getClientLogs($event, 'neq')"
dense
v-model="radioButtonValue"
val="user"
/>
</div>
<div class="q-mt-md">
<QRadio
:dark="true"
:label="t('System')"
@update:model-value="getClientLogs($event, 'neq')"
dense
v-model="radioButtonValue"
val="system"
/>
</div>
<VnSelect
:label="t('User')"
:options="[]"
class="q-mt-sm"
hide-selected
option-label="name"
option-value="id"
/>
<VnInput :label="t('Changes')" clearable class="q-mt-sm">
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip>
{{ t('Search by changes') }}
</QTooltip>
</QIcon>
</template>
</VnInput>
<div class="q-mt-md">
<QCheckbox
:label="t('Creates')"
@update:model-value="getClientLogs('insert', $event)"
v-model="insert"
/>
</div>
<div>
<QCheckbox
:label="t('Edits')"
@update:model-value="getClientLogs('update', $event)"
v-model="update"
/>
</div>
<div>
<QCheckbox
:label="t('Deletes')"
@update:model-value="getClientLogs('delete', $event)"
v-model="deletes"
/>
</div>
<div>
<QCheckbox
:label="t('Accesses')"
@update:model-value="getClientLogs('select', $event)"
v-model="select"
/>
</div>
<VnInputDate :label="t('Date')" class="q-mt-sm" />
<VnInput :label="t('To')" clearable class="q-mt-md" />
</div>
</QDrawer>
<QPageSticky
:offset="[18, 18]"
v-if="radioButtonValue !== 'all' || insert || update || deletes || select"
>
<QBtn color="primary" fab icon="filter_alt_off" />
<QTooltip>
{{ t('Quit filter') }}
</QTooltip>
</QPageSticky>
<VnLog model="Client" />
</template>
<i18n>
es:
Search: Buscar
Search by id or concept: xxx
Entity: Entidad
All: Todo
User: Usuario
System: Sistema
Changes: Cambios
Search by changes: xxx
Creates: Crea
Edits: Modifica
Deletes: Elimina
Accesses: Accede
Date: Fecha
To: Hasta
Quit filter: Quitar filtro
</i18n>

15
src/pages/Customer/Card/CustomerNotes.vue
View File

@ -1,15 +1,18 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import VnNotes from 'src/components/ui/VnNotes.vue';
const route = useRoute();
const noteFilter = {
order: 'created DESC',
where: {
clientFk: `${route.params.id}`,
},
};
const noteFilter = computed(() => {
return {
order: 'created DESC',
where: {
clientFk: `${route.params.id}`,
},
};
});
</script>
<template>

179
src/pages/Customer/Card/CustomerRecoveries.vue
View File

@ -1,146 +1,107 @@
<script setup>
import axios from 'axios';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { toCurrency, toDate } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import VnTable from 'components/VnTable/VnTable.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const rows = ref([]);
const filter = {
where: { clientFk: route.params.id },
order: ['started DESC'],
limit: 20,
const tableRef = ref();
const filter = computed(() => {
return {
where: { clientFk: route.params.id },
};
});
const componentColumn = (type) => {
return {
columnFilter: {
component: type,
},
columnCreate: {
component: type,
},
};
};
const tableColumnComponents = {
since: {
component: 'span',
props: () => {},
event: () => {},
},
to: {
component: 'span',
props: () => {},
event: () => {},
},
amount: {
component: 'span',
props: () => {},
event: () => {},
},
period: {
component: 'span',
props: () => {},
event: () => {},
},
};
const columns = computed(() => [
{
align: 'left',
field: 'started',
label: t('Since'),
name: 'since',
format: (value) => toDate(value),
label: t('globals.since'),
name: 'started',
format: ({ started }) => toDate(started),
create: true,
...componentColumn('date'),
},
{
align: 'left',
field: 'finished',
label: t('To'),
name: 'to',
format: (value) => toDate(value),
name: 'finished',
label: t('globals.to'),
format: ({ finished }) => toDate(finished),
create: true,
...componentColumn('date'),
},
{
align: 'left',
field: 'amount',
label: t('Amount'),
name: 'amount',
format: (value) => toCurrency(value),
label: t('globals.amount'),
format: ({ amount }) => toCurrency(amount),
create: true,
...componentColumn('number'),
},
{
align: 'left',
field: 'period',
label: t('Period'),
name: 'period',
label: t('Period'),
create: true,
...componentColumn('number'),
},
{
align: 'left',
name: 'tableActions',
actions: [
{
title: t('Finish that recovery period'),
icon: 'lock',
show: (row) => !row.finished,
action: ({ id }) => setFinished(id),
isPrimary: true,
},
],
},
]);
const toCustomerRecoverieCreate = () => {
router.push({ name: 'CustomerRecoverieCreate' });
};
function setFinished(id) {
axios.patch(`Recoveries/${id}`, { finished: Date.vnNow() });
tableRef.value.reload();
}
</script>
<template>
<FetchData
:filter="filter"
@on-fetch="(data) => (rows = data)"
auto-load
<VnTable
ref="tableRef"
data-key="Recoveries"
url="Recoveries"
search-url="recoveries"
:filter="filter"
order="started DESC"
:columns="columns"
:use-model="true"
:right-search="false"
:create="{
urlCreate: 'Recoveries',
title: 'New recovery',
onDataSaved: () => tableRef.reload(),
formInitialData: { clientFk: route.params.id, started: Date.vnNew() },
}"
auto-load
/>
<div class="full-width flex justify-center">
<QPage class="card-width q-pa-lg">
<QTable
:columns="columns"
:no-data-label="t('globals.noResults')"
:pagination="{ rowsPerPage: 12 }"
:rows="rows"
class="full-width q-mt-md"
row-key="id"
>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
@click="
tableColumnComponents[props.col.name].event(props)
"
>
{{ props.value }}
</component>
</QTr>
</QTd>
</template>
</QTable>
</QPage>
</div>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
<QTooltip>
{{ t('New recoverie') }}
</QTooltip>
</QPageSticky>
</template>
<style lang="scss">
.consignees-card {
border: 2px solid var(--vn-accent-color);
border-radius: 10px;
padding: 10px;
}
.label-color {
color: var(--vn-label-color);
}
</style>
<i18n>
es:
Since: Desde
To: Hasta
Amount: Importe
Period: Periodo
New recoverie: Nuevo recobro
New recovery: Nuevo recobro
Finish that recovery period: Terminar recobro
</i18n>

17
src/pages/Customer/Card/CustomerSms.vue
View File

@ -1,17 +1,16 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import VnSms from 'src/components/ui/VnSms.vue';
const route = useRoute();
const id = route.params.id;
const where = {
clientFk: id,
ticketFk: null,
};
const where = computed(() => {
return {
clientFk: route.params.id,
ticketFk: null,
};
});
</script>
<template>
<div class="column items-center">
<VnSms url="clientSms" :where="where" />
</div>
<VnSms url="clientSms" :where="where" />
</template>

163
src/pages/Customer/Card/CustomerWebAccess.vue
View File

@ -2,164 +2,81 @@
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { useQuasar } from 'quasar';
import { useValidator } from 'src/composables/useValidator';
import useNotify from 'src/composables/useNotify';
import { useStateStore } from 'stores/useStateStore';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
import FormModel from 'components/FormModel.vue';
const { notify } = useNotify();
const { t } = useI18n();
const { validate } = useValidator();
const quasar = useQuasar();
const route = useRoute();
const stateStore = useStateStore();
const active = ref(false);
const canChangePassword = ref(0);
const email = ref(null);
const isLoading = ref(false);
const name = ref(null);
const usersPreviewRef = ref(null);
const user = ref([]);
const dataChanges = computed(() => {
return (
user.value.active !== active.value ||
user.value.email !== email.value ||
user.value.name !== name.value
);
const filter = computed(() => {
return {
fields: ['active', 'email', 'name'],
where: { id: route.params.id },
};
});
const filter = { where: { id: `${route.params.id}` } };
const showChangePasswordDialog = () => {
quasar.dialog({
component: CustomerChangePassword,
componentProps: {
id: route.params.id,
promise: usersPreviewRef.value.fetch(),
},
});
};
const setInitialData = () => {
if (user.value.length) {
active.value = user.value[0].active;
email.value = user.value[0].email;
name.value = user.value[0].name;
}
};
const onSubmit = async () => {
isLoading.value = true;
const payload = {
active: active.value,
email: email.value,
name: name.value,
};
try {
await axios.patch(`Clients/${route.params.id}/updateUser`, payload);
notify('globals.dataSaved', 'positive');
if (usersPreviewRef.value) usersPreviewRef.value.fetch();
} catch (error) {
notify('errors.create', 'negative');
} finally {
isLoading.value = false;
}
};
async function hasCustomerRole() {
const { data } = await axios(`Clients/${route.params.id}/hasCustomerRole`);
canChangePassword.value = data;
}
</script>
<template>
<FetchData
<FormModel
url="VnUsers/preview"
:url-update="`Clients/${route.params.id}/updateUser`"
:filter="filter"
@on-fetch="
(data) => {
user = data;
setInitialData();
model="webAccess"
:mapper="
({ active, name, email }) => {
return {
active,
name,
email,
};
}
"
@on-fetch="hasCustomerRole()"
auto-load
ref="usersPreviewRef"
url="VnUsers/preview"
/>
<FetchData
:url="`Clients/${route.params.id}/hasCustomerRole`"
@on-fetch="(data) => (canChangePassword = data)"
auto-load
/>
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<QBtnGroup push class="q-gutter-x-sm">
<QBtn
:disabled="isLoading"
:label="t('globals.reset')"
:loading="isLoading"
@click="setInitialData"
color="primary"
flat
icon="restart_alt"
type="reset"
>
<template #form="{ data, validate }">
<QCheckbox :label="t('Enable web access')" v-model="data.active" />
<VnInput :label="t('User')" clearable v-model="data.name" />
<VnInput
:label="t('Recovery email')"
:rules="validate('client.email')"
clearable
type="email"
v-model="data.email"
class="q-mt-sm"
:info="t('This email is used for user to regain access their account')"
/>
</template>
<template #moreActions>
<QBtn
:disabled="isLoading"
:label="t('Change password')"
:loading="isLoading"
@click.stop="showChangePasswordDialog()"
color="primary"
flat
icon="edit"
v-if="canChangePassword"
:disable="!canChangePassword"
@click="showChangePasswordDialog()"
/>
<QBtn
:disabled="isLoading || !dataChanges"
:label="t('globals.save')"
:loading="isLoading"
@click="onSubmit"
color="primary"
icon="save"
/>
</QBtnGroup>
</Teleport>
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg">
<QCardSection>
<QForm>
<QCheckbox :label="t('Enable web access')" v-model="active" />
<div class="q-px-sm">
<VnInput :label="t('User')" clearable v-model="name" />
<VnInput
:label="t('Recovery email')"
:rules="validate('client.email')"
clearable
type="email"
v-model="email"
class="q-mt-sm"
>
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip>{{
t(
'This email is used for user to regain access their account'
)
}}</QTooltip>
</QIcon>
</template>
</VnInput>
</div>
</QForm>
</QCardSection>
</QCard>
</div>
</template>
</FormModel>
</template>
<i18n>

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

@ -226,31 +226,13 @@ export default {
},
{
path: 'recoveries',
name: 'RecoveriesCard',
redirect: { name: 'CustomerRecoveries' },
children: [
{
path: '',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'create',
name: 'CustomerRecoverieCreate',
meta: {
title: 'recoverie-create',
},
component: () =>
import(
'src/pages/Customer/components/CustomerRecoverieCreate.vue'
),
},
],
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'web-access',