Skip to content

Add robust caching helpers #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aghil246 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add robust caching helpers #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 105 additions & 2 deletions modules/addons/caasify/views/view/includes/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,11 @@ app = createApp({
DataCentersAreLoaded: false,
DataCentersLength: 0,

// cache and pagination
ordersCurrentPage: 1,
ordersPerPage: 10,
ordersCountryFilter: '',

regions: [],
SelectedRegion: null,

Expand Down Expand Up @@ -530,6 +535,10 @@ app = createApp({
SelectedExpenseDate() {
this.loadExpenses()
},

ordersCountryFilter() {
this.ordersCurrentPage = 1
},
},

updated() {
Expand Down Expand Up @@ -833,6 +842,39 @@ app = createApp({
return listOforders
},

filteredActiveOrders() {
let list = this.activeorders
if (this.ordersCountryFilter) {
list = list.filter(order => {
const rec = order?.records?.[order.records.length - 1]
const cats = rec?.product?.categories
return Array.isArray(cats) && cats[0] === this.ordersCountryFilter
})
}
return list
},

paginatedActiveOrders() {
const start = (this.ordersCurrentPage - 1) * this.ordersPerPage
return this.filteredActiveOrders.slice(start, start + this.ordersPerPage)
},

totalOrderPages() {
return Math.ceil(this.filteredActiveOrders.length / this.ordersPerPage) || 1
},

orderDatacenterList() {
const set = new Set()
this.activeorders.forEach(order => {
const rec = order?.records?.[order.records.length - 1]
const cats = rec?.product?.categories
if (Array.isArray(cats) && cats.length) {
set.add(cats[0])
}
})
return Array.from(set)
},

chargeAmountInCaasifyCurrency() {
if (this.chargeAmountinWhmcs != null && this.CurrenciesRatioWhmcsToCloud != null) {
let value = this.convertFromWhmcsToCloud(this.chargeAmountinWhmcs)
Expand Down Expand Up @@ -1084,6 +1126,32 @@ app = createApp({
this.findValidControllers();
},

getCache(key) {
try {
const raw = localStorage.getItem(key)
if (raw) {
const obj = JSON.parse(raw)
if (Date.now() < obj.expiry) {
return obj.data
}
}
} catch (e) {
console.error('cache read error', e)
}
return null
},

setCache(key, data, ttlMs) {
try {
localStorage.setItem(key, JSON.stringify({
data: data,
expiry: Date.now() + ttlMs
}))
} catch (e) {
console.error('cache write error', e)
}
},

orderTypeClass(type){
if(type == 'vpn'){
return 'btn btn-outline-success'
Expand Down Expand Up @@ -1502,6 +1570,14 @@ app = createApp({
},

async LoadUserOrders() {
const cacheKey = 'caasify_user_orders'
const cached = this.getCache(cacheKey)
if (cached) {
this.UserOrders = cached
this.OrdersLoaded = true
return
}

let RequestLink = this.CreateRequestLink(action = 'UserOrders');
let response = await axios.get(RequestLink);

Expand All @@ -1511,6 +1587,7 @@ app = createApp({

if (response?.data?.data) {
this.UserOrders = response?.data?.data;
this.setCache(cacheKey, this.UserOrders, 5 * 60 * 1000)
} else if (response?.data?.message) {
console.error(response?.data?.message);
} else {
Expand Down Expand Up @@ -2388,6 +2465,16 @@ app = createApp({
async loadDataCenters() {
this.DataCentersAreLoaded = false

const cacheKey = 'caasify_datacenters'
const cached = this.getCache(cacheKey)
if (cached) {
this.DataCenters = cached
this.DataCentersLength = cached.length
this.DataCentersAreLoaded = true
this.plansAreLoaded = false
return
}

RequestLink = this.CreateRequestLink(action = 'CaasifyGetDataCenters');
let response = await axios.get(RequestLink);

Expand All @@ -2408,6 +2495,7 @@ app = createApp({
this.DataCentersAreLoaded = true
this.plansAreLoaded = false
this.DataCenters = response?.data?.data
this.setCache(cacheKey, this.DataCenters, 10 * 60 * 1000)
}
},

Expand Down Expand Up @@ -2523,6 +2611,15 @@ app = createApp({
this.plans = [];

if (this.SelectedRegion?.id) {
const cacheKey = 'caasify_plans_' + this.SelectedRegion.id
const cached = this.getCache(cacheKey)
if (cached) {
this.plans = cached
this.plansAreLoading = false
this.plansAreLoaded = true
return
}

let formData = new FormData();
formData.append('CategoryID', this.SelectedRegion?.id);
RequestLink = this.CreateRequestLink(action = 'CaasifyGetPlans');
Expand All @@ -2538,6 +2635,7 @@ app = createApp({
this.plansAreLoading = false;
this.plansAreLoaded = true;
this.plans = response?.data?.data
this.setCache(cacheKey, this.plans, 10 * 60 * 1000)
}
}
},
Expand Down Expand Up @@ -3077,6 +3175,12 @@ app = createApp({
}
},

changeOrdersPage(page) {
if (page >= 1 && page <= this.totalOrderPages) {
this.ordersCurrentPage = page
}
},

convertTime(time) {
const formatDate = (dateString) => {
const date = new Date(dateString);
Expand Down Expand Up @@ -3894,5 +3998,4 @@ app = createApp({
});

app.config.compilerOptions.isCustomElement = tag => tag === 'btn'
app.config.devtools = true;
app.mount('#app')
app.config.devtools = true;app.mount('#app')
27 changes: 23 additions & 4 deletions modules/addons/caasify/views/view/includes/indexparts/orderslist.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,21 @@
</div>

<!-- Has no orders -->
<div v-if="OrdersLoaded && activeorders == null">
<div v-if="OrdersLoaded && isEmpty(filteredActiveOrders)">
<p class="fs-5 ps-3 text-danger">
{{ lang('noactiveorder') }}
</p>
</div>

<!-- show activ orders -->
<div v-if="OrdersLoaded && activeorders != null">
<table v-if="!isEmpty(activeorders)" class="table table-borderless pb-5 mb-5"
<div v-if="OrdersLoaded && !isEmpty(filteredActiveOrders)">
<div class="mb-3">
<select class="form-select w-auto" v-model="ordersCountryFilter">
<option value="">{{ lang('All Locations') }}</option>
<option v-for="dc in orderDatacenterList" :value="dc">{{ dc }}</option>
</select>
</div>
<table v-if="!isEmpty(paginatedActiveOrders)" class="table table-borderless pb-5 mb-5"
style="--bs-table-bg: #ff000000;">
<thead>
<tr class="border-bottom text-center"
Expand All @@ -36,7 +42,7 @@
</tr>
</thead>
<tbody>
<tr class="border-bottom align-middle text-center text-danger" v-for="order in activeorders"
<tr class="border-bottom align-middle text-center text-danger" v-for="order in paginatedActiveOrders"
style="--bs-border-width: 1px !important; --bs-border-color: #e1e1e1 !important;">
<!-- ID -->
<td class="fw-medium">
Expand Down Expand Up @@ -89,6 +95,19 @@
</tr>
</tbody>
</table>
<nav v-if="totalOrderPages > 1" class="mt-3">
<ul class="pagination justify-content-center mb-0">
<li class="page-item" :class="{disabled: ordersCurrentPage === 1}">
<a class="page-link" href="#" @click.prevent="changeOrdersPage(ordersCurrentPage-1)">&laquo;</a>
</li>
<li class="page-item" v-for="page in totalOrderPages" :key="page" :class="{active: ordersCurrentPage === page}">
<a class="page-link" href="#" @click.prevent="changeOrdersPage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{disabled: ordersCurrentPage === totalOrderPages}">
<a class="page-link" href="#" @click.prevent="changeOrdersPage(ordersCurrentPage+1)">&raquo;</a>
</li>
</ul>
</nav>
<div class="row justify-content-around px-4" v-else>
<div class="d-flex flex-column justify-content-center align-ietms-center text-center mt-5 border rounded p-5 col-12 col-md-5 col-lg-4 border-secondary bg-primary" style="--bs-bg-opacity: 0.1; --bs-border-opacity: 0.1;">
<span class="text-dark fs-5 pe-3 mb-3">
Expand Down