feat: refs #6321 tags

src/components/ui/FetchedTags.vue

@@ -30,7 +30,10 @@ const tags = computed(() => {
             const n = tag.split(`${$props.tag}`)[1];
             const key = `${$props.tag}${n}`;
             const value = `${$props.value}${n}`;
-            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
+            const val = $props.item[value] ?? '';
+            const match = $props.item[`match${n}`] ?? '';
+            const style = match ? 'color:green' : '';
+            acc[$props.item[key] ?? key] = { val, style, match };
             return acc;
         }, {});
 });
@@ -48,15 +51,18 @@ const columnStyle = computed(() => {
 
 <template>
     <div class="fetchedTags">
+        <pre>{{ $props.item }}</pre>
         <div class="wrap" :style="columnStyle">
             <div
-                v-for="(val, key) in tags"
+                v-for="(tag, key) in tags"
                 :key="key"
                 class="inline-tag"
-                :title="`${key}: ${val}`"
+                :title="`${key}: ${tag.val}`"
-                :class="{ empty: !val }"
+                :class="{ empty: !tag.val }"
             >
-                <span class="text">{{ val }} </span>
+                <span class="text" :style="tag.style"
+                    >{{ tag.val }}// {{ tag.match }}
+                </span>
             </div>
         </div>
     </div>

src/pages/Item/components/ItemProposal.vue

@@ -16,10 +16,22 @@ const { t } = useI18n();
 const primaryColor = '#f5b351';
 const colorSpacer = '#ecf0f1';
 const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
-const gradientStyle = (value) =>
+const gradientStyle = (value) => {
-    `linear-gradient(to right, ${primaryColor} ${compatibilityItem(
+    let color = 'white';
-        value
+    switch (value) {
-    )}, ${colorSpacer} 10%)`;
+        case value >= 0 && value < 33:
+            color = 'orange';
+            break;
+        case value >= 33 && value < 66:
+            color = 'yellow';
+            break;
+
+        default:
+            color = 'green';
+            break;
+    }
+    return color;
+};
 
 const $props = defineProps({
     itemLack: {
@@ -207,39 +219,13 @@ const isSelectionAvailable = (itemProposal) => {
             row-key="id"
             :is-editable="false"
             :right-search="false"
-            :without-header="false"
+            :without-header="true"
             :disable-option="{ card: true, table: true }"
             :table="{
                 'row-key': 'id',
                 selection: 'single',
             }"
         >
-            <template #top-left>
-                <div v-if="$props.replaceAction" class="q-ml-xs" style="display: flex">
-                    <QBtn
-                        :label="t('globals.replace')"
-                        color="primary"
-                        :loading="isLoading"
-                        @click="confirm"
-                        style="padding-block: 8px"
-                        :disable="
-                            proposalSelected.length < 1 ||
-                            quantity === 0 ||
-                            quantity > Math.abs(itemLack.lack)
-                        "
-                    />
-                    <VnInput
-                        v-model="quantity"
-                        v-if="proposalSelected.length > 0"
-                        @update:model-value="(val) => (quantity = val)"
-                        min="0"
-                        :max="Math.abs(itemLack.lack)"
-                        :label="t('proposal.quantityToReplace')"
-                        dense
-                        autofocus
-                        class="q-ml-xs"
-                    /></div
-            ></template>
             <template #body-selection="props">
                 <!-- {{ isSelectionAvailable(props) }} -->
                 <QCheckbox
@@ -258,7 +244,7 @@ const isSelectionAvailable = (itemProposal) => {
                 </QCheckbox>
             </template>
             <template #column-longName="{ row }">
-                <QTd style="max-width: 800px">
+                <QTd style="min-width: 800px">
                     <QTooltip>
                         {{ row.id }}
                     </QTooltip>
@@ -267,30 +253,20 @@ const isSelectionAvailable = (itemProposal) => {
                     ><span class="link">{{ row.longName }}</span>
                     <ItemDescriptorProxy :id="row.id" />
 
-                    <div style="display: flex; flex-direction: row">
+                    <section id="portraitGrid">
-                        <div style="display: flex; flex-direction: column">
+                        <!-- -->
-                            <!-- -->
+                        <!-- <div id="left">
-
                             <VnImg
                                 :id="row.id"
                                 spinner-color="primary"
                                 :ratio="1"
-                                height="50px"
                                 width="50px"
                                 class="image remove-bg"
                             />
-                            <!-- <span style="font-size: xx-small">ID:</span> -->
+                        </div> -->
-                        </div>
+                        <div id="right" style="min-width: 200px">
-                        <div
-                            style="
-                                display: flex;
-                                align-items: center;
-                                flex-direction: column;
-                                justify-content: center;
-                            "
-                        >
-                            <FetchedTags :item="row" class="q-mb-xs" />
                             <div
+                                id="middle"
                                 :style="{
                                     background: gradientStyle(
                                         statusConditionalValue(row)
@@ -301,9 +277,11 @@ const isSelectionAvailable = (itemProposal) => {
                                 <QTooltip>
                                     {{ compatibilityItem(statusConditionalValue(row)) }}
                                 </QTooltip>
+                                <!-- </div> -->
                             </div>
+                            <FetchedTags :item="row" class="q-mb-xs" columns="4" />
                         </div>
-                    </div>
+                    </section>
                 </QTd>
             </template>
             <template #column-available="{ row }">
@@ -367,6 +345,10 @@ const isSelectionAvailable = (itemProposal) => {
     font-weight: bold;
     font-size: 16px;
 }
+#portraitGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 0.5fr);
+}
 </style>
 
 <i18n>

src/pages/Item/components/ItemProposalProxy.vue

@@ -32,16 +32,15 @@ const $props = defineProps({
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center">
-                <VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
+                <!-- <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" />
 
-                <!-- {{ tickets[0].saleFk }} -->
             </QCardSection>
-            <QCardSection class="q-pt-none">
+            <QCardSection class="q-pt-none"> -->
                 <ItemProposal
                     v-bind="$props"
                     @item-replaced="(data) => emit('itemReplaced', data)"