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

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

@ -34,9 +34,9 @@ const updateQuantity = async () => {
</script>
<template>
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeQuantityDialog">
<!-- <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeQuantityDialog"> -->
<QCard class="q-pa-sm">
<QCardSection class="row items-center q-pb-none">
<!-- <QCardSection class="row items-center q-pb-none">
<QAvatar
:icon="icon"
color="primary"
@ -49,7 +49,7 @@ const updateQuantity = async () => {
}}</span>
<QSpace />
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
</QCardSection> -->
<QCardSection class="row items-center justify-center column items-stretch">
<span>{{ t('negative.detail.modal.changeQuantity.title') }}</span>
<VnInput
@ -70,7 +70,7 @@ const updateQuantity = async () => {
autofocus
/> </QCardActions
></QCard>
</QDialog>
<!-- </QDialog> -->
</template>
<style lang="scss" scoped>

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

@ -36,14 +36,14 @@ const updateState = async () => {
</script>
<template>
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog">
<!-- <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog"> -->
<FetchData
url="States/editableStates"
@on-fetch="(data) => (editableStates = data)"
auto-load
/>
<QCard class="q-pa-sm">
<QCardSection class="row items-center q-pb-none">
<!-- <QCardSection class="row items-center q-pb-none">
<QAvatar
:icon="icon"
color="primary"
@ -56,7 +56,7 @@ const updateState = async () => {
}}</span>
<QSpace />
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
</QCardSection> -->
<QCardSection class="row items-center justify-center column items-stretch">
<span>{{ t('negative.detail.modal.changeState.title') }}</span>
<VnSelect
@ -78,7 +78,7 @@ const updateState = async () => {
autofocus
/> </QCardActions
></QCard>
</QDialog>
<!-- </QDialog> -->
</template>
<style lang="scss" scoped>