geer-builder 1.2.643 → 1.2.644

package/GGcashCollectorPage.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="collector-page">
+        <div class="gcash-wallet">
+            <div class="section-title">Gcash & Wallet Request</div>
+            <gcash-wallet-request/>
+        </div>
+        <div class="bills-payment">
+            <div class="section-title">Bills Payment Request</div>
+            <bills-payment-request/>
+        </div>
+    </div>
+</template>
+
+<script>
+import GcashWalletRequest from "./components/CollectorPages/GcashWalletRequest";
+import BillsPaymentRequest from "./components/CollectorPages/BillsPaymentRequest.vue";
+export default
+{
+    components: { GcashWalletRequest, BillsPaymentRequest },
+    filters: { },
+    data:() =>(
+    {
+    }),
+    mounted() { },
+    methods: { },
+    computed: { }
+}
+</script>
+<style lang="scss">
+.collector-page 
+{
+    .gcash-wallet 
+    {
+        background: rgb(243, 243, 243);
+        padding: 10px;
+        border-radius: 5px;
+        margin-bottom: 20px;
+        .section-title
+        {
+            color: $primary;
+            font-weight: bold;
+            width: max-width;
+            font-size: 17px;
+            display: grid;
+            justify-items: flex-start;
+            margin-bottom: 10px;
+        }
+    }
+    .bills-payment
+    {
+        background: rgb(243, 243, 243);
+        padding: 10px;
+        border-radius: 5px;
+        .section-title
+        {
+            color: $primary;
+            font-weight: bold;
+            width: max-width;
+            font-size: 17px;
+            display: grid;
+            justify-items: flex-start;
+            margin-bottom: 10px;
+        }
+    }
+}
+</style>

package/GGcashRequest.vue

