src/components/ui/VnStockValueDisplay.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { toPercentage } from 'filters/index';
+
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -19,7 +21,7 @@ const formattedValue = computed(() => props.value);
 <template>
     <span :class="valueClass">
         <QIcon :name="iconName" size="sm" class="value-icon" />
-        {{ formattedValue }}
+        {{ toPercentage(formattedValue) }}
     </span>
 </template>
 

src/pages/Item/components/ItemProposal.vue

@@ -130,6 +130,20 @@ const columns = computed(() => [
         name: 'located',
         field: 'located',
     },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Replace'),
+                icon: 'change_circle',
+                show: (row) => isSelectionAvailable(row),
+                action: change,
+                isPrimary: true,
+            },
+        ],
+    },
 ]);
 
 const extractNumericValue = (percentageString) => {
@@ -164,20 +178,8 @@ const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
 
 const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
 
-const isSelected = (row) =>
+async function change({ itemFk: substitutionFk }) {
-    proposalSelected.value.some((item) => row.itemFk === item.itemFk);
-
-function change(row) {
-    if (isSelected(row)) {
-        confirm(row);
-        proposalSelected.value = [];
-    }
-    proposalSelected.value = [row];
-}
-
-async function confirm() {
     try {
-        const substitutionFk = proposalSelected.value[0].itemFk;
         const promises = $props.sales.map(({ saleFk, quantity }) => {
             const params = {
                 saleFk,
@@ -223,6 +225,7 @@ const isSelectionAvailable = (itemProposal) => {
         :columns="columns"
         class="full-width q-mt-md"
         row-key="id"
+        :row-click="change"
         :is-editable="false"
         :right-search="false"
         :without-header="true"
@@ -236,23 +239,7 @@ const isSelectionAvailable = (itemProposal) => {
                 <QTooltip>
                     {{ row.id }}
                 </QTooltip>
-                <QBtn
+
-                    data-cy="replaceBtn"
-                    icon="change_circle"
-                    color="primary"
-                    flat
-                    dense
-                    :class="{
-                        'fill-icon': isSelected(row),
-                    }"
-                    @click="change(row)"
-                    :disable="!isSelectionAvailable(row)"
-                >
-                    <QTooltip v-if="!isSelected(row)">
-                        {{ t('Select to replace') }}</QTooltip
-                    >
-                    <QTooltip v-else> {{ t('Selected to replace') }}</QTooltip>
-                </QBtn>
                 <div
                     class="middle compatibility"
                     :style="{
@@ -294,15 +281,14 @@ const isSelectionAvailable = (itemProposal) => {
         </template>
         <template #column-price2="{ row }">
             <div class="flex column items-center content-center">
-                <VnStockValueDisplay :value="sales[0].price - row.price2" />
+                {{ toCurrency(sales[0].price) }}
+                {{ toCurrency(row.price2) }}
+                <VnStockValueDisplay :value="(sales[0].price - row.price2) / 100" />
                 <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" scoped>

src/pages/Item/components/ItemProposalProxy.vue

@@ -28,8 +28,8 @@ const emit = defineEmits([
 defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 </script>
 <template>
-    <QDialog ref="dialogRef" full-width transition-show="scale" transition-hide="scale">
+    <QDialog ref="dialogRef" transition-show="scale" transition-hide="scale">
-        <QCard>
+        <QCard class="dialog-width">
             <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
                 <QSpace />
@@ -49,3 +49,8 @@ defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.h
         </QCard>
     </QDialog>
 </template>
+<style lang="scss" scoped>
+.dialog-width {
+    max-width: $width-lg;
+}
+</style>