list transfer with filters

resources/assets/vue/components/bookings/elements/FilterBookingComponent.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+                </div>
+            </div>
+            <div class="row" @keyup.enter="submitSearch()" v-show="!isLoading">
+                <div class="col-12 col-md">
+                    <choose-currency-component v-on:input="updateCurrencyId($event)" @js-update-currency="handleJsUpdateCurrency" ></choose-currency-component>
+                </div>
+                <div class="col-12 col-md">
+                    <choose-service-component v-on:input="updateServiceId($event)" v-on:loaded="doneLoadingServiceId"></choose-service-component>
+                </div>
+                <div class="col-12 col-md">
+                    <validation-wrapper-component selectable :validator="$v.filters.status">
+                        <label>Status</label>
+                        <select-component :options="['Active', 'Complete']" v-model="filters.status"></select-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col-auto">
+                    <div class="row h-100">
+                        <div class="col">
+                            <button type="button" class="btn btn-lg btn-primary w-100 h-100 d-block" @click="submitSearch()">Search</button>
+                        </div>
+                        <div class="col">
+                            <button type="button" class="btn btn-lg btn-default w-100 h-100 d-block" @click="reset()">Reset</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row m-t-50" v-if="hasSubmited">
+                <div class="col">
+                    <list-component :key="searchKey" section="transferFiltersSection" :endpoint="route('api.booking.list')" :options="options">
+                        <template slot="list" slot-scope="{data}">
+                            <booking-component :data="data"></booking-component>
+                        </template>
+                    </list-component>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import { required, requiredIf, minValue, decimal } from "vuelidate/lib/validators";
+    export default {
+        data() {
+            return {
+                isLoading: true,
+                searchKey: 1,
+                hasSubmited: false,
+                options: {
+                    per_page: 10
+                },
+                filters: {
+                    fixed_currency_id: null,
+                    service_id: null,
+                    status: null,
+                },
+            }
+        },
+        validations: {
+            filters: {
+                fixed_currency_id: {},
+                service_id: {},
+                status: {},
+            }
+        },
+        methods: {
+            submitSearch() {
+
+                this.options = {
+                    per_page: 10
+                },
+
+                this.filters.service_id != null ? (this.options.service_id = this.filters.service_id) : null;
+
+                this.filters.fixed_currency_id != null ? (this.options.fixed_currency_id = this.filters.fixed_currency_id) : null;
+
+                if (this.filters.status != null) {
+                    switch(this.filters.status) {
+                        case 'Active':
+                            // code block
+                            this.options.status = '2';
+                            break;
+
+                        case 'Complete':
+                            // code block
+                            this.options.status = '3';
+                            break;
+                        }
+                }
+
+                console.log(this.options);
+
+                this.searchKey +=1;
+                this.hasSubmited = true;
+            },
+            reset() {
+                this.marking = '';
+                this.hasSubmited = false;
+                this.currentKey += 1;
+            },
+            updateCurrencyId(id){
+                this.filters.fixed_currency_id = id;
+            },
+            updateServiceId(id){
+                this.filters.service_id = id;
+            },
+            doneLoadingServiceId(){
+                this.isLoading = !this.isLoading;
+
+                var currency = new URL(location.href).searchParams.get('currency');
+                if (currency != null) {
+                    if (currency == 'usd') {
+
+                    }
+                }
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>

resources/views/pages/bookings/filter.blade.php

@@ -0,0 +1,17 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col-12">
+                    <div class="row m-b-15 p-b-10 b-b b-grey">
+                        <div class="col">
+                            <small class="all-caps muted fs-10">Transfer Filters</small>
+                        </div>
+                    </div>
+                    <filter-booking-component section="transferFiltersSection" ></filter-booking-component>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection

routes/web.php

@@ -89,6 +89,10 @@ Route::get('/transfers', function () {
     return view('pages.bookings.index');
 })->name('bookings');
 
+Route::get('/list-transfer', function () {
+    return view('pages.bookings.filter');
+})->name('list_transfer');
+
 Route::get('/bookings/urgent', function () {
     return view('pages.urgent_list');
 })->name('bookings.urgent');