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

feat: refs #6480 check if hasContent or slots

This commit is contained in:
Jorge Penadés 2024-04-11 09:22:15 +02:00
parent 96d3073f67
commit edf75c8cdd
4 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/CrudModel.vue
View File

@ -9,7 +9,6 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import SkeletonTable from 'components/ui/SkeletonTable.vue'; import SkeletonTable from 'components/ui/SkeletonTable.vue';
import { tMobile } from 'src/composables/tMobile'; import { tMobile } from 'src/composables/tMobile';
import VnSubToolbar from './ui/VnSubToolbar.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -259,44 +258,6 @@ watch(formUrl, async () => {
}); });
</script> </script>
<template> <template>
<VnSubToolbar class="q-mb-md">
<template #st-actions>
<QBtnGroup push style="column-gap: 10px">
<slot name="moreBeforeActions" />
<QBtn
:label="tMobile('globals.remove')"
color="primary"
icon="delete"
flat
@click="remove(selected)"
:disable="!selected?.length"
:title="t('globals.remove')"
v-if="$props.defaultRemove"
/>
<QBtn
:label="tMobile('globals.reset')"
color="primary"
icon="restart_alt"
flat
@click="reset"
:disable="!hasChanges"
:title="t('globals.reset')"
v-if="$props.defaultReset"
/>
<QBtn
:label="tMobile('globals.save')"
ref="saveButtonRef"
color="primary"
icon="save"
@click="onSubmit"
:disable="!hasChanges"
:title="t('globals.save')"
v-if="$props.defaultSave"
/>
<slot name="moreAfterActions" />
</QBtnGroup>
</template>
</VnSubToolbar>
<VnPaginate <VnPaginate
:url="url" :url="url"
v-bind="$attrs" v-bind="$attrs"
@ -314,6 +275,42 @@ watch(formUrl, async () => {
</template> </template>
</VnPaginate> </VnPaginate>
<SkeletonTable v-if="!formData" /> <SkeletonTable v-if="!formData" />
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<QBtnGroup push style="column-gap: 10px">
<slot name="moreBeforeActions" />
<QBtn
:label="tMobile('globals.remove')"
color="primary"
icon="delete"
flat
@click="remove(selected)"
:disable="!selected?.length"
:title="t('globals.remove')"
v-if="$props.defaultRemove"
/>
<QBtn
:label="tMobile('globals.reset')"
color="primary"
icon="restart_alt"
flat
@click="reset"
:disable="!hasChanges"
:title="t('globals.reset')"
v-if="$props.defaultReset"
/>
<QBtn
:label="tMobile('globals.save')"
ref="saveButtonRef"
color="primary"
icon="save"
@click="onSubmit"
:disable="!hasChanges"
:title="t('globals.save')"
v-if="$props.defaultSave"
/>
<slot name="moreAfterActions" />
</QBtnGroup>
</Teleport>
<QInnerLoading <QInnerLoading
:showing="isLoading" :showing="isLoading"
:label="t && t('globals.pleaseWait')" :label="t && t('globals.pleaseWait')"

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

@ -3,9 +3,9 @@ import useCardSize from 'src/composables/useCardSize';
import VnSubToolbar from '../ui/VnSubToolbar.vue'; import VnSubToolbar from '../ui/VnSubToolbar.vue';
</script> </script>
<template> <template>
<VnSubToolbar />
<QPageContainer> <QPageContainer>
<QPage> <QPage>
<VnSubToolbar />
<div :class="useCardSize()"> <div :class="useCardSize()">
<RouterView /> <RouterView />
</div> </div>

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

@ -1,11 +1,25 @@
<script setup> <script setup>
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
// Falta si los divs tienen contenido o remplazar los teleport y usar siempre slots
const stateStore = useStateStore(); const stateStore = useStateStore();
const actions = ref(null);
const data = ref(null);
const opts = { subtree: true, childList: true, attributes: true };
const hasContent = ref(false);
onMounted(() => { onMounted(() => {
stateStore.toggleSubToolbar(); stateStore.toggleSubToolbar();
actions.value = document.querySelector('#st-actions');
data.value = document.querySelector('#st-data');
// Check if there's content to display
const observer = new MutationObserver(
() =>
(hasContent.value =
actions.value.childNodes.length + data.value.childNodes.length)
);
observer.observe(actions.value, opts);
observer.observe(data.value, opts);
}); });
onUnmounted(() => { onUnmounted(() => {
@ -14,7 +28,10 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<QToolbar class="justify-end sticky" v-if="$slots['st-data'] || $slots['st-actions']"> <QToolbar
class="justify-end sticky"
v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
>
<slot name="st-data"> <slot name="st-data">
<div id="st-data"></div> <div id="st-data"></div>
</slot> </slot>

77
src/pages/InvoiceIn/InvoiceInFilter.vue
View File

@ -7,7 +7,6 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import { useCapitalize } from 'src/composables/useCapitalize';
import VnCurrency from 'src/components/common/VnCurrency.vue'; import VnCurrency from 'src/components/common/VnCurrency.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -70,19 +69,15 @@ const suppliersRef = ref();
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
:label="t('From')" </QItemSection>
v-model="params.from" </QItem>
is-outlined <QItem>
/> <QItemSection>
</QItemSection> <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
</QItem> </QItemSection>
<QItem> </QItem>
<QItemSection>
<VnInputDate :label="t('To')" v-model="params.to" is-outlined />
</QItemSection>
</QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
@ -114,33 +109,33 @@ const suppliersRef = ref();
</QItem> </QItem>
<QExpansionItem :label="t('More options')" expand-separator> <QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('params.fi')" :label="t('params.fi')"
v-model="params.fi" v-model="params.fi"
is-outlined is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</VnInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('params.serialNumber')" :label="t('params.serialNumber')"
v-model="params.serialNumber" v-model="params.serialNumber"
is-outlined is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</VnInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput