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

Merge pull request '#6891 add toggle' (!417) from 6891-addToggleFilterPanel into dev 

Reviewed-on: verdnatura/salix-front#417
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Jorge Penadés 2024-06-06 08:48:27 +00:00
parent f66d7b91f7 b27ae621f3
commit aba27c204a
36 changed files with 344 additions and 794 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/RightMenu.vue
View File

@ -9,19 +9,18 @@ const rightPanel = ref(null);
onMounted(() => { onMounted(() => {
rightPanel.value = document.querySelector('#right-panel'); rightPanel.value = document.querySelector('#right-panel');
if (rightPanel.value.childNodes.length) hasContent.value = true; if (!rightPanel.value) return;
// Check if there's content to display // Check if there's content to display
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
hasContent.value = rightPanel.value.childNodes.length; hasContent.value = rightPanel.value.childNodes.length;
}); });
if (rightPanel.value) observer.observe(rightPanel.value, {
observer.observe(rightPanel.value, { subtree: true,
subtree: true, childList: true,
childList: true, attributes: true,
attributes: true, });
});
if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false; if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
}); });
@ -30,7 +29,7 @@ const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
</script> </script>
<template> <template>
<Teleport to="#actions-append"> <Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
<div class="row q-gutter-x-sm"> <div class="row q-gutter-x-sm">
<QBtn <QBtn
v-if="hasContent || $slots['right-panel']" v-if="hasContent || $slots['right-panel']"

55
src/components/common/VnCard.vue
View File

@ -56,33 +56,34 @@ watchEffect(() => {
}); });
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <QDrawer
<Teleport to="#searchbar" v-if="props.searchDataKey"> v-model="stateStore.leftDrawer"
<slot name="searchbar"> show-if-above
<VnSearchbar :width="256"
:data-key="props.searchDataKey" v-if="stateStore.isHeaderMounted()"
:url="props.searchUrl" >
:label="props.searchbarLabel" <QScrollArea class="fit">
:info="props.searchbarInfo" <component :is="descriptor" />
:custom-route-redirect-name="searchCustomRouteRedirect" <QSeparator />
:redirect="searchRedirect" <LeftMenu source="card" />
/> </QScrollArea>
</slot> </QDrawer>
</Teleport> <slot name="searchbar" v-if="props.searchDataKey">
<slot v-else name="searchbar" /> <VnSearchbar
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256"> :data-key="props.searchDataKey"
<QScrollArea class="fit"> :url="props.searchUrl"
<component :is="descriptor" /> :label="props.searchbarLabel"
<QSeparator /> :info="props.searchbarInfo"
<LeftMenu source="card" /> :custom-route-redirect-name="searchCustomRouteRedirect"
</QScrollArea> :redirect="searchRedirect"
</QDrawer> />
<RightMenu> </slot>
<template #right-panel v-if="props.filterPanel"> <slot v-else name="searchbar" />
<component :is="props.filterPanel" :data-key="props.searchDataKey" /> <RightMenu>
</template> <template #right-panel v-if="props.filterPanel">
</RightMenu> <component :is="props.filterPanel" :data-key="props.searchDataKey" />
</template> </template>
</RightMenu>
<QPageContainer> <QPageContainer>
<QPage> <QPage>
<VnSubToolbar /> <VnSubToolbar />

4
src/components/common/VnInput.vue
View File

