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

feat: use Popover instead dialog

This commit is contained in:
Javier Segarra 2024-06-18 22:49:55 +02:00
parent cd5a64fcc6
commit 185160aeba
5 changed files with 213 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/Item/components/ItemProposal.vue
View File

@ -185,9 +185,9 @@ function onDialogClose() {
} }
</script> </script>
<template> <template>
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog" full-width> <QPopupProxy ref="popupProxyRef">
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<QCardSection class="row items-center q-pb-none"> <QCardSection v-if="false" class="row items-center q-pb-none">
<VnLv class="image"> <VnLv class="image">
<template #label> <template #label>
<QImg <QImg
@ -211,7 +211,10 @@ function onDialogClose() {
<QSpace /> <QSpace />
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection>
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection
v-if="false"
class="row items-center justify-center column items-stretch"
>
<span class="text-h6 text-grey"> <span class="text-h6 text-grey">
<!-- {{ currentTicket }} --> <!-- {{ currentTicket }} -->
<!-- {{ <!-- {{
@ -222,9 +225,38 @@ function onDialogClose() {
}} --> }} -->
</span> </span>
</QCardSection> </QCardSection>
<QCardActions>
<QBtn
:label="t('globals.removeSelection')"
color="primary"
flat
:disable="proposalSelected.length < 1 || quantity === 0"
@click="proposalSelected = []"
/>
<QBtn
:label="t('globals.replace')"
color="primary"
:loading="isLoading"
@click="confirm"
:disable="proposalSelected.length < 1 || quantity === 0"
unelevated
/>
<QInput
v-model.number="quantity"
v-if="quantity > -1"
@update:model-value="(val) => (quantity = val)"
type="number"
min="0"
:label="t('proposal.quantityToReplace')"
class="q-ml-lg"
/>
</QCardActions>
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection class="row items-center justify-center column items-stretch">
<!-- <VnRow style="display: flex"> --> <!-- <VnRow style="display: flex"> -->
<div> <div>
{{ proposalSelected }}
<VnPaginate <VnPaginate
:append="false" :append="false"
data-key="ItemsGetSimilar" data-key="ItemsGetSimilar"
@ -331,35 +363,8 @@ function onDialogClose() {
</VnPaginate> </VnPaginate>
</div> </div>
</QCardSection> </QCardSection>
<QCardActions align="right">
<QBtn
:label="t('globals.removeSelection')"
color="primary"
flat
:disable="proposalSelected.length < 1 || quantity === 0"
@click="proposalSelected = []"
/>
<QBtn
:label="t('globals.replace')"
color="primary"
:loading="isLoading"
@click="confirm"
:disable="proposalSelected.length < 1 || quantity === 0"
unelevated
/>
<QInput
v-model.number="quantity"
v-if="quantity > -1"
@update:model-value="(val) => (quantity = val)"
type="number"
min="0"
:label="t('proposal.quantityToReplace')"
class="q-ml-lg"
/>
</QCardActions>
</QCard> </QCard>
</QDialog> </QPopupProxy>
</template> </template>
<style lang="scss"> <style lang="scss">
.compatibility { .compatibility {

50
src/pages/Ticket/Card/TicketMassiveUpdate.vue Normal file
View File

@ -0,0 +1,50 @@
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const $props = defineProps({
icon: {
type: String,
default: 'refresh',
},
color: {
type: String,
default: 'primary',
},
label: {
type: String,
default: 'refresh',
},
tooltip: {
type: String,
default: 'primary',
},
});
</script>
<template>
<QBtn :color="$props.color" :icon="$props.icon" :label="t($props.label)">
<QPopupProxy ref="popupProxyRef" style="max-width: none">
<QCard>
<slot></slot>
</QCard>
</QPopupProxy>
<QTooltip>{{ t($props.tooltip) }}</QTooltip>
</QBtn>
</template>
<i18n>
en:
params:
valentinesDay: Valentine's Day
mothersDay: Mother's Day
allSaints: All Saints' Day
es:
params:
valentinesDay: Día de San Valentín
mothersDay: Día de la Madre
allSaints: Día de Todos los Santos
Campaign consumption: Consumo campaña
Campaign: Campaña
From: Desde
To: Hasta
</i18n>

94
src/pages/Ticket/Negative/TicketLackDetail.vue
View File

@ -12,6 +12,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import TickerSplit from '../Card/TicketSplit.vue'; import TickerSplit from '../Card/TicketSplit.vue';
import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
@ -340,8 +341,10 @@ const replaceItem = () => {
for (const ticket of rows) { for (const ticket of rows) {
if (ticket.quantity > itemProposalSelected.value.available) continue; if (ticket.quantity > itemProposalSelected.value.available) continue;
ticket.itemFk = itemProposalSelected.value.id; ticket.itemFk = itemProposalSelected.value.id;
selectedRows.value.push(ticket.ticketFk); ticket.quantity *= 2;
selectedRows.value.push({ ticketFk: ticket.ticketFk });
itemProposalSelected.value.available -= ticket.quantity; itemProposalSelected.value.available -= ticket.quantity;
itemLack.value.lack += ticket.quantity;
} }
}; };
</script> </script>
@ -361,7 +364,7 @@ const replaceItem = () => {
<FetchData <FetchData
:url="`Tickets/itemLack`" :url="`Tickets/itemLack`"
:filter="{ id: entityId }" :filter="{ id: entityId }"
@on-fetch="(data) => (itemLack = data)" @on-fetch="(data) => (itemLack = data[0])"
auto-load auto-load
/> />
<!-- <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <!-- <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
@ -379,41 +382,42 @@ const replaceItem = () => {
<VnSubToolbar> <VnSubToolbar>
<template #st-data> <template #st-data>
<QBtnGroup push style="column-gap: 1px"> <QBtnGroup push style="column-gap: 1px">
<QBtn <TicketMassiveUpdate
icon="refresh"
color="primary"
:label="t('negative.buttonsUpdate.state')"
:disable="selectedRows.length < 2" :disable="selectedRows.length < 2"
@click="showChangeStateDialog = true" label="negative.buttonsUpdate.state"
tooltip="negative.detail.modal.changeState.title"
> >
<ChangeStateDialog
ref="changeStateDialogRef"
:selected-rows="selectedRows"
></ChangeStateDialog>
</TicketMassiveUpdate>
<!-- <QBtn >
<QTooltip bottom anchor="bottom right"> <QTooltip bottom anchor="bottom right">
{{ t('negative.detail.modal.changeState.title') }} {{ t() }}
</QTooltip> </QTooltip>
</QBtn> </QBtn> -->
<QBtn <TicketMassiveUpdate
icon="refresh" label="negative.buttonsUpdate.quantity"
color="primary"
:label="t('negative.buttonsUpdate.quantity')"
@click="showChangeQuantityDialog = true" @click="showChangeQuantityDialog = true"
:disable="selectedRows.length < 2" :disable="selectedRows.length < 2"
tooltip="negative.detail.modal.changeQuantity.title"
> >
<QTooltip bottom anchor="bottom right"> <ChangeQuantityDialog
{{ t('negative.detail.modal.changeQuantity.title') }} ref="changeQuantityDialogRef"
</QTooltip> :selected-rows="selectedRows"
</QBtn> >
<QBtn </ChangeQuantityDialog>
</TicketMassiveUpdate>
<!-- <TicketMassiveUpdate
icon="refresh" icon="refresh"
color="primary" color="primary"
:label="t('negative.buttonsUpdate.itemProposal')" label="negative.buttonsUpdate.itemProposal"
@click="showChangeQuantityDialog = true" @click="showChangeQuantityDialog = true"
:disable="selectedRows.length < 2" :disable="selectedRows.length < 2"
tooltip="negative.buttonsUpdate.itemProposal"
> >
<QTooltip bottom anchor="bottom right"> </TicketMassiveUpdate> -->
{{ t('globals.refresh') }}
{{ t('negative.buttonsUpdate.itemProposal') }}
</QTooltip>
</QBtn>
<TickerSplit></TickerSplit>
<QBtn <QBtn
color="primary" color="primary"
@click=" @click="
@ -431,7 +435,14 @@ const replaceItem = () => {
{{ t('globals.split') }} {{ t('globals.split') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
<QBtn icon="vn:item" color="primary" @click="showProposalDialog = true">
<QBtn color="primary" @click="showProposalDialog = true">
<QIcon name="import_export" class="rotate-90"></QIcon>
<ItemProposal
ref="proposalDialogRef"
:item="item"
:tickets="selectedRows"
></ItemProposal>
<QTooltip bottom anchor="bottom right"> <QTooltip bottom anchor="bottom right">
{{ t('itemProposal') }} {{ t('itemProposal') }}
</QTooltip> </QTooltip>
@ -442,6 +453,8 @@ const replaceItem = () => {
</VnSubToolbar> </VnSubToolbar>
<QPage> <QPage>
<div class="full-width q-pa-md"> <div class="full-width q-pa-md">
{{ itemLack }}
{{ selectedRows }}
<VnPaginate <VnPaginate
:data-key="URL_KEY" :data-key="URL_KEY"
:url="`${URL_KEY}/${entityId}`" :url="`${URL_KEY}/${entityId}`"
@ -451,7 +464,7 @@ const replaceItem = () => {
> >
<!-- :rows="rows" --> <!-- :rows="rows" -->
<template #body="{ rows }"> <template #body="{ rows }">
<VnLv class="image"> <VnLv class="q-mb-lg image">
<template #label> <template #label>
<QImg <QImg
:src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`" :src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`"
@ -468,6 +481,12 @@ const replaceItem = () => {
{{ item.longName }} {{ item.longName }}
<ItemDescriptorProxy :id="entityId" /> <ItemDescriptorProxy :id="entityId" />
</QBtn> </QBtn>
<QBadge
text-color="white"
color="red"
:label="itemLack.lack"
/>
<FetchedTags class="q-ml-md" :item="item" :max-length="5" /> <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
</template> </template>
</VnLv> </VnLv>
@ -584,30 +603,11 @@ const replaceItem = () => {
</template> </template>
</VnPaginate></div </VnPaginate></div
></QPage> ></QPage>
<ChangeStateDialog
ref="changeStateDialogRef"
@hide="onDialogHide"
v-model="showChangeStateDialog"
:selected-rows="selectedRows"
></ChangeStateDialog>
<ChangeQuantityDialog
ref="changeQuantityDialogRef"
@hide="onDialogHide"
v-model="showChangeQuantityDialog"
:selected-rows="selectedRows"
>
</ChangeQuantityDialog>
<!--<HandleSplited <!--<HandleSplited
ref="splitDialogRef" ref="splitDialogRef"
@hide="onDialogHide" @hide="onDialogHide"
v-model="showSplitDialog" v-model="showSplitDialog"
:tickets="resultSplit" :tickets="resultSplit"
></HandleSplited>--> ></HandleSplited>-->
<ItemProposal
ref="proposalDialogRef"
@hide="itemProposalEvt"
v-model="showProposalDialog"
:item="item"
:tickets="selectedRows"
></ItemProposal>
</template> </template>

74
src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
View File

@ -34,43 +34,43 @@ const updateQuantity = async () => {
</script> </script>
<template> <template>
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeQuantityDialog"> <!-- <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeQuantityDialog"> -->
<QCard class="q-pa-sm"> <QCard class="q-pa-sm">
<QCardSection class="row items-center q-pb-none"> <!-- <QCardSection class="row items-center q-pb-none">
<QAvatar <QAvatar
:icon="icon" :icon="icon"
color="primary" color="primary"
text-color="white" text-color="white"
size="xl" size="xl"
v-if="icon" v-if="icon"
/> />
<span class="text-h6 text-grey">{{ <span class="text-h6 text-grey">{{
t('negative.detail.modal.changeQuantity.title') t('negative.detail.modal.changeQuantity.title')
}}</span> }}</span>
<QSpace /> <QSpace />
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection> -->
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection class="row items-center justify-center column items-stretch">
<span>{{ t('negative.detail.modal.changeQuantity.title') }}</span> <span>{{ t('negative.detail.modal.changeQuantity.title') }}</span>
<VnInput <VnInput
type="number" type="number"
:min="0" :min="0"
:label="t('negative.detail.modal.changeQuantity.placeholder')" :label="t('negative.detail.modal.changeQuantity.placeholder')"
v-model="newQuantity" v-model="newQuantity"
/> />
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup /> <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
<QBtn <QBtn
:label="t('globals.confirm')" :label="t('globals.confirm')"
color="primary" color="primary"
:disable="!newQuantity || newQuantity < 0" :disable="!newQuantity || newQuantity < 0"
@click="updateQuantity" @click="updateQuantity"
unelevated unelevated
autofocus autofocus
/> </QCardActions /> </QCardActions
></QCard> ></QCard>
</QDialog> <!-- </QDialog> -->
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

86
src/pages/Ticket/Negative/components/ChangeStateDialog.vue
View File

@ -36,49 +36,49 @@ const updateState = async () => {
</script> </script>
<template> <template>
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog"> <!-- <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog"> -->
<FetchData <FetchData
url="States/editableStates" url="States/editableStates"
@on-fetch="(data) => (editableStates = data)" @on-fetch="(data) => (editableStates = data)"
auto-load auto-load
/> />
<QCard class="q-pa-sm"> <QCard class="q-pa-sm">
<QCardSection class="row items-center q-pb-none"> <!-- <QCardSection class="row items-center q-pb-none">
<QAvatar <QAvatar
:icon="icon" :icon="icon"
color="primary" color="primary"
text-color="white" text-color="white"
size="xl" size="xl"
v-if="icon" v-if="icon"
/> />
<span class="text-h6 text-grey">{{ <span class="text-h6 text-grey">{{
t('negative.detail.modal.changeState.title') t('negative.detail.modal.changeState.title')
}}</span> }}</span>
<QSpace /> <QSpace />
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection> -->
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection class="row items-center justify-center column items-stretch">
<span>{{ t('negative.detail.modal.changeState.title') }}</span> <span>{{ t('negative.detail.modal.changeState.title') }}</span>
<VnSelect <VnSelect
:label="t('negative.detail.modal.changeState.placeholder')" :label="t('negative.detail.modal.changeState.placeholder')"
v-model="newState" v-model="newState"
:options="editableStates" :options="editableStates"
option-label="name" option-label="name"
option-value="code" option-value="code"
/> />
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup /> <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
<QBtn <QBtn
:label="t('globals.confirm')" :label="t('globals.confirm')"
color="primary" color="primary"
:disable="!newState" :disable="!newState"
@click="updateState" @click="updateState"
unelevated unelevated
autofocus autofocus
/> </QCardActions /> </QCardActions
></QCard> ></QCard>
</QDialog> <!-- </QDialog> -->
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>