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

Merge pull request '#6654 sticky class' (!165) from 6654-stickySubToolbar into dev 

Reviewed-on: verdnatura/salix-front#165
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Jorge Penadés 2024-01-31 07:50:58 +00:00
parent fac4e0f9ca 3c67e1d51c
commit bcfe5098d8
11 changed files with 97 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/CardDescriptor.vue
View File

@ -49,7 +49,6 @@ onMounted(async () => {
() => $props.url,
async (newUrl, lastUrl) => {
if (newUrl == lastUrl) return;
entity.value = null;
await getData();
}
);
@ -62,7 +61,6 @@ async function getData() {
skip: 0,
});
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
entity.value = data;
emit('onFetch', data);
}
const emit = defineEmits(['onFetch']);

25
src/components/ui/VnSubToolbar.vue
View File

@ -1,6 +1,7 @@
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted } from 'vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
onMounted(() => {
@ -13,9 +14,25 @@ onUnmounted(() => {
</script>
<template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QToolbar class="bg-vn-dark justify-end sticky">
<slot name="st-data">
<div id="st-data"></div>
</slot>
<QSpace />
<div id="st-actions"></div>
<slot name="st-actions">
<div id="st-actions"></div>
</slot>
</QToolbar>
</template>
<style lang="scss" scoped>
.sticky {
position: sticky;
top: 61px;
z-index: 1;
}
@media (max-width: $breakpoint-sm) {
.sticky {
top: 90px;
}
}
</style>

2
src/composables/tMobile.js
View File

@ -4,5 +4,5 @@ import { useI18n } from 'vue-i18n';
export function tMobile(...args) {
const quasar = useQuasar();
const { t } = useI18n();
if (!quasar.platform.is.mobile) return t(...args);
if (!quasar.screen.xs) return t(...args);
}

14
src/pages/Claim/Card/ClaimCard.vue
View File

@ -1,27 +1,13 @@
<script setup>
import LeftMenu from 'components/LeftMenu.vue';
import { getUrl } from 'composables/getUrl';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import ClaimDescriptor from './ClaimDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
const { t } = useI18n();
const route = useRoute();
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const entityId = computed(() => {
return $props.id || route.params.id;
});
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">

35
src/pages/Claim/Card/ClaimLines.vue
View File

@ -4,12 +4,11 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import VnDiscount from 'components/common/vnDiscount.vue';
import ClaimLinesImport from './ClaimLinesImport.vue';
@ -158,23 +157,21 @@ function showImportDialog() {
</script>
<template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
<QToolbar>
<div class="row q-gutter-md">
<div>
{{ t('Amount') }}
<QChip :dense="$q.screen.lt.sm">
{{ toCurrency(amount) }}
</QChip>
</div>
<QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
<div class="row q-gutter-md">
<div>
{{ t('Amount') }}
<QChip :dense="$q.screen.lt.sm">
{{ toCurrency(amount) }}
</QChip>
</div>
</QToolbar>
<QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
</div>
</Teleport>
<FetchData

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

@ -12,6 +12,7 @@ import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
const { t } = useI18n();
@ -206,8 +207,8 @@ const refreshData = () => {
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data" class="row">
<VnSubToolbar class="bg-vn-dark">
<template #st-data>
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
<div class="flex items-center q-ml-lg">
<QBtn
@ -217,8 +218,8 @@ const refreshData = () => {
@click.stop="viewAddObservation(selected)"
/>
</div>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<QTable

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

@ -9,6 +9,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
@ -499,9 +500,8 @@ const selectSalesPersonId = (id) => {
/>
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data">
<VnSubToolbar>
<template #st-actions>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="clientsDetail"
@ -510,10 +510,8 @@ const selectSalesPersonId = (id) => {
visibleColumns = ['customerStatus', ...$event, 'actions']
"
/>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
</template>
</VnSubToolbar>
<QPage class="column items-center q-pa-md">
<QTable

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

@ -11,6 +11,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
const selectedCards = ref(new Map());
@ -129,8 +130,8 @@ const downloadCsv = () => {
url="InvoiceOuts/filter"
>
<template #body="{ rows }">
<QToolbar class="bg-vn-dark justify-end">
<div id="st-actions">
<VnSubToolbar class="bg-vn-dark justify-end">
<template #st-actions>
<QBtn
@click="downloadCsv()"
class="q-mr-xl"
@ -178,8 +179,8 @@ const downloadCsv = () => {
:model-value="selectedCards.size === rows.length"
class="q-mr-md"
/>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<div class="flex flex-center q-pa-md">
<div class="card-list">
<CardList

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

@ -15,6 +15,7 @@ import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import { useQuasar } from 'quasar';
import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
const { t } = useI18n();
@ -228,8 +229,8 @@ function previewRoute(id) {
<FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
<FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
<QPage class="column items-center">
<QToolbar class="bg-vn-dark justify-end">
<div id="st-actions" class="q-pa-sm">
<VnSubToolbar class="bg-vn-dark justify-end">
<template #st-actions>
<QBtn
icon="vn:clone"
color="primary"
@ -249,8 +250,8 @@ function previewRoute(id) {
>
<QTooltip>{{ t('Mark as served') }}</QTooltip>
</QBtn>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<div class="route-list">
<VnPaginate
:key="refreshKey"

73
src/pages/Supplier/Card/SupplierConsumption.vue
View File

@ -3,19 +3,19 @@ import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import axios from 'axios';
import { useStateStore } from 'stores/useStateStore';
import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify.js';
import { toDate, toDateString } from 'src/filters';
import { dashIfEmpty } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import { toDate, toDateString } from 'src/filters';
import { dashIfEmpty } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
const { t } = useI18n();
const route = useRoute();
const stateStore = useStateStore();
const { openReport, sendEmail } = usePrintService();
const quasar = useQuasar();
const { notify } = useNotify();
@ -88,9 +88,8 @@ const sendCampaignMetricsEmail = ({ address }) => {
});
};
const calculateTotal = (buysArray) => {
return buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
};
const calculateTotal = (buysArray) =>
buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
</script>
<template>
@ -104,35 +103,31 @@ const calculateTotal = (buysArray) => {
:params="userParams"
auto-load
/>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data">
<QBtn
v-if="userParams.from && userParams.to"
color="primary"
icon-right="picture_as_pdf"
no-caps
class="q-mr-md"
@click="openReportPdf()"
>
<QTooltip>
{{ t('Open as PDF') }}
</QTooltip>
</QBtn>
<QBtn
v-if="userParams.from && userParams.to"
color="primary"
icon-right="email"
no-caps
@click="openSendEmailDialog()"
>
<QTooltip>
{{ t('Send to email') }}
</QTooltip>
</QBtn>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
<QBtn
v-if="userParams.from && userParams.to"
color="primary"
icon-right="picture_as_pdf"
no-caps
class="q-mr-md"
@click="openReportPdf()"
>
<QTooltip>
{{ t('Open as PDF') }}
</QTooltip>
</QBtn>
<QBtn
v-if="userParams.from && userParams.to"
color="primary"
icon-right="email"
no-caps
@click="openSendEmailDialog()"
>
<QTooltip>
{{ t('Send to email') }}
</QTooltip>
</QBtn>
</Teleport>
<QPage class="column items-center q-pa-md">
<QTable
:rows="rows"

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

@ -17,6 +17,7 @@ import { useArrayData } from 'composables/useArrayData';
import { toDate } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import travelService from 'src/services/travel.service';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const router = useRouter();
const stateStore = useStateStore();
@ -259,10 +260,8 @@ onMounted(async () => {
/>
</Teleport>
</template>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions">
<VnSubToolbar class="bg-vn-dark justify-end">
<template #st-actions>
<QBtn
color="primary"
icon-right="picture_as_pdf"
@ -273,8 +272,8 @@ onMounted(async () => {
{{ t('Open as PDF') }}
</QTooltip>
</QBtn>
</div>
</QToolbar>
</template>
</VnSubToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<ExtraCommunityFilter data-key="ExtraCommunity" />