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

#6654 sticky class #165

Merged
jorgep merged 6 commits from 6654-stickySubToolbar into dev 2024-01-31 07:50:58 +00:00
Conversation 0 Commits 6 Files Changed 11 +97 -104
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;
jorgep commented 2024-01-30 10:24:30 +00:00
Review
Copy Link

No se puede modificar el valor de una propiedad computed, esto no está haciendo nada. (Lo he comprobado de todas maneras)

No se puede modificar el valor de una propiedad computed, esto no está haciendo nada. (Lo he comprobado de todas maneras)
await getData();
}
);
@ -62,7 +61,6 @@ async function getData() {
skip: 0,
});
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
entity.value = data;
jorgep commented 2024-01-30 10:24:49 +00:00
Review
Copy Link

No se puede modificar el valor de una propiedad computed, esto no está haciendo nada (Lo he comprobado de todas maneras)

No se puede modificar el valor de una propiedad computed, esto no está haciendo nada (Lo he comprobado de todas maneras)
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;
jorgep commented 2024-01-29 09:37:12 +00:00
Outdated
Review
Copy Link

He puesto 62 porque con 60 hace un ligero scroll.

He puesto 62 porque con 60 hace un ligero scroll.
jsegarra commented 2024-01-31 07:44:33 +00:00
Outdated
Review
Copy Link

y porque pone 61?

y porque pone 61?
jorgep commented 2024-01-31 07:50:04 +00:00
Outdated
Review
Copy Link

porque había un ligero hueco con 62px. Por eso lo he cambiado a 61

porque había un ligero hueco con 62px. Por eso lo he cambiado a 61
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" />