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

perf: minor comments

This commit is contained in:
Javier Segarra 2024-09-05 20:51:33 +02:00
parent 31abd8b4c5
commit b3391ab522
8 changed files with 271 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

535
src/components/VnTable/VnTable.vue
View File

@ -346,302 +346,281 @@ defineExpose({
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<!-- class in div to fix warn--> <!-- class in div to fix warn-->
<div class="q-px-md"> <CrudModel
<CrudModel v-bind="$attrs"
v-bind="$attrs" :class="$attrs['class']"
:class="$attrs['class'] ?? 'q-px-md'" :limit="$attrs['limit'] ?? 20"
:limit="$attrs['limit'] ?? 20" ref="CrudModelRef"
ref="CrudModelRef" @on-fetch="(...args) => emit('onFetch', ...args)"
@on-fetch="(...args) => emit('onFetch', ...args)" :search-url="searchUrl"
:search-url="searchUrl" :disable-infinite-scroll="
:disable-infinite-scroll=" $attrs['disableInfiniteScroll'] ? isTableMode : disableInfiniteScroll
$attrs['disableInfiniteScroll'] ? isTableMode : disableInfiniteScroll "
" @save-changes="reload"
@save-changes="reload" :has-sub-toolbar="$props.hasSubToolbar ?? isEditable"
:has-sub-toolbar="$props.hasSubToolbar ?? isEditable" :auto-load="hasParams || $attrs['auto-load']"
:auto-load="hasParams || $attrs['auto-load']" >
> <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<template <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
v-for="(_, slotName) in $slots" </template>
#[slotName]="slotData" <template #body="{ rows }">
:key="slotName" <QTable
v-bind="table"
class="vnTable"
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="!isTableMode"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="isTableMode && `max-height: ${tableHeight}`"
virtual-scroll
@virtual-scroll="
(event) =>
event.index > rows.length - 2 &&
CrudModelRef.vnPaginateRef.paginate()
"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
> >
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" /> <template #top-left v-if="!$props.withoutHeader">
</template> <slot name="top-left"></slot>
<template #body="{ rows }"> </template>
<QTable <template #top-right v-if="!$props.withoutHeader">
v-bind="table" <VnVisibleColumn
class="vnTable" v-if="isTableMode"
:columns="splittedColumns.columns" v-model="splittedColumns.columns"
:rows="rows" :table-code="tableCode ?? route.name"
v-model:selected="selected" :skip="columnsVisibilitySkipped"
:grid="!isTableMode" />
table-header-class="bg-header" <QBtnToggle
card-container-class="grid-three" v-model="mode"
flat toggle-color="primary"
:style="isTableMode && `max-height: ${tableHeight}`" class="bg-vn-section-color"
virtual-scroll dense
@virtual-scroll=" :options="tableModes.filter((mode) => !mode.disable)"
(event) => />
event.index > rows.length - 2 && <QBtn
CrudModelRef.vnPaginateRef.paginate() v-if="$props.rightSearch"
" icon="filter_alt"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)" class="bg-vn-section-color q-ml-md"
@update:selected="emit('update:selected', $event)" dense
> @click="stateStore.toggleRightDrawer()"
<template #top-left v-if="!$props.withoutHeader"> />
<slot name="top-left"></slot> </template>
</template> <template #header-cell="{ col }">
<template #top-right v-if="!$props.withoutHeader"> <QTh v-if="col.visible ?? true">
<VnVisibleColumn <div
v-if="isTableMode" class="column self-start q-ml-xs ellipsis"
v-model="splittedColumns.columns" :class="`text-${col?.align ?? 'left'}`"
:table-code="tableCode ?? route.name" :style="$props.columnSearch ? 'height: 75px' : ''"
:skip="columnsVisibilitySkipped" >
/> <div class="row items-center no-wrap" style="height: 30px">
<QBtnToggle <QTooltip v-if="col.toolTip">{{ col.toolTip }}</QTooltip>
v-model="mode" <VnTableOrder
toggle-color="primary" v-model="orders[col.orderBy ?? col.name]"
class="bg-vn-section-color" :name="col.orderBy ?? col.name"
dense :label="col?.label"
:options="tableModes.filter((mode) => !mode.disable)"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
class="bg-vn-section-color q-ml-md"
dense
@click="stateStore.toggleRightDrawer()"
/>
</template>
<template #header-cell="{ col }">
<QTh v-if="col.visible ?? true">
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
>
<div
class="row items-center no-wrap"
style="height: 30px"
>
<QTooltip v-if="col.toolTip">{{
col.toolTip
}}</QTooltip>
<VnTableOrder
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
/>
</div>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']" :data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl" :search-url="searchUrl"
class="full-width"
/> />
</div> </div>
</QTh> <VnTableFilter
</template> v-if="$props.columnSearch"
<template #header-cell-tableActions> :column="col"
<QTh auto-width class="sticky" /> :show-title="true"
</template> :data-key="$attrs['data-key']"
<template #body-cell-tableStatus="{ col, row }"> v-model="params[columnName(col)]"
<QTd auto-width :class="getColAlign(col)"> :search-url="searchUrl"
<VnTableChip class="full-width"
:columns="splittedColumns.columnChips" />
</div>
</QTh>
</template>
<template #header-cell-tableActions>
<QTh auto-width class="sticky" />
</template>
<template #body-cell-tableStatus="{ col, row }">
<QTd auto-width :class="getColAlign(col)">
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
<template #afterChip>
<slot name="afterChip" :row="row"></slot>
</template>
</VnTableChip>
</QTd>
</template>
<template #body-cell="{ col, row, rowIndex }">
<!-- Columns -->
<QTd
auto-width
class="no-margin q-px-xs"
:class="[getColAlign(col), col.columnClass]"
v-if="col.visible ?? true"
@click.ctrl="
($event) =>
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="rowIndex"
>
<VnTableColumn
:column="col"
:row="row" :row="row"
> :is-editable="col.isEditable ?? isEditable"
<template #afterChip> v-model="row[col.name]"
<slot name="afterChip" :row="row"></slot> component-prop="columnField"
</template> />
</VnTableChip> </slot>
</QTd> </QTd>
</template> </template>
<template #body-cell="{ col, row, rowIndex }"> <template #body-cell-tableActions="{ col, row }">
<!-- Columns --> <QTd
<QTd auto-width
auto-width :class="getColAlign(col)"
class="no-margin q-px-xs" class="sticky no-padding"
:class="[getColAlign(col), col.columnClass]" @click="stopEventPropagation($event)"
v-if="col.visible ?? true" >
@click.ctrl=" <QBtn
($event) => v-for="(btn, index) of col.actions"
rowCtrlClickFunction && :key="index"
rowCtrlClickFunction($event, row) :title="btn.title"
:icon="btn.icon"
class="q-px-sm"
flat
:class="
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
"
:style="`visibility: ${
(btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
}`"
@click="btn.action(row)"
/>
</QTd>
</template>
<template #item="{ row, colsMap }">
<component
:is="$props.redirect ? 'router-link' : 'span'"
:to="`/${$props.redirect}/` + row.id"
>
<QCard
bordered
flat
class="row no-wrap justify-between cursor-pointer"
@click="
(_, row) => {
$props.rowClick && $props.rowClick(row);
}
" "
> >
<slot <QCardSection
:name="`column-${col.name}`" vertical
:col="col" class="no-margin no-padding"
:row="row" :class="colsMap.tableActions ? 'w-80' : 'fit'"
:row-index="rowIndex"
>
<VnTableColumn
:column="col"
:row="row"
:is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]"
component-prop="columnField"
/>
</slot>
</QTd>
</template>
<template #body-cell-tableActions="{ col, row }">
<QTd
auto-width
:class="getColAlign(col)"
class="sticky no-padding"
@click="stopEventPropagation($event)"
>
<QBtn
v-for="(btn, index) of col.actions"
:key="index"
:title="btn.title"
:icon="btn.icon"
class="q-px-sm"
flat
:class="
btn.isPrimary
? 'text-primary-light'
: 'color-vn-text '
"
:style="`visibility: ${
(btn.show && btn.show(row)) ?? true
? 'visible'
: 'hidden'
}`"
@click="btn.action(row)"
/>
</QTd>
</template>
<template #item="{ row, colsMap }">
<component
:is="$props.redirect ? 'router-link' : 'span'"
:to="`/${$props.redirect}/` + row.id"
>
<QCard
bordered
flat
class="row no-wrap justify-between cursor-pointer"
@click="
(_, row) => {
$props.rowClick && $props.rowClick(row);
}
"
> >
<!-- Chips -->
<QCardSection <QCardSection
vertical v-if="splittedColumns.chips.length"
class="no-margin no-padding" class="no-margin q-px-xs q-py-none"
:class="colsMap.tableActions ? 'w-80' : 'fit'"
> >
<!-- Chips --> <VnTableChip
<QCardSection :columns="splittedColumns.chips"
v-if="splittedColumns.chips.length" :row="row"
class="no-margin q-px-xs q-py-none"
> >
<VnTableChip <template #afterChip>
:columns="splittedColumns.chips" <slot name="afterChip" :row="row"></slot>
:row="row" </template>
> </VnTableChip>
<template #afterChip> </QCardSection>
<slot name="afterChip" :row="row"></slot> <!-- Title -->
</template> <QCardSection
</VnTableChip> v-if="splittedColumns.title"
</QCardSection> class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
<!-- Title --> >
<QCardSection <span
v-if="splittedColumns.title" :title="row[splittedColumns.title.name]"
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis" @click="stopEventPropagation($event)"
class="cursor-text"
> >
<span {{ row[splittedColumns.title.name] }}
:title="row[splittedColumns.title.name]" </span>
@click="stopEventPropagation($event)" </QCardSection>
class="cursor-text" <!-- Fields -->
> <QCardSection
{{ row[splittedColumns.title.name] }} class="q-pl-sm q-pr-lg q-py-xs"
</span> :class="$props.cardClass"
</QCardSection> >
<!-- Fields --> <div
<QCardSection v-for="(
class="q-pl-sm q-pr-lg q-py-xs" col, index
:class="$props.cardClass" ) of splittedColumns.cardVisible"
:key="col.name"
class="fields"
> >
<div <VnLv
v-for="( :label="
col, index !col.component && col.label
) of splittedColumns.cardVisible" ? `${col.label}:`
:key="col.name" : ''
class="fields" "
> >
<VnLv <template #value>
:label=" <span
!col.component && col.label @click="stopEventPropagation($event)"
? `${col.label}:` >
: '' <slot
" :name="`column-${col.name}`"
> :col="col"
<template #value> :row="row"
<span :row-index="index"
@click="
stopEventPropagation($event)
"
> >
<slot <VnTableColumn
:name="`column-${col.name}`" :column="col"
:col="col"
:row="row" :row="row"
:row-index="index" :is-editable="false"
> v-model="row[col.name]"
<VnTableColumn component-prop="columnField"
:column="col" :show-label="true"
:row="row" />
:is-editable="false" </slot>
v-model="row[col.name]" </span>
component-prop="columnField" </template>
:show-label="true" </VnLv>
/> </div>
</slot>
</span>
</template>
</VnLv>
</div>
</QCardSection>
</QCardSection> </QCardSection>
<!-- Actions --> </QCardSection>
<QCardSection <!-- Actions -->
v-if="colsMap.tableActions" <QCardSection
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs" v-if="colsMap.tableActions"
@click="stopEventPropagation($event)" class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
> @click="stopEventPropagation($event)"
<QBtn >
v-for="(btn, index) of splittedColumns.actions <QBtn
.actions" v-for="(btn, index) of splittedColumns.actions
:key="index" .actions"
:title="btn.title" :key="index"
:icon="btn.icon" :title="btn.title"
class="q-pa-xs" :icon="btn.icon"
flat class="q-pa-xs"
:class=" flat
btn.isPrimary :class="
? 'text-primary-light' btn.isPrimary
: 'color-vn-text ' ? 'text-primary-light'
" : 'color-vn-text '
@click="btn.action(row)" "
/> @click="btn.action(row)"
</QCardSection> />
</QCard> </QCardSection>
</component> </QCard>
</template> </component>
</QTable> </template>
</template> </QTable>
</CrudModel> </template>
</div> </CrudModel>
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2"> <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" shortcut="+" /> <QBtn @click="showForm = !showForm" color="primary" fab icon="add" shortcut="+" />
<QTooltip> <QTooltip>

18
src/composables/useArrayData.js
View File

@ -86,13 +86,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
Object.assign(filter, store.userFilter, exprFilter); Object.assign(filter, store.userFilter, exprFilter);
let where; let where;
// ARRAY DATA FALLA AL JUNTAR WHERE'S //FIXME: ARRAY DATA FALLA AL JUNTAR WHERE'S
console.log( // console.log(
'userParams?.filter?.where: ', // 'userParams?.filter?.where: ',
userParams?.filter?.where, // userParams?.filter?.where,
filter?.where, // filter?.where,
store.filter?.where // store.filter?.where
); // );
if ((userParams?.filter?.where, filter?.where || store.filter?.where)) if ((userParams?.filter?.where, filter?.where || store.filter?.where))
where = Object.assign( where = Object.assign(
userParams?.filter?.where ?? {}, userParams?.filter?.where ?? {},
@ -101,9 +101,9 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
); );
Object.assign(filter, store.filter); Object.assign(filter, store.filter);
filter.where = where; filter.where = where;
console.log('where: ', where); // console.log('where: ', where);
const params = { filter }; const params = { filter };
console.log('params: ', params); // console.log('params: ', params);
delete userParams?.filter; delete userParams?.filter;
Object.assign(params, userParams); Object.assign(params, userParams);

5
src/pages/Customer/Card/CustomerConsumption.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, computed, onBeforeMount, onMounted } from 'vue'; import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters/index'; import { toDate } from 'src/filters/index';
@ -90,9 +90,6 @@ const columns = computed(() => [
onBeforeMount(async () => { onBeforeMount(async () => {
campaignList.value = (await axios('Campaigns/latest')).data; campaignList.value = (await axios('Campaigns/latest')).data;
}); });
// onMounted(() => {
// showActionBtns.value = handleQueryParams();
// });
function getQueryParams() { function getQueryParams() {
return JSON.parse(route.query.consumption ?? '{}'); return JSON.parse(route.query.consumption ?? '{}');

23
src/pages/Customer/Card/CustomerCreditContracts.vue
View File

@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import ModalCloseContract from 'src/pages/Customer/components/ModalCloseContract.vue'; import ModalCloseContract from 'src/pages/Customer/components/ModalCloseContract.vue';
@ -73,28 +72,6 @@ const updateData = () => {
</script> </script>
<template> <template>
<!-- <VnTable
ref="tableRef"
data-key="Greuges"
url="Greuges"
search-url="greuges"
:filter="filter"
:order="['shipped DESC', 'amount']"
:columns="columns"
:right-search="false"
:is-editable="false"
:use-model="true"
:column-search="false"
@on-fetch="(data) => setRows(data)"
:disable-option="{ card: true }"
:create="{
urlCreate: `Greuges`,
title: t('New greuge'),
onDataSaved: () => tableRef.reload(),
formInitialData: { shipped: new Date(), clientFk: route.params.id },
}"
auto-load
></VnTable> -->
<div class="full-width flex justify-center"> <div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg"> <QCard class="card-width q-pa-lg">
<VnPaginate <VnPaginate

16
src/pages/Customer/Card/CustomerCreditOpinion.vue
View File

@ -1,22 +1,17 @@
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { toCurrency, toDateHourMin } from 'src/filters'; import { toCurrency, toDateHourMin } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue'; import VnTable from 'src/components/VnTable/VnTable.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 WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const tableRef = ref(); const tableRef = ref();
// const rows = ref([]);
const filter = { const filter = {
include: [ include: [
@ -70,15 +65,6 @@ const columns = computed(() => [
}, },
}, },
]); ]);
// watch(
// () => route.params.id,
// (newValue) => {
// if (!newValue) return;
// filter.where.clientFk = newValue;
// clientInformasRef.value?.fetch();
// }
// );
</script> </script>
<template> <template>

1
src/pages/Customer/Card/CustomerDescriptorMenu.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import VnTable from 'src/components/VnTable/VnTable.vue';
import axios from 'axios'; import axios from 'axios';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';

10
src/pages/Customer/Card/CustomerSummary.vue
View File

@ -61,7 +61,7 @@ const creditWarning = computed(() => {
return tooMuchInsurance || noCreditInsurance ? 'negative' : ''; return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
}); });
const sumRisk = ({ clientRisks }) => { const sumRisk = ({ clientRisks }) => {
let total = clientRisks.reduce((acc, risk) => acc + risk.amount, 0); let total = clientRisks.reduce((acc, { amount }) => acc + amount, 0);
return total; return total;
}; };
@ -153,8 +153,6 @@ const sumRisk = ({ clientRisks }) => {
:label="t('customer.summary.isActive')" :label="t('customer.summary.isActive')"
:value="entity.isActive" :value="entity.isActive"
/> />
<!-- </VnRow>
<VnRow> -->
<VnLv <VnLv
:label="t('customer.summary.verifiedData')" :label="t('customer.summary.verifiedData')"
:value="entity.isTaxDataChecked" :value="entity.isTaxDataChecked"
@ -163,8 +161,6 @@ const sumRisk = ({ clientRisks }) => {
:label="t('customer.summary.hasToInvoice')" :label="t('customer.summary.hasToInvoice')"
:value="entity.hasToInvoice" :value="entity.hasToInvoice"
/> />
<!-- </VnRow>
<VnRow> -->
<VnLv <VnLv
:label="t('customer.summary.notifyByEmail')" :label="t('customer.summary.notifyByEmail')"
:value="entity.isToBeMailed" :value="entity.isToBeMailed"
@ -231,7 +227,7 @@ const sumRisk = ({ clientRisks }) => {
</QCard> </QCard>
<QCard class="vn-one" v-if="entity.account"> <QCard class="vn-one" v-if="entity.account">
<VnTitle <VnTitle
:url="`https://grafana.verdnatura.es/d/adjlxzv5yjt34d/analisis-de-clientes-7c-crm?orgId=1&var-clientFk=${entityId}`" :url="`${grafanaUrl}/d/adjlxzv5yjt34d/analisis-de-clientes-7c-crm?orgId=1&var-clientFk=${entityId}`"
:text="t('customer.summary.businessData')" :text="t('customer.summary.businessData')"
icon="vn:grafana" icon="vn:grafana"
/> />
@ -258,7 +254,7 @@ const sumRisk = ({ clientRisks }) => {
</QCard> </QCard>
<QCard class="vn-one" v-if="entity.account"> <QCard class="vn-one" v-if="entity.account">
<VnTitle <VnTitle
:url="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`" :url="`${grafanaUrl}/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
:text="t('customer.summary.payMethodFk')" :text="t('customer.summary.payMethodFk')"
icon="vn:grafana" icon="vn:grafana"
/> />

1
src/pages/Customer/components/CustomerCreditContractsCreate.vue
View File

@ -48,7 +48,6 @@ const toCustomerCreditContracts = () => {
clearable clearable
type="number" type="number"
v-model.number="data.credit" v-model.number="data.credit"
autofocus
/> />
</div> </div>
<div class="col"> <div class="col">