@ -74,13 +74,13 @@ const inputRules = [
<template v-if="$slots.prepend" #prepend> <template v-if="$slots.prepend" #prepend>
<slot name="prepend" /> <slot name="prepend" />
</template> </template>
<template #append> <template #append>
<slot name="append" v-if="$slots.append && !$attrs.disabled" /> <slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon <QIcon
name="close" name="close"
size="xs" size="xs"
v-if="$slots.append && hover && value && !$attrs.disabled" v-if="hover && value && !$attrs.disabled"
@click="value = null" @click="value = null"
></QIcon> ></QIcon>
</template> </template>

61
src/components/ui/VnSearchbar.vue
View File

@ -5,9 +5,11 @@ import { useArrayData } from 'composables/useArrayData';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import useRedirect from 'src/composables/useRedirect'; import useRedirect from 'src/composables/useRedirect';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useStateStore } from 'src/stores/useStateStore';
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const state = useStateStore();
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
@ -107,36 +109,37 @@ async function search() {
}); });
} }
</script> </script>
<template> <template>
<QForm @submit="search" id="searchbarForm"> <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
<VnInput <QForm @submit="search" id="searchbarForm">
id="searchbar" <VnInput
v-model="searchText" id="searchbar"
:placeholder="t(props.label)" v-model="searchText"
dense :placeholder="t(props.label)"
standout dense
autofocus standout
> autofocus
<template #prepend> >
<QIcon <template #prepend>
v-if="!quasar.platform.is.mobile" <QIcon
class="cursor-pointer" v-if="!quasar.platform.is.mobile"
name="search" class="cursor-pointer"
@click="search" name="search"
/> @click="search"
</template> />
<template #append> </template>
<QIcon <template #append>
v-if="props.info && $q.screen.gt.xs" <QIcon
name="info" v-if="props.info && $q.screen.gt.xs"
class="cursor-info" name="info"
> class="cursor-info"
<QTooltip>{{ t(props.info) }}</QTooltip> >
</QIcon> <QTooltip>{{ t(props.info) }}</QTooltip>
</template> </QIcon>
</VnInput> </template>
</QForm> </VnInput>
</QForm>
</Teleport>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

18
src/pages/Agency/AgencyList.vue
View File

@ -2,13 +2,11 @@
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue'; import CardList from 'src/components/ui/CardList.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const stateStore = useStateStore();
function navigate(id) { function navigate(id) {
router.push({ path: `/agency/${id}` }); router.push({ path: `/agency/${id}` });
} }
@ -22,16 +20,12 @@ function exprBuilder(param, value) {
} }
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> :info="t('You can search by name')"
<VnSearchbar :label="t('Search agency')"
:info="t('You can search by name')" data-key="AgencyList"
:label="t('Search agency')" url="Agencies"
data-key="AgencyList" />
url="Agencies"
/>
</Teleport>
</template>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

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

@ -12,6 +12,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ClaimSummary from './Card/ClaimSummary.vue'; import ClaimSummary from './Card/ClaimSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -37,35 +38,16 @@ function navigate(event, id) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="ClaimList"
<VnSearchbar :label="t('Search claim')"
data-key="ClaimList" :info="t('You can search by claim id or customer name')"
:label="t('Search claim')" />
:info="t('You can search by claim id or customer name')" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ClaimFilter data-key="ClaimList" /> <ClaimFilter data-key="ClaimList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

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

@ -1,7 +1,6 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import CustomerFilter from './CustomerFilter.vue'; import CustomerFilter from './CustomerFilter.vue';
@ -10,8 +9,8 @@ import CardList from 'src/components/ui/CardList.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue'; import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import CustomerSummary from './Card/CustomerSummary.vue'; import CustomerSummary from './Card/CustomerSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
@ -26,35 +25,16 @@ const redirectToCreateView = () => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> :info="t('You can search by customer id or name')"
<VnSearchbar :label="t('Search customer')"
:info="t('You can search by customer id or name')" data-key="CustomerList"
:label="t('Search customer')" />
data-key="CustomerList" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
@click="stateStore.toggleRightDrawer()"
dense
flat
icon="menu"
round
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
<QScrollArea class="fit text-grey-8">
<CustomerFilter data-key="CustomerList" /> <CustomerFilter data-key="CustomerList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

32
src/pages/Customer/Defaulter/CustomerDefaulter.vue
View File

@ -1,10 +1,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox, useQuasar } from 'quasar'; import { QBtn, QCheckbox, useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate, dateRange } from 'filters/index'; import { toCurrency, toDate, dateRange } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue'; import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
@ -15,7 +12,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue'; import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
import axios from 'axios'; import axios from 'axios';
const stateStore = useStateStore(); import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
@ -266,30 +263,11 @@ function exprBuilder(param, value) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<Teleport to="#actions-append"> <template #right-panel>
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerNotificationsFilter data-key="CustomerDefaulter" /> <CustomerNotificationsFilter data-key="CustomerDefaulter" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<VnSubToolbar> <VnSubToolbar>
<template #st-data> <template #st-data>
<CustomerBalanceDueTotal :amount="balanceDueTotal" /> <CustomerBalanceDueTotal :amount="balanceDueTotal" />

27
src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

