geer-builder 1.2.643 → 1.2.644

package/components/HubPage/BillsPayment.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="bills-payment">
+        <div align="right" class="q-mb-md filters">
+            <q-input style="width: 300px;" label="Search Here" outlined="" v-model="filterr"></q-input>
+            <q-select outlined style="min-width: 200px; width: fit-content" v-model="filter" :options="['All', 'Pending', 'Rejected', 'For Collection', 'Collected', 'For Processing', 'Processed']" label="Filter" />
+        </div>
+        <q-table    
+            :title="table_title"
+            :loading="table_loading"
+            @row-click= "viewRequest"
+            separator="cell"
+            bordered
+            flat
+            :data="!table_loading ? bills_payment : []"
+            :columns="table_column"
+            :pagination.sync="pagination"
+            :filter="filterr"  >
+        </q-table>
+        <q-dialog v-model="dialog_bills_payment_data">
+            <q-card style="max-width: 350px: width: 100%;" v-if="dialog_bills_payment_data">
+                <q-card-section>
+                    <q-card-section>
+                        <div class="text-h6 text-bold text-primary">Request Information</div>
+                    </q-card-section>
+                    <q-card-section class="row-details">
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td class="label text-bold">Load Amount</td>
+                                    <td> : </td>
+                                    <td>{{bills_payment_data.amount_to_pay}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Full Name</td>
+                                    <td> : </td>
+                                    <td>{{bills_payment_data.details.full_name}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Address</td>
+                                    <td> : </td>
+                                    <td>{{bills_payment_data._address_combined}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Contact Number</td>
+                                    <td> : </td>
+                                    <td>{{bills_payment_data.details.contact_number}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Status</td>
+                                    <td> : </td>
+                                    <td>{{bills_payment_data.status}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </q-card-section>
+                    <q-card-actions align="right" class="bg-white" v-if="!(bills_payment_data && bills_payment_data.hasOwnProperty('status') && (bills_payment_data.status === 'rejected' || bills_payment_data.status === 'for_collection' || bills_payment_data.status === 'for_processing' || bills_payment_data.status === 'collected' || bills_payment_data.status === 'processed'))">
+                        <q-btn flat class="text-grey" label="Decline" @click="declineREquest(bills_payment_data)" />
+                        <q-btn color="primary" label="Accept" @click="acceptREquest(bills_payment_data)" v-close-popup />
+                    </q-card-actions>
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+        <q-dialog v-model="decline_message_dialog">
+            <q-card class="reject-message-dialog">
+                <q-card-section>
+                    <div class="text-bold text-h6">Reason for Rejection</div>
+                </q-card-section>
+                <q-card-section>
+                    <q-input type="textarea" outline v-model="reject_message" placeholder="Input your reason here" />
+                </q-card-section>
+                <q-card-section>
+                    <div align="right">
+                        <q-btn flat label="close" color="primary" v-close-popup />
+                        <q-btn label="submit" color="primary" @click="declineREquest(to_be_reject)" />
+                    </div>
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+    </div>
+</template>
+<script>
+import GlobalMixins          from '../../mixins/global_mixins.js';
+import DB_BILLS_PAYMENT      from '../../models/DB_BILLS_PAYMENT';
+import DB_USER               from '../../models/DB_USER';
+import {formatDate}          from '../../utilities/DateUtils';
+import {formatNumber}        from '../../utilities/NumberUtils';
+
+export default {
+    
+    props:
+    {
+    },
+    components: {  },
+    data: () =>
+    ({
+        pending_request: [],
+        accepted_request: [],
+        collected_request: [],
+        filter_request: "All",
+        bills_payment: [],
+        filterr: '',
+        filter: "Pending",
+        table_title: 'All Request',
+        pagination  : { rowsPerPage: 5},
+        table_loading: false,
+        dialog_bills_payment_data: false,
+        bills_payment_data: {},
+        table_column:
+        [
+            { 
+                name    : 'status',
+                label   : 'STATUS',
+                field   :  "status",
+                align   : 'left',
+            }, 
+            { 
+                name    : 'full_name',
+                label   : 'FULL NAME',
+                field   : row => row.details.full_name,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : 'address',
+                label   : 'ADDRESS',
+                field   : "_address_combined",
+                align   : 'center',
+                sortable: true,
+            },
+            { 
+                name    : 'contact_number',
+                label   : 'CONTACT NUMBER',
+                field   : row => row.details.contact_number,
+                align   : 'left',
+                format: val => `${val}`,
+                sortable: true,
+            },
+            { 
+                name    : 'amount_to_pay',
+                label   : 'AMOUNT REQUEST',
+                field   : row => `Php${formatNumber(row.amount_to_pay, { decimal: 2 })}`,
+                format: val => `${val}`,
+                align   : 'left',
+            },    
+            { 
+                name    : 'created_date',
+                label   : 'TIME & DATE',
+                field   : row => formatDate(row.created_date, 'MM/DD/YY (hh:mm A)'),
+                format: val => `${val}`,
+                align   : 'left',
+            },    
+            { 
+                name    : 'response_message',
+                label   : 'RESPONSE MESSAGE',
+                field   : row => row.response_message,
+                format  : val => `${val ? val:'-----'}`,
+                align   : 'left',
+            }
+
+        ],
+        decline_message_dialog: false,
+        reject_message: '',
+        to_be_reject: null,
+    }),
+    watch: 
+    {
+        filter()
+        {
+            this.getAllBillsPaymentRequest();
+        },
+    },
+    async mounted() 
+    { 
+        await this.getAllBillsPaymentRequest();
+        await this.$_getSlotInfo();
+    },
+    methods:
+    {   
+        async getAllBillsPaymentRequest()
+        {
+            this.$q.loading.show();
+            this.table_loading = true;
+            this.table_title = `${this.filter} Request`;
+       
+            let filter;
+            if(this.filter == 'For Collection') filter = 'for_collection';
+            else if(this.filter == 'For Processing') filter = 'for_processing';
+            else filter = this.filter.toLowerCase();
+
+            if (filter === 'all') await this.$bind('bills_payment', new DB_BILLS_PAYMENT().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).orderBy('created_date', 'desc'));
+            else if (filter == "collected") await this.$bind('bills_payment', new DB_BILLS_PAYMENT().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('collected', '==', true).orderBy('created_date', 'desc'));
+            else await this.$bind('bills_payment', new DB_BILLS_PAYMENT().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('status', '==', `${filter}`).orderBy('created_date', 'desc'));
+
+            if(filter == 'collected')
+            {
+                let new_data = [];
+                this.bills_payment.forEach(element => {
+                    if (element.collected === true) 
+                    {
+                        element.status = 'collected';
+                    }
+                    new_data.push(element)    
+                });
+    
+                this.bills_payment = new_data;
+            }
+
+            this.table_loading = false;
+            this.$q.loading.hide();
+        },
+        viewRequest(evt, row)
+        {
+            if (row && row.hasOwnProperty('hubs_status')) 
+            {
+                this.$q.dialog({title: `You've already responded!`})
+            }
+            else
+            {
+                this.dialog_bills_payment_data = true;
+                this.bills_payment_data = row;
+            }
+        },
+
+        async declineREquest(request_data) 
+        {
+            this.to_be_reject = request_data;
+            if (this.reject_message === '') return this.decline_message_dialog = true;
+            else 
+            {
+                this.$q.loading.show()
+                if (this.user_info) 
+                {
+                    let hub_response = {};
+                    hub_response.hubs_response = 'rejected';
+                    hub_response.req_id = request_data.id;
+                    hub_response.request_data = request_data;
+                    hub_response.message = this.reject_message;
+                    hub_response.bills_payment = true;
+                    hub_response.slot_code = this.current_slot_info.slot_code;
+                    try
+                    {
+                        let res = await this.$_fbCall('memberhubRequestResponse', hub_response);
+                        this.$q.dialog({ title: `Success`, message: `You've rejected the request.`, html: true });
+                        this.reject_message = '';
+                        this.decline_message_dialog = false;
+                    }
+                    catch (error)
+                    {
+                        this.$q.dialog({ title: `Something's not quite right`, message: error.message });
+                    }
+                }
+                await this.getAllBillsPaymentRequest();
+                this.$q.loading.hide()
+                this.dialog_bills_payment_data = false;
+            }
+        },
+        async acceptREquest(request_data)
+        {
+            this.$q.loading.show();
+            if (this.user_info) 
+            {
+                let hub_response = {};
+                hub_response.hubs_response = 'for_collection';
+                hub_response.req_id = request_data.id;
+                hub_response.request_data = request_data;
+                hub_response.bills_payment = true;
+                hub_response.slot_code = this.current_slot_info.slot_code;
+                if(this.current_slot_info.wallet < request_data.requested_amount) 
+                {
+                    this.$q.dialog({title: 'Insufficient Balance', message: `The requested amount doesn't match your current wallet.`})
+                    return this.$q.loading.hide();
+                }
+                try
+                {
+                    let res = await this.$_fbCall('memberhubRequestResponse', hub_response);
+                    this.$q.dialog({ title: `Success`, message: `You've accepted the request.`, html: true });
+                }
+                catch (error)
+                {
+                    this.$q.dialog({ title: `Something's not quite right`, message: error.message });
+                }
+            }
+            await this.getAllBillsPaymentRequest();
+            this.dialog_bills_payment_data = false;
+            this.$q.loading.hide();
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.bills-payment
+{
+    .filters
+    {
+        display: flex;
+        grid-gap: 10px;
+        width: 100%;
+        justify-content: flex-end;
+    }
+}
+.q-dialog 
+{
+    .reject-message-dialog
+    {
+        max-width: 400px;
+        width: 100%;
+    }
+    .user-verification-dialog-holder
+    {
+        display: grid;
+        place-items: center;
+        justify-content: center;
+        .full-width 
+        {
+            max-width: 95vw;
+            width: 100% ;
+            // overflow: scroll;
+        }
+    }
+    .row-details 
+    {
+        .label 
+        {
+            min-width: 150px;
+        }
+        table 
+        {
+            max-width: 400px;
+            tbody 
+            {
+                tr 
+                {
+                    display: flex;
+                    align-items: flex-start;
+                }
+            }
+        }
+    }
+}
+</style>