geer-builder 1.2.643 → 1.2.644

package/components/CollectorPages/GcashWalletRequest.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="g-gcash-collector-page" v-if="user_info.hasOwnProperty('collector') && user_info.collector === true">
+        <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', 'For Collection', 'For Processing', 'Collected', '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_processing' || gcash_request_data.status === 'processed'))">
+                        <q-btn v-if="gcash_request_data.status =='for_collection'" color="primary" label="Collect" @click="collectPayment(gcash_request_data)" v-close-popup />
+                    </q-card-actions>
+                </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 GUserVerification                    from '../../GUserVerification';
+import DB_USER                              from '../../models/DB_USER';
+import DB_GCASH_REQUEST                     from '../../models/DB_GCASH_REQUEST';
+import {formatDate}                         from '../../utilities/DateUtils';
+import {formatNumber}                       from '../../utilities/NumberUtils';
+
+
+export default {
+    
+    props:
+    {
+    },
+    components: { GUserVerification },
+    data: () =>
+    ({
+        pending_request: [],
+        accepted_request: [],
+        collected_request: [],
+        filter_request: "All",
+        gcash_data: [],
+        filterr: '',
+        filter: "For Collection",
+        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',
+                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',
+            },    
+        ],
+        decline_message_dialog: false,
+        reject_message: '',
+        to_be_reject: null,
+    }),
+    watch: 
+    {
+        filter()
+        {
+            this.getAllGcashRequest();
+        },
+        filter_request()
+        {
+            this.getAllGcashRequest();
+        }
+    },
+    async mounted() 
+    { 
+        await this.getAllGcashRequest();
+    },
+    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('assigned_collector', '==', `${this.user_info.uid}`).where("status", "in", ['for_collection', 'for_processing', 'processed']).orderBy('created_date', 'desc'));
+            else if (filter === 'all' && this.filter_request != 'All') await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('assigned_collector', '==', `${this.user_info.uid}`).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('assigned_collector', '==', `${this.user_info.uid}`).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('assigned_collector', '==', `${this.user_info.uid}`).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('assigned_collector', '==', `${this.user_info.uid}`).where('request', '==', `${this.filter_request}`).where('collected', '==', true).orderBy('created_date', 'desc'));
+            else await this.$bind('gcash_data', new DB_GCASH_REQUEST().collection()
+            .where('assigned_collector', '==', `${this.user_info.uid}`).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)
+        {
+            this.dialog_gcash_request_data = true;
+            this.gcash_request_data = row;
+        },
+        async collectPayment(request_data) 
+        {
+            this.$q.loading.show();
+            if (this.user_info) 
+            {
+                let collector_response = {};
+                collector_response.collectors_response = 'collected';
+                collector_response.req_id = request_data.id;
+                collector_response.request_data = request_data;
+                try
+                {
+                    await this.$_fbCall('collectGcashRequestResponse', collector_response);
+                    this.$q.dialog({ title: `Success`, message: `You've collected a payment.`, 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">
+.g-gcash-collector-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/AddCollectorForm.vue

@@ -0,0 +1,282 @@
+<template>
+    <q-card class="add-collector-form">
+        <q-form v-if="form && (form.address && form.tag_location)" @submit="submit">
+            <q-card-section>
+                <div class="main-title text-h5 text-bold"> Create Collector Account</div>
+            </q-card-section>
+            <q-card-section class="form-wrapper">
+                <div class="section-title text-bold">Collector Information <span class="text-red text-italic">(Required *)</span> </div>
+                <div class="form-wrapper-content-1">
+                    <q-input dense required v-model="form.first_name" filled class="form-item" label="First Name" />
+                    <q-input dense required v-model="form.middle_name" filled class="form-item" label="Middle Name" />
+                    <q-input dense required v-model="form.last_name" filled class="form-item" label="Last Name" />
+                    <q-input dense required v-model="form.email" type="email" filled class="form-item" label="Email" />
+                    <q-input dense required v-model="form.password" type="password" filled class="form-item" label="Password" />
+                    <q-select dense required v-model="form.gender" :options="['Male', 'Female']" filled class="form-item" label="Gender" />
+                    <q-input dense required v-model="form.contact_number" filled lazy-rules :rules="[ val => val && val.length == 11 && val[0] == 0 && val[1] == 9  || 'Number must be 11 digits and starts w/ (09)']" class="form-item" label="Phone Number" />
+                </div>
+            </q-card-section>
+            <q-card-section class="form-wrapper">
+                <div class="section-title text-bold">*Address<span class="text-red text-italic">(Required *)</span> </div>
+                <div class="form-wrapper-content-2">
+                    <q-select v-model="form.address.country"  option-label="name" option-value="code" lazy-rules :rules="[ val => val != null || 'Please choose country' ]" :options="[{code: 'PH', name: 'Philippines'}]" dense class="input" filled stack-label/>
+                    <q-input disable dense required v-model="form.address.postal_code" lazy-rules :rules="[ val => val != null || 'Please choose Postal Code' ]" filled class="form-item" label="Postal Code" />
+                    <q-select disable class="form-item" label="Region" filled map-options option-label="name" @input="form.address.province='';form.address.city='';form.address.barangay=''" v-model="form.address.region" :options="region_list" dense options-dense lazy-rules :rules="[ val => val != null || 'Please choose region' ]"></q-select>
+                    <q-select disable class="form-item" label="Province *" option-label="name" filled :options="province_options" @input="form.address.city='';form.address.barangay=''" v-model="form.address.province" dense options-dense lazy-rules :rules="[ val => val != '' || 'Please choose province' ]"></q-select>
+                    <q-select disable class="form-item" label="City *" option-label="name" filled :options="city_options" @input="form.address.barangay=''" v-model="form.address.city" dense options-dense lazy-rules :rules="[ val => val != '' || 'Please choose province' ]"></q-select>
+                    <q-select class="form-item" label="Barangay *" option-label="name" filled :options="barangay_options" v-model="form.address.barangay" dense options-dense lazy-rules :rules="[ val => val != '' || 'Please choose province' ]"></q-select>
+                </div>
+                <q-input class="form-item" label="Building, House no., Street, and etc... " filled v-model="form.address.street" :options="province_list" dense options-dense lazy-rules :rules="[ val => val && val.length > 0 || 'Street is required']"></q-input>
+            </q-card-section>
+            <q-card-section >
+                <div class="section-title text-bold">* Tag Location</div>
+                <div class="location-tagged-main">
+                    <div class="holder-title">Tagged</div>
+                    <div class="tag-location-holder" v-if="tag_location.length > 0">
+                        <div class="location-tagged" v-for="(barangay, index) in tag_location" :key="index">
+                            <div>{{barangay.name}}</div>
+                        </div>
+                    </div>
+                    <div v-else class="undefined-tags">
+                        No tags yet.
+                    </div>
+                </div>
+                <div class="location-choices">
+                    <div class="holder-title">Available Locations</div>
+                    <div class="tag-location-holder" v-if="barangay_options" >
+                        <div class="location-item" v-for="(barangay, index) in barangay_options" :key="index" @click="setAsTagLocation(barangay, index)" :class="barangay.class_name">
+                            <div>{{barangay.name}}</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- <q-checkbox disable v-model="form.tag_location.barangay" label="Barangay" color="cyan" /> -->
+            </q-card-section>
+            <q-card-section align="right">
+                <q-btn flat label="close" color="gray" class="q-mr-md" v-close-popup/>
+                <q-btn type="submit" label="create" color="primary"/>
+            </q-card-section>
+        </q-form>
+        <div v-else class="spinner-wrapper">
+            <q-spinner color="primary" size="3em" />
+        </div>
+    </q-card>
+</template>
+
+<script>
+import phil   from 'philippine-location-json-for-geer';
+export default
+{
+    filters: { },
+    data:() =>(
+    {
+        country_list: [],
+        region_list: [{region_name:"Metro Manila", region_id: "metro_manila"}, {region_name:"Mindanao", region_id: "mindanao"}, {region_name:"North Luzon", region_id: "north_luzon"}, {region_name:"South Luzon", region_id: "south_luzon"}, {region_name:"Visayas", region_id: "visayas"}],
+        province_list: [],
+        tag_location: [],
+        form: {
+            collector: true,
+            first_name: null,
+            middle_name: null,
+            last_name: null,
+            contact_number: null,
+            email: null,
+            password: null,
+            gender: null,
+            address: {
+                postal_code: null,
+                region: null,
+                province: null,
+                city: null,
+                barangay: null,
+                street: null,
+                country: { name: 'Philippines', code: 'PH' },
+            },
+            tag_location: []
+        },
+    }),
+    computed:
+    {
+       province_options()
+       {
+        if (this.form.address.region)
+        {
+            return phil.getProvincesByRegion(this.form.address.region.reg_code);
+        }
+        else
+        {
+            return null;
+        }
+           
+       },
+       city_options()
+       {
+            if (this.form.address.province)
+            {
+                return phil.getCityMunByProvince(this.form.address.province.prov_code);
+            }
+            else
+            {
+                return null;
+            }
+       },
+       barangay_options()
+       {
+        if (this.form.address.city)
+        {
+            return phil.getBarangayByMun(this.form.address.city.mun_code);
+        }
+        else
+        {
+            return null;
+        }
+       },
+    },
+    async mounted() 
+    { 
+        this.region_list = phil.regions;
+        await this.$_getSlotInfo();
+        await this.assignCityAddress();
+    },
+    watch: 
+    {
+        barangay_options()
+        {
+
+        }
+    },
+    methods: 
+    {
+        async submit()
+        {
+            this.$q.loading.show();
+            if(!(this.current_slot_info && this.current_slot_info.hasOwnProperty('slot_code'))) 
+            {
+                this.$q.loading.hide();
+                return this.$q.dialog({title:'No Slot', message:`Sorry! Slot code can't be found.`})
+            }
+            if(this.tag_location.length < 0) 
+            {
+                this.$q.loading.hide();
+                return this.$q.dialog({title:'Undefined Tag Location', message: 'Tag location is required.'});
+            }
+            this.form.full_name = `${this.form.first_name} ${this.form.middle_name} ${this.form.last_name}`;
+            this.form.location = `${this.form.address.street}, ${this.form.address.barangay.name}, ${this.form.address.city.name}, ${this.form.address.province.name}, ${this.form.address.region.name}, ${this.form.address.country.name}, ${this.form.address.postal_code},`
+            this.form.location_code = this.form.address.city.mun_code;
+            this.form.location_brgy_code = this.form.address.barangay.brgy_code;
+            this.form.country = this.form.address.country;
+            this.form.hubs_slot = this.current_slot_info.slot_code;
+            this.form.tag_location = this.tag_location;
+            try 
+            {
+                let callbackCreateAccount = await this.$_fbCall('hubCreateCollectorsAccount', this.form);
+                this.$q.loading.hide();
+                this.$emit('done');
+            } 
+            catch (error) 
+            {
+                this.$q.loading.hide();
+                this.$q.dialog(
+                {
+                    title: 'Ann Error Has Occured',
+                    message: error.message
+                });
+            }
+        },
+        assignCityAddress()
+        {
+            this.form.address.postal_code = this.user_info.address.postal_code
+            this.form.address.region = this.user_info.address.region
+            this.form.address.province = this.user_info.address.province
+            this.form.address.city = this.user_info.address.city
+        },
+        setAsTagLocation(barangay, index)
+        {
+            let check = null;
+            for (let i = 0; i < this.tag_location.length; i++) 
+            {
+                const element = this.tag_location[i];
+                if (element.brgy_code === barangay.brgy_code) check = true;
+            }
+            if (!check) this.tag_location.push(barangay);
+            else this.$q.dialog({title: 'Data Duplication', message: 'Location has been tagged.'})
+        }
+    }
+}
+</script>
+<style lang="scss">
+    .add-collector-form 
+    {
+        max-width: 1000px;
+        width: 100%;
+    }
+    .form-wrapper
+    {
+        display: grid;
+        grid-gap: 10px;
+        &-content-1 
+        {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 20px;
+        }
+        &-content-2 
+        {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            column-gap: 20px;
+            row-gap: 5px;
+        }
+    }
+    .location-tagged-main
+    {
+        padding: 10px;
+        border: 1px solid $primary;
+        border-radius: 5px;
+        color: $primary;
+        min-height: 100px;
+        display: grid;
+        align-items: center;
+        .undefined-tags 
+        {
+            color: gray;
+            margin: auto;
+        }
+    }
+    .location-choices
+    {
+        padding: 10px;
+        min-height: 100px;
+        border: 1px solid gray;
+        border-radius: 5px;
+        color: gray;
+        margin-top: 20px;
+    }
+    .tag-location-holder
+    {
+        margin-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        grid-gap: 10px;
+        .location-tagged
+        {
+            border: 1px solid $primary;
+            color: $primary;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .location-item 
+        {
+            border: 1px solid gray;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: 5ms all ease ;
+            &:hover 
+            {
+                border: 1px solid $primary;
+                color: $primary;
+            }
+        }
+    }
+</style>