added approve_po v-if condition and the order number box for approve_po as well as the designated buttons

This commit is contained in:
Aqqil Azman
2024-06-21 17:54:04 +08:00
parent 60b1bbeee6
commit 286ed8c73c
@@ -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>
.box {
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
border-radius: 8px;
}
.order {
margin-bottom: 15px;
}
</style>