From 7cb88cb486f0adf7964161c701ad13a51d82f84d Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Wed, 19 Apr 2023 18:59:00 +0800
Subject: [PATCH] modal to approve match and reject match

---
 .../StatementTransactionComponent.vue         | 22 ++++++++
 .../sections/TransactionsMappingComponent.vue | 16 +++++-
 .../GeneralConfirmationFormComponent.vue      | 55 +++++++++++++++++++
 3 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue

diff --git a/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue b/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue
index e2072785..d5459e81 100644
--- a/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue
+++ b/resources/assets/vue/components/accounting/elements/StatementTransactionComponent.vue
@@ -44,6 +44,22 @@
                     </div>
                 </div>
                 <div class="col-1">{{ item.amount }}</div>
+                <div class="col-1" v-if="stage === 1">
+                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteAnnouncement">
+                        <i class="fa fa-times fa-fw"></i>
+                    </button>
+                </div>
+                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAnnouncement">
+                    <general-confirmation-form-component 
+                        contentText="Are you sure you want to reject this mapping?" 
+                        modalType="delete" 
+                        class="text-center"
+                        :apiRoute="route('api.company.delete', 1)"
+                        apiMethod="post"
+                        :section="section"
+                    >
+                    </general-confirmation-form-component>
+                </modal-component>
             </div>
 <!--            <span v-for="owner in item.owners">{{owner.system + ' - ' + owner.owner_id}}</span>-->
 <!--            [0].system + ' - ' + item.owner_guess[0].bill_no-->
@@ -54,6 +70,12 @@
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
     export default {
+        props: {
+            stage: {
+                type: Number,
+                default: 0
+            },
+        },
         methods: {
             typeString(type){
                 switch(type) {
diff --git a/resources/assets/vue/components/accounting/sections/TransactionsMappingComponent.vue b/resources/assets/vue/components/accounting/sections/TransactionsMappingComponent.vue
index 3a4863a4..2e9ba412 100644
--- a/resources/assets/vue/components/accounting/sections/TransactionsMappingComponent.vue
+++ b/resources/assets/vue/components/accounting/sections/TransactionsMappingComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="row">
+    <div class="row parentContainer">
         <div class="col">
             <div class="row">
                 <div class="col">
@@ -59,6 +59,18 @@
                 <div class="col">
                     <div class="row">
                         <div class="col">
+                            <div class="btn btn-primary btn-sm m-t-10 requestModal" v-if="stage === 1" data-type="deleteAnnouncement">Approve all the Mapping Below</div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAnnouncement">
+                                <general-confirmation-form-component 
+                                    contentText="Are you sure you want to approve all these Transaction?" 
+                                    modalType="confirm" 
+                                    class="text-center"
+                                    :apiRoute="route('api.company.delete', 1)"
+                                    apiMethod="post"
+                                    :section="section"
+                                >
+                                </general-confirmation-form-component>
+                            </modal-component>
                             <div class="row m-t-10 m-b-10">
                                 <div class="col">
                                     <div class="row p-t-10 p-b-10 b-b b-grey text-master-light">
@@ -77,7 +89,7 @@
                             </div>
                             <list-component ref="bankTransactionsList" section="bankTransactionSection" :endpoint="route('api.accounting.bank.transaction')" :options="this.filter">
                                 <template slot="list" slot-scope="{data}">
-                                    <statement-transaction-component :data="data"></statement-transaction-component>
+                                    <statement-transaction-component :data="data" :stage="stage"></statement-transaction-component>
                                 </template>
                             </list-component>
                         </div>
diff --git a/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue b/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue
new file mode 100644
index 00000000..561681aa
--- /dev/null
+++ b/resources/assets/vue/components/general/forms/GeneralConfirmationFormComponent.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">{{ contentText }}</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-secondary btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-block b-rad-none" :class="[{'btn-danger': modalType !== 'confirm'}, {'btn-success': modalType === 'confirm'}]" @click="submit(apiRoute, apiMethod, section, true, true)">{{ buttonText }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            contentText: {
+                type: String,
+                required: true
+            },
+            modalType: {
+                type: String,
+                default: 'confirm'
+            },
+            buttonText: {
+                type: String,
+                default: 'Confirm'
+            },
+            apiRoute: {
+                type: String,
+                required: true
+            },
+            apiMethod: {
+                type: String,
+                required: true
+            },
+        },
+        mixins: [componentHandler, ModalFormHandler]
+
+    }
+</script>
\ No newline at end of file