From bce914a3d3077544c0ec984f7cf88b963615fffb Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Sun, 4 Aug 2024 21:24:56 +0800
Subject: [PATCH] Sorry voucher minor UI update

---
 .../SingleVoucherCampaignItemComponent.vue    | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/resources/assets/vue/components/vouchers/elements/SingleVoucherCampaignItemComponent.vue b/resources/assets/vue/components/vouchers/elements/SingleVoucherCampaignItemComponent.vue
index 43b9d59a..6e3f9e40 100644
--- a/resources/assets/vue/components/vouchers/elements/SingleVoucherCampaignItemComponent.vue
+++ b/resources/assets/vue/components/vouchers/elements/SingleVoucherCampaignItemComponent.vue
@@ -1,10 +1,26 @@
 <template>
-    <div class="row bg-white padding-10 m-b-10 rounded">
-        <div class="col-2 fs-12">{{data.name}}</div>
-        <div class="col-1 text-success text-center">{{data.metadata && data.metadata.length > 0 ? data.metadata[0].value : 0 }}</div>
-        <div class="col-1 text-success text-center">{{data.metadata && data.metadata.length > 0 ? extractMonth(data.metadata[0].key) : '' }}</div>
-        <div class="col-1 text-center">{{data.limit_per_month}}</div>
-        <div class="col-3 fs-12">{{data.campaign_id}}</div>
+    <div id="accordion">
+        <div>
+            <div class="row bg-white padding-10 m-b-10 rounded pointer" data-toggle="collapse" :data-target="'#collapse-' + data.campaign_id" aria-expanded="true" :aria-controls="'collapse-' + data.campaign_id">
+                <div class="col-2 fs-12":id="'heading-' + data.campaign_id">{{data.name}}</div>
+                <div class="col-1 text-success text-center">{{data.metadata && data.metadata.length > 0 ? data.metadata[0].value : 0 }}</div>
+                <div class="col-1 text-success text-center">{{data.metadata && data.metadata.length > 0 ? extractMonth(data.metadata[0].key) : '' }}</div>
+                <div class="col-1 text-center">{{data.limit_per_month}}</div>
+                <div class="col-3 fs-12">{{data.campaign_id}}</div>
+            </div>
+            <div class="row bg-light collapse" :id="'collapse-' + data.campaign_id" :aria-labelledby="'heading-' + data.campaign_id" data-parent="#accordion">
+                <div class="col-12">
+                    <p>Past months vouchers issued</p>
+                </div>
+                <div class="col-12">
+                    <ul class="list-unstyled">
+                        <li v-for="(item, index) in data.metadata" :key="index">
+                            <a class="dropdown-item" href="#">{{ extractMonth(item.key) }} - {{ item.value }}</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
     </div>
 </template>