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(() => {
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
const observer = new MutationObserver(() => {
hasContent.value = rightPanel.value.childNodes.length;
});
if (rightPanel.value)
observer.observe(rightPanel.value, {
subtree: true,
childList: true,
attributes: true,
});
observer.observe(rightPanel.value, {
subtree: true,
childList: true,
attributes: true,
});
if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
});
@ -30,7 +29,7 @@ const { t } = useI18n();
const stateStore = useStateStore();
</script>
<template>
<Teleport to="#actions-append">
<Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
<div class="row q-gutter-x-sm">
<QBtn
v-if="hasContent || $slots['right-panel']"

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

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

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

@ -74,13 +74,13 @@ const inputRules = [
<template v-if="$slots.prepend" #prepend>
<slot name="prepend" />
</template>
<template #append>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon
name="close"
size="xs"
v-if="$slots.append && hover && value && !$attrs.disabled"
v-if="hover && value && !$attrs.disabled"
@click="value = null"
></QIcon>
</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 useRedirect from 'src/composables/useRedirect';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'src/stores/useStateStore';
const quasar = useQuasar();
const { t } = useI18n();
const state = useStateStore();
const props = defineProps({
dataKey: {
@ -107,36 +109,37 @@ async function search() {
});
}
</script>
<template>
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"
:placeholder="t(props.label)"
dense
standout
autofocus
>
<template #prepend>
<QIcon
v-if="!quasar.platform.is.mobile"
class="cursor-pointer"
name="search"
@click="search"
/>
</template>
<template #append>
<QIcon
v-if="props.info && $q.screen.gt.xs"
name="info"
class="cursor-info"
>
<QTooltip>{{ t(props.info) }}</QTooltip>
</QIcon>
</template>
</VnInput>
</QForm>
<Teleport to="#searchbar" v-if="state.isHeaderMounted()">
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"
:placeholder="t(props.label)"
dense
standout
autofocus
>
<template #prepend>
<QIcon
v-if="!quasar.platform.is.mobile"
class="cursor-pointer"
name="search"
@click="search"
/>
</template>
<template #append>
<QIcon
v-if="props.info && $q.screen.gt.xs"
name="info"
class="cursor-info"
>
<QTooltip>{{ t(props.info) }}</QTooltip>
</QIcon>
</template>
</VnInput>
</QForm>
</Teleport>
</template>
<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 CardList from 'src/components/ui/CardList.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
const stateStore = useStateStore();
function navigate(id) {
router.push({ path: `/agency/${id}` });
}
@ -22,16 +20,12 @@ function exprBuilder(param, value) {
}
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
:info="t('You can search by name')"
:label="t('Search agency')"
data-key="AgencyList"
url="Agencies"
/>
</Teleport>
</template>
<VnSearchbar
:info="t('You can search by name')"
:label="t('Search agency')"
data-key="AgencyList"
url="Agencies"
/>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<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 ClaimSummary from './Card/ClaimSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
@ -37,35 +38,16 @@ function navigate(event, id) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="ClaimList"
:label="t('Search claim')"
:info="t('You can search by claim id or customer name')"
/>
</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">
<VnSearchbar
data-key="ClaimList"
:label="t('Search claim')"
:info="t('You can search by claim id or customer name')"
/>
<RightMenu>
<template #right-panel>
<ClaimFilter data-key="ClaimList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

@ -1,7 +1,6 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.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 { useSummaryDialog } from 'src/composables/useSummaryDialog';
import CustomerSummary from './Card/CustomerSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
@ -26,35 +25,16 @@ const redirectToCreateView = () => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
:info="t('You can search by customer id or name')"
:label="t('Search customer')"
data-key="CustomerList"
/>
</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">
<VnSearchbar
:info="t('You can search by customer id or name')"
:label="t('Search customer')"
data-key="CustomerList"
/>
<RightMenu>
<template #right-panel>
<CustomerFilter data-key="CustomerList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

@ -1,10 +1,7 @@
<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox, useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate, dateRange } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.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 CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
import axios from 'axios';
const stateStore = useStateStore();
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n();
const quasar = useQuasar();
@ -266,30 +263,11 @@ function exprBuilder(param, value) {
</script>
<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">
<RightMenu>
<template #right-panel>
<CustomerNotificationsFilter data-key="CustomerDefaulter" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<VnSubToolbar>
<template #st-data>
<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 { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n();
const router = useRouter();
@ -494,32 +495,15 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
</script>
<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">
<RightMenu>
<template #right-panel>
<CustomerExtendedListFilter
v-if="visibleColumns.length !== 0"
data-key="CustomerExtendedList"
:visible-columns="visibleColumns"
/>
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<VnSubToolbar>
<template #st-data>
<TableVisibleColumns
@ -532,7 +516,6 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
/>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<VnPaginate
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 CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
const selected = ref([]);
const selectedCustomerId = ref(0);
@ -81,29 +80,11 @@ const selectCustomerId = (id) => {
</script>
<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">
<RightMenu>
<template #right-panel>
<CustomerNotificationsFilter data-key="CustomerNotifications" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<VnSubToolbar class="justify-end">
<template #st-data>
<CustomerNotificationsCampaignConsumption

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

@ -3,15 +3,14 @@ import axios from 'axios';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import { toDate, toCurrency } from 'filters/index';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const quasar = useQuasar();
const { t } = useI18n();
const arrayData = useArrayData('CustomerTransactions');
@ -93,28 +92,11 @@ function stateColor(row) {
</script>
<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">
<RightMenu>
<template #right-panel>
<CustomerPaymentsFilter data-key="CustomerTransactions" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md customer-payments">
<div class="vn-card-list">
<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 { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter();
const { getTokenMultimedia } = useSession();
@ -646,14 +647,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
@on-config-saved="visibleColumns = ['picture', ...$event]"
/>
</template>
<QSpace />
<div id="st-actions"></div>
</VnSubToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<RightMenu>
<template #right-panel>
<EntryLatestBuysFilter data-key="EntryLatestBuys" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
: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 { toDate } from 'src/filters/index';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
@ -29,23 +30,18 @@ onMounted(async () => {
stateStore.rightDrawer = true;
});
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="EntryList"
url="Entries/filter"
:label="t('Search entries')"
:info="t('You can search by entry reference')"
/>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<VnSearchbar
data-key="EntryList"
url="Entries/filter"
:label="t('Search entries')"
:info="t('You can search by entry reference')"
/>
<RightMenu>
<template #right-panel>
<EntryFilter data-key="EntryList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<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 { useSummaryDialog } from 'src/composables/useSummaryDialog';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
@ -33,35 +34,16 @@ function navigate(id) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="InvoiceInList"
:label="t('Search invoice')"
:info="t('You can search by invoice reference')"
/>
</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">
<VnSearchbar
data-key="InvoiceInList"
:label="t('Search invoice')"
:info="t('You can search by invoice reference')"
/>
<RightMenu>
<template #right-panel>
<InvoiceInFilter data-key="InvoiceInList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<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 { QBadge, QBtn } from 'quasar';
import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -103,12 +104,11 @@ onUnmounted(() => {
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above>
<QScrollArea class="fit text-grey-8">
<RightMenu>
<template #right-panel>
<InvoiceOutGlobalForm />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QCard v-if="status" class="card">
<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 { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useSession } from 'src/composables/useSession';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n();
const router = useRouter();
@ -93,35 +94,16 @@ const openCreateInvoiceModal = () => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
:info="t('youCanSearchByInvoiceReference')"
:label="t('searchInvoice')"
data-key="InvoiceOutList"
/>
</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">
<VnSearchbar
:info="t('youCanSearchByInvoiceReference')"
:label="t('searchInvoice')"
data-key="InvoiceOutList"
/>
<RightMenu>
<template #right-panel>
<InvoiceOutFilter data-key="InvoiceOutList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage>
<VnPaginate
auto-load

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

@ -1,59 +1,43 @@
<script setup>
import { ref, computed, onBeforeMount, onMounted, nextTick } from 'vue';
import { computed, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { toCurrency } from 'src/filters';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore();
const { t } = useI18n();
const arrayData = ref(null);
function exprBuilder(param, value) {
switch (param) {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
}
onBeforeMount(async () => {
const defaultParams = {
const arrayData = useArrayData('InvoiceOutNegative', {
url: 'InvoiceOuts/negativeBases',
limit: 0,
userParams: {
from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth().toISOString(),
};
arrayData.value = useArrayData('InvoiceOutNegative', {
url: 'InvoiceOuts/negativeBases',
limit: 0,
userParams: defaultParams,
exprBuilder: exprBuilder,
});
await arrayData.value.fetch({ append: false });
stateStore.rightDrawer = true;
},
exprBuilder: (param, value) => {
switch (param) {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
},
});
const componentIsRendered = ref(false);
onMounted(() =>
nextTick(() => {
componentIsRendered.value = true;
})
);
const rows = computed(() => arrayData.value.store.data);
onBeforeMount(async () => {
await arrayData.fetch({ append: false });
stateStore.rightDrawer = true;
});
const columns = computed(() => [
{
@ -144,28 +128,23 @@ const downloadCSV = async () => {
);
};
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport
to="#st-actions"
v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
>
<VnSubToolbar>
<template #st-actions>
<QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
<QTooltip>{{ t('Download as CSV') }}</QTooltip>
</QBtn>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
</template>
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
</QScrollArea>
</QDrawer>
<VnSubToolbar />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
:rows="rows"
:rows="arrayData.store.data"
row-key="clientId"
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 { useArrayData } from 'composables/useArrayData';
import { isLower, isBigger } from 'src/filters/date.js';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -376,31 +377,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
auto-load
@on-fetch="(data) => (itemsWithNameOptions = data)"
/>
<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">
<RightMenu>
<template #right-panel>
<ItemFixedPriceFilter
data-key="ItemFixedPrices"
:warehouses-options="warehousesOptions"
/>
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
: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 { useVnConfirm } from 'composables/useVnConfirm';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const router = useRouter();
const { getTokenMultimedia } = useSession();
@ -430,24 +432,21 @@ onUnmounted(() => (stateStore.rightDrawer = false));
auto-load
@on-fetch="(data) => (buyersOptions = data)"
/>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data">
<VnSubToolbar>
<template #st-data>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="itemsIndex"
labels-traductions-path="item.list"
@on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
/>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
</template>
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<ItemListFilter data-key="ItemList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<VnPaginate
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 { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n();
const { notify } = useNotify();
@ -214,39 +215,18 @@ onBeforeMount(() => {
@on-fetch="(data) => (workersOptions = data)"
auto-load
/>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="ItemRequests"
url="TicketRequests/filter"
:label="t('globals.search')"
:info="t('You can search by Id or alias')"
:redirect="false"
/>
</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">
<VnSearchbar
data-key="ItemRequests"
url="TicketRequests/filter"
:label="t('globals.search')"
:info="t('You can search by Id or alias')"
:redirect="false"
/>
<RightMenu>
<template #right-panel>
<ItemRequestFilter data-key="ItemRequests" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
: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 ItemTypeFilter from 'src/pages/ItemType/ItemTypeFilter.vue';
import ItemTypeSearchbar from '../ItemType/ItemTypeSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
@ -60,31 +59,12 @@ const exprBuilder = (param, value) => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<ItemTypeSearchbar />
</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">
<ItemTypeSearchbar />
<RightMenu>
<template #right-panel>
<ItemTypeFilter data-key="ItemTypeList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<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 OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
@ -26,33 +27,13 @@ function navigate(id) {
router.push({ path: `/order/${id}` });
}
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<OrderSearchbar />
</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">
<OrderSearchbar />
<RightMenu>
<template #right-panel>
<OrderFilter data-key="OrderList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<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 ParkingFilter from './ParkingFilter.vue';
import ParkingSummary from './Card/ParkingSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { push } = useRouter();
@ -37,35 +38,18 @@ function exprBuilder(param, value) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="ParkingList"
:label="t('Search parking')"
: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>
<VnSearchbar
data-key="ParkingList"
:label="t('Search parking')"
:info="t('You can search by parking code')"
/>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<RightMenu>
<template #right-panel>
<ParkingFilter data-key="ParkingList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

@ -2,15 +2,14 @@
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Notify } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useSession } from 'src/composables/useSession';
import { toDate } from 'filters/index';
import CmrFilter from './CmrFilter.vue';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
@ -91,24 +90,11 @@ function downloadPdfs() {
}
</script>
<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>
<RightMenu>
<template #right-panel>
<CmrFilter data-key="CmrList" />
</template>
</RightMenu>
<div class="column items-center">
<div class="list">
<VnPaginate
@ -182,15 +168,10 @@ function downloadPdfs() {
</div>
<QPageSticky :offset="[20, 20]">
<QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" />
<QTooltip>
{{ t('route.cmr.list.downloadCmrs') }}
</QTooltip>
</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>
</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 { useState } from 'composables/useState';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -172,35 +173,16 @@ function navigateToRouteSummary(event, row) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="RouteAutonomousList"
:label="t('Search autonomous')"
:info="t('You can search by autonomous reference')"
/>
</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">
<VnSearchbar
data-key="RouteAutonomousList"
:label="t('Search autonomous')"
:info="t('You can search by autonomous reference')"
/>
<RightMenu>
<template #right-panel>
<RouteAutonomousFilter data-key="RouteAutonomousList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center">
<div class="route-list">
<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 { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -186,26 +187,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<RouteSearchbar />
</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>
<RouteSearchbar />
<RightMenu>
<template #right-panel>
<RouteFilter data-key="RouteList" />
</template>
</RightMenu>
<QDialog v-model="confirmationDialog">
<QCard style="min-width: 350px">
<QCardSection>
@ -227,11 +214,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QCardActions>
</QCard>
</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
url="Workers/activeWithInheritedRole"
@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 RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
import { useRouter } from 'vue-router';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -133,35 +134,16 @@ function navigateToRoadmapSummary(event, row) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="RoadmapList"
:label="t('Search roadmaps')"
:info="t('You can search by roadmap reference')"
/>
</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">
<VnSearchbar
data-key="RoadmapList"
:label="t('Search roadmaps')"
:info="t('You can search by roadmap reference')"
/>
<RightMenu>
<template #right-panel>
<RoadmapFilter data-key="RoadmapList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QDialog v-model="isCloneDialogOpen">
<QCard style="min-width: 350px">
<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 ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
@ -39,31 +40,12 @@ function exprBuilder(param, value) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<ShelvingSearchbar />
</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">
<ShelvingSearchbar />
<RightMenu>
<template #right-panel>
<ShelvingFilter data-key="ShelvingList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<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 SupplierSummary from './Card/SupplierSummary.vue';
import SupplierListFilter from './SupplierListFilter.vue';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
@ -25,22 +24,13 @@ const redirectToCreateView = () => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="SuppliersList"
:limit="20"
:label="t('Search suppliers')"
/>
</Teleport>
</template>
<VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
<RightMenu>
<template #right-panel>
<SupplierListFilter data-key="SuppliersList" />
</template>
</RightMenu>
<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">
<VnPaginate data-key="SuppliersList" url="Suppliers/filter">
<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 CardList from 'src/components/ui/CardList.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter();
const { t } = useI18n();
@ -35,35 +36,16 @@ function navigate(id) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="TicketList"
:label="t('Search ticket')"
:info="t('You can search by ticket id or alias')"
/>
</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">
<VnSearchbar
data-key="TicketList"
:label="t('Search ticket')"
:info="t('You can search by ticket id or alias')"
/>
<RightMenu>
<template #right-panel>
<TicketFilter data-key="TicketList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

@ -18,6 +18,7 @@ import { toDate } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter();
const stateStore = useStateStore();
@ -421,15 +422,16 @@ const handleDragScroll = (event) => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="ExtraCommunity"
:limit="20"
:label="t('searchExtraCommunity')"
/>
</Teleport>
</template>
<VnSearchbar
data-key="ExtraCommunity"
:limit="20"
:label="t('searchExtraCommunity')"
/>
<RightMenu>
<template #right-panel>
<ExtraCommunityFilter data-key="ExtraCommunity" />
</template>
</RightMenu>
<VnSubToolbar class="justify-end">
<template #st-actions>
<QBtn
@ -444,11 +446,6 @@ const handleDragScroll = (event) => {
</QBtn>
</template>
</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">
<QTable
: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 { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter();
const { t } = useI18n();
@ -49,15 +50,6 @@ onMounted(async () => {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="TravelList"
:limit="20"
:label="t('searchByIdOrReference')"
/>
</Teleport>
</template>
<FetchData
url="Warehouses"
:filter="{ fields: ['id', 'name'] }"
@ -65,11 +57,12 @@ onMounted(async () => {
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<VnSearchbar data-key="TravelList" :limit="20" :label="t('searchByIdOrReference')" />
<RightMenu>
<template #right-panel>
<TravelFilter data-key="TravelList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

@ -1,7 +1,6 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import WorkerSummary from './Card/WorkerSummary.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 CardList from 'src/components/ui/CardList.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
@ -23,37 +22,17 @@ const redirectToCreateView = () => {
router.push({ name: 'WorkerCreate' });
};
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="WorkerList"
:label="t('Search worker')"
:info="t('You can search by worker id or name')"
/>
</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">
<VnSearchbar
data-key="WorkerList"
:label="t('Search worker')"
:info="t('You can search by worker id or name')"
/>
<RightMenu>
<template #right-panel>
<WorkerFilter data-key="WorkerList" />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

@ -1,6 +1,5 @@
<script setup>
import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
@ -8,8 +7,8 @@ import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useArrayData } from 'src/composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const { t } = useI18n();
const stateStore = useStateStore();
const weekdayStore = useWeekdayStore();
@ -180,28 +179,11 @@ onUnmounted(() => arrayData.destroy());
</script>
<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">
<RightMenu>
<template #right-panel>
<ZoneDeliveryPanel />
</QScrollArea>
</QDrawer>
</template>
</RightMenu>
<QPage class="q-pa-md flex justify-center">
<QCard style="height: max-content">
<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 { useStateStore } from 'stores/useStateStore';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import ZoneFilterPanel from './ZoneFilterPanel.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -85,6 +87,11 @@ onMounted(() => (stateStore.rightDrawer = true));
</script>
<template>
<RightMenu>
<template #right-panel>
<ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate

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

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