joshuacoles/wallos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: filters on the subscriptions page

Browse Source 
feat: search subscriptions by name
This commit is contained in:
Miguel Ribeiro 2024-03-09 18:12:07 +01:00 committed by GitHub
parent 07f464741f
commit a396285b76
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 444 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
endpoints/subscriptions/get.php
View File

@ -24,10 +24,30 @@
if ($sort == "price" || $sort == "id") {
$order = "DESC";
}
if (in_array($sort, $allowedSortCriteria)) {
$sql = "SELECT * FROM subscriptions ORDER BY $sort $order, inactive ASC";
if (!in_array($sort, $allowedSortCriteria)) {
$sort = "next_payment";
}
}
$sql = "SELECT * FROM subscriptions WHERE 1=1";
if (isset($_GET['category']) && $_GET['category'] != "") {
$category = $_GET['category'];
$sql .= " AND category_id = $category";
}
if (isset($_GET['payment']) && $_GET['payment'] != "") {
$payment = $_GET['payment'];
$sql .= " AND payment_method_id = $payment";
}
if (isset($_GET['member']) && $_GET['member'] != "") {
$member = $_GET['member'];
$sql .= " AND payer_user_id = $member";
}
$sql .= " ORDER BY $sort $order, inactive ASC";
$result = $db->query($sql);
if ($result) {
@ -76,16 +96,16 @@
if (count($subscriptions) == 0) {
?>
<div class="empty-page">
<img src="images/siteimages/empty.png" alt="<?= translate('empty_page', $i18n) ?>" />
<p>
<?= translate('no_subscriptions_yet', $i18n) ?>
</p>
<button class="button" onClick="addSubscription()">
<img class="button-icon" src="images/siteicons/plusicon.png">
<?= translate('add_first_subscription', $i18n) ?>
</button>
</div>
<div class="no-matching-subscriptions">
<p>
<?= translate('no_matching_subscriptions', $i18n) ?>
</p>
<button class="button" onClick="clearFilters()">
<span clasS="fa-solid fa-minus-circle"></span>
<?= translate('clear_filters', $i18n) ?>
</button>
<img src="images/siteimages/empty.png" alt="<?= translate('empty_page', $i18n) ?>" />
</div>
<?php
}
}

