feat: filters on the subscriptions page

feat: search subscriptions by name
ellite · Mar 9, 2024 · a396285 · a396285
1 parent 07f4647
commit a396285
Show file tree

Hide file tree

Showing 18 changed files with 438 additions and 114 deletions.
diff --git a/endpoints/subscriptions/get.php b/endpoints/subscriptions/get.php
@@ -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
         }
     }

diff --git a/includes/i18n/de.php b/includes/i18n/de.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

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

diff --git a/includes/i18n/en.php b/includes/i18n/en.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

diff --git a/includes/i18n/es.php b/includes/i18n/es.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

diff --git a/includes/i18n/fr.php b/includes/i18n/fr.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

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

diff --git a/includes/i18n/pt.php b/includes/i18n/pt.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

diff --git a/includes/i18n/pt_br.php b/includes/i18n/pt_br.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

diff --git a/includes/i18n/tr.php b/includes/i18n/tr.php
@@ -28,6 +28,7 @@
     "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 @@
     "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",

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

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

diff --git a/includes/list_subscriptions.php b/includes/list_subscriptions.php
@@ -98,7 +98,7 @@ function printSubscriptions($subscriptions, $sort, $categories, $members, $i18n)
                 $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>

diff --git a/includes/version.php b/includes/version.php
@@ -1,3 +1,3 @@
 <?php
-    $version = "v1.14.1";
+    $version = "v1.15.0";
 ?>
diff --git a/index.php b/index.php
@@ -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>