From 286ed8c73cf99649d5e7c3f8eb0a690dcf0d2517 Mon Sep 17 00:00:00 2001
From: Aqqil Azman <aqqil.azman99@gmail.com>
Date: Fri, 21 Jun 2024 17:54:04 +0800
Subject: [PATCH] added approve_po v-if condition and the order number box for
 approve_po as well as the designated buttons

---
 .../AdminWorkFlowSectionComponent.vue         | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue b/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue
index bd75c002..ade11bf4 100644
--- a/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue
+++ b/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue
@@ -3,10 +3,22 @@
         <div class="col">
             <div v-if="currentQuestion">
                 <h2>{{ currentQuestion.text }}</h2>
-                <div v-for="(answer, index) in currentQuestion.answers" :key="index">
-                    <button @click="selectAnswer(answer.next)" class="btn btn-primary">
-                        {{ answer.text }}
-                    </button>
+                <div v-if="currentQuestionId === 'approve_po'">
+                    <div class="box">
+                        <div v-for="(order, index) in orderNumbers" :key="index" class="order">
+                            <p>{{ order }}</p>
+                        </div>
+                    </div>
+                    <button @click="selectOrder(order, 'approve')" class="btn btn-primary">Approve PO</button>
+                    <button @click="selectOrder(order, 'edit')" class="btn btn-primary">Edit PO</button>
+                    <button @click="selectOrder(order, 'reject')" class="btn btn-primary">Reject PO</button>
+                </div>
+                <div v-else>
+                    <div v-for="(answer, index) in currentQuestion.answers" :key="index">
+                        <button @click="selectAnswer(answer.next)" class="btn btn-primary">
+                            {{ answer.text }}
+                        </button>
+                    </div>
                 </div>
             </div>
             <div v-else>
@@ -43,11 +55,12 @@ export default {
                     ] 
                 },
                 '1688': { text: 'Q1-A1', answers: [{ text: 'A1-A1', next: 'q1-a1-a1' }, { text: 'A1-A2', next: 'q1-a1-a2' }] },
-                'approve_po': { text: 'Q1-A2', answers: [] },
+                'approve_po': { text: 'Order Numbers', answers: [] },
                 'fill_po': { text: 'Q1-A3', answers: [] },
             },
             currentQuestionId: null,
-            readyToWork: true
+            readyToWork: true,
+            orderNumbers: ['Order 123', 'Order 456', 'Order 789']
         };
     },
     computed: {
@@ -61,6 +74,15 @@ export default {
         },
         selectAnswer(nextQuestionId) {
             this.currentQuestionId = nextQuestionId;
+        },
+        selectOrder(order, action) {
+            if (action === 'approve') {
+                alert(`${order} has been approved.`);
+            } else if (action === 'edit') {
+                alert(`Editing ${order}.`);
+            } else if (action === 'reject') {
+                alert(`${order} has been rejected.`);
+            }
         }
     }
 };
@@ -74,4 +96,15 @@ export default {
 .btn {
     margin: 5px;
 }
-</style>
\ No newline at end of file
+
+.box {
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin-top: 20px;
+    border-radius: 8px;
+}
+
+.order {
+    margin-bottom: 15px;
+}
+</style>