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

feat: claimList better support vnTable, claimSummary redesign. 

BREAKING CHANGE: VnTable default-mode table
This commit is contained in:
Alex Moreno 2024-07-11 15:03:39 +02:00
parent 3a2b27484a
commit 5232df2595
22 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/VnTable/VnOrder.vue
View File

@ -5,7 +5,7 @@ const model = defineModel({ type: Object, required: true });
const $props = defineProps({
name: {
type: String,
required: true,
default: '',
},
label: {
type: String,
@ -28,6 +28,7 @@ const hover = ref();
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
async function orderBy(name, direction) {
if (!name) return;
switch (direction) {
case 'DESC':
direction = undefined;
@ -54,7 +55,7 @@ defineExpose({ orderBy });
>
<span>{{ label }}</span>
<QChip
v-if="name != 'tableStatus'"
v-if="name"
:label="!vertical && model?.index"
:icon="
(model?.index || hover) && !vertical

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

@ -23,7 +23,7 @@ const $props = defineProps({
},
defaultMode: {
type: String,
default: 'card', // 'table', 'card'
default: 'table', // 'table', 'card'
},
columnSearch: {
type: Boolean,
@ -137,6 +137,10 @@ const rowClickFunction = computed(() => {
});
const isTableMode = computed(() => mode.value == TABLE_MODE);
const columnsVisibilitySkiped = computed(() => [
...splittedColumns.value.columns.filter((c) => c.visible == false).map((c) => c.name),
...['tableActions'],
]);
function setUserParams(watchedParams) {
if (!watchedParams) return;
@ -182,6 +186,7 @@ function splitColumns(columns) {
label: t('status'),
name: 'tableStatus',
columnFilter: false,
orderBy: false,
});
}
}
@ -259,7 +264,7 @@ defineExpose({
/>
<VnTableOrder
v-model="orders[col.name]"
:name="col.name"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="true"
@ -321,6 +326,7 @@ defineExpose({
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
:skip="columnsVisibilitySkiped"
/>
<QBtnToggle
v-model="mode"
@ -355,7 +361,7 @@ defineExpose({
>
<VnTableOrder
v-model="orders[col.name]"
:name="col.name"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"

8
src/components/VnTable/VnVisibleColumn.vue
View File

@ -12,6 +12,10 @@ const $props = defineProps({
type: String,
default: '',
},
skip: {
type: Array,
default: () => [],
},
});
const { notify } = useNotify();
@ -30,8 +34,12 @@ function setUserConfigViewData(data, isLocal) {
if (!data) return;
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
if (!isLocal) localColumns.value = [];
// Array to Object
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
for (let column of columns.value) {
const { label, name } = column;
if (skippeds[name]) continue;
column.visible = data[name] ?? true;
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
}

10
src/composables/useArrayData.js
View File

@ -149,7 +149,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store.filter = {};
if (params) store.userParams = { ...params };
const response = await fetch({ append: false });
const response = await fetch({});
return response;
}
@ -162,7 +162,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store.userParams = userParams;
arrayDataStore.reset(['skip', 'filter.skip', 'page']);
await fetch({ append: false });
await fetch({});
return { filter, params };
}
@ -187,7 +187,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
}
store.order = order;
fetch({ append: false, updateRouter: true });
fetch({});
index++;
return { index, order };
@ -201,7 +201,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
if (index > -1) order.splice(index, 1);
store.order = order;
fetch({ append: false, updateRouter: true });
fetch({});
}
function sanitizerParams(params, exprBuilder) {
@ -231,7 +231,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
}
async function refresh() {
if (Object.values(store.userParams).length) await fetch({ append: false });
if (Object.values(store.userParams).length) await fetch({});
}
function updateStateParams() {

23
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -211,7 +211,7 @@ async function changeState(value) {
>
<QList>
<QVirtualScroll
style="max-height: 300px"
class="max-container-height"
:items="ClaimStates"
separator
v-slot="{ item, index }"
@ -279,13 +279,13 @@ async function changeState(value) {
<ClaimNotes
:id="entityId"
:add-note="false"
style="max-height: 300px"
class="max-container-height"
order="created ASC"
/>
</QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<QCard class="vn-two" v-if="claimDms?.length">
<VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
<div class="container">
<div class="container max-container-height" style="overflow: auto">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
@ -302,7 +302,10 @@ async function changeState(value) {
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QCard
class="multimedia relative-position"
style="max-height: 128px"
>
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@ -322,7 +325,7 @@ async function changeState(value) {
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<QCard class="vn-max" v-if="salesClaimed.length > 0">
<VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
<QTable
:columns="detailsColumns"
@ -361,7 +364,7 @@ async function changeState(value) {
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<QCard class="vn-max" v-if="developments.length > 0">
<VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
<QTable
:columns="developmentColumns"
@ -458,7 +461,7 @@ async function changeState(value) {
gap: 15px;
}
.multimedia-container {
flex: 1 0 21%;
flex: 0 0 128px;
}
.multimedia {
transition: all 0.5s;
@ -491,4 +494,8 @@ async function changeState(value) {
.change-state {
width: 10%;
}
.max-container-height {
max-height: 300px;
}
</style>

1
src/pages/Claim/Card/ClaimSummaryAction.vue
View File

@ -71,7 +71,6 @@ const columns = [
<VnTable
data-key="ClaimEndsTable"
url="ClaimEnds/filter"
default-mode="table"
:right-search="false"
:column-search="false"
:disable-option="{ card: true, table: true }"

2
src/pages/Claim/ClaimFilter.vue
View File

@ -17,6 +17,8 @@ const props = defineProps({
});
const states = ref([]);
defineExpose({ states });
</script>
<template>

41
src/pages/Claim/ClaimList.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { toDate } from 'filters/index';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
@ -14,6 +14,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const claimFilterRef = ref();
const columns = computed(() => [
{
align: 'left',
@ -29,18 +30,38 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'clientName',
isTitle: true,
visible: false,
},
{
align: 'left',
label: t('claim.customer'),
name: 'clientFk',
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
},
},
{
align: 'left',
label: t('claim.attendedBy'),
name: 'attendedBy',
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
useLike: false,
optionValue: 'id',
optionLabel: 'name',
optionFilter: 'firstName',
},
},
},
{
align: 'left',
@ -48,6 +69,9 @@ const columns = computed(() => [
name: 'created',
format: ({ created }) => toDate(created),
cardVisible: true,
columnFilter: {
component: 'date',
},
},
{
align: 'left',
@ -57,6 +81,14 @@ const columns = computed(() => [
condition: () => true,
color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
},
columnFilter: {
name: 'claimStateFk',
component: 'select',
attrs: {
options: claimFilterRef.value?.states,
optionLabel: 'description',
},
},
},
{
align: 'right',
@ -86,7 +118,7 @@ const STATE_COLOR = {
/>
<RightMenu>
<template #right-panel>
<ClaimFilter data-key="ClaimList" />
<ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
</template>
</RightMenu>
<VnTable
@ -116,4 +148,9 @@ const STATE_COLOR = {
es:
Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
params:
stateCode: Estado
en:
params:
stateCode: State
</i18n>

1
src/pages/Customer/CustomerList.vue
View File

@ -405,7 +405,6 @@ function handleLocation(data, location) {
}"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="customer"
auto-load
>

1
src/pages/Entry/EntryLatestBuys.vue
View File

@ -191,7 +191,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
order="id DESC"
:columns="columns"
redirect="entry"
default-mode="table"
auto-load
:right-search="false"
/>

1
src/pages/Entry/EntryList.vue
View File

@ -199,7 +199,6 @@ onMounted(async () => {
order="id DESC"
:columns="columns"
redirect="entry"
default-mode="table"
auto-load
:right-search="false"
/>

1
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -207,7 +207,6 @@ watchEffect(selectedRows);
v-model:selected="selectedRows"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="invoice-out"
auto-load
:table="{

1
src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
View File

@ -164,7 +164,6 @@ const downloadCSV = async () => {
"
:limit="0"
:columns="columns"
default-mode="table"
auto-load
:is-editable="false"
:use-model="true"

1
src/pages/Order/OrderLines.vue
View File

@ -249,7 +249,6 @@ async function confirmOrder() {
data-key="OrderLines"
url="OrderRows"
:columns="columns"
default-mode="table"
:right-search="false"
:use-model="true"
auto-load

1
src/pages/Order/OrderList.vue
View File

@ -154,7 +154,6 @@ async function fetchClientAddress(id, data) {
},
}"
:columns="columns"
default-mode="table"
redirect="order"
auto-load
>

3
src/pages/Route/Agency/AgencyList.vue
View File

@ -78,10 +78,11 @@ const columns = computed(() => [
:columns="columns"
:right-search="false"
:use-model="true"
default-mode="card"
/>
</template>
<i18n>
es:
es:
isOwn: Tiene propietario
isAnyVolumeAllowed: Permite cualquier volumen
Search agency: Buscar agencia

1
src/pages/Route/Cmr/CmrList.vue
View File

@ -117,6 +117,7 @@ function downloadPdfs() {
:columns="columns"
:right-search="true"
:use-model="true"
default-mode="card"
/>
</template>
<style lang="scss" scoped>

1
src/pages/Route/RouteList.vue
View File

@ -237,7 +237,6 @@ const openTicketsDialog = (id) => {
url="Routes/filter"
:columns="columns"
:right-search="true"
default-mode="table"
:is-editable="true"
:create="{
urlCreate: 'Routes',

1
src/pages/Supplier/SupplierList.vue
View File

@ -99,7 +99,6 @@ const columns = computed(() => [
}"
order="id ASC"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:use-model="true"

1
src/pages/Travel/TravelList.vue
View File

@ -198,7 +198,6 @@ const columns = computed(() => [
}"
order="landed DESC"
:columns="columns"
default-mode="table"
auto-load
redirect="travel"
:is-editable="false"

1
src/pages/Worker/Card/WorkerBalance.vue
View File

@ -77,7 +77,6 @@ const columns = computed(() => [
}"
order="paymentDate DESC"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:is-editable="true"

1
src/pages/Worker/Card/WorkerFormation.vue
View File

@ -116,7 +116,6 @@ const columns = computed(() => [
}"
order="id DESC"
:columns="columns"
default-mode="table"
auto-load
:right-search="false"
:is-editable="true"