mirror of
https://gitlab.com/uldvstar/exchange-2.0.git
synced 2026-08-19 04:24:16 +00:00
billing ui
This commit is contained in:
edmondlang
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="row m-b-20">
|
||||
<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 class="row m-l-0 m-r-0 bg-master-light padding-10" v-show="!isLoading">
|
||||
<div class="col-12 col-md mb-2 mb-md-0 pointer">
|
||||
<div class="row h-100">
|
||||
<div class="col">
|
||||
<div class="bg-white bg-hover-complete h-100 btn btn-xs btn-outline-none btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedDocumentStatus = !selectedDocumentStatus">
|
||||
<div class="row h-100">
|
||||
<div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
|
||||
<label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Document Type</label>
|
||||
<span class="w-100 fs-14">{{parameters.type}}</span>
|
||||
</div>
|
||||
<div class="col-auto b-l b-grey">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col">
|
||||
<i class="fa" :class="[{'fa-angle-down': !selectedDocumentStatus}, {'fa-angle-up': selectedDocumentStatus}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-100">
|
||||
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !selectedDocumentStatus}]" style="top: 100%; right: 0; z-index: 1;">
|
||||
<div class="row text-left no-margin bg-white">
|
||||
<div class="col no-padding">
|
||||
<div class="row no-margin" v-for="document in documents" :key="document">
|
||||
<div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" @click="updateDocumentType(document)">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">{{document}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md mb-2 mb-md-0">
|
||||
<validation-wrapper-component :validator="$v.parameters.frequency">
|
||||
<label class="all-caps">Start Date</label>
|
||||
<date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-12 col-md mb-2 mb-md-0">
|
||||
<validation-wrapper-component :validator="$v.parameters.monetary">
|
||||
<label class="all-caps">End Date</label>
|
||||
<date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
|
||||
<button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from "../../../general/mixins/componentHandler";
|
||||
import { required, minValue} from "vuelidate/lib/validators";
|
||||
import {VMoney} from 'v-money'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
section: 'customerSectionComponent',
|
||||
isLoading: false,
|
||||
search: false,
|
||||
parameters: {
|
||||
startDate: '2021-01-01',
|
||||
endDate: '2022-01-01',
|
||||
type: 'INVOICE',
|
||||
},
|
||||
selectedDocumentStatus: false,
|
||||
documents: ['INVOICE', 'PURCHASE_ORDER', 'DELIVERY_ORDER', 'SUPPLIER_DELIVERY_ORDER'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitSearch(){
|
||||
this.submit(this.route('api.booking.download'), 'post', this.section, false, false)
|
||||
},
|
||||
updateDocumentType(documentType) {
|
||||
this.parameters.type = documentType;
|
||||
this.selectedDocumentStatus = !this.selectedDocumentStatus
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
parameters: {
|
||||
recency: {},
|
||||
frequency: {},
|
||||
monetary: {},
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@@ -25,7 +25,12 @@
|
||||
</div>
|
||||
<div class="col-auto p-r-20" v-if="$store.getters.isAdmin">
|
||||
<a href="{{route('payments')}}">
|
||||
<div class="text-white all-caps fs-12">Payments & Billing</div>
|
||||
<div class="text-white all-caps fs-12">Payments</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto p-r-20" v-if="$store.getters.isAdmin">
|
||||
<a href="{{route('billings')}}">
|
||||
<div class="text-white all-caps fs-12">Billings</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto p-r-20" v-if="$store.getters.isAdmin">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -62,6 +62,10 @@ Route::get('/payments', function () {
|
||||
return view('pages.payments');
|
||||
})->name('payments');
|
||||
|
||||
Route::get('/billings', function () {
|
||||
return view('pages.billings');
|
||||
})->name('billings');
|
||||
|
||||
Route::get('/currency_orders', function () {
|
||||
return view('pages.currency_orders');
|
||||
})->name('currency_orders');
|
||||
|
||||
Reference in New Issue
Block a user