geer-builder 1.2.643 → 1.2.645

package/components/HubPage/GcashAndWallet.vue

@@ -0,0 +1,357 @@
+<template>
+    <div class="gcash-and-wallet-page">
+        <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_request" :options="['All', 'Wallet Request', 'Gcash Request']" label="Request" />
+            <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 ? gcash_data : []"
+            :columns="table_column"
+            :pagination.sync="pagination"
+            :filter="filterr"  >
+        </q-table>
+        <q-dialog v-model="dialog_gcash_request_data">
+            <q-card style="max-width: 350px: width: 100%;">
+                <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>{{gcash_request_data.requested_amount}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Full Name</td>
+                                    <td> : </td>
+                                    <td>{{gcash_request_data.full_name}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Address</td>
+                                    <td> : </td>
+                                    <td>{{gcash_request_data._address_combined}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Contact Number</td>
+                                    <td> : </td>
+                                    <td>{{gcash_request_data.contact_number}}</td>
+                                </tr>
+                                <tr>
+                                    <td class="label text-bold">Status</td>
+                                    <td> : </td>
+                                    <td>{{gcash_request_data.status}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </q-card-section>
+                    <q-card-actions align="right" class="bg-white" v-if="!(gcash_request_data && gcash_request_data.hasOwnProperty('status') && (gcash_request_data.status === 'rejected' || gcash_request_data.status === 'for_collection' || gcash_request_data.status === 'for_processing' || gcash_request_data.status === 'collected' || gcash_request_data.status === 'processed'))">
+                        <q-btn flat class="text-grey" label="Decline" @click="declineREquest(gcash_request_data)" />
+                        <q-btn color="primary" label="Accept" @click="acceptREquest(gcash_request_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_GCASH_REQUEST      from '../../models/DB_GCASH_REQUEST';
+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",
+        gcash_data: [],
+        filterr: '',
+        filter: "Pending",
+        table_title: 'All Request',
+        pagination  : { rowsPerPage: 5},
+        table_loading: false,
+        dialog_gcash_request_data: false,
+        gcash_request_data: {},
+        table_column:
+        [
+            { 
+                name    : 'status',
+                label   : 'STATUS',
+                field   :  "status",
+                align   : 'left',
+            },
+            { 
+                name    : 'full_name',
+                label   : 'FULL NAME',
+                field   : "full_name",
+                align   : 'left',
+                sortable: true,
+            },
+            { 
+                name    : 'address',
+                label   : 'ADDRESS',
+                field   : "_address_combined",
+                align   : 'center',
+                sortable: true,
+            },
+            { 
+                name    : 'contact_number',
+                label   : 'CONTACT NUMBER',
+                field   :  "contact_number",
+                align   : 'left',
+            },
+            { 
+                name    : 'requested_amount',
+                label   : 'AMOUNT REQUEST',
+                field   : row => `Php${formatNumber(row.requested_amount, { decimal: 2 })}`,
+                format: val => `${val}`,
+                align   : 'left',
+            },    
+            { 
+                name    : 'request',
+                label   : 'REQUEST',
+                field   :  "request",
+                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    : 'hubs_response_message',
+                label   : 'Response Memo',
+                field   : row => row.hubs_response_message,
+                format  : val => `${val ? val:'-----'}`,
+                align   : 'left',
+            }
+
+        ],
+        decline_message_dialog: false,
+        reject_message: '',
+        to_be_reject: null,
+    }),
+    watch: 
+    {
+        filter()
+        {
+            this.getAllGcashRequest();
+        },
+        filter_request()
+        {
+            this.getAllGcashRequest();
+        }
+    },
+    async mounted() 
+    { 
+        await this.getAllGcashRequest();
+        await this.$_getSlotInfo();
+    },
+    methods:
+    {   
+        async getAllGcashRequest()
+        {
+            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' && this.filter_request === 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).orderBy('created_date', 'desc'));
+            else if (filter === 'all' && this.filter_request != 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('request', '==', `${this.filter_request}`).orderBy('created_date', 'desc'));
+            else if (filter != 'all' && filter != "collected" && this.filter_request === 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('status', '==', `${filter}`).orderBy('created_date', 'desc'));
+            else if (filter == "collected" && this.filter_request === 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('collected', '==', true).orderBy('created_date', 'desc'));
+            else if (filter == "collected" && this.filter_request != 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('request', '==', `${this.filter_request}`).where('collected', '==', true).orderBy('created_date', 'desc'));
+            else await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('selected_hub', '==', `${this.user_info.active_slot}`).where('status', '==', `${filter}`).where('request', '==', `${this.filter_request}`).orderBy('created_date', 'desc'));
+
+            if(filter == 'collected')
+            {
+                let new_data = [];
+                this.gcash_data.forEach(element => {
+                    if (element.collected === true) 
+                    {
+                        element.status = 'collected';
+                    }
+                    new_data.push(element)    
+                });
+    
+                this.gcash_data = 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_gcash_request_data = true;
+                this.gcash_request_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.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.getAllGcashRequest();
+                this.$q.loading.hide()
+                this.dialog_gcash_request_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.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.getAllGcashRequest();
+            this.dialog_gcash_request_data = false;
+            this.$q.loading.hide();
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.gcash-and-wallet-page
+{
+    .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>

package/components/HubPage/ManageCollectors.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="manage-collector">
+        <div align="right" class="q-mb-md">
+            <q-btn-dropdown color="primary" label="Actions">
+                <q-list>
+                    <q-item clickable v-close-popup @click="onItemClick">
+                        <q-item-section>
+                            <q-item-label>Add Collector's Account</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </q-btn-dropdown>
+        </div>
+        <div class="collectors-table">
+            <q-table    
+                :loading="table_loading"
+                @row-click= "viewCollector"
+                separator="cell"
+                bordered
+                flat
+                :data="!table_loading ? table_data : []"
+                :columns="table_column"
+                :pagination.sync="pagination" >
+            </q-table>  
+        </div>
+        <q-dialog persistent v-model="add_collectors_dialog_open">
+            <add-collector-form @done="createdSuccessfully"/>
+        </q-dialog>
+    </div>
+</template>
+
+<script>
+import DB_USER              from '../../models/DB_USER';
+import AddCollectorForm     from './AddCollectorForm';
+export default
+{
+    filters: { },
+    components: { AddCollectorForm },
+    data:() =>(
+    {
+        add_collectors_dialog_open: false,
+        table_data: [],
+        table_loading: false,
+        pagination: { rowsPerPage: 5},
+        table_column:
+        [
+             { 
+                name    : 'full_name',
+                label   : 'FULL NAME',
+                field   : "full_name",
+                align   : 'left',
+                sortable: true,
+            },
+            { 
+                name    : 'contact_number',
+                label   : 'Contact Number',
+                field   :  "contact_number",
+                align   : 'left',
+            },
+            { 
+                name    : 'location_tag',
+                label   : 'Location Tag',
+                field   :  "location_tag",
+                align   : 'left',
+            },
+            { 
+                name    : 'assigned_location',
+                label   : 'Location',
+                field   :  "assigned_location",
+                align   : 'left',
+            },
+            { 
+                name    : 'email',
+                label   : 'Email',
+                field   :  "email",
+                align   : 'left',
+            },    
+
+        ],
+    }),
+    async mounted() 
+    { 
+        await this.$_getSlotInfo();
+        await this.getAllCollectors();
+    },
+    methods: 
+    { 
+        onItemClick()
+        {
+            this.add_collectors_dialog_open = true;
+        },
+        async createdSuccessfully() 
+        {
+            await this.getAllCollectors();
+            this.add_collectors_dialog_open = false;
+        },
+        async getAllCollectors()
+        {
+            this.table_loading = true;
+            await this.$bind('table_data', new DB_USER().collection().where('hubs_slot', '==', `${this.user_info.active_slot}`).where('collector', '==', true).orderBy('created_date', 'desc'));
+            let new_table_data = [];
+            if (this.table_data && this.table_data.hasOwnProperty('length') && this.table_data.length > 0) 
+            {
+                for (let i = 0; i < this.table_data.length; i++) 
+                {
+                    const element = this.table_data[i];
+                    if (element && element.hasOwnProperty('tag_location')) 
+                    {
+                        let tags = element.tag_location;
+                        let tag_loc = [];
+                        if(tags.hasOwnProperty('length') && tags.length > 0)
+                        {
+                            tags.forEach(sec_element => { tag_loc.push(`${sec_element.name}, `) });
+                            element.assigned_location = `${element.address.street} ${element.address.barangay.name} ${element.address.city.name} ${element.address.province.name} ${element.address.region.name}`
+                            element.location_tag = tag_loc;
+                        }
+                    }
+                    if(element.hasOwnProperty('hubs_slot') && element.hubs_slot === this.current_slot_info.slot_code) new_table_data.push(element);
+                }
+                this.table_data = new_table_data;
+            }
+            this.table_loading = false;
+        },
+        viewCollector(event, row) 
+        {
+            console.log(row, 'hkjsahjdfhja');
+        }
+    },
+    computed: { }
+}
+</script>