@ -14,6 +14,7 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
@ -494,32 +495,15 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<Teleport to="#actions-append"> <template #right-panel>
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport></template
>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerExtendedListFilter <CustomerExtendedListFilter
v-if="visibleColumns.length !== 0" v-if="visibleColumns.length !== 0"
data-key="CustomerExtendedList" data-key="CustomerExtendedList"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
/> />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<VnSubToolbar> <VnSubToolbar>
<template #st-data> <template #st-data>
<TableVisibleColumns <TableVisibleColumns
@ -532,7 +516,6 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
/> />
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnPaginate <VnPaginate
data-key="CustomerExtendedList" data-key="CustomerExtendedList"

29
src/pages/Customer/Notifications/CustomerNotifications.vue
View File

@ -5,11 +5,10 @@ import { QBtn } from 'quasar';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue'; import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue'; import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const selected = ref([]); const selected = ref([]);
const selectedCustomerId = ref(0); const selectedCustomerId = ref(0);
@ -81,29 +80,11 @@ const selectCustomerId = (id) => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<Teleport to="#actions-append"> <template #right-panel>
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerNotificationsFilter data-key="CustomerNotifications" /> <CustomerNotificationsFilter data-key="CustomerNotifications" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<VnSubToolbar class="justify-end"> <VnSubToolbar class="justify-end">
<template #st-data> <template #st-data>
<CustomerNotificationsCampaignConsumption <CustomerNotificationsCampaignConsumption

28
src/pages/Customer/Payments/CustomerPayments.vue
View File

@ -3,15 +3,14 @@ import axios from 'axios';
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import { toDate, toCurrency } from 'filters/index'; import { toDate, toCurrency } from 'filters/index';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue'; import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const arrayData = useArrayData('CustomerTransactions'); const arrayData = useArrayData('CustomerTransactions');
@ -93,28 +92,11 @@ function stateColor(row) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<Teleport to="#actions-append"> <template #right-panel>
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerPaymentsFilter data-key="CustomerTransactions" /> <CustomerPaymentsFilter data-key="CustomerTransactions" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md customer-payments"> <QPage class="column items-center q-pa-md customer-payments">
<div class="vn-card-list"> <div class="vn-card-list">
<QToolbar class="q-pa-none justify-end"> <QToolbar class="q-pa-none justify-end">

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

@ -19,6 +19,7 @@ import { toDate, toCurrency } from 'src/filters';
import { useSession } from 'composables/useSession'; import { useSession } from 'composables/useSession';
import { dashIfEmpty } from 'src/filters'; import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter(); const router = useRouter();
const { getTokenMultimedia } = useSession(); const { getTokenMultimedia } = useSession();
@ -646,14 +647,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
@on-config-saved="visibleColumns = ['picture', ...$event]" @on-config-saved="visibleColumns = ['picture', ...$event]"
/> />
</template> </template>
<QSpace />
<div id="st-actions"></div>
</VnSubToolbar> </VnSubToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <RightMenu>
<QScrollArea class="fit text-grey-8"> <template #right-panel>
<EntryLatestBuysFilter data-key="EntryLatestBuys" /> <EntryLatestBuysFilter data-key="EntryLatestBuys" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <QTable
:rows="rows" :rows="rows"

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

@ -11,6 +11,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index'; import { toDate } from 'src/filters/index';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -29,23 +30,18 @@ onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
}); });
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="EntryList"
<VnSearchbar url="Entries/filter"
data-key="EntryList" :label="t('Search entries')"
url="Entries/filter" :info="t('You can search by entry reference')"
:label="t('Search entries')" />
:info="t('You can search by entry reference')" <RightMenu>
/> <template #right-panel>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<EntryFilter data-key="EntryList" /> <EntryFilter data-key="EntryList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

38
src/pages/InvoiceIn/InvoiceInList.vue
View File

@ -14,6 +14,7 @@ import { getUrl } from 'src/composables/getUrl';
import InvoiceInSummary from './Card/InvoiceInSummary.vue'; import InvoiceInSummary from './Card/InvoiceInSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue'; import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -33,35 +34,16 @@ function navigate(id) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="InvoiceInList"
<VnSearchbar :label="t('Search invoice')"
data-key="InvoiceInList" :info="t('You can search by invoice reference')"
:label="t('Search invoice')" />
:info="t('You can search by invoice reference')" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<InvoiceInFilter data-key="InvoiceInList" /> <InvoiceInFilter data-key="InvoiceInList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

