feat: filters on the subscriptions page

ellite · Mar 9, 2024 · 6bd46a0 · 6bd46a0
1 parent ec8fa03
commit 6bd46a0
Show file tree

Hide file tree

Showing 17 changed files with 371 additions and 105 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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -48,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
@@ -51,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
@@ -48,6 +48,8 @@
     "years"           => "年",
     "external_url"    => "檢視外部連結",
     "empty_page"      => "空白頁面",
+    "clear_filters"   => "清除篩選",
+    "no_matching_subscriptions" => "沒有符合的訂閱",
     // 訂閱表單
     "add_subscription" => "新增訂閱",
     "edit_subscription" => "編輯訂閱",

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,14 +50,94 @@
           <img class="button-icon" src="images/siteicons/plusicon.png">
           <?= translate('new_subscription', $i18n) ?>
         </button>
-        <div class="actions">
+        <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">
-              <img src="images/siteicons/sort.png" class="button-icon" /> <?= translate('sort', $i18n) ?>
+            <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>