feat: refs #6321 itemProposal tags

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,8 +230,8 @@ const isSelectionAvailable = (itemProposal) => {
 // watch(proposalSelected, ({ available }) => (quantity.value = available));
 </script>
 <template>
-    <div style="min-width: 65vw">
     <VnTable
+        data-cy="proposalTable"
         ref="proposalTableRef"
         data-key="ItemsGetSimilar"
         url="Items/getSimilar"
@@ -237,7 +244,6 @@ const isSelectionAvailable = (itemProposal) => {
         auto-load
         :columns="columns"
         class="full-width q-mt-md"
-            v-model:selected="proposalSelected"
         row-key="id"
         :is-editable="false"
         :right-search="false"
@@ -266,9 +272,8 @@ const isSelectionAvailable = (itemProposal) => {
         </template>
         <template #column-longName="{ row }">
             <QTd
+                class="flex"
                 style="
-                        max-width: 100%;
-                        display: flex;
                     max-width: 100%;
                     /* align-items: center; */
                     /* justify-content: flex-start; */
@@ -282,11 +287,15 @@ const isSelectionAvailable = (itemProposal) => {
                 </QTooltip>
                 <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
                 <QBtn
+                    data-cy="replaceBtn"
                     icon="change_circle"
                     color="primary"
                     flat
                     dense
-                        @click="confirm(row)"
+                    :class="{
+                        'fill-icon': isSelected(row),
+                    }"
+                    @click="change(row)"
                     :disable="!isSelectionAvailable(row)"
                 >
                     <QTooltip> {{ t('Open_details') }}</QTooltip>
@@ -317,23 +326,12 @@ const isSelectionAvailable = (itemProposal) => {
                                     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]">
+                    <div class="inline-tag">
+                        {{ tag }}
                         <span
+                            :key="key"
+                            v-for="(tag, key) in [5, 6, 7]"
                             class="text"
                             :style="{
                                 color: row[`match${tag}`]
@@ -368,14 +366,7 @@ const isSelectionAvailable = (itemProposal) => {
                 </div>
             </template> -->
         <template #column-price2="{ row }">
-                <div
+            <div class="flex column items-center content-center">
-                    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)
@@ -386,9 +377,8 @@ const isSelectionAvailable = (itemProposal) => {
             <VnStockValueDisplay :value="sales[0].price - row.price2" />
         </template>
     </VnTable>
-    </div>
 </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;
+.text {
-    display: flex;
+    margin: 0.05rem;
-    justify-content: space-between;
+    padding: 1px;
-    align-items: center;
+    border: 1px solid var(--vn-label-color);
-    background-color: $primary;
+    white-space: nowrap;
-    font-weight: bold;
+    overflow: hidden;
-    font-size: 16px;
+    text-overflow: ellipsis;
-}
+    font-size: smaller;
-#portraitGrid {
-    display: grid;
-    grid-template-columns: repeat(3, 0.5fr);
 }
 </style>
-
-<i18n>
-    en:
-</i18n>

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
+    <QPopupProxy ref="popupProxyRef" data-cy="itemProposalProxy">
-        ref="dialogRef"
-        full-width
-        transition-show="scale"
-        transition-hide="scale"
-        persistent
-    >
         <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>