verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

fix: refs #6654 btn responsive & replace toolbars

This commit is contained in:
Jorge Penadés 2024-01-30 10:30:07 +01:00
parent 1d7316dd6d
commit 66e119adc3
7 changed files with 58 additions and 81 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, () => $props.url,
async (newUrl, lastUrl) => { async (newUrl, lastUrl) => {
if (newUrl == lastUrl) return; if (newUrl == lastUrl) return;
entity.value = null;
await getData(); await getData();
} }
); );
@ -62,7 +61,6 @@ async function getData() {
skip: 0, skip: 0,
}); });
const { data } = await arrayData.fetch({ append: false, updateRouter: false }); const { data } = await arrayData.fetch({ append: false, updateRouter: false });
entity.value = data;
emit('onFetch', data); emit('onFetch', data);
} }
const emit = defineEmits(['onFetch']); const emit = defineEmits(['onFetch']);

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

@ -27,10 +27,10 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.sticky { .sticky {
position: sticky; position: sticky;
top: 62px; top: 61px;
z-index: 1; z-index: 1;
} }
@media (max-width: $breakpoint-xs) { @media (max-width: $breakpoint-sm) {
.sticky { .sticky {
top: 90px; top: 90px;
} }

2
src/composables/tMobile.js
View File

@ -4,5 +4,5 @@ import { useI18n } from 'vue-i18n';
export function tMobile(...args) { export function tMobile(...args) {
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); 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> <script setup>
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import { getUrl } from 'composables/getUrl';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import ClaimDescriptor from './ClaimDescriptor.vue'; import ClaimDescriptor from './ClaimDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); 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> </script>
<template> <template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()"> <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 { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import CrudModel from 'components/CrudModel.vue'; import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import VnDiscount from 'components/common/vnDiscount.vue'; import VnDiscount from 'components/common/vnDiscount.vue';
import ClaimLinesImport from './ClaimLinesImport.vue'; import ClaimLinesImport from './ClaimLinesImport.vue';
@ -158,23 +157,21 @@ function showImportDialog() {
</script> </script>
<template> <template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
<QToolbar> <div class="row q-gutter-md">
<div class="row q-gutter-md"> <div>
<div> {{ t('Amount') }}
{{ t('Amount') }} <QChip :dense="$q.screen.lt.sm">
<QChip :dense="$q.screen.lt.sm"> {{ toCurrency(amount) }}
{{ toCurrency(amount) }} </QChip>
</QChip>
</div>
<QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
</div> </div>
</QToolbar> <QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
</div>
</Teleport> </Teleport>
<FetchData <FetchData

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 RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue'; import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
@ -228,8 +229,8 @@ function previewRoute(id) {
<FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load /> <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
<FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load /> <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
<QPage class="column items-center"> <QPage class="column items-center">
<QToolbar class="bg-vn-dark justify-end"> <VnSubToolbar class="bg-vn-dark justify-end">
<div id="st-actions" class="q-pa-sm"> <template #st-actions>
<QBtn <QBtn
icon="vn:clone" icon="vn:clone"
color="primary" color="primary"
@ -249,8 +250,8 @@ function previewRoute(id) {
> >
<QTooltip>{{ t('Mark as served') }}</QTooltip> <QTooltip>{{ t('Mark as served') }}</QTooltip>
</QBtn> </QBtn>
</div> </template>
</QToolbar> </VnSubToolbar>
<div class="route-list"> <div class="route-list">
<VnPaginate <VnPaginate
:key="refreshKey" :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 { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; 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 FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
import SendEmailDialog from 'components/common/SendEmailDialog.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 { t } = useI18n();
const route = useRoute(); const route = useRoute();
const stateStore = useStateStore();
const { openReport, sendEmail } = usePrintService(); const { openReport, sendEmail } = usePrintService();
const quasar = useQuasar(); const quasar = useQuasar();
const { notify } = useNotify(); const { notify } = useNotify();
@ -88,9 +88,8 @@ const sendCampaignMetricsEmail = ({ address }) => {
}); });
}; };
const calculateTotal = (buysArray) => { const calculateTotal = (buysArray) =>
return buysArray.reduce((accumulator, { total }) => accumulator + total, 0); buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
};
</script> </script>
<template> <template>
@ -104,35 +103,31 @@ const calculateTotal = (buysArray) => {
:params="userParams" :params="userParams"
auto-load auto-load
/> />
<QToolbar class="bg-vn-dark justify-end"> <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
<div id="st-data"> <QBtn
<QBtn v-if="userParams.from && userParams.to"
v-if="userParams.from && userParams.to" color="primary"
color="primary" icon-right="picture_as_pdf"
icon-right="picture_as_pdf" no-caps
no-caps class="q-mr-md"
class="q-mr-md" @click="openReportPdf()"
@click="openReportPdf()" >
> <QTooltip>
<QTooltip> {{ t('Open as PDF') }}
{{ t('Open as PDF') }} </QTooltip>
</QTooltip> </QBtn>
</QBtn> <QBtn
<QBtn v-if="userParams.from && userParams.to"
v-if="userParams.from && userParams.to" color="primary"
color="primary" icon-right="email"
icon-right="email" no-caps
no-caps @click="openSendEmailDialog()"
@click="openSendEmailDialog()" >
> <QTooltip>
<QTooltip> {{ t('Send to email') }}
{{ t('Send to email') }} </QTooltip>
</QTooltip> </QBtn>
</QBtn> </Teleport>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <QTable
:rows="rows" :rows="rows"