mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Code sync from Shipping Portal, independent deployment of Vue Polling, checkout from dillon/34-jenkins-vapor
This commit is contained in:
Dillon Ngo
+10
-4
@@ -117,11 +117,17 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<list-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list')" :options="{per_page: 5, status: 2, owner_type: 'App\\Models\\Booking', type: 1, original_currency_id_in: [selectedCurrency.id], transaction_service_id: selectedService.id}">
|
||||
<!-- CIEF TODO: For easy revert to old code -->
|
||||
<!-- <list-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list')" :options="{per_page: 5, status: 2, owner_type: 'App\\Models\\Booking', type: 1, original_currency_id_in: [selectedCurrency.id], transaction_service_id: selectedService.id}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<supplier-pending-order-component :data="data" v-on:input="updateOrder($event)"></supplier-pending-order-component>
|
||||
</template>
|
||||
</list-component>
|
||||
</list-component> -->
|
||||
<list-polling-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list.job')" :options="{per_page: 5, status: 2, owner_type: 'App\\Models\\Booking', type: 1, original_currency_id_in: [selectedCurrency.id], transaction_service_id: selectedService.id}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<supplier-pending-order-component :data="data" v-on:input="updateOrder($event)"></supplier-pending-order-component>
|
||||
</template>
|
||||
</list-polling-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,7 +171,7 @@
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.submit(route('api.company.list') + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]}), 'get', 'pendingOrdersSection', false, false)
|
||||
this.submit(route('api.company.list') + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]}), 'get', 'pendingOrdersSection', false, false); //cief todo: Uncaught (in promise) null
|
||||
},
|
||||
methods: {
|
||||
successHandler(response){
|
||||
@@ -210,4 +216,4 @@
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
<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="isLoading"></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 && !isLoading && emptyListSection">
|
||||
<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" v-show="!isLoading">
|
||||
<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" v-show="!isLoading">
|
||||
<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 {}
|
||||
}
|
||||
},
|
||||
emptyListSection: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
filters: this.options,
|
||||
pollingInterval: null,
|
||||
isPolling: false,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.setDecoratorDefault();
|
||||
this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters}); //cief todo: Uncaught (in promise) null
|
||||
},
|
||||
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);
|
||||
let url = this.endpoint + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters);
|
||||
this.isLoading = true;
|
||||
this.submitJob(url);
|
||||
},
|
||||
//cief todo: remove?
|
||||
// updateFilters(filters){
|
||||
// this.filters = filters;
|
||||
// this.setDecoratorDefault();
|
||||
// console.log('updateFilters');
|
||||
// this.submit(this.endpoint + '?page=1&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false); //cief todo: Uncaught (in promise) null
|
||||
// },
|
||||
successHandler(response){
|
||||
let result = JSON.parse(response.payload.data.result);
|
||||
result.meta = {
|
||||
current_page: result.meta.current_page,
|
||||
first_page_url: result.meta.first_page_url,
|
||||
from: result.meta.from,
|
||||
last_page: result.meta.last_page,
|
||||
last_page_url: result.meta.last_page_url,
|
||||
next_page_url: result.meta.next_page_url,
|
||||
path: result.meta.path,
|
||||
per_page: result.meta.per_page,
|
||||
prev_page_url: result.meta.prev_page_url,
|
||||
to: result.meta.to,
|
||||
total: result.meta.total
|
||||
};
|
||||
|
||||
console.log('ListPolling:', JSON.stringify(result.meta));
|
||||
this.stopPolling();
|
||||
this.$store.dispatch('completeList', {'name': this.section, 'data': result.data});
|
||||
this.$refs.pagination.makePagination(result.meta, result.links);
|
||||
this.isLoading = false;
|
||||
},
|
||||
errorHandler(error){
|
||||
// console.log('ListPolling error:', JSON.stringify(error));
|
||||
this.isPolling = false;
|
||||
// this.isLoading = false;
|
||||
},
|
||||
startPolling(jobId, maxAttempts = 3) {
|
||||
let attempts = 0;
|
||||
const pollJobResult = () => {
|
||||
if (this.isPolling) {
|
||||
return;
|
||||
}
|
||||
this.isPolling = true;
|
||||
|
||||
attempts++;
|
||||
|
||||
if (attempts > maxAttempts) {
|
||||
clearInterval(this.pollingInterval);
|
||||
this.pollingInterval = null;
|
||||
this.isPolling = false;
|
||||
this.isLoading = false;
|
||||
console.log(`Reached maximum attempts (${maxAttempts}). Polling stopped.`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.fetchJobResult(jobId);
|
||||
};
|
||||
|
||||
// Initial call
|
||||
// pollJobResult();
|
||||
|
||||
// Set up polling interval
|
||||
this.pollingInterval = setInterval(pollJobResult, 10000);
|
||||
|
||||
},
|
||||
stopPolling() {
|
||||
clearInterval(this.pollingInterval);
|
||||
this.pollingInterval = null;
|
||||
this.isPolling = false;
|
||||
},
|
||||
submitJob(url){
|
||||
try {
|
||||
this.$store.dispatch('crudRequest', {endpoint: url, method: 'get'}).then(response => {
|
||||
let success = response.ok;
|
||||
response.json().then(response => {
|
||||
if(!success){return;}
|
||||
let jobId = response.payload.data.job_id;
|
||||
if(jobId){
|
||||
this.startPolling(jobId);
|
||||
}
|
||||
});
|
||||
})
|
||||
// this.job.progress = response.data.progress;
|
||||
// this.job.completed = response.data.completed;
|
||||
|
||||
// if (this.job.completed) {
|
||||
// this.stopPolling();
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error('Error submitJob', error);
|
||||
}
|
||||
},
|
||||
fetchJobResult(jobId) {
|
||||
try {
|
||||
let anotherEndpoint = route('api.job.fetch', jobId);
|
||||
this.submit(anotherEndpoint, 'get', this.section, false, false); //cief todo: Uncaught (in promise) null
|
||||
} catch (error) {
|
||||
console.error('Error fetchJobResult', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user