10
src/pages/InvoiceOut/InvoiceOutGlobal.vue
View File

@ -7,6 +7,7 @@ import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { QBadge, QBtn } from 'quasar'; import { QBadge, QBtn } from 'quasar';
import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue'; import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -103,12 +104,11 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above> <RightMenu>
<QScrollArea class="fit text-grey-8"> <template #right-panel>
<InvoiceOutGlobalForm /> <InvoiceOutGlobalForm />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QCard v-if="status" class="card"> <QCard v-if="status" class="card">
<QCardSection class="card-section"> <QCardSection class="card-section">

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

@ -17,6 +17,7 @@ import { toDate, toCurrency } from 'src/filters/index';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
@ -93,35 +94,16 @@ const openCreateInvoiceModal = () => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> :info="t('youCanSearchByInvoiceReference')"
<VnSearchbar :label="t('searchInvoice')"
:info="t('youCanSearchByInvoiceReference')" data-key="InvoiceOutList"
:label="t('searchInvoice')" />
data-key="InvoiceOutList" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
@click="stateStore.toggleRightDrawer()"
dense
flat
icon="menu"
round
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<InvoiceOutFilter data-key="InvoiceOutList" /> <InvoiceOutFilter data-key="InvoiceOutList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage> <QPage>
<VnPaginate <VnPaginate
auto-load auto-load

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