3
includes/i18n/de.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Keine Abonnements hinzugefügt",
"add_first_subscription" => "Erstes Abonnement hinzufügen",
'new_subscription' => "Neues Abonnement",
'search' => "Suche",
'sort' => "Sortieren",
'name' => "Bezeichnung",
'last_added' => "Zuletzt hinzugefügt",
@ -47,6 +48,8 @@ $i18n = [
"years" => "Jahre",
"external_url" => "Externe URL besuchen",
"empty_page" => "Leere Seite",
"clear_filters" => "Filter zurücksetzen",
"no_matching_subscriptions" => "Keine passenden Abonnements gefunden",
// Subscription form
"add_subscription" => "Abonnement hinzufügen",
"edit_subscription" => "Abonnement editieren",

3
includes/i18n/el.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Δεν υπάρχουν καταχωρημένες συνδρομές",
"add_first_subscription" => "Προσθήκη πρώτης συνδρομής",
'new_subscription' => "Νέα συνδρομή",
'search' => "Αναζήτηση",
'sort' => "Ταξινόμηση",
'name' => "Όνομα",
'last_added' => "Τελευταία προσθήκη",
@ -47,6 +48,8 @@ $i18n = [
"years" => "χρόνια",
"external_url" => "Επίσκεψη εξωτερικού συνδέσμου",
"empty_page" => "Κενή σελίδα",
"clear_filters" => "Καθαρισμός φίλτρων",
"no_matching_subscriptions" => "Δεν υπάρχουν συνδρομές που ταιριάζουν με τα φίλτρα σου",
// Subscription form
"add_subscription" => "Προσθήκη συνδρομής",
"edit_subscription" => "Επεξεργασία συνδρομής",

3
includes/i18n/en.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "You don't have any subscriptions yet",
"add_first_subscription" => "Add first subscription",
'new_subscription' => "New Subscription",
'search' => "Search",
'sort' => "Sort",
'name' => "Name",
'last_added' => "Last Added",
@ -47,6 +48,8 @@ $i18n = [
"years" => "years",
"external_url" => "Visit External URL",
"empty_page" => "Empty Page",
"clear_filters" => "Clear Filters",
"no_matching_subscriptions" => "No matching subscriptions",
// Subscription form
"add_subscription" => "Add subscription",
"edit_subscription" => "Edit subscription",

3
includes/i18n/es.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Aún no tienes ninguna suscripción",
"add_first_subscription" => "Añadir primera suscripción",
'new_subscription' => "Nueva Suscripción",
'search' => "Buscar",
'sort' => "Ordenar",
'name' => "Nombre",
'last_added' => "Última Añadida",
@ -47,6 +48,8 @@ $i18n = [
"years" => "años",
"external_url" => "Visitar URL Externa",
"empty_page" => "Página Vacía",
"clear_filters" => "Limpiar Filtros",
"no_matching_subscriptions" => "No hay suscripciones que coincidan con los filtros",
// Subscription form
"add_subscription" => "Añadir suscripción",
"edit_subscription" => "Editar suscripción",

3
includes/i18n/fr.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Vous n'avez pas encore d'abonnement",
"add_first_subscription" => "Ajoutez le premier abonnement",
'new_subscription' => "Nouvel abonnement",
'search' => "Rechercher",
'sort' => "Trier",
'name' => "Nom",
'last_added' => "Dernier ajouté",
@ -47,6 +48,8 @@ $i18n = [
"years" => "années",
"external_url" => "Visiter l'URL externe",
"empty_page" => "Page vide",
"clear_filters" => "Effacer les filtres",
"no_matching_subscriptions" => "Aucun abonnement ne correspond à vos critères de recherche",
// Formulaire d'abonnement
"add_subscription" => "Ajouter un abonnement",
"edit_subscription" => "Modifier l'abonnement",

3
includes/i18n/jp.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "まだ定期購入がありません",
"add_first_subscription" => "最初の定期購入を追加する",
'new_subscription' => "新しい定期購入",
'search' => "検索",
'sort' => "並べ替え",
'name' => "名前",
'last_added' => "最終追加日",
@ -47,6 +48,8 @@ $i18n = [
"years" => "年毎",
"external_url" => "外部URLにアクセス",
"empty_page" => "空のページ",
"clear_filters" => "フィルタをクリア",
"no_matching_subscriptions" => "一致する定期購入がありません",
// Subscription form
"add_subscription" => "定期購入の追加",
"edit_subscription" => "定期購入の編集",

3
includes/i18n/pt.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Ainda não tem subscrições",
"add_first_subscription" => "Adicionar primeira subscrição",
'new_subscription' => "Nova Subscrição",
'search' => "Pesquisar",
'sort' => "Ordenar",
'name' => "Nome",
'last_added' => "Última Adicionada",
@ -47,6 +48,8 @@ $i18n = [
"years" => "anos",
"external_url" => "Visitar URL Externo",
"empty_page" => "Página Vazia",
"clear_filters" => "Limpar Filtros",
"no_matching_subscriptions" => "Sem subscrições correspondentes",
// Subscription form
"add_subscription" => "Adicionar subscrição",
"edit_subscription" => "Modificar subscrição",

3
includes/i18n/pt_br.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Você ainda não tem nenhuma assinatura",
"add_first_subscription" => "Adicionar a primeira assinatura",
'new_subscription' => "Nova assinatura",
'search' => "Pesquisar",
'sort' => "Ordenar",
'name' => "Nome",
'last_added' => "Última adicionada",
@ -47,6 +48,8 @@ $i18n = [
"years" => "anos",
"external_url" => "Abrir URL externa",
"empty_page" => "Página vazia",
"clear_filters" => "Limpar filtros",
"no_matching_subscriptions" => "Nenhuma assinatura encontrada",
// Subscription form
"add_subscription" => "Adicionar assinatura",
"edit_subscription" => "Editar assinatura",

3
includes/i18n/tr.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "Henüz herhangi bir aboneliğiniz yok",
"add_first_subscription" => "İlk aboneliği ekle",
'new_subscription' => "Yeni Abonelik",
'search' => "Ara",
'sort' => "Sırala",
'name' => "İsim",
'last_added' => "Son Eklenen",
@ -47,6 +48,8 @@ $i18n = [
"years" => "yıllar",
"external_url" => "Harici URL'yi Ziyaret Et",
"empty_page" => "Boş Sayfa",
"clear_filters" => "Filtreleri Temizle",
"no_matching_subscriptions" => "Eşleşen abonelik bulunamadı",
// Subscription form
"add_subscription" => "Abonelik ekle",
"edit_subscription" => "Aboneliği düzenle",

3
includes/i18n/zh_cn.php
View File

@ -31,6 +31,7 @@ $i18n = [
"no_subscriptions_yet" => "您还没有任何订阅",
"add_first_subscription" => "添加首个订阅",
'new_subscription' => "新订阅",
'search' => "搜索",
'sort' => "排序",
'name' => "名称",
'last_added' => "创建时间",
@ -50,6 +51,8 @@ $i18n = [
"years" => "年",
"external_url" => "访问外部链接",
"empty_page" => "空白页面",
"clear_filters" => "清除筛选",
"no_matching_subscriptions" => "没有匹配的订阅",
// 订阅表单
"add_subscription" => "添加订阅",

3
includes/i18n/zh_tw.php
View File

@ -28,6 +28,7 @@ $i18n = [
"no_subscriptions_yet" => "目前還沒有任何訂閱",
"add_first_subscription" => "新增第一個訂閱",
'new_subscription' => "新訂閱",
'search' => "搜尋",
'sort' => "排序",
'name' => "名稱",
'last_added' => "建立時間",
@ -47,6 +48,8 @@ $i18n = [
"years" => "年",
"external_url" => "檢視外部連結",
"empty_page" => "空白頁面",
"clear_filters" => "清除篩選",
"no_matching_subscriptions" => "沒有符合的訂閱",
// 訂閱表單
"add_subscription" => "新增訂閱",
"edit_subscription" => "編輯訂閱",

2
includes/list_subscriptions.php
View File

@ -98,7 +98,7 @@
$currentPaymentMethodId = $subscription['payment_method_id'];
}
?>
<div class="subscription<?= $subscription['inactive'] ? ' inactive' : '' ?>" onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>">
<div class="subscription<?= $subscription['inactive'] ? ' inactive' : '' ?>" onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>" data-name="<?= $subscription['name'] ?>">
<div class="subscription-main">
<span class="logo"><img src="<?= $subscription['logo'] ?>"></span>
<span class="name"><?= $subscription['name'] ?></span>

2
includes/version.php
View File

@ -1,3 +1,3 @@
<?php
$version = "v1.14.1";
$version = "v1.15.0";
?>

114
index.php
View File

@ -50,20 +50,106 @@
<img class="button-icon" src="images/siteicons/plusicon.png">
<?= translate('new_subscription', $i18n) ?>
</button>
<div class="sort-container">
<button class="button" value="Sort" onClick="toggleSortOptions()" id="sort-button">
<img src="images/siteicons/sort.png" class="button-icon" /> <?= translate('sort', $i18n) ?>
</button>
<div class="sort-options" id="sort-options">
<ul>
<li <?= $sort == "name" ? 'class="selected"' : "" ?> onClick="setSortOption('name')" id="sort-name"><?= translate('name', $i18n) ?></li>
<li <?= $sort == "id" ? 'class="selected"' : "" ?> onClick="setSortOption('id')" id="sort-id"><?= translate('last_added', $i18n) ?></li>
<li <?= $sort == "price" ? 'class="selected"' : "" ?> onClick="setSortOption('price')" id="sort-price"><?= translate('price', $i18n) ?></li>
<li <?= $sort == "next_payment" ? 'class="selected"' : "" ?> onClick="setSortOption('next_payment')" id="sort-next_payment"><?= translate('next_payment', $i18n) ?></li>
<li <?= $sort == "payer_user_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payer_user_id')" id="sort-payer_user_id"><?= translate('member', $i18n) ?></li>
<li <?= $sort == "category_id" ? 'class="selected"' : "" ?> onClick="setSortOption('category_id')" id="sort-category_id"><?= translate('category', $i18n) ?></li>
<li <?= $sort == "payment_method_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payment_method_id')" id="sort-payment_method_id"><?= translate('payment_method', $i18n) ?></li>
</ul>
<div class="top-actions">
<div class="search">
<input type="text" autocomplete="off" name="search" id="search" placeholder="<?= translate('search', $i18n) ?>" onkeyup="searchSubscriptions()" />
<span class="fa-solid fa-magnifying-glass search-icon"></span>
</div>
<div class="filtermenu on-dashboard">
<button class="button" id="filtermenu-button" title="<?= translate("filter", $i18n) ?>">
<i class="fa-solid fa-filter"></i>
</button>
<div class="filtermenu-content">
<?php
if (count($members) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('member')"><?= translate("member", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-member">
<?php
foreach ($members as $member) {
$selectedClass = '';
if (isset($_GET['member']) && $_GET['member'] == $member['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-memberid="<?= $member['id'] ?>"><?= $member['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (count($categories) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('category')"><?= translate("category", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-category">
<?php
foreach ($categories as $category) {
$selectedClass = '';
if (isset($_GET['category']) && $_GET['category'] == $category['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-categoryid="<?= $category['id'] ?>"><?= $category['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (count($payment_methods) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('payment')"><?= translate("payment_method", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-payment">
<?php
foreach ($payment_methods as $payment) {
$selectedClass = '';
if (isset($_GET['payment']) && $_GET['payment'] == $payment['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-paymentid="<?= $payment['id'] ?>"><?= $payment['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<div class="filtermenu-submenu hide" id="clear-filters">
<div class="filter-title filter-clear" onClick="clearFilters()">
<i class="fa-solid fa-times-circle"></i> <?= translate("clear", $i18n) ?>
</div>
</div>
</div>
</div>
<div class="sort-container">
<button class="button" value="Sort" onClick="toggleSortOptions()" id="sort-button" title="<?= translate('sort', $i18n) ?>">
<img src="images/siteicons/sort.png" class="button-icon" />
</button>
<div class="sort-options" id="sort-options">
<ul>
<li <?= $sort == "name" ? 'class="selected"' : "" ?> onClick="setSortOption('name')" id="sort-name"><?= translate('name', $i18n) ?></li>
<li <?= $sort == "id" ? 'class="selected"' : "" ?> onClick="setSortOption('id')" id="sort-id"><?= translate('last_added', $i18n) ?></li>
<li <?= $sort == "price" ? 'class="selected"' : "" ?> onClick="setSortOption('price')" id="sort-price"><?= translate('price', $i18n) ?></li>
<li <?= $sort == "next_payment" ? 'class="selected"' : "" ?> onClick="setSortOption('next_payment')" id="sort-next_payment"><?= translate('next_payment', $i18n) ?></li>
<li <?= $sort == "payer_user_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payer_user_id')" id="sort-payer_user_id"><?= translate('member', $i18n) ?></li>
<li <?= $sort == "category_id" ? 'class="selected"' : "" ?> onClick="setSortOption('category_id')" id="sort-category_id"><?= translate('category', $i18n) ?></li>
<li <?= $sort == "payment_method_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payment_method_id')" id="sort-payment_method_id"><?= translate('payment_method', $i18n) ?></li>
</ul>
</div>
</div>
</div>
</header>

143
scripts/dashboard.js
View File

@ -238,7 +238,17 @@ function closeLogoSearch() {
function fetchSubscriptions() {
const subscriptionsContainer = document.querySelector("#subscriptions");
const getSubscriptions = "endpoints/subscriptions/get.php";
let getSubscriptions = "endpoints/subscriptions/get.php";
if (activeFilters['category'] !== "") {
getSubscriptions += `?category=${activeFilters['category']}`;
}
if (activeFilters['member'] !== "") {
getSubscriptions += getSubscriptions.includes("?") ? `&member=${activeFilters['member']}` : `?member=${activeFilters['member']}`;
}
if (activeFilters['payment'] !== "") {
getSubscriptions += getSubscriptions.includes("?") ? `&payment=${activeFilters['payment']}` : `?payment=${activeFilters['payment']}`;
}
fetch(getSubscriptions)
.then(response => response.text())
@ -246,8 +256,8 @@ function fetchSubscriptions() {
if (data) {
subscriptionsContainer.innerHTML = data;
const mainActions = document.querySelector("#main-actions");
if (data.includes("empty-page")) {
mainActions.classList.add("hidden");
if (data.includes("no-matching-subscriptions")) {
// mainActions.classList.add("hidden");
} else {
mainActions.classList.remove("hidden");
}
@ -319,4 +329,129 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#sort-options').addEventListener('focus', function() {
isSortOptionsOpen = true;
});
});
});
function searchSubscriptions() {
const searchInput = document.querySelector("#search");
const searchTerm = searchInput.value.trim().toLowerCase();
const subscriptions = document.querySelectorAll(".subscription");
subscriptions.forEach(subscription => {
const name = subscription.getAttribute('data-name').toLowerCase();
if (!name.includes(searchTerm)) {
subscription.classList.add("hide");
} else {
subscription.classList.remove("hide");
}
});
}
function closeSubMenus() {
var subMenus = document.querySelectorAll('.filtermenu-submenu-content');
subMenus.forEach(subMenu => {
subMenu.classList.remove('is-open');
});
}
const activeFilters = [];
activeFilters['category'] = "";
activeFilters['member'] = "";
activeFilters['payment'] = "";
document.addEventListener("DOMContentLoaded", function() {
var filtermenu = document.querySelector('#filtermenu-button');
filtermenu.addEventListener('click', function() {
this.parentElement.querySelector('.filtermenu-content').classList.toggle('is-open');
closeSubMenus();
});
document.addEventListener('click', function(e) {
var filtermenuContent = document.querySelector('.filtermenu-content');
if (filtermenuContent.classList.contains('is-open')) {
var subMenus = document.querySelectorAll('.filtermenu-submenu');
var clickedInsideSubmenu = Array.from(subMenus).some(subMenu => subMenu.contains(e.target) || subMenu === e.target);
if (!filtermenu.contains(e.target) && !clickedInsideSubmenu) {
closeSubMenus();
filtermenuContent.classList.remove('is-open');
}
}
});
});
function toggleSubMenu(subMenu) {
var subMenu = document.getElementById("filter-" + subMenu);
if (subMenu.classList.contains("is-open")) {
closeSubMenus();
} else {
closeSubMenus();
subMenu.classList.add("is-open");
}
}
document.querySelectorAll('.filter-item').forEach(function(item) {
item.addEventListener('click', function(e) {
const searchInput = document.querySelector("#search");
searchInput.value = "";
if (this.hasAttribute('data-categoryid')) {
const categoryId = this.getAttribute('data-categoryid');
if (activeFilters['category'] === categoryId) {
activeFilters['category'] = "";
this.classList.remove('selected');
} else {
activeFilters['category'] = categoryId;
Array.from(this.parentNode.children).forEach(sibling => {
sibling.classList.remove('selected');
});
this.classList.add('selected');
}
} else if (this.hasAttribute('data-memberid')) {
const memberId = this.getAttribute('data-memberid');
if (activeFilters['member'] === memberId) {
activeFilters['member'] = "";
this.classList.remove('selected');
} else {
activeFilters['member'] = memberId;
Array.from(this.parentNode.children).forEach(sibling => {
sibling.classList.remove('selected');
});
this.classList.add('selected');
}
} else if (this.hasAttribute('data-paymentid')) {
const paymentId = this.getAttribute('data-paymentid');
if (activeFilters['payment'] === paymentId) {
activeFilters['payment'] = "";
this.classList.remove('selected');
} else {
activeFilters['payment'] = paymentId;
Array.from(this.parentNode.children).forEach(sibling => {
sibling.classList.remove('selected');
});
this.classList.add('selected');
}
}
if (activeFilters['category'] !== "" || activeFilters['member'] !== "" || activeFilters['payment'] !== "") {
document.querySelector('#clear-filters').classList.remove('hide');
} else {
document.querySelector('#clear-filters').classList.add('hide');
}
fetchSubscriptions();
});
});
function clearFilters() {
const searchInput = document.querySelector("#search");
searchInput.value = "";
activeFilters['category'] = "";
activeFilters['member'] = "";
activeFilters['payment'] = "";
document.querySelectorAll('.filter-item').forEach(function(item) {
item.classList.remove('selected');
});
document.querySelector('#clear-filters').classList.add('hide');
fetchSubscriptions();
}

165
stats.php
View File

@ -202,89 +202,90 @@ $numberOfElements = 6;
<?= translate('general_statistics', $i18n) ?> <span class="header-subtitle"><?= $statsSubtitle ?></span>
</h2>
<div class="filtermenu">
<button class="button" id="filtermenu-button">
<i class="fa-solid fa-filter"></i>
<?= translate("filter", $i18n) ?>
</button>
<div class="filtermenu-content">
<?php
if (count($members) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('member')"><?= translate("member", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-member">
<?php
foreach ($members as $member) {
$selectedClass = '';
if (isset($_GET['member']) && $_GET['member'] == $member['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-memberid="<?= $member['id'] ?>"><?= $member['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (count($categories) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('category')"><?= translate("category", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-category">
<?php
foreach ($categories as $category) {
$selectedClass = '';
if (isset($_GET['category']) && $_GET['category'] == $category['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-categoryid="<?= $category['id'] ?>"><?= $category['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (count($paymentMethodCount) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('payment')"><?= translate("payment_method", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-payment">
<?php
foreach ($paymentMethodCount as $payment) {
$selectedClass = '';
if (isset($_GET['payment']) && $_GET['payment'] == $payment['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-paymentid="<?= $payment['id'] ?>"><?= $payment['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (isset($_GET['member']) || isset($_GET['category']) || isset($_GET['payment'])) {
?>
<div class="filtermenu-submenu">
<div class="filter-title filter-clear" onClick="clearFilters()">
<i class="fa-solid fa-times-circle"></i> <?= translate("clear", $i18n) ?>
</div>
</div>
<button class="button" id="filtermenu-button">
<i class="fa-solid fa-filter"></i>
<?= translate("filter", $i18n) ?>
</button>
<div class="filtermenu-content">
<?php
if (count($members) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('member')"><?= translate("member", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-member">
<?php
}
?>
</div>
foreach ($members as $member) {
$selectedClass = '';
if (isset($_GET['member']) && $_GET['member'] == $member['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-memberid="<?= $member['id'] ?>"><?= $member['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (count($categories) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('category')"><?= translate("category", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-category">
<?php
foreach ($categories as $category) {
$selectedClass = '';
if (isset($_GET['category']) && $_GET['category'] == $category['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-categoryid="<?= $category['id'] ?>"><?= $category['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (count($paymentMethodCount) > 1) {
?>
<div class="filtermenu-submenu">
<div class="filter-title" onClick="toggleSubMenu('payment')"><?= translate("payment_method", $i18n) ?></div>
<div class="filtermenu-submenu-content" id="filter-payment">
<?php
foreach ($paymentMethodCount as $payment) {
$selectedClass = '';
if (isset($_GET['payment']) && $_GET['payment'] == $payment['id']) {
$selectedClass = 'selected';
}
?>
<div class="filter-item <?= $selectedClass ?>" data-paymentid="<?= $payment['id'] ?>"><?= $payment['name'] ?></div>
<?php
}
?>
</div>
</div>
<?php
}
?>
<?php
if (isset($_GET['member']) || isset($_GET['category']) || isset($_GET['payment'])) {
?>
<div class="filtermenu-submenu">
<div class="filter-title filter-clear" onClick="clearFilters()">
<i class="fa-solid fa-times-circle"></i> <?= translate("clear", $i18n) ?>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>

61
styles/styles.css
View File

@ -163,7 +163,7 @@ main > .contain {
margin: 0px 0px 20px 0px;
display: flex;
flex-direction: row;
justify-content: end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
position: relative;
@ -176,6 +176,7 @@ main > .contain {
@media (max-width: 768px) {
.main-actions {
justify-content: space-between;
flex-direction: column-reverse;
}
}
@ -187,12 +188,13 @@ main > .contain {
font-weight: 500;
text-align: center;
vertical-align: middle;
justify-content: center;
cursor: pointer;
user-select: none;
color: #fff;
border: 1px solid #007bff;
background-color: #007bff;
padding: 14px 30px;
padding: 15px 30px;
font-size: 1rem;
border-radius: 8px;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
@ -208,6 +210,28 @@ main > .contain {
padding: 14px 20px;
}
.top-actions {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
width: auto;
}
.top-actions .search {
flex-grow: 1;
}
.top-actions > .search > .search-icon {
float: right;
right: 15px;
margin-top: -35px;
position: relative;
z-index: 2;
color: #007bff;
font-size: 20px;
}
.subscriptions {
display: flex;
flex-direction: column;
@ -229,6 +253,10 @@ main > .contain {
cursor: pointer;
}
.subscription.hide {
display: none;
}
.subscription.inactive {
opacity: 0.6;
}
@ -380,7 +408,8 @@ main > .contain {
margin-right: 0px;;
}
.empty-page {
.empty-page,
.no-matching-subscriptions {
display: block;
max-width: 90%;
margin: auto;
@ -388,15 +417,25 @@ main > .contain {
font-size: 20px;
}
.empty-page > img {
.empty-page > img,
.no-matching-subscriptions > img {
max-width: 100%;
}
.no-matching-subscriptions > img {
margin-top: 30px;
}
.empty-page > p {
margin: 5px 0px 40px 0px;
}
.empty-page > button {
.no-matching-subscriptions > p {
margin: 30px 0px 40px 0px;
}
.empty-page > button,
.no-matching-subscriptions > button {
margin: 0px auto;
}
@ -1378,7 +1417,13 @@ input[type="checkbox"] {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 3;
overflow: hidden;
margin-top: 4px;
margin-top: 6px;
}
@media (max-width: 354px) {
.on-dashboard .filtermenu-content {
right: -94px;
}
}
.filtermenu-content.is-open {
@ -1395,6 +1440,10 @@ input[type="checkbox"] {
user-select: none;
}
.filtermenu-content .filtermenu-submenu.hide {
display: none;
}
.filtermenu-content .filtermenu-submenu:last-of-type .filter-title {
border-bottom: none;
}