mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Fairuz
107 lines
5.0 KiB
Vue
107 lines
5.0 KiB
Vue
<template>
|
|
<transition-component group enter-class="animate__animated animate__fadeInUp animate__delay-1 animate__faster p-r-30" leave-class="animate__animated animate__fadeOutDown animate__faster p-r-30" style="min-height: 300px;width:100%">
|
|
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
|
|
<div class="row" key="2" v-show="!$store.getters.isLoading(section)">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center p-t-50 p-b-50" v-show="!$store.getters.getListData(section).length && !$store.getters.isLoading(section)">
|
|
<div class="col-10">
|
|
<div class="row align-items-center justify-content-center hint-text">
|
|
<div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col">
|
|
<div class="row m-t-20">
|
|
<div class="col">
|
|
<p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-5 align-items-center justify-content-center">
|
|
<div class="col">
|
|
<small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="list disable-text-selection" data-check-all="checkAll">
|
|
<div class="row" ref="list" v-for="item in $store.getters.getListData(section)" v-bind:key="item.id" :data="item">
|
|
<div class="col">
|
|
<slot name="list" :data="item"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition-component>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
section:{
|
|
type: String,
|
|
required: true
|
|
},
|
|
endpoint: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
options: {
|
|
default () {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
filters: this.options
|
|
}
|
|
},
|
|
created(){
|
|
this.setDecoratorDefault();
|
|
this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
|
|
},
|
|
computed: {
|
|
pendingList () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
}
|
|
},
|
|
watch: {
|
|
pendingList(inComplete){
|
|
if(inComplete){
|
|
this.fetchList();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
fetchList(){
|
|
let listDecorators = this.$store.getters.getListDetails(this.section);
|
|
this.submit(this.endpoint + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
|
|
},
|
|
updateFilters(filters){
|
|
this.filters = filters;
|
|
this.setDecoratorDefault();
|
|
this.submit(this.endpoint + '?page=1&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);
|
|
},
|
|
}
|
|
}
|
|
</script>
|