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

#6891 showRightSideFilterPanel #353

Merged
jorgep merged 48 commits from 6891-showRightSideFilterPanel into dev 2024-05-15 13:39:23 +00:00
Conversation 1 Commits 48 Files Changed 47 +22 -28
2 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b1147f00d3 - Show all commits

23
src/components/common/RightMenu.vue
View File

@ -1,9 +1,25 @@
<script setup>
jorgep commented 2024-05-07 07:01:34 +00:00
Review
Copy Link

Evitamos el uso repetitivo de esta código. Hay secciones como claimAction que tiene un menú lateral derecho personalizado. Con este componente evitamos duplicar el código.

Evitamos el uso repetitivo de esta código. Hay secciones como claimAction que tiene un menú lateral derecho personalizado. Con este componente evitamos duplicar el código.
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
defineProps({
dataKey: { type: String, required: true },
const hasContent = ref(false);
const rightPanel = ref(null);
onMounted(() => {
rightPanel.value = document.querySelector('#right-panel');
if (rightPanel.value.childNodes.length) return (hasContent.value = true);
// 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,
});
});
const { t } = useI18n();
@ -21,7 +37,8 @@ const stateStore = useStateStore();
</Teleport>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<slot name="right-panel" />
<div id="right-panel"></div>
<slot v-if="!hasContent" name="right-panel" />
</QScrollArea>
</QDrawer>
</template>

27
src/pages/Claim/Card/ClaimAction.vue
View File

@ -201,30 +201,7 @@ async function post(query, params) {
auto-load
@on-fetch="(data) => (destinationTypes = 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="300"
show-if-above
v-if="claim"
>
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
jorgep commented 2024-05-07 07:08:35 +00:00
Review
Copy Link

Añadimos el contenido personalizado al panel lateral.

Añadimos el contenido personalizado al panel lateral.
<QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
{{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
</QCard>
@ -274,7 +251,7 @@ async function post(query, params) {
v-model="multiplicatorValue"
/>
</QCard>
</QDrawer>
</Teleport>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
<CrudModel
v-if="claim"