mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Steve Ng
234 lines
11 KiB
Vue
234 lines
11 KiB
Vue
<template>
|
|
<div class="row h-100 parentContainer">
|
|
<div class="col-12" style="min-height: 20px;">
|
|
<loading-component style="height: 20px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div id="accordion">
|
|
<div class="card">
|
|
<div class="card-header" id="headingOne">
|
|
<h5 class="mb-0">
|
|
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Filters
|
|
</button>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
|
|
<div class="card-group" style="margin-bottom: 0px;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Pay For</h3>
|
|
<div class="card-tools">
|
|
<div class="form-check" v-for="(match, index) in matches">
|
|
<input class="form-check-input" type="checkbox" :value="match" :id="'match'+index" v-model="selected.matches">
|
|
<label class="form-check-label" :for="'match' + index">
|
|
{{ match }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="margin-top: 0px">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Date</h3>
|
|
<div class="form-check" v-for="(day, index) in days" :key="day">
|
|
<input class="form-check-input" type="checkbox" :id="'day'+index" :value="day" v-model="selected.days">
|
|
<label class="form-check-label" :for="'day'+index">
|
|
{{ day }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end mb-2">
|
|
<button type="button" class="btn btn-sm btn-primary" @click="fetchList(true)">
|
|
<i class="fa fa-plus-square"></i>
|
|
Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 v-if="$store.getters.getListData(section)[0] !== undefined" class="card-title">{{ $store.getters.getListData(section)[0].account_name }} - {{ $store.getters.getListData(section)[0].account_number }},{{ $store.getters.getListData(section)[0].account_type }} </h3><br/>
|
|
<h3 v-if="$store.getters.getListData(section)[0] !== undefined" class="card-title">{{ new Date($store.getters.getListData(section)[0].account_statement_date_from).toDateString() }} -> {{ new Date($store.getters.getListData(section)[0].account_statement_date_to).toDateString() }}</h3>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body table-responsive p-0">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Date</th>
|
|
<th>Description 1</th>
|
|
<th>Pay For</th>
|
|
<th>System References</th>
|
|
<th>Amount</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody v-show="!isLoading">
|
|
<tr v-for="item in $store.getters.getListData(section)" :key="item.id">
|
|
<td>{{item.id}}</td>
|
|
<td>{{item.date}}</td>
|
|
<td v-if="item.transaction_description_1 != null">{{item.transaction_description_1 | truncate(30, '...')}}</td>
|
|
<td v-if="item.transaction_description_1 == null"></td>
|
|
<td>{{item.pay_for}}</td>
|
|
<td>{{item.system_references}}</td>
|
|
<td>{{item.amount}}</td>
|
|
<td>
|
|
<a href="#">
|
|
<i class="fa fa-edit blue requestModal" data-type="editSingleItem" @click="editModal({item})"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
<div class="card-footer">
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editSingleItem">
|
|
<edit-single-item-in-list-component v-if="data != null" :data="data" :section="'editSingleItem'" class="text-left"></edit-single-item-in-list-component>
|
|
</modal-component>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import EditSingleItemInListComponent from "../../accounting/elements/EditSingleItemInListComponent";
|
|
export default {
|
|
components: {EditSingleItemInListComponent},
|
|
props: {
|
|
statement: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
data: null,
|
|
|
|
section: 'statementTransactionsDetails',
|
|
isLoading: false,
|
|
|
|
matches: ['exchange', 'shipping', 'none'],
|
|
selected: {
|
|
matches: [],
|
|
days: []
|
|
},
|
|
|
|
filters: {'per_page': 10, order_by: {column: 'id', DESC: true}},
|
|
page: 1,
|
|
|
|
days: [],
|
|
}
|
|
},
|
|
computed: {
|
|
pendingQueue () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
},
|
|
},
|
|
watch: {
|
|
pendingQueue(inComplete, oldValue){
|
|
if(inComplete){
|
|
this.fetchList();
|
|
}
|
|
},
|
|
selected: {
|
|
handler: function () {
|
|
//this.filters = {'per_page': 10, order_by: {column: 'id', DESC: true}};
|
|
|
|
//pay_for
|
|
if(this.selected.matches.toString() != ""){
|
|
const newArr = this.selected.matches.slice();
|
|
const index = newArr.indexOf('none');
|
|
if(index > -1){
|
|
newArr.splice(index, 1, '');
|
|
}
|
|
const newObject = {pay_for_in: newArr};
|
|
this.filters = {...this.filters, ...newObject};
|
|
}
|
|
else{
|
|
delete this.filters.pay_for_in;
|
|
}
|
|
|
|
//date
|
|
if(this.selected.days.toString() != ""){
|
|
const newArr = this.selected.days.slice();
|
|
const newObject = {date_in: newArr};
|
|
this.filters = {...this.filters, ...newObject};
|
|
}
|
|
else{
|
|
delete this.filters.date_in;
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
created(){
|
|
this.setDecoratorDefault();
|
|
if (this.statement === 0) {
|
|
this.filters = { 'per_page': 10, order_by: {column: 'id', DESC: true} };
|
|
} else {
|
|
this.filters = { 'per_page': 10, order_by: {column: 'id', DESC: true}, 'has_account_statement_id': this.statement };
|
|
}
|
|
this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
|
|
},
|
|
methods: {
|
|
fetchList(isUpdate = false){
|
|
this.isLoading = true;
|
|
if(!isUpdate){
|
|
let listDecorators = this.$store.getters.getListDetails(this.section);
|
|
this.page = listDecorators.page;
|
|
}
|
|
this.submit(route('api.accounting.statement.details', this.statement) + '?page=' + this.page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false);
|
|
},
|
|
successHandler(response){
|
|
this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
|
|
this.$refs.pagination.makePagination(response.payload.meta, response.payload.links + '&filters=' + JSON.stringify(this.filters));
|
|
this.generateDays();
|
|
this.isLoading = false;
|
|
},
|
|
editModal(param){
|
|
this.data = param.item;
|
|
},
|
|
generateDays(){
|
|
if(this.$store.getters.getListData(this.section)[0] !== undefined)
|
|
{
|
|
const startDate = new Date(this.$store.getters.getListData(this.section)[0].account_statement_date_from);
|
|
const endDate = new Date(this.$store.getters.getListData(this.section)[0].account_statement_date_to);
|
|
const days = [];
|
|
for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
|
|
const formattedDate = this.formatDate(d);
|
|
days.push(formattedDate);
|
|
}
|
|
this.days = days;
|
|
}
|
|
},
|
|
formatDate(date) {
|
|
const year = date.getFullYear();
|
|
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
|
const day = ('0' + date.getDate()).slice(-2);
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
},
|
|
}
|
|
</script>
|