dwindown/formipay-public
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize the backend for each coupon, customer and access functionalities

Browse Source
This commit is contained in:
dwindown
2025-09-24 21:46:03 +07:00
parent 4151ea3b9e
commit 6f6b039441
6 changed files with 70 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
admin/assets/css/page-coupons.css
View File

@@ -20,20 +20,23 @@ a#add-new-coupon:hover {
border: 1px solid #b7b7b7!important;
}
td.gridjs-td[data-column-id=productRelation] > span {
td.gridjs-td[data-column-id=amount] > span {
display: flex;
gap: .5em;
flex-wrap: wrap;
justify-content: center;
}
.product_related {
background-color: #dedede;
padding: 5px 7px;
td.gridjs-td[data-column-id=amount] > span > span {
display: flex;
gap: .5em;
align-items: center;
background-color: #f8f8f8;
padding: 3px 5px;
border-radius: 5px;
}
span.product_related img {
margin-bottom: -3px;
box-shadow: 0 3px 5px #ccc;
}
th.gridjs-th[data-column-id=id],
th.gridjs-th[data-column-id=amount],
th.gridjs-th[data-column-id=usages],
th.gridjs-th[data-column-id=type],
th.gridjs-th[data-column-id=dateLimit],
@@ -41,17 +44,13 @@ th.gridjs-th[data-column-id=status] {
text-align: center;
}
td.gridjs-td[data-column-id=id],
td.gridjs-td[data-column-id=amount],
td.gridjs-td[data-column-id=usages],
td.gridjs-td[data-column-id=type],
td.gridjs-td[data-column-id=dateLimit] {
text-align: center;
}
th.gridjs-th[data-column-id=amount],
td.gridjs-td[data-column-id=amount] {
text-align: right;
}
span:has(.status-label) {
width: 100%;
display: block;

101
admin/assets/js/page-coupons.js
View File

@@ -1,49 +1,3 @@
document.addEventListener('DOMContentLoaded', function () {
const choices = new Choices('#products', {
searchEnabled: true,
searchChoices: false, // Prevent Choices.js from filtering the local list
searchResultLimit: 10, // Optional: Limit visible results
placeholder: true,
placeholderValue: formipay_coupons_page.filter_form.products.placeholder,
noResultsText: formipay_coupons_page.filter_form.products.noresult_text,
itemSelectText: '',
});
const searchInput = document.querySelector('.choices__input--cloned');
let typingTimer;
searchInput.addEventListener('input', function () {
const query = searchInput.value;
if (query.length >= 3) {
clearTimeout(typingTimer);
typingTimer = setTimeout(() => {
fetchChoices(query);
}, 300); // Add a debounce delay
}
});
function fetchChoices(query) {
fetch(formipay_coupons_page.ajax_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: new URLSearchParams({
action: 'formipay_coupon_get_products',
search: query,
_wpnonce: formipay_coupons_page.nonce
}),
})
.then((response) => response.json())
.then((data) => {
choices.clearChoices();
choices.setChoices(data, 'value', 'label', false);
})
.catch((error) => console.error('Error:', error));
}
});
jQuery(function($){
let formipay_coupon_table_grid = new gridjs.Grid({
@@ -56,7 +10,7 @@ jQuery(function($){
}
return data.results.map(
coupon => [coupon.ID, coupon.ID, coupon.code, coupon.products, coupon.value, coupon.type, coupon.usages, coupon.date_limit, coupon.status, coupon.case_sensitive]
coupon => [coupon.ID, coupon.ID, coupon.code, coupon.value, coupon.type, coupon.usages, coupon.date_limit, coupon.status, coupon.case_sensitive]
);
},
total: data => data.total
@@ -83,40 +37,23 @@ jQuery(function($){
</span>
`)
},
{
name: formipay_coupons_page.columns.products,
formatter: (products, row) => {
let html = '';
// Loop through each product in the products array
if(products.length > 0){
products.forEach(product => {
if (product) {
const currencyDetails = product.currency.split(':::');
const currencyCode = currencyDetails[0];
const currencySymbol = currencyDetails[2];
html += `
<span class="product_related">
${product.title}<hr>
<span class="country-currency">
${product.flag ? `<img src="${product.flag}" height="18">` : ''}
<span class="currency-in-use">${currencyCode} (${currencySymbol})</span>
</span>
</span>
`;
}
});
}
return gridjs.html(html);
}
},
{
name: formipay_coupons_page.columns.amount,
formatter: (_, row) => numberFormat(_)
formatter: (_, row) => {
var amount = 'unset';
if(row.cells[4].data === 'Percentage') {
amount = numberFormat(_)+'%';
}
if(row.cells[4].data === 'Fixed'){
amount = '';
_.forEach(function(currency){
const splitRaw = currency.raw.split(':::');
const symbol = splitRaw[2] ? splitRaw[2] : splitRaw[0];
amount += `<span class="coupon-each-amount"><img src="${currency.flag}" width="18"><span class="amount-value">${symbol} ${currency.amount}</span></span>`;
})
}
return gridjs.html(amount);
}
},
{
name: formipay_coupons_page.columns.type,
@@ -215,16 +152,16 @@ jQuery(function($){
function refresh_table_with_filter() {
formipay_coupon_table_grid.updateConfig({
server: {
url: formipay_coupons_page.ajax_url+'?action=formipay-tabledata-coupons&product='+document.getElementById('products').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_coupons_page.nonce,
url: formipay_coupons_page.ajax_url+'?action=formipay-tabledata-coupons&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_coupons_page.nonce,
then: data => data.results.map(
coupon => [coupon.ID, coupon.ID, coupon.code, coupon.products, coupon.value, coupon.type, coupon.usages, coupon.date_limit, coupon.status, coupon.case_sensitive]
coupon => [coupon.ID, coupon.ID, coupon.code, coupon.value, coupon.type, coupon.usages, coupon.date_limit, coupon.status, coupon.case_sensitive]
),
total: data => data.total
}
}).forceRender();
}
$('.form-tool, #products, #post_status').on('change', function(){
$('.form-tool, #post_status').on('change', function(){
refresh_table_with_filter();
});

3
admin/page-coupons.php
View File

@@ -26,9 +26,6 @@
<a data-value="inactive"><?php echo esc_html__( 'Inactive', 'formipay' ); ?></a><span class="inactive-post-count"></span>
</div>
<div class="filter-bar">
<div class="products">
<select id="products" class="filter-products"></select>
</div>
<div class="search">
<input type="text" id="keyword" placeholder="Keyword" class="form-tool">
</div>