Initial commit

app/components/transaction/TransactionPhaseForm.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="mb-5">
+      <label 
+        v-for="item in filteredPhases" 
+        :key="item.id"
+        class="py-3 is-clickable is-block"
+        :class="{ 'has-background-success-light': selectedPhaseId === item.id }"
+        style="border-bottom: 1px solid #dbdbdb;"
+      >
+        <div class="columns px-3 is-mobile is-vcentered is-gapless mb-0">
+          <div class="column">
+            <span class="is-size-6">{{ item.name }}</span>
+          </div>
+          <div class="column is-narrow">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="12" cy="12" r="10" :stroke="selectedPhaseId === item.id ? '#48c78e' : '#dbdbdb'" stroke-width="2"/>
+              <circle v-if="selectedPhaseId === item.id" cx="12" cy="12" r="6" fill="#48c78e"/>
+            </svg>
+            <input 
+              type="radio" 
+              :value="item.id" 
+              v-model="selectedPhaseId"
+              style="display: none;"
+            />
+          </div>
+        </div>
+      </label>
+    </div>
+    
+    <div class="field">
+      <div class="control">
+        <button 
+          class="button is-success has-text-white is-fullwidth" 
+          @click="submit" 
+          :disabled="!selectedPhaseId"
+        >
+          {{ isVietnamese ? 'Xác nhận' : 'Confirm' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useStore } from "@/stores/index";
+export default {
+  setup() {
+    const store = useStore();
+    return { store };
+  },
+  emits: ['modalevent', 'close'],
+  props: {
+    filterPhases: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedPhaseId: null,
+      phases: [
+        { id: 'p1', name: 'Giữ chỗ', code: 'reserved', phase: 1, status: 3,transstatus :1 },
+        { id: 'p2a', name: 'Thỏa thuận thực hiện nguyện vọng', code: 'fulfillwish', phase: 4, status: 5,transstatus :1 },
+        { id: 'p2b', name: 'Đặt cọc', code: 'deposit', phase: 2, status: 4,transstatus :1 },
+        { id: 'p3', name: 'Mua bán', code: 'pertrade', phase: 3, status: 6,transstatus :1 }
+      ]
+    };
+  },
+  computed: {
+    isVietnamese() {
+      return this.store.lang === 'vi';
+    },
+    filteredPhases() {
+      if (this.filterPhases.length === 0) {
+        return this.phases; // If no filter is provided, show all phases
+      }
+      return this.phases.filter(phase => this.filterPhases.includes(phase.code));
+    }
+  },
+  methods: {
+    submit() {
+      if (this.selectedPhaseId) {
+        const selected = this.phases.find(p => p.id === this.selectedPhaseId);
+        this.$emit('modalevent', { name: 'phaseSelected', data: selected });
+        this.$emit('close');
+      }
+    }
+  }
+};
+</script>