From dea3535ad4610e88242d362298dd431d26f10f80 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 26 Jan 2025 02:35:59 +0100
Subject: [PATCH] feat: refs #6321 itemProposal tags
---
src/pages/Item/components/ItemProposal.vue | 307 +++++++++---------
.../Item/components/ItemProposalProxy.vue | 38 +--
2 files changed, 149 insertions(+), 196 deletions(-)
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 67d5fcab6..285799616 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -166,7 +166,14 @@ const columns = computed(() => [
// ],
// },
]);
-
+const isSelected = (row) => proposalSelected.value.some((item) => row.id === item.id);
+function change(row) {
+ if (isSelected(row)) {
+ confirm(row);
+ proposalSelected.value = [];
+ }
+ proposalSelected.value = [row];
+}
async function confirm(row) {
try {
// const params = {
@@ -223,141 +230,132 @@ const isSelectionAvailable = (itemProposal) => {
// watch(proposalSelected, ({ available }) => (quantity.value = available));
</script>
<template>
- <div style="min-width: 65vw">
- <VnTable
- ref="proposalTableRef"
- data-key="ItemsGetSimilar"
- url="Items/getSimilar"
- :filter="{
- where: {
- itemFk: $props.itemLack.itemFk,
- warehouseFk: $props.itemLack.warehouseFk,
- },
- }"
- auto-load
- :columns="columns"
- class="full-width q-mt-md"
- v-model:selected="proposalSelected"
- row-key="id"
- :is-editable="false"
- :right-search="false"
- :without-header="true"
- :disable-option="{ card: true, table: true }"
- :table="{
- 'row-key': 'id',
- }"
- >
- <template #body-selection="props">
- <!-- {{ isSelectionAvailable(props) }} -->
- <QCheckbox
- class="q-ma-xs"
+ <VnTable
+ data-cy="proposalTable"
+ ref="proposalTableRef"
+ data-key="ItemsGetSimilar"
+ url="Items/getSimilar"
+ :filter="{
+ where: {
+ itemFk: $props.itemLack.itemFk,
+ warehouseFk: $props.itemLack.warehouseFk,
+ },
+ }"
+ auto-load
+ :columns="columns"
+ class="full-width q-mt-md"
+ row-key="id"
+ :is-editable="false"
+ :right-search="false"
+ :without-header="true"
+ :disable-option="{ card: true, table: true }"
+ :table="{
+ 'row-key': 'id',
+ }"
+ >
+ <template #body-selection="props">
+ <!-- {{ isSelectionAvailable(props) }} -->
+ <QCheckbox
+ class="q-ma-xs"
+ flat
+ :disable="isSelectionAvailable(props.row)"
+ v-model="props.selected"
+ @update:model-value="(evt, _) => handleSelection(props.row, null)"
+ >
+ <QTooltip>
+ <span v-if="isSelectionAvailable(props.row)">{{
+ t('proposal.available')
+ }}</span>
+ <span v-else>{{ t('proposal.available') }}</span>
+ </QTooltip>
+ </QCheckbox>
+ </template>
+ <template #column-longName="{ row }">
+ <QTd
+ class="flex"
+ style="
+ max-width: 100%;
+ /* align-items: center; */
+ /* justify-content: flex-start; */
+ /* flex: 1 1 100px; */
+ flex-shrink: 50px;
+ flex-wrap: nowrap;
+ "
+ >
+ <QTooltip>
+ {{ row.id }}
+ </QTooltip>
+ <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
+ <QBtn
+ data-cy="replaceBtn"
+ icon="change_circle"
+ color="primary"
flat
- :disable="isSelectionAvailable(props.row)"
- v-model="props.selected"
- @update:model-value="(evt, _) => handleSelection(props.row, null)"
+ dense
+ :class="{
+ 'fill-icon': isSelected(row),
+ }"
+ @click="change(row)"
+ :disable="!isSelectionAvailable(row)"
>
- <QTooltip>
- <span v-if="isSelectionAvailable(props.row)">{{
- t('proposal.available')
- }}</span>
- <span v-else>{{ t('proposal.available') }}</span>
- </QTooltip>
- </QCheckbox>
- </template>
- <template #column-longName="{ row }">
- <QTd
+ <QTooltip> {{ t('Open_details') }}</QTooltip>
+ </QBtn>
+ <div
+ id="middle"
style="
- max-width: 100%;
- display: flex;
- max-width: 100%;
- /* align-items: center; */
- /* justify-content: flex-start; */
- /* flex: 1 1 100px; */
- flex-shrink: 50px;
- flex-wrap: nowrap;
+ /* position: absolute; */
+ float: left;
+ margin-right: 2px;
+ flex: 2 0 5px;
"
+ :style="{
+ background: gradientStyle(statusConditionalValue(row)),
+ }"
+ class="compatibility"
>
<QTooltip>
- {{ row.id }}
+ {{ compatibilityItem(statusConditionalValue(row)) }}
</QTooltip>
- <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
- <QBtn
- icon="change_circle"
- color="primary"
- flat
- dense
- @click="confirm(row)"
- :disable="!isSelectionAvailable(row)"
- >
- <QTooltip> {{ t('Open_details') }}</QTooltip>
- </QBtn>
- <div
- id="middle"
- style="
- /* position: absolute; */
- float: left;
- margin-right: 2px;
- flex: 2 0 5px;
- "
- :style="{
- background: gradientStyle(statusConditionalValue(row)),
- }"
- class="compatibility"
- >
- <QTooltip>
- {{ compatibilityItem(statusConditionalValue(row)) }}
- </QTooltip>
- <!-- </div> -->
- </div>
- <div style="flex: 2 0 100%">
- <div>
- <span style="font-size: x-small">({{ row.id }})</span
- ><span class="link">{{ row.longName }}</span>
- <!-- :style="{
+ <!-- </div> -->
+ </div>
+ <div style="flex: 2 0 100%">
+ <div>
+ <span style="font-size: x-small">({{ row.id }})</span
+ ><span class="link">{{ row.longName }}</span>
+ <!-- :style="{
color: gradientStyle(statusConditionalValue(row)),
}" -->
- <ItemDescriptorProxy :id="row.id" />
-
- <!-- <section id="portraitGrid"> -->
- <!-- -->
- <!-- <div id="left">
- <VnImg
- :id="row.id"
- spinner-color="primary"
- :ratio="1"
- width="50px"
- class="image remove-bg"
- />
- </div> -->
-
- <!-- <FetchedTags :item="row" class="q-mb-xs" columns="4" /> -->
- </div>
- <div :key="key" class="inline-tag" v-for="(tag, key) in [5]">
- <span
- class="text"
- :style="{
- color: row[`match${tag}`]
- ? 'green'
- : 'var(--vn-label-color)',
- }"
- >
- {{ row[`value${tag}`] }}
- </span>
- </div>
+ <ItemDescriptorProxy :id="row.id" />
</div>
- <!-- </section> -->
- </QTd>
- </template>
- <template #column-available="{ row }">
- {{ row.available }}
- </template>
- <template #column-counter="{ row }">
- {{ row.counter }}
- </template>
- <template #column-minQuantity="{ row }">
- {{ row.minQuantity }}
- </template>
- <!-- <template #column-status="{ row }">
+ <div class="inline-tag">
+ {{ tag }}
+ <span
+ :key="key"
+ v-for="(tag, key) in [5, 6, 7]"
+ class="text"
+ :style="{
+ color: row[`match${tag}`]
+ ? 'green'
+ : 'var(--vn-label-color)',
+ }"
+ >
+ {{ row[`value${tag}`] }}
+ </span>
+ </div>
+ </div>
+ <!-- </section> -->
+ </QTd>
+ </template>
+ <template #column-available="{ row }">
+ {{ row.available }}
+ </template>
+ <template #column-counter="{ row }">
+ {{ row.counter }}
+ </template>
+ <template #column-minQuantity="{ row }">
+ {{ row.minQuantity }}
+ </template>
+ <!-- <template #column-status="{ row }">
<div
:style="{ background: gradientStyle(statusConditionalValue(row)) }"
class="compatibility"
@@ -367,28 +365,20 @@ const isSelectionAvailable = (itemProposal) => {
</QTooltip>
</div>
</template> -->
- <template #column-price2="{ row }">
- <div
- style="
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- "
- >
- <VnStockValueDisplay :value="sales[0].price - row.price2" />
- <span :class="[conditionalValuePrice(row.price2)]">{{
- toCurrency(row.price2)
- }}</span>
- </div>
- </template>
- <template #column-difference="{ row }">
+ <template #column-price2="{ row }">
+ <div class="flex column items-center content-center">
<VnStockValueDisplay :value="sales[0].price - row.price2" />
- </template>
- </VnTable>
- </div>
+ <span :class="[conditionalValuePrice(row.price2)]">{{
+ toCurrency(row.price2)
+ }}</span>
+ </div>
+ </template>
+ <template #column-difference="{ row }">
+ <VnStockValueDisplay :value="sales[0].price - row.price2" />
+ </template>
+ </VnTable>
</template>
-<style lang="scss">
+<style lang="scss" scoped>
.compatibility {
width: 100%;
}
@@ -399,21 +389,14 @@ const isSelectionAvailable = (itemProposal) => {
.not-match {
color: inherit;
}
-.calendars-header {
- height: 45px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: $primary;
- font-weight: bold;
- font-size: 16px;
-}
-#portraitGrid {
- display: grid;
- grid-template-columns: repeat(3, 0.5fr);
+
+.text {
+ margin: 0.05rem;
+ padding: 1px;
+ border: 1px solid var(--vn-label-color);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: smaller;
}
</style>
-
-<i18n>
- en:
-</i18n>
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 30de8c45f..56a889e13 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -1,19 +1,9 @@
<script setup>
import ItemProposal from './ItemProposal.vue';
import { ref } from 'vue';
+const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
const popupProxyRef = ref(null);
-import { useDialogPluginComponent } from 'quasar';
-const emit = defineEmits([
- 'onDialogClosed',
- 'itemReplaced',
- 'confirm',
- 'cancel',
- ...useDialogPluginComponent.emits,
-]);
-defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
- useDialogPluginComponent();
const $props = defineProps({
itemLack: {
type: Object,
@@ -33,39 +23,19 @@ const $props = defineProps({
});
</script>
<template>
- <QDialog
- ref="dialogRef"
- full-width
- transition-show="scale"
- transition-hide="scale"
- persistent
- >
+ <QPopupProxy ref="popupProxyRef" data-cy="itemProposalProxy">
<QCard>
- <QCardSection class="row items-center q-pb-none">
- <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
- <QSpace />
- <QBtn icon="close" flat round dense v-close-popup />
- </QCardSection>
<QCardSection>
- <!-- <VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
- <QBtn flat class="link text-blue">
- {{ itemLack.longName }}
- <ItemDescriptorProxy :id="itemLack.id" />
- </QBtn>
- <FetchedTags :item="itemLack" />
-
- </QCardSection>
- <QCardSection class="q-pt-none"> -->
<ItemProposal
v-bind="$props"
@item-replaced="
(data) => {
emit('itemReplaced', data);
- popupProxyRef.value.hide();
+ popupProxyRef.hide();
}
"
></ItemProposal
></QCardSection>
</QCard>
- </QDialog>
+ </QPopupProxy>
</template>