@@ -0,0 +1,551 @@
+<template>
+    <div class="g-gcash-request">
+        <div class="message-output q-mb-lg" v-if="!(this.user_info.hasOwnProperty('verified') && this.user_info.verified === true)">
+            <div class="verification-required">
+                <div class="title">Verification Required</div>
+                <div class="desc">You need to <b>GET VERIFIED</b> to transact with this module. Please click the <b>"GET VERIFIED"</b> button.</div>
+            </div>
+            <q-btn class="q-mt-lg" @click="is_g_user_verification_dialog_open = true" label="Get Verified"/>
+        </div>
+        <q-form @submit.prevent="onSubmit">
+            <div class="input-wrapper">
+                <div class="section-label text-bold" align="left"><span class="text-uppercase">Primary Info </span><span class="text-red">( Required )</span></div>
+                <div class="primary-details">
+                    <q-input filled required v-model="form.first_name" placeholder="Enter your First Name" label="First Name" />
+                    <q-input filled required v-model="form.middle_name" placeholder="Enter your Middle Name" label="Middle Name (Put 'N/A', if not applicable)" />
+                    <q-input filled required v-model="form.last_name" placeholder="Enter your Last Name" label="Last Name" />
+                    <q-select filled v-model="request" :options="['Gcash Request', 'Wallet Request']" label="Select Request" />
+                    <q-input filled required type="number" v-model="form.contact_number" placeholder="Enter your Number" label="Mobile Number ( Must be 11 digits )" />
+                    <q-input filled required type="number" v-model="form.requested_amount" :placeholder="amount_placeholder" label="Amount Request" />
+                    <q-select filled v-model="selected_hub" option-label="full_name" option-value="active_slot" :options="hub_options" label="Select Hub" />
+                </div>
+                <div class="section-label text-bold q-mt-md" align="left"> <span class="text-uppercase">*Address </span><span class="text-grey">( Changes are not allowed in this section. )</span></div>
+                <div class="address-details">
+                    <q-input disable filled v-model="form.address.street" label="Street" />
+                    <q-input disable filled v-model="form.address.barangay" label="Barangay" />
+                    <q-input disable filled v-model="form.address.city" label="City" />
+                    <q-input disable filled v-model="form.address.province" label="Province" />
+                    <q-input disable filled v-model="form.address.region" label="Region" />
+                    <q-input disable filled v-model="form.address.postal_code" label="Postal Code" />
+                </div>
+            </div>
+            <div align="right" v-if="this.user_info && this.user_info.hasOwnProperty('verified') && this.user_info.verified === true">
+                <q-btn class="q-mt-lg" type="submit" label="submit"/>
+            </div>
+        </q-form>
+
+        <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', '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 persistent v-model="is_g_user_verification_dialog_open" :maximized="true" transition-show="slide-up" transition-hide="slide-down">
+            <div class="user-verification-dialog-holder">
+                <g-user-verification class="full-width"/>
+            </div>
+        </q-dialog>
+        <q-dialog v-model="is_view_request">
+            <q-card class="member-card-wrapper">
+                <q-card-section>
+                    <div class="card-title text-bold text-primary text-h6"> Request Data</div>
+                </q-card-section>
+                <q-card-section class="member-request-wrapper">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td class="label">Amount</td>
+                                <td>:</td>
+                                <td class="value">{{newNUmber(request_details.requested_amount)}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label">Fullname</td>
+                                <td>:</td>
+                                <td class="value">{{request_details.full_name}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label">Address</td>
+                                <td>:</td>
+                                <td class="value">{{request_details._address_combined}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label">Contact Number</td>
+                                <td>:</td>
+                                <td class="value" v-if="edit_request"><q-input dense outlined v-model="request_details.contact_number"/></td>
+                                <td class="value" v-else>{{request_details.contact_number}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label">Time & Date</td>
+                                <td>:</td>
+                                <td class="value">{{date(request_details.created_date)}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label">Request</td>
+                                <td>:</td>
+                                <td class="value">{{request_details.request}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label">Status</td>
+                                <td>:</td>
+                                <td class="value">{{request_details.status}}</td>
+                            </tr>
+                            <tr v-if="request_details.response_message && request_details.response_message.length > 0">
+                                <td class="label">Response Message</td>
+                                <td>:</td>
+                                <td class="value">{{request_details.response_message}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </q-card-section>
+                <q-card-section align="right" v-show="request_details.admin_rejected == true">
+                    <q-btn :disabled="false" @click="cancelEdit()" flat label="Cancel"/>
+                    <q-btn :disabled="false" v-if="!edit_request" @click="edit_request = true" color="primary" label="Edit Number"/>
+                    <q-btn :disabled="false" v-else @click="submitEditedRequest(request_details)" color="primary" label="Save and Submit"/>
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+    </div>
+</template>
+<script>
+import GlobalMixins                         from './mixins/global_mixins.js';
+import DB_USER_SHIPPING_ADDRESS             from './models/DB_USER_SHIPPING_ADDRESS';
+import DB_USER                              from './models/DB_USER';
+import GUserVerification                    from './GUserVerification';
+import DB_GCASH_REQUEST                     from './models/DB_GCASH_REQUEST';
+import {formatNumber}                       from './utilities/NumberUtils';
+import {formatDate}                         from './utilities/DateUtils';
+export default {
+    
+    props:
+    {
+    },
+    components: { GUserVerification },
+    data: () =>
+    ({
+        user_default_address: null,
+        is_open_request_form: false,
+        edit_request: false,
+        is_view_request: false,
+        filter: 'Pending',
+        request: '',
+        filter_request: 'All',
+        table_title: 'All Request',
+        gcash_data: [],
+        table_data: [],
+        pagination: { rowsPerPage: 5},
+        table_loading: false,
+        is_g_user_verification_dialog_open: false,
+        selected_hub: null,
+        filterr: '',
+        request_details: {},
+        amount_placeholder: '',
+        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    : 'gcash_ref_number',
+                label   : 'Reference Number',
+                field   :  'gcash_ref_number',
+                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 Message',
+                field   : row => row.response_message,
+                format  : val => `${val ? val:'-----'}`,
+                align   : 'left',
+            }  
+        ],
+        min_request_amount: null,
+        max_request_amount: null,
+        form: {
+            selected_hub: null,
+            first_name: null,
+            middle_name: null,
+            last_name: null,
+            contact_number: null,
+            requested_amount: null,
+            address: {
+                street: null,
+                barangay: null,
+                city: null,
+                province: null,
+                region: null,
+                postal_code: null,
+            }
+        },
+        hub_options: []
+    }),
+    async mounted()
+    {
+        await this.$_getSlotInfo(); // GET THE CURRENTLY USED SLOT  VARIABLE SAVED ON = this.current_slot_info;
+        await this.getAddress();
+        await this.getAssignAddress();
+        let public_settings = await this.$_getData('public_settings');
+        if (public_settings.hasOwnProperty('gcash_wallet_min')) {
+            this.min_request_amount = public_settings.gcash_wallet_min;
+            this.max_request_amount = public_settings.gcash_wallet_max;
+            this.amount_placeholder = `minimum: ${formatNumber(this.min_request_amount, {decimal: 2})} & maximum: ${formatNumber(this.max_request_amount, {decimal: 2})}`
+        }
+        this.getAllRequest();
+        this.getHubOptions();
+    },
+    watch: 
+    {
+        filter()
+        {
+            this.getAllRequest()
+        },
+        filter_request()
+        {
+            this.getAllRequest()
+        },
+        selected_hub()
+        {
+            this.form.selected_hub = this.selected_hub.active_slot;
+        }
+    },
+    methods:
+    {   
+        async getCollectorsLocations()
+        {
+            let collector = await new DB_USER().collection().where('hubs_slot', '==', this.form.selected_hub).where('collector', '==', true).get().then(res => res.docs.map(doc => Object.assign({}, doc.data(), { id: doc.id })));
+            let collector_location = null;
+            if (!(collector && collector.hasOwnProperty('length') && collector.length > 0)) return {response: false};
+            else 
+            {
+                for (let i = 0; i < collector.length; i++) {
+                    const element = collector[i];
+                    let tag_location = element.tag_location;
+                    if(tag_location.hasOwnProperty('length') && tag_location.length > 0)
+                    {
+                        for (let i = 0; i < tag_location.length; i++) {
+                            const ins_element = tag_location[i];
+                            if (ins_element.brgy_code === this.user_default_address.barangay.brgy_code) collector_location = {location_code: ins_element.brgy_code, has_collector: true};
+                        }
+                    }
+                }
+                return collector_location;
+            }
+        },
+        date(date)
+        {
+            let new_date = formatDate(date, 'MM/DD/YY (hh:mm A)');
+            return new_date;
+        },
+        newNUmber(amount)
+        {
+            let new_amount= formatNumber(amount, { decimal: 2 });
+            return new_amount;
+        },
+        async getAssignAddress()
+        {
+            if (this.user_info) 
+            {
+                this.form.contact_number = this.user_info.contact_number
+                if (this.user_default_address) {
+                    this.form.first_name = this.user_default_address.first_name;
+                    if (this.user_default_address.hasOwnProperty('middle_name')) this.form.middle_name = this.user_default_address.middle_name;
+                    this.form.last_name = this.user_default_address.last_name
+                    this.form.address.street= this.user_default_address.street;
+                    this.form.address.barangay= this.user_default_address.barangay.name;
+                    this.form.address.city= this.user_default_address.city.name;
+                    this.form.address.province= this.user_default_address.province.name;
+                    this.form.address.region= this.user_default_address.region.name;
+                    this.form.address.postal_code= this.user_default_address.postal_code;
+                }
+            }
+        },
+        async getAddress()
+        {
+            if (this.user_info && this.user_info.hasOwnProperty('verified') && this.user_info.verified === true) {
+                let address = await new DB_USER_SHIPPING_ADDRESS(this.user_info.uid).collection().where('default', '==', true).get();
+                this.user_default_address = address.docs[0].data();
+            }
+        },
+        async onSubmit()
+        {
+            this.$q.loading.show();
+            let collector =  await this.getCollectorsLocations();
+            if (this.min_request_amount && this.max_request_amount) {
+                if(!(this.form.requested_amount >= this.min_request_amount && this.form.requested_amount <= this.max_request_amount))
+                {
+                    this.$q.dialog({
+                        title:'Invalid Amount', 
+                        message: `You have entered an amount which is beyond the bracket of 
+                        minimum Php${formatNumber(this.min_request_amount, {decimal: 2})} to 
+                        maximum Php${formatNumber(this.max_request_amount, {decimal: 2})}.`
+                    });
+                    return this.$q.loading.hide();
+                }
+            }
+            if (!(collector && collector.hasOwnProperty('has_collector') && collector.has_collector === true)) 
+            {
+                this.$q.dialog({message: 'No collectors found in your location. Sorry for inconvenience.'});
+                return this.$q.loading.hide(); 
+            }
+            if (this.user_info) 
+            {
+                this.form.uid = this.user_info.uid 
+                this.form.requested_amount = Number(this.form.requested_amount);
+                this.form.request = this.request;
+                this.form.status = 'pending';
+                this.form.location_code = collector.location_code;
+                this.form._address_combined = `${this.form.address.street} ${this.form.address.barangay} ${this.form.address.city} ${this.form.address.province} ${this.form.address.region}`
+                this.form.full_name = `${this.form.first_name} ${this.form.middle_name} ${this.form.last_name}`
+                if (this.form.request && this.form.contact_number && this.form.contact_number.length === 11 && this.form.first_name && this.form.middle_name && this.form.last_name) 
+                {
+                    if(this.current_slot_info)
+                    {
+                        try
+                        {
+                            this.form.slot_code = this.current_slot_info.slot_code;
+                            let res = await this.$_fbCall('memberGcashRequest', this.form);
+                            this.$q.dialog({ title: `Success`, message: `${this.form.request} has been succesfully submitted.`, html: true });
+                        }
+                        catch (error)
+                        {
+                            this.$q.dialog({ title: `Something's not quite right`, message: error.message });
+                        }
+                    }
+                    else
+                    {
+                        this.$q.dialog({ title: `Something's not quite right`, message: "No slot available" });
+                    }
+                }
+                else 
+                {
+                    this.$q.dialog({title:'Something Went Wrong', message: 'You must filled up all the fields properly.'})
+                }
+            }
+            await this.getAllRequest();
+            this.is_open_request_form = false;
+            this.$q.loading.hide();
+        },
+        async getAllRequest()
+        {
+            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('members_uid', '==', `${this.user_info.uid}`).orderBy('created_date', 'desc'));
+            else if (filter === 'all' && this.filter_request != 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('request', '==', `${this.filter_request}`).orderBy('created_date', 'desc'));
+            else if (filter != 'all' && this.filter_request === 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('status', '==', `${filter}`).orderBy('created_date', 'desc'));
+            else await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('members_uid', '==', `${this.user_info.uid}`).where('status', '==', `${filter}`).where('request', '==', `${this.filter_request}`).orderBy('created_date', 'desc'));
+            this.table_loading= false;
+        },
+        viewRequest(evt, row)
+        {
+            this.request_details = row;
+            this.is_view_request = true;
+        },
+        async getAllHubs()
+        {
+            await this.$bind('table_data', new DB_USER().collection().where('hub', '==', true));
+            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(this.user_default_address.city.mun_code === element.address.city.mun_code) new_table_data.push(element);
+                }
+                return new_table_data;
+            }
+        },
+        async getHubOptions()
+        {
+            this.hub_options = await this.getAllHubs();
+        },
+        cancelEdit()
+        {
+            this.getAllRequest();
+            this.edit_request = false;
+            this.is_view_request = false;
+        },
+        async submitEditedRequest(request_details)
+        {
+            request_details.req_id = request_details.id;
+            this.$q.loading.show()
+            try 
+            {
+                let res = await this.$_fbCall('memberSubmitEditedRequest', request_details);
+                this.edit_request = false;
+                this.is_view_request = false;
+                this.getAllRequest();
+                this.$q.loading.hide();
+                return this.$q.dialog({ title: `Success`, message: `${request_details.request} has been succesfully resubmitted.`, html: true });
+            } 
+            catch(e) 
+            {
+                this.getAllRequest();
+                this.$q.loading.hide();
+                return this.$q.dialog({title:'Something Went Wrong', message: 'You must filled up all the fields properly.'})
+            }
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+.g-gcash-request
+{
+    .button-holder 
+    {
+        display: flex;
+        justify-content: space-between;
+        .q-btn
+        {
+            background-color: #3887d1;
+        }
+    }
+    .message-output
+    {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 20px;
+        background-color: white;
+        border-left: 3px solid red;
+        .verification-required 
+        {
+            text-align: start;
+            .title 
+            {
+                font-size: 20px;
+                font-weight: bold;
+            }
+            .desc 
+            {
+                color: gray;
+            }
+        }
+    }
+    .primary-details 
+    {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 15px;
+    }
+    .address-details 
+    {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 15px;
+    }
+    .input-wrapper 
+    {
+        // display: flex;
+        justify-content: space-between;
+        .q-btn
+        {
+            background-color: #3887d1;
+        }
+    }
+    .filters 
+    {
+        display: flex;
+        margin-top: 20px;
+        grid-gap: 10px;
+        justify-content: flex-end;
+    }
+    .section-label 
+    {
+        margin-top: 20px;
+        margin-bottom: 10px;
+    }
+}
+.q-dialog 
+{
+    .user-verification-dialog-holder
+    {
+        display: grid;
+        place-items: center;
+        justify-content: center;
+        .full-width 
+        {
+            max-width: 95vw;
+            width: 100% ;
+            // overflow: scroll;
+        }
+    }
+    .member-card-wrapper 
+    {
+        max-width: 500px;
+        .member-request-wrapper
+        {
+            .label 
+            {
+                min-width: 150px;
+                font-weight: bold;
+            }
+            tr 
+            {
+                display: flex;
+                align-items: flex-start;
+            }
+        }
+    }
+}
+</style>

package/GHubPage.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="g-main-hub-page" v-if="user_info.hasOwnProperty('hub') && user_info.hub === true">
+        <q-card class="hub-tab-wrapper">
+            <q-tabs
+            v-model="tab"
+            dense
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+            align="justify"
+            narrow-indicator
+            >
+            <q-tab name="member_request" label="Request" />
+            <q-tab name="manage_collectors" label="Collectors" />
+            <q-tab name="manage_wallet" label="wallet" />
+            </q-tabs>
+
+            <q-separator />
+
+            <q-tab-panels v-model="tab" animated>
+                <q-tab-panel name="member_request">
+                    <!-- <manage-hub-account /> -->
+                    <member-request></member-request>
+                </q-tab-panel>
+                <q-tab-panel name="manage_collectors">
+                    <manage-collectors />
+                </q-tab-panel>
+                <q-tab-panel name="manage_wallet">
+                    <manage-wallet />
+                </q-tab-panel>
+            </q-tab-panels>
+        </q-card>
+    </div>
+</template>
+<script>
+import MemberRequest from "./components/HubPage/MemberRequest";
+import ManageCollectors from "./components/HubPage/ManageCollectors";
+import ManageWallet from "./components/HubPage/ManageWallet";
+export default {
+    components: { MemberRequest, ManageCollectors, ManageWallet },
+    props:{},
+    data: () =>
+    ({
+        tab: 'member_request',
+    }),
+    watch:{},
+    async mounted() 
+    { 
+    },
+    methods:
+    {
+    }
+}
+</script>