feat: refs #6919 improve vn-card logic
This commit is contained in:
parent
7626c777ed
commit
565ec15589
|
@ -10,11 +10,11 @@ import LeftMenu from 'components/LeftMenu.vue';
|
||||||
import RightMenu from 'components/common/RightMenu.vue';
|
import RightMenu from 'components/common/RightMenu.vue';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataKey: { type: String, required: true },
|
dataKey: { type: String, required: true },
|
||||||
baseUrl: { type: String, default: undefined },
|
url: { type: String, default: undefined },
|
||||||
customUrl: { type: String, default: undefined },
|
|
||||||
filter: { type: Object, default: () => {} },
|
filter: { type: Object, default: () => {} },
|
||||||
descriptor: { type: Object, required: true },
|
descriptor: { type: Object, required: true },
|
||||||
filterPanel: { type: Object, default: undefined },
|
filterPanel: { type: Object, default: undefined },
|
||||||
|
idInWhere: { type: Boolean, default: false },
|
||||||
searchDataKey: { type: String, default: undefined },
|
searchDataKey: { type: String, default: undefined },
|
||||||
searchbarProps: { type: Object, default: undefined },
|
searchbarProps: { type: Object, default: undefined },
|
||||||
redirectOnError: { type: Boolean, default: false },
|
redirectOnError: { type: Boolean, default: false },
|
||||||
|
@ -23,24 +23,18 @@ const props = defineProps({
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const url = computed(() => {
|
|
||||||
if (props.baseUrl) {
|
|
||||||
return `${props.baseUrl}/${route.params.id}`;
|
|
||||||
}
|
|
||||||
return props.customUrl;
|
|
||||||
});
|
|
||||||
const searchRightDataKey = computed(() => {
|
const searchRightDataKey = computed(() => {
|
||||||
if (!props.searchDataKey) return route.name;
|
if (!props.searchDataKey) return route.name;
|
||||||
return props.searchDataKey;
|
return props.searchDataKey;
|
||||||
});
|
});
|
||||||
const arrayData = useArrayData(props.dataKey, {
|
const arrayData = useArrayData(props.dataKey, {
|
||||||
url: url.value,
|
url: props.url,
|
||||||
filter: props.filter,
|
filter: props.filter,
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
try {
|
try {
|
||||||
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
|
if (props.idInWhere) arrayData.store.filter.where = { id: route.params.id };
|
||||||
await arrayData.fetch({ append: false, updateRouter: false });
|
await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
} catch {
|
} catch {
|
||||||
const { matched: matches } = router.currentRoute.value;
|
const { matched: matches } = router.currentRoute.value;
|
||||||
|
@ -49,10 +43,10 @@ onBeforeMount(async () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (props.baseUrl) {
|
if (!props.idInWhere) {
|
||||||
onBeforeRouteUpdate(async (to, from) => {
|
onBeforeRouteUpdate(async (to, from) => {
|
||||||
if (to.params.id !== from.params.id) {
|
if (to.params.id !== from.params.id) {
|
||||||
arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
|
arrayData.store.url = `${props.url}/${to.params.id}`;
|
||||||
await arrayData.fetch({ append: false, updateRouter: false });
|
await arrayData.fetch({ append: false, updateRouter: false });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,7 +8,7 @@ const { t } = useI18n();
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Alias"
|
data-key="Alias"
|
||||||
base-url="MailAliases"
|
url="MailAliases"
|
||||||
:descriptor="AliasDescriptor"
|
:descriptor="AliasDescriptor"
|
||||||
search-data-key="AccountAliasList"
|
search-data-key="AccountAliasList"
|
||||||
:searchbar-props="{
|
:searchbar-props="{
|
||||||
|
|
|
@ -7,7 +7,7 @@ import filter from './ClaimFilter.js';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Claim"
|
data-key="Claim"
|
||||||
base-url="Claims"
|
url="Claims"
|
||||||
:descriptor="ClaimDescriptor"
|
:descriptor="ClaimDescriptor"
|
||||||
:filter-panel="ClaimFilter"
|
:filter-panel="ClaimFilter"
|
||||||
search-data-key="ClaimList"
|
search-data-key="ClaimList"
|
||||||
|
|
|
@ -12,7 +12,7 @@ const routeName = computed(() => route.name);
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Client"
|
data-key="Client"
|
||||||
base-url="Clients"
|
url="Clients"
|
||||||
:descriptor="CustomerDescriptor"
|
:descriptor="CustomerDescriptor"
|
||||||
:filter-panel="routeName != 'CustomerConsumption' && CustomerFilter"
|
:filter-panel="routeName != 'CustomerConsumption' && CustomerFilter"
|
||||||
search-data-key="CustomerList"
|
search-data-key="CustomerList"
|
||||||
|
|
|
@ -7,7 +7,7 @@ import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue
|
||||||
class="q-pa-md column items-center"
|
class="q-pa-md column items-center"
|
||||||
v-bind="{ ...$attrs }"
|
v-bind="{ ...$attrs }"
|
||||||
data-key="Department"
|
data-key="Department"
|
||||||
base-url="Departments"
|
url="Departments"
|
||||||
:descriptor="DepartmentDescriptor"
|
:descriptor="DepartmentDescriptor"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -7,7 +7,7 @@ import filter from './EntryFilter.js';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Entry"
|
data-key="Entry"
|
||||||
base-url="Entries"
|
url="Entries"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
:descriptor="EntryDescriptor"
|
:descriptor="EntryDescriptor"
|
||||||
:filter-panel="EntryFilter"
|
:filter-panel="EntryFilter"
|
||||||
|
|
|
@ -45,7 +45,7 @@ onBeforeRouteUpdate(async (to) => await setRectificative(to));
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="InvoiceIn"
|
data-key="InvoiceIn"
|
||||||
base-url="InvoiceIns"
|
url="InvoiceIns"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
:descriptor="InvoiceInDescriptor"
|
:descriptor="InvoiceInDescriptor"
|
||||||
:filter-panel="InvoiceInFilter"
|
:filter-panel="InvoiceInFilter"
|
||||||
|
|
|
@ -6,7 +6,7 @@ import InvoiceOutFilter from '../InvoiceOutFilter.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="InvoiceOut"
|
data-key="InvoiceOut"
|
||||||
base-url="InvoiceOuts"
|
url="InvoiceOuts"
|
||||||
:descriptor="InvoiceOutDescriptor"
|
:descriptor="InvoiceOutDescriptor"
|
||||||
:filter-panel="InvoiceOutFilter"
|
:filter-panel="InvoiceOutFilter"
|
||||||
search-data-key="InvoiceOutList"
|
search-data-key="InvoiceOutList"
|
||||||
|
|
|
@ -6,7 +6,7 @@ import ItemListFilter from '../ItemListFilter.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Item"
|
data-key="Item"
|
||||||
base-url="Items"
|
url="Items"
|
||||||
:descriptor="ItemDescriptor"
|
:descriptor="ItemDescriptor"
|
||||||
:filter-panel="ItemListFilter"
|
:filter-panel="ItemListFilter"
|
||||||
search-data-key="ItemList"
|
search-data-key="ItemList"
|
||||||
|
|
|
@ -7,7 +7,7 @@ import ItemTypeSearchbar from '../ItemTypeSearchbar.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="ItemTypeSummary"
|
data-key="ItemTypeSummary"
|
||||||
base-url="ItemTypes"
|
url="ItemTypes"
|
||||||
:descriptor="ItemTypeDescriptor"
|
:descriptor="ItemTypeDescriptor"
|
||||||
:filter-panel="ItemTypeFilter"
|
:filter-panel="ItemTypeFilter"
|
||||||
search-data-key="ItemTypeList"
|
search-data-key="ItemTypeList"
|
||||||
|
|
|
@ -26,7 +26,7 @@ const customFilterPanel = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Order"
|
data-key="Order"
|
||||||
base-url="Orders"
|
url="Orders"
|
||||||
:descriptor="OrderDescriptor"
|
:descriptor="OrderDescriptor"
|
||||||
:filter-panel="customFilterPanel"
|
:filter-panel="customFilterPanel"
|
||||||
:search-data-key="customRouteRedirectName"
|
:search-data-key="customRouteRedirectName"
|
||||||
|
|
|
@ -6,7 +6,7 @@ import ParkingFilter from 'pages/Parking/ParkingFilter.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Parking"
|
data-key="Parking"
|
||||||
base-url="Parkings"
|
url="Parkings"
|
||||||
:descriptor="ParkingDescriptor"
|
:descriptor="ParkingDescriptor"
|
||||||
:filter-panel="ParkingFilter"
|
:filter-panel="ParkingFilter"
|
||||||
search-data-key="ParkingList"
|
search-data-key="ParkingList"
|
||||||
|
|
|
@ -5,7 +5,7 @@ import VnCard from 'components/common/VnCard.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Agency"
|
data-key="Agency"
|
||||||
base-url="Agencies"
|
url="Agencies"
|
||||||
:descriptor="AgencyDescriptor"
|
:descriptor="AgencyDescriptor"
|
||||||
search-data-key="AgencyList"
|
search-data-key="AgencyList"
|
||||||
:searchbar-props="{
|
:searchbar-props="{
|
||||||
|
|
|
@ -7,7 +7,7 @@ import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Route"
|
data-key="Route"
|
||||||
base-url="Routes"
|
url="Routes"
|
||||||
:descriptor="RouteDescriptor"
|
:descriptor="RouteDescriptor"
|
||||||
:filter-panel="RouteFilter"
|
:filter-panel="RouteFilter"
|
||||||
search-data-key="RouteList"
|
search-data-key="RouteList"
|
||||||
|
|
|
@ -6,7 +6,7 @@ import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Roadmap"
|
data-key="Roadmap"
|
||||||
base-url="Roadmaps"
|
url="Roadmaps"
|
||||||
:descriptor="RoadmapDescriptor"
|
:descriptor="RoadmapDescriptor"
|
||||||
:filter-panel="RoadmapFilter"
|
:filter-panel="RoadmapFilter"
|
||||||
search-data-key="RoadmapList"
|
search-data-key="RoadmapList"
|
||||||
|
|
|
@ -7,7 +7,7 @@ import ShelvingSearchbar from './ShelvingSearchbar.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Shelving"
|
data-key="Shelving"
|
||||||
base-url="Shelvings"
|
url="Shelvings"
|
||||||
:descriptor="ShelvingDescriptor"
|
:descriptor="ShelvingDescriptor"
|
||||||
:filter-panel="ShelvingFilter"
|
:filter-panel="ShelvingFilter"
|
||||||
search-data-key="ShelvingList"
|
search-data-key="ShelvingList"
|
||||||
|
|
|
@ -6,7 +6,7 @@ import SupplierListFilter from '../SupplierListFilter.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Supplier"
|
data-key="Supplier"
|
||||||
base-url="Suppliers"
|
url="Suppliers"
|
||||||
:descriptor="SupplierDescriptor"
|
:descriptor="SupplierDescriptor"
|
||||||
:filter-panel="SupplierListFilter"
|
:filter-panel="SupplierListFilter"
|
||||||
search-data-key="SupplierList"
|
search-data-key="SupplierList"
|
||||||
|
|
|
@ -10,7 +10,7 @@ const { t } = useI18n();
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Ticket"
|
data-key="Ticket"
|
||||||
base-url="Tickets"
|
url="Tickets"
|
||||||
:filter-panel="TicketFilter"
|
:filter-panel="TicketFilter"
|
||||||
:descriptor="TicketDescriptor"
|
:descriptor="TicketDescriptor"
|
||||||
search-data-key="TicketList"
|
search-data-key="TicketList"
|
||||||
|
|
|
@ -33,7 +33,7 @@ const filter = {
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Travel"
|
data-key="Travel"
|
||||||
base-url="Travels"
|
url="Travels"
|
||||||
search-data-key="TravelList"
|
search-data-key="TravelList"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
:descriptor="TravelDescriptor"
|
:descriptor="TravelDescriptor"
|
||||||
|
|
|
@ -2,5 +2,5 @@
|
||||||
import VnCard from 'components/common/VnCard.vue';
|
import VnCard from 'components/common/VnCard.vue';
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnCard data-key="Wagon" base-url="Wagons" />
|
<VnCard data-key="Wagon" url="Wagons" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -6,7 +6,8 @@ import WorkerFilter from '../WorkerFilter.vue';
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="Worker"
|
data-key="Worker"
|
||||||
custom-url="Workers/summary"
|
url="Workers/summary"
|
||||||
|
:id-in-where="true"
|
||||||
:descriptor="WorkerDescriptor"
|
:descriptor="WorkerDescriptor"
|
||||||
:filter-panel="WorkerFilter"
|
:filter-panel="WorkerFilter"
|
||||||
search-data-key="WorkerList"
|
search-data-key="WorkerList"
|
||||||
|
|
|
@ -20,7 +20,7 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
data-key="zone"
|
data-key="zone"
|
||||||
base-url="Zones"
|
url="Zones"
|
||||||
:descriptor="ZoneDescriptor"
|
:descriptor="ZoneDescriptor"
|
||||||
:filter-panel="ZoneFilterPanel"
|
:filter-panel="ZoneFilterPanel"
|
||||||
:search-data-key="notIsLocations('ZoneList', 'ZoneLocations')"
|
:search-data-key="notIsLocations('ZoneList', 'ZoneLocations')"
|
||||||
|
|
Loading…
Reference in New Issue