From 497b9a4eb45ddafcb1f11ba44638b845435fc940 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:17:03 +0100
Subject: [PATCH] refactor(Price add): new Proof type form input (single
 button)

---
 src/assets/main.css                  |  4 ++++
 src/components/ProofTypeInputRow.vue | 21 ++++++++++-----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 3d6104e9099..e138c877b89 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -6,3 +6,7 @@
     content:" *";
     color: #F44336;  /* red */
 }
+
+.v-btn-group--density-compact.v-btn-group {
+    height: 28px;  /* default is 36px; match v-btn size="small" height */
+}
diff --git a/src/components/ProofTypeInputRow.vue b/src/components/ProofTypeInputRow.vue
index 7d3dbe7b5be..1e555e56ae9 100644
--- a/src/components/ProofTypeInputRow.vue
+++ b/src/components/ProofTypeInputRow.vue
@@ -1,17 +1,11 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <h3 class="required mb-1">
-        {{ $t('Common.Type') }}
-      </h3>
-      <v-item-group v-model="proofTypeForm.type" class="d-inline" mandatory>
-        <v-item v-for="pt in proofTypeList" :key="pt.key" v-slot="{ isSelected, toggle }" :value="pt.key">
-          <v-chip class="mr-1" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'" @click="toggle">
-            <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'" />
-            {{ $t('ProofCard.' + pt.value) }}
-          </v-chip>
-        </v-item>
-      </v-item-group>
+      <v-btn-group divided density="compact" elevation="1" :style="proofTypeForm.type ? '' : 'border: 1px solid #F44336'">
+        <v-btn v-for="pt in proofTypeList" :key="pt.key" size="small" :value="pt.key" :prepend-icon="pt.icon" :style="isSelectedType(pt.key) ? 'border: 1px solid #4CAF50' : ''" @click="proofTypeForm.type = pt.key">
+          {{ $t('ProofCard.' + pt.value) }}
+        </v-btn>
+      </v-btn-group>
     </v-col>
   </v-row>
 </template>
@@ -30,6 +24,11 @@ export default {
     return {
       proofTypeList: constants.PROOF_TYPE_LIST,
     }
+  },
+  methods: {
+    isSelectedType(proofType) {
+      return this.proofTypeForm.type === proofType
+    }
   }
 }
 </script>