diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue index 44002c22a..620dc2ad2 100644 --- a/src/components/common/VnCard.vue +++ b/src/components/common/VnCard.vue @@ -1,50 +1,56 @@ <script setup> -import { onBeforeMount, computed } from 'vue'; -import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'; +import { onBeforeMount } from 'vue'; +import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'; import { useArrayData } from 'src/composables/useArrayData'; import { useStateStore } from 'stores/useStateStore'; import useCardSize from 'src/composables/useCardSize'; import VnSubToolbar from '../ui/VnSubToolbar.vue'; -import VnSearchbar from 'components/ui/VnSearchbar.vue'; -import LeftMenu from 'components/LeftMenu.vue'; -import RightMenu from 'components/common/RightMenu.vue'; + const props = defineProps({ dataKey: { type: String, required: true }, url: { type: String, default: undefined }, + idInWhere: { type: Boolean, default: false }, filter: { type: Object, default: () => {} }, descriptor: { type: Object, required: true }, filterPanel: { type: Object, default: undefined }, - idInWhere: { type: Boolean, default: false }, searchDataKey: { type: String, default: undefined }, searchbarProps: { type: Object, default: undefined }, redirectOnError: { type: Boolean, default: false }, }); const stateStore = useStateStore(); -const route = useRoute(); const router = useRouter(); -const searchRightDataKey = computed(() => { - if (!props.searchDataKey) return route.name; - return props.searchDataKey; -}); - const arrayData = useArrayData(props.dataKey, { url: props.url, userFilter: props.filter, oneRecord: true, }); +onBeforeRouteLeave(() => { + stateStore.cardDescriptorChangeValue(null); +}); + onBeforeMount(async () => { + stateStore.cardDescriptorChangeValue(props.descriptor); + + const route = router.currentRoute.value; try { await fetch(route.params.id); } catch { - const { matched: matches } = router.currentRoute.value; + const { matched: matches } = route; const { path } = matches.at(-1); router.push({ path: path.replace(/:id.*/, '') }); } }); onBeforeRouteUpdate(async (to, from) => { + if (hasRouteParam(to.params)) { + const { matched } = router.currentRoute.value; + const { name } = matched.at(-3); + if (name) { + router.push({ name, params: to.params }); + } + } const id = to.params.id; if (id !== from.params.id) await fetch(id, true); }); @@ -56,34 +62,13 @@ async function fetch(id, append = false) { else arrayData.store.url = props.url.replace(regex, `/${id}`); await arrayData.fetch({ append, updateRouter: false }); } +function hasRouteParam(params, valueToCheck = ':addressId') { + return Object.values(params).includes(valueToCheck); +} </script> <template> - <QDrawer - v-model="stateStore.leftDrawer" - show-if-above - :width="256" - v-if="stateStore.isHeaderMounted()" - > - <QScrollArea class="fit"> - <component :is="descriptor" /> - <QSeparator /> - <LeftMenu source="card" /> - </QScrollArea> - </QDrawer> - <slot name="searchbar" v-if="props.searchDataKey"> - <VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" /> - </slot> - <RightMenu> - <template #right-panel v-if="props.filterPanel"> - <component :is="props.filterPanel" :data-key="searchRightDataKey" /> - </template> - </RightMenu> - <QPageContainer> - <QPage> - <VnSubToolbar /> - <div :class="[useCardSize(), $attrs.class]"> - <RouterView :key="$route.path" /> - </div> - </QPage> - </QPageContainer> + <VnSubToolbar /> + <div :class="[useCardSize(), $attrs.class]"> + <RouterView :key="$route.path" /> + </div> </template> diff --git a/src/components/common/VnCardBeta.vue b/src/components/common/VnCardBeta.vue deleted file mode 100644 index 620dc2ad2..000000000 --- a/src/components/common/VnCardBeta.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script setup> -import { onBeforeMount } from 'vue'; -import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'; -import { useArrayData } from 'src/composables/useArrayData'; -import { useStateStore } from 'stores/useStateStore'; -import useCardSize from 'src/composables/useCardSize'; -import VnSubToolbar from '../ui/VnSubToolbar.vue'; - -const props = defineProps({ - dataKey: { type: String, required: true }, - url: { type: String, default: undefined }, - idInWhere: { type: Boolean, default: false }, - filter: { type: Object, default: () => {} }, - descriptor: { type: Object, required: true }, - filterPanel: { type: Object, default: undefined }, - searchDataKey: { type: String, default: undefined }, - searchbarProps: { type: Object, default: undefined }, - redirectOnError: { type: Boolean, default: false }, -}); - -const stateStore = useStateStore(); -const router = useRouter(); -const arrayData = useArrayData(props.dataKey, { - url: props.url, - userFilter: props.filter, - oneRecord: true, -}); - -onBeforeRouteLeave(() => { - stateStore.cardDescriptorChangeValue(null); -}); - -onBeforeMount(async () => { - stateStore.cardDescriptorChangeValue(props.descriptor); - - const route = router.currentRoute.value; - try { - await fetch(route.params.id); - } catch { - const { matched: matches } = route; - const { path } = matches.at(-1); - router.push({ path: path.replace(/:id.*/, '') }); - } -}); - -onBeforeRouteUpdate(async (to, from) => { - if (hasRouteParam(to.params)) { - const { matched } = router.currentRoute.value; - const { name } = matched.at(-3); - if (name) { - router.push({ name, params: to.params }); - } - } - const id = to.params.id; - if (id !== from.params.id) await fetch(id, true); -}); - -async function fetch(id, append = false) { - const regex = /\/(\d+)/; - if (props.idInWhere) arrayData.store.filter.where = { id }; - else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`; - else arrayData.store.url = props.url.replace(regex, `/${id}`); - await arrayData.fetch({ append, updateRouter: false }); -} -function hasRouteParam(params, valueToCheck = ':addressId') { - return Object.values(params).includes(valueToCheck); -} -</script> -<template> - <VnSubToolbar /> - <div :class="[useCardSize(), $attrs.class]"> - <RouterView :key="$route.path" /> - </div> -</template> diff --git a/src/pages/Account/Alias/Card/AliasCard.vue b/src/pages/Account/Alias/Card/AliasCard.vue index f37bd7d0f..f3faa5bee 100644 --- a/src/pages/Account/Alias/Card/AliasCard.vue +++ b/src/pages/Account/Alias/Card/AliasCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import AliasDescriptor from './AliasDescriptor.vue'; </script> <template> - <VnCardBeta + <VnCard data-key="Alias" url="MailAliases" :descriptor="AliasDescriptor" diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue index a5037e301..e102415c7 100644 --- a/src/pages/Account/Card/AccountCard.vue +++ b/src/pages/Account/Card/AccountCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import AccountDescriptor from './AccountDescriptor.vue'; import filter from './AccountFilter.js'; </script> <template> - <VnCardBeta + <VnCard url="VnUsers/preview" :id-in-where="true" data-key="Account" diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue index ef5b9db04..43ad22b90 100644 --- a/src/pages/Account/Role/Card/RoleCard.vue +++ b/src/pages/Account/Role/Card/RoleCard.vue @@ -1,9 +1,9 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import RoleDescriptor from './RoleDescriptor.vue'; </script> <template> - <VnCardBeta + <VnCard url="VnRoles" data-key="Role" :id-in-where="true" diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue index 05f3b53a8..307a6df40 100644 --- a/src/pages/Claim/Card/ClaimCard.vue +++ b/src/pages/Claim/Card/ClaimCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import ClaimDescriptor from './ClaimDescriptor.vue'; import filter from './ClaimFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Claim" url="Claims" :descriptor="ClaimDescriptor" diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue index 75fcb98fa..8c70646c1 100644 --- a/src/pages/Customer/Card/CustomerCard.vue +++ b/src/pages/Customer/Card/CustomerCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import CustomerDescriptor from './CustomerDescriptor.vue'; </script> <template> - <VnCardBeta + <VnCard data-key="Customer" :url="`Clients/${$route.params.id}/getCard`" :descriptor="CustomerDescriptor" diff --git a/src/pages/Entry/Card/EntryCard.vue b/src/pages/Entry/Card/EntryCard.vue index be82289f4..50f8b8e55 100644 --- a/src/pages/Entry/Card/EntryCard.vue +++ b/src/pages/Entry/Card/EntryCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import EntryDescriptor from './EntryDescriptor.vue'; import filter from './EntryFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Entry" url="Entries" :descriptor="EntryDescriptor" diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue index 34cc26437..a1bae87a6 100644 --- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue +++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue @@ -1,5 +1,5 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import InvoiceInDescriptor from './InvoiceInDescriptor.vue'; import { onBeforeRouteUpdate } from 'vue-router'; import { setRectificative } from '../composables/setRectificative'; @@ -9,7 +9,7 @@ onBeforeRouteUpdate(async (to) => await setRectificative(to)); </script> <template> - <VnCardBeta + <VnCard data-key="InvoiceIn" url="InvoiceIns" :descriptor="InvoiceInDescriptor" diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue index a50c9d247..cdb736555 100644 --- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue +++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue @@ -1,10 +1,10 @@ <script setup> import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue'; -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import filter from './InvoiceOutFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="InvoiceOut" url="InvoiceOuts" :filter="filter" diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue index 610b77a02..ddd21fe36 100644 --- a/src/pages/Item/Card/ItemCard.vue +++ b/src/pages/Item/Card/ItemCard.vue @@ -1,9 +1,9 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import ItemDescriptor from './ItemDescriptor.vue'; </script> <template> - <VnCardBeta + <VnCard data-key="Item" :url="`Items/${$route.params.id}/getCard`" :descriptor="ItemDescriptor" diff --git a/src/pages/Item/ItemType/Card/ItemTypeCard.vue b/src/pages/Item/ItemType/Card/ItemTypeCard.vue index 84e810de5..bd41b1be2 100644 --- a/src/pages/Item/ItemType/Card/ItemTypeCard.vue +++ b/src/pages/Item/ItemType/Card/ItemTypeCard.vue @@ -1,11 +1,11 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import ItemTypeDescriptor from 'src/pages/Item/ItemType/Card/ItemTypeDescriptor.vue'; import filter from './ItemTypeFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="ItemType" url="ItemTypes" :filter="filter" diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue index ad5c73a87..7dab307a0 100644 --- a/src/pages/Order/Card/OrderCard.vue +++ b/src/pages/Order/Card/OrderCard.vue @@ -1,11 +1,11 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue'; import filter from './OrderFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Order" url="Orders" :filter="filter" diff --git a/src/pages/Route/Agency/Card/AgencyCard.vue b/src/pages/Route/Agency/Card/AgencyCard.vue index 7dc31f8ba..c21298470 100644 --- a/src/pages/Route/Agency/Card/AgencyCard.vue +++ b/src/pages/Route/Agency/Card/AgencyCard.vue @@ -1,7 +1,7 @@ <script setup> import AgencyDescriptor from 'pages/Route/Agency/Card/AgencyDescriptor.vue'; -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; </script> <template> - <VnCardBeta data-key="Agency" url="Agencies" :descriptor="AgencyDescriptor" /> + <VnCard data-key="Agency" url="Agencies" :descriptor="AgencyDescriptor" /> </template> diff --git a/src/pages/Route/Card/RouteCard.vue b/src/pages/Route/Card/RouteCard.vue index c178dc6bf..b71f7d088 100644 --- a/src/pages/Route/Card/RouteCard.vue +++ b/src/pages/Route/Card/RouteCard.vue @@ -1,10 +1,10 @@ <script setup> import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue'; -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; import filter from './RouteFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Route" url="Routes" :filter="filter" diff --git a/src/pages/Route/Roadmap/RoadmapCard.vue b/src/pages/Route/Roadmap/RoadmapCard.vue index 48ba516a1..af08bc9d4 100644 --- a/src/pages/Route/Roadmap/RoadmapCard.vue +++ b/src/pages/Route/Roadmap/RoadmapCard.vue @@ -1,7 +1,7 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import RoadmapDescriptor from 'pages/Route/Roadmap/RoadmapDescriptor.vue'; </script> <template> - <VnCardBeta data-key="Roadmap" url="Roadmaps" :descriptor="RoadmapDescriptor" /> + <VnCard data-key="Roadmap" url="Roadmaps" :descriptor="RoadmapDescriptor" /> </template> diff --git a/src/pages/Route/Vehicle/Card/VehicleCard.vue b/src/pages/Route/Vehicle/Card/VehicleCard.vue index f59420aa2..b6038c24c 100644 --- a/src/pages/Route/Vehicle/Card/VehicleCard.vue +++ b/src/pages/Route/Vehicle/Card/VehicleCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import VehicleDescriptor from './VehicleDescriptor.vue'; import VehicleFilter from '../VehicleFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Vehicle" url="Vehicles" :filter="VehicleFilter" diff --git a/src/pages/Shelving/Card/ShelvingCard.vue b/src/pages/Shelving/Card/ShelvingCard.vue index 9e0ac8ad2..e2fb79fb0 100644 --- a/src/pages/Shelving/Card/ShelvingCard.vue +++ b/src/pages/Shelving/Card/ShelvingCard.vue @@ -1,11 +1,11 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue'; import filter from './ShelvingFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Shelving" url="Shelvings" :filter="filter" diff --git a/src/pages/Shelving/Parking/Card/ParkingCard.vue b/src/pages/Shelving/Parking/Card/ParkingCard.vue index b32c1b7d3..c8b3c60d7 100644 --- a/src/pages/Shelving/Parking/Card/ParkingCard.vue +++ b/src/pages/Shelving/Parking/Card/ParkingCard.vue @@ -1,11 +1,11 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import ParkingDescriptor from 'pages/Shelving/Parking/Card/ParkingDescriptor.vue'; import filter from './ParkingFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Parking" url="Parkings" :filter="filter" diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue index e30f79f96..74b3520bf 100644 --- a/src/pages/Supplier/Card/SupplierCard.vue +++ b/src/pages/Supplier/Card/SupplierCard.vue @@ -1,10 +1,10 @@ <script setup> import SupplierDescriptor from './SupplierDescriptor.vue'; -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; import filter from './SupplierFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Supplier" url="Suppliers" :descriptor="SupplierDescriptor" diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue index e22d5799a..19dbd608c 100644 --- a/src/pages/Ticket/Card/TicketCard.vue +++ b/src/pages/Ticket/Card/TicketCard.vue @@ -1,10 +1,10 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import TicketDescriptor from './TicketDescriptor.vue'; import filter from './TicketFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Ticket" url="Tickets" :descriptor="TicketDescriptor" diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue index cb09eafd6..479b47fb9 100644 --- a/src/pages/Travel/Card/TravelCard.vue +++ b/src/pages/Travel/Card/TravelCard.vue @@ -1,10 +1,10 @@ <script setup> import TravelDescriptor from './TravelDescriptor.vue'; -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; import filter from './TravelFilter.js'; </script> <template> - <VnCardBeta + <VnCard data-key="Travel" url="Travels" :descriptor="TravelDescriptor" diff --git a/src/pages/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue index 1694dad7b..19f0a682a 100644 --- a/src/pages/Wagon/Card/WagonCard.vue +++ b/src/pages/Wagon/Card/WagonCard.vue @@ -1,6 +1,6 @@ <script setup> -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; </script> <template> - <VnCardBeta data-key="Wagon" url="Wagons" :descriptor="{}" /> + <VnCard data-key="Wagon" url="Wagons" :descriptor="{}" /> </template> diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue index 3b7a62025..591dadcd2 100644 --- a/src/pages/Worker/Card/WorkerCard.vue +++ b/src/pages/Worker/Card/WorkerCard.vue @@ -1,9 +1,9 @@ <script setup> import WorkerDescriptor from './WorkerDescriptor.vue'; -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; </script> <template> - <VnCardBeta + <VnCard data-key="Worker" url="Workers/summary" :id-in-where="true" diff --git a/src/pages/Worker/Department/Card/DepartmentCard.vue b/src/pages/Worker/Department/Card/DepartmentCard.vue index 2e3f11521..0fbc90332 100644 --- a/src/pages/Worker/Department/Card/DepartmentCard.vue +++ b/src/pages/Worker/Department/Card/DepartmentCard.vue @@ -1,9 +1,9 @@ <script setup> -import VnCardBeta from 'components/common/VnCardBeta.vue'; +import VnCard from 'components/common/VnCard.vue'; import DepartmentDescriptor from 'pages/Worker/Department/Card/DepartmentDescriptor.vue'; </script> <template> - <VnCardBeta + <VnCard class="q-pa-md column items-center" v-bind="{ ...$attrs }" data-key="Department" diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue index 205ed074b..2ce4193a0 100644 --- a/src/pages/Zone/Card/ZoneCard.vue +++ b/src/pages/Zone/Card/ZoneCard.vue @@ -1,7 +1,7 @@ <script setup> -import VnCardBeta from 'src/components/common/VnCardBeta.vue'; +import VnCard from 'src/components/common/VnCard.vue'; import ZoneDescriptor from './ZoneDescriptor.vue'; </script> <template> - <VnCardBeta data-key="Zone" url="Zones" :descriptor="ZoneDescriptor" /> + <VnCard data-key="Zone" url="Zones" :descriptor="ZoneDescriptor" /> </template>