@ -1,59 +1,43 @@
<script setup> <script setup>
import { ref, computed, onBeforeMount, onMounted, nextTick } from 'vue'; import { computed, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue'; import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js'; import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore(); const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const arrayData = ref(null); const arrayData = useArrayData('InvoiceOutNegative', {
url: 'InvoiceOuts/negativeBases',
function exprBuilder(param, value) { limit: 0,
switch (param) { userParams: {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
}
onBeforeMount(async () => {
const defaultParams = {
from: Date.vnFirstDayOfMonth().toISOString(), from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth().toISOString(), to: Date.vnLastDayOfMonth().toISOString(),
}; },
arrayData.value = useArrayData('InvoiceOutNegative', { exprBuilder: (param, value) => {
url: 'InvoiceOuts/negativeBases', switch (param) {
limit: 0, case 'from':
userParams: defaultParams, case 'to':
exprBuilder: exprBuilder, return;
}); default:
await arrayData.value.fetch({ append: false }); return { [param]: value };
}
stateStore.rightDrawer = true; },
}); });
const componentIsRendered = ref(false); onBeforeMount(async () => {
await arrayData.fetch({ append: false });
onMounted(() => stateStore.rightDrawer = true;
nextTick(() => { });
componentIsRendered.value = true;
})
);
const rows = computed(() => arrayData.value.store.data);
const columns = computed(() => [ const columns = computed(() => [
{ {
@ -144,28 +128,23 @@ const downloadCSV = async () => {
); );
}; };
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSubToolbar>
<Teleport <template #st-actions>
to="#st-actions"
v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
>
<QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()"> <QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
<QTooltip>{{ t('Download as CSV') }}</QTooltip> <QTooltip>{{ t('Download as CSV') }}</QTooltip>
</QBtn> </QBtn>
</Teleport> </template>
</template> </VnSubToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <RightMenu>
<QScrollArea class="fit text-grey-8"> <template #right-panel>
<InvoiceOutNegativeFilter data-key="InvoiceOutNegative" /> <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<VnSubToolbar />
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <QTable
:columns="columns" :columns="columns"
:rows="rows" :rows="arrayData.store.data"
row-key="clientId" row-key="clientId"
class="full-width q-mt-md" class="full-width q-mt-md"
> >

26
src/pages/Item/ItemFixedPrice.vue
View File

@ -20,6 +20,7 @@ import useNotify from 'src/composables/useNotify.js';
import axios from 'axios'; import axios from 'axios';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { isLower, isBigger } from 'src/filters/date.js'; import { isLower, isBigger } from 'src/filters/date.js';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -376,31 +377,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
auto-load auto-load
@on-fetch="(data) => (itemsWithNameOptions = data)" @on-fetch="(data) => (itemsWithNameOptions = data)"
/> />
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<Teleport to="#actions-append"> <template #right-panel>
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ItemFixedPriceFilter <ItemFixedPriceFilter
data-key="ItemFixedPrices" data-key="ItemFixedPrices"
:warehouses-options="warehousesOptions" :warehouses-options="warehousesOptions"
/> />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <QTable
:rows="fixedPrices" :rows="fixedPrices"

21
src/pages/Item/ItemList.vue
View File

@ -21,6 +21,8 @@ import { dashIfEmpty } from 'src/filters';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useVnConfirm } from 'composables/useVnConfirm'; import { useVnConfirm } from 'composables/useVnConfirm';
import axios from 'axios'; import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const router = useRouter(); const router = useRouter();
const { getTokenMultimedia } = useSession(); const { getTokenMultimedia } = useSession();
@ -430,24 +432,21 @@ onUnmounted(() => (stateStore.rightDrawer = false));
auto-load auto-load
@on-fetch="(data) => (buyersOptions = data)" @on-fetch="(data) => (buyersOptions = data)"
/> />
<VnSubToolbar>
<QToolbar class="bg-vn-dark justify-end"> <template #st-data>
<div id="st-data">
<TableVisibleColumns <TableVisibleColumns
:all-columns="allColumnNames" :all-columns="allColumnNames"
table-code="itemsIndex" table-code="itemsIndex"
labels-traductions-path="item.list" labels-traductions-path="item.list"
@on-config-saved="visibleColumns = ['picture', ...$event, 'actions']" @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
/> />
</div> </template>
<QSpace /> </VnSubToolbar>
<div id="st-actions"></div> <RightMenu>
</QToolbar> <template #right-panel>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ItemListFilter data-key="ItemList" /> <ItemListFilter data-key="ItemList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnPaginate <VnPaginate
ref="paginateRef" ref="paginateRef"

44
src/pages/Item/ItemRequest.vue
View File

@ -17,6 +17,7 @@ import { toCurrency } from 'filters/index';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js'; import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
import axios from 'axios'; import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n(); const { t } = useI18n();
const { notify } = useNotify(); const { notify } = useNotify();
@ -214,39 +215,18 @@ onBeforeMount(() => {
@on-fetch="(data) => (workersOptions = data)" @on-fetch="(data) => (workersOptions = data)"
auto-load auto-load
/> />
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="ItemRequests"
<VnSearchbar url="TicketRequests/filter"
data-key="ItemRequests" :label="t('globals.search')"
url="TicketRequests/filter" :info="t('You can search by Id or alias')"
:label="t('globals.search')" :redirect="false"
:info="t('You can search by Id or alias')" />
:redirect="false" <RightMenu>
/> <template #right-panel>
</Teleport>
</template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ItemRequestFilter data-key="ItemRequests" /> <ItemRequestFilter data-key="ItemRequests" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <QTable
:rows="itemRequestsOptions" :rows="itemRequestsOptions"

32
src/pages/Item/ItemTypeList.vue
View File

@ -8,10 +8,9 @@ import CardList from 'src/components/ui/CardList.vue';
import ItemTypeSummary from 'src/pages/ItemType/Card/ItemTypeSummary.vue'; import ItemTypeSummary from 'src/pages/ItemType/Card/ItemTypeSummary.vue';
import ItemTypeFilter from 'src/pages/ItemType/ItemTypeFilter.vue'; import ItemTypeFilter from 'src/pages/ItemType/ItemTypeFilter.vue';
import ItemTypeSearchbar from '../ItemType/ItemTypeSearchbar.vue'; import ItemTypeSearchbar from '../ItemType/ItemTypeSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
@ -60,31 +59,12 @@ const exprBuilder = (param, value) => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <ItemTypeSearchbar />
<Teleport to="#searchbar"> <RightMenu>
<ItemTypeSearchbar /> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ItemTypeFilter data-key="ItemTypeList" /> <ItemTypeFilter data-key="ItemTypeList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

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

@ -13,6 +13,7 @@ import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
import OrderFilter from 'pages/Order/Card/OrderFilter.vue'; import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
import OrderSummary from 'pages/Order/Card/OrderSummary.vue'; import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -26,33 +27,13 @@ function navigate(id) {
router.push({ path: `/order/${id}` }); router.push({ path: `/order/${id}` });
} }
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <OrderSearchbar />
<Teleport to="#searchbar"> <RightMenu>
<OrderSearchbar /> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<OrderFilter data-key="OrderList" /> <OrderFilter data-key="OrderList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

38
src/pages/Parking/ParkingList.vue
View File

@ -10,6 +10,7 @@ import CardList from 'components/ui/CardList.vue';
import VnLv from 'components/ui/VnLv.vue'; import VnLv from 'components/ui/VnLv.vue';
import ParkingFilter from './ParkingFilter.vue'; import ParkingFilter from './ParkingFilter.vue';
import ParkingSummary from './Card/ParkingSummary.vue'; import ParkingSummary from './Card/ParkingSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { push } = useRouter(); const { push } = useRouter();
@ -37,35 +38,18 @@ function exprBuilder(param, value) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <template>
<Teleport to="#searchbar"> <VnSearchbar
<VnSearchbar data-key="ParkingList"
data-key="ParkingList" :label="t('Search parking')"
:label="t('Search parking')" :info="t('You can search by parking code')"
:info="t('You can search by parking code')" />
/>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template> </template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <RightMenu>
<QScrollArea class="fit text-grey-8"> <template #right-panel>
<ParkingFilter data-key="ParkingList" /> <ParkingFilter data-key="ParkingList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

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

@ -2,15 +2,14 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Notify } from 'quasar'; import { Notify } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { toDate } from 'filters/index'; import { toDate } from 'filters/index';
import CmrFilter from './CmrFilter.vue'; import CmrFilter from './CmrFilter.vue';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const { getTokenMultimedia } = useSession(); const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia(); const token = getTokenMultimedia();
@ -91,24 +90,11 @@ function downloadPdfs() {
} }
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<template #right-panel>
<Teleport to="#actions-append"> <CmrFilter data-key="CmrList" />
<div class="row q-gutter-x-sm"> </template>
<QBtn </RightMenu>
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<div class="column items-center"> <div class="column items-center">
<div class="list"> <div class="list">
<VnPaginate <VnPaginate
@ -182,15 +168,10 @@ function downloadPdfs() {
</div> </div>
<QPageSticky :offset="[20, 20]"> <QPageSticky :offset="[20, 20]">
<QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" /> <QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" />
<QTooltip>
{{ t('route.cmr.list.downloadCmrs') }}
</QTooltip>
</QPageSticky> </QPageSticky>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CmrFilter data-key="CmrList" />
<QTooltip>
{{ t('route.cmr.list.downloadCmrs') }}
</QTooltip>
</QScrollArea>
</QDrawer>
</div> </div>
</template> </template>

38
src/pages/Route/RouteAutonomous.vue
View File

@ -17,6 +17,7 @@ import { useSummaryDialog } from 'composables/useSummaryDialog';
import VnDms from 'components/common/VnDms.vue'; import VnDms from 'components/common/VnDms.vue';
import { useState } from 'composables/useState'; import { useState } from 'composables/useState';
import axios from 'axios'; import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -172,35 +173,16 @@ function navigateToRouteSummary(event, row) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="RouteAutonomousList"
<VnSearchbar :label="t('Search autonomous')"
data-key="RouteAutonomousList" :info="t('You can search by autonomous reference')"
:label="t('Search autonomous')" />
:info="t('You can search by autonomous reference')" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<RouteAutonomousFilter data-key="RouteAutonomousList" /> <RouteAutonomousFilter data-key="RouteAutonomousList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center"> <QPage class="column items-center">
<div class="route-list"> <div class="route-list">
<div class="q-pa-md"> <div class="q-pa-md">

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

@ -21,6 +21,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue'; import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -186,26 +187,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RouteSearchbar />
<Teleport to="#searchbar"> <RightMenu>
<RouteSearchbar /> <template #right-panel>
</Teleport> <RouteFilter data-key="RouteList" />
<Teleport to="#actions-append"> </template>
<div class="row q-gutter-x-sm"> </RightMenu>
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDialog v-model="confirmationDialog"> <QDialog v-model="confirmationDialog">
<QCard style="min-width: 350px"> <QCard style="min-width: 350px">
<QCardSection> <QCardSection>
@ -227,11 +214,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QCardActions> </QCardActions>
</QCard> </QCard>
</QDialog> </QDialog>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<RouteFilter data-key="RouteList" />
</QScrollArea>
</QDrawer>
<FetchData <FetchData
url="Workers/activeWithInheritedRole" url="Workers/activeWithInheritedRole"
@on-fetch="(data) => (workers = data)" @on-fetch="(data) => (workers = data)"

38
src/pages/Route/RouteRoadmap.vue
View File

@ -16,6 +16,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
import { useSummaryDialog } from 'composables/useSummaryDialog'; import { useSummaryDialog } from 'composables/useSummaryDialog';
import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue'; import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -133,35 +134,16 @@ function navigateToRoadmapSummary(event, row) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="RoadmapList"
<VnSearchbar :label="t('Search roadmaps')"
data-key="RoadmapList" :info="t('You can search by roadmap reference')"
:label="t('Search roadmaps')" />
:info="t('You can search by roadmap reference')" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<RoadmapFilter data-key="RoadmapList" /> <RoadmapFilter data-key="RoadmapList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QDialog v-model="isCloneDialogOpen"> <QDialog v-model="isCloneDialogOpen">
<QCard style="min-width: 350px"> <QCard style="min-width: 350px">
<QCardSection> <QCardSection>

30
src/pages/Shelving/ShelvingList.vue
View File

@ -10,6 +10,7 @@ import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue'; import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue'; import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -39,31 +40,12 @@ function exprBuilder(param, value) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <ShelvingSearchbar />
<Teleport to="#searchbar"> <RightMenu>
<ShelvingSearchbar /> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ShelvingFilter data-key="ShelvingList" /> <ShelvingFilter data-key="ShelvingList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

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

@ -7,10 +7,9 @@ import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
import SupplierSummary from './Card/SupplierSummary.vue'; import SupplierSummary from './Card/SupplierSummary.vue';
import SupplierListFilter from './SupplierListFilter.vue'; import SupplierListFilter from './SupplierListFilter.vue';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
@ -25,22 +24,13 @@ const redirectToCreateView = () => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
<Teleport to="#searchbar"> <RightMenu>
<VnSearchbar <template #right-panel>
data-key="SuppliersList" <SupplierListFilter data-key="SuppliersList" />
:limit="20" </template>
:label="t('Search suppliers')" </RightMenu>
/>
</Teleport>
</template>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<SupplierListFilter data-key="SuppliersList" />
</QScrollArea>
</QDrawer>
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate data-key="SuppliersList" url="Suppliers/filter"> <VnPaginate data-key="SuppliersList" url="Suppliers/filter">
<template #body="{ rows }"> <template #body="{ rows }">

38
src/pages/Ticket/TicketList.vue
View File

@ -11,6 +11,7 @@ import TicketFilter from './TicketFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue'; import CardList from 'src/components/ui/CardList.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
@ -35,35 +36,16 @@ function navigate(id) {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="TicketList"
<VnSearchbar :label="t('Search ticket')"
data-key="TicketList" :info="t('You can search by ticket id or alias')"
:label="t('Search ticket')" />
:info="t('You can search by ticket id or alias')" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256">
<QScrollArea class="fit text-grey-8">
<TicketFilter data-key="TicketList" /> <TicketFilter data-key="TicketList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

25
src/pages/Travel/ExtraCommunity.vue
View File

@ -18,6 +18,7 @@ import { toDate } from 'src/filters';
import { usePrintService } from 'composables/usePrintService'; import { usePrintService } from 'composables/usePrintService';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import axios from 'axios'; import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter(); const router = useRouter();
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -421,15 +422,16 @@ const handleDragScroll = (event) => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="ExtraCommunity"
<VnSearchbar :limit="20"
data-key="ExtraCommunity" :label="t('searchExtraCommunity')"
:limit="20" />
:label="t('searchExtraCommunity')" <RightMenu>
/> <template #right-panel>
</Teleport> <ExtraCommunityFilter data-key="ExtraCommunity" />
</template> </template>
</RightMenu>
<VnSubToolbar class="justify-end"> <VnSubToolbar class="justify-end">
<template #st-actions> <template #st-actions>
<QBtn <QBtn
@ -444,11 +446,6 @@ const handleDragScroll = (event) => {
</QBtn> </QBtn>
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ExtraCommunityFilter data-key="ExtraCommunity" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <QTable
:rows="rows" :rows="rows"

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

@ -14,6 +14,7 @@ import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index'; import { toDate } from 'src/filters/index';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js'; import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
@ -49,15 +50,6 @@ onMounted(async () => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="TravelList"
:limit="20"
:label="t('searchByIdOrReference')"
/>
</Teleport>
</template>
<FetchData <FetchData
url="Warehouses" url="Warehouses"
:filter="{ fields: ['id', 'name'] }" :filter="{ fields: ['id', 'name'] }"
@ -65,11 +57,12 @@ onMounted(async () => {
@on-fetch="(data) => (warehouses = data)" @on-fetch="(data) => (warehouses = data)"
auto-load auto-load
/> />
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <VnSearchbar data-key="TravelList" :limit="20" :label="t('searchByIdOrReference')" />
<QScrollArea class="fit text-grey-8"> <RightMenu>
<template #right-panel>
<TravelFilter data-key="TravelList" /> <TravelFilter data-key="TravelList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

41
src/pages/Worker/WorkerList.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import WorkerSummary from './Card/WorkerSummary.vue'; import WorkerSummary from './Card/WorkerSummary.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
@ -9,8 +8,8 @@ import WorkerFilter from './WorkerFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue'; import CardList from 'src/components/ui/CardList.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
@ -23,37 +22,17 @@ const redirectToCreateView = () => {
router.push({ name: 'WorkerCreate' }); router.push({ name: 'WorkerCreate' });
}; };
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="WorkerList"
<VnSearchbar :label="t('Search worker')"
data-key="WorkerList" :info="t('You can search by worker id or name')"
:label="t('Search worker')" />
:info="t('You can search by worker id or name')" <RightMenu>
/> <template #right-panel>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<WorkerFilter data-key="WorkerList" /> <WorkerFilter data-key="WorkerList" />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

28
src/pages/Zone/ZoneDeliveryDays.vue
View File

@ -1,6 +1,5 @@
<script setup> <script setup>
import { computed, onMounted, ref, watch, onUnmounted } from 'vue'; import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue'; import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue'; import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
@ -8,8 +7,8 @@ import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useWeekdayStore } from 'src/stores/useWeekdayStore'; import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
const weekdayStore = useWeekdayStore(); const weekdayStore = useWeekdayStore();
@ -180,28 +179,11 @@ onUnmounted(() => arrayData.destroy());
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <RightMenu>
<Teleport to="#actions-append"> <template #right-panel>
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ZoneDeliveryPanel /> <ZoneDeliveryPanel />
</QScrollArea> </template>
</QDrawer> </RightMenu>
<QPage class="q-pa-md flex justify-center"> <QPage class="q-pa-md flex justify-center">
<QCard style="height: max-content"> <QCard style="height: max-content">
<div class="calendars-header"> <div class="calendars-header">

7
src/pages/Zone/ZoneList.vue
View File

@ -13,6 +13,8 @@ import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import axios from 'axios'; import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import ZoneFilterPanel from './ZoneFilterPanel.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -85,6 +87,11 @@ onMounted(() => (stateStore.rightDrawer = true));
</script> </script>
<template> <template>
<RightMenu>
<template #right-panel>
<ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate

40
src/pages/Zone/ZoneMain.vue
View File

@ -1,14 +1,11 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'src/components/LeftMenu.vue'; import LeftMenu from 'src/components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import ZoneFilterPanel from './ZoneFilterPanel.vue';
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
const route = useRoute();
const exprBuilder = (param, value) => { const exprBuilder = (param, value) => {
switch (param) { switch (param) {
@ -41,32 +38,17 @@ const exprBuilder = (param, value) => {
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <VnSearchbar
<Teleport to="#searchbar"> data-key="ZoneList"
<VnSearchbar url="Zones"
data-key="ZoneList" :filter="{
url="Zones" include: { relation: 'agencyMode', scope: { fields: ['name'] } },
:filter="{ }"
include: { relation: 'agencyMode', scope: { fields: ['name'] } }, :expr-builder="exprBuilder"
}" :label="t('list.searchZone')"
:expr-builder="exprBuilder" :info="t('list.searchInfo')"
:label="t('list.searchZone')" custom-route-redirect-name="ZoneSummary"
:info="t('list.searchInfo')" />
custom-route-redirect-name="ZoneSummary"
/>
</Teleport>
</template>
<QDrawer
v-if="route.name === 'ZoneList'"
v-model="stateStore.rightDrawer"
side="right"
:width="256"
show-if-above
>
<QScrollArea class="fit text-grey-8">
<ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
</QScrollArea>
</QDrawer>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256"> <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit text-grey-8"> <QScrollArea class="fit text-grey-8">
<LeftMenu /> <LeftMenu />