feat: add button to clean up search field

fix: cases where theme and sort cookies could be missing fix: position of dropdown on rtl layout
ellite · Sep 18, 2024 · da3ee78 · da3ee78
1 parent 75c78f3
commit da3ee78
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 16 deletions.
diff --git a/includes/getsettings.php b/includes/getsettings.php
@@ -7,14 +7,9 @@
 
 $settings = $result->fetchArray(SQLITE3_ASSOC);
 if ($settings) {
-    $cookieExpire = time() + (30 * 24 * 60 * 60);
     $themeMapping = array(0 => 'light', 1 => 'dark', 2 => 'automatic');
     $themeKey = isset($settings['dark_theme']) ? $settings['dark_theme'] : 2;
     $themeValue = $themeMapping[$themeKey];
-    setcookie('theme', $themeValue, [
-        'expires' => $cookieExpire,
-        'samesite' => 'Strict'
-    ]);
     $settings['update_theme_setttings'] = false;
     if (isset($_COOKIE['inUseTheme']) && $settings['dark_theme'] == 2) {
         $inUseTheme = $_COOKIE['inUseTheme'];

diff --git a/includes/header.php b/includes/header.php
@@ -38,6 +38,14 @@
     $customCss = $settings['customCss'];
   }
 
+  if (isset($themeValue)) {
+    $cookieExpire = time() + (30 * 24 * 60 * 60);
+    setcookie('theme', $themeValue, [
+      'expires' => $cookieExpire,
+      'samesite' => 'Strict'
+    ]);
+  }
+
   $isAdmin = $_SESSION['userId'] == 1;
 
   function hex2rgb($hex) {

diff --git a/includes/version.php b/includes/version.php
@@ -1,3 +1,3 @@
 <?php
-$version = "v2.23.2";
+$version = "v2.24.0";
 ?>
diff --git a/index.php b/index.php
@@ -155,6 +155,7 @@
         <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>
+        <span class="fa-solid fa-xmark clear-search" onClick="clearSearch()"></span>
       </div>
 
       <div class="filtermenu on-dashboard">

diff --git a/login.php b/login.php
@@ -20,6 +20,8 @@
     exit();
 }
 
+$cookieExpire = time() + (30 * 24 * 60 * 60);
+
 // Check if login is disabled
 $adminQuery = "SELECT login_disabled FROM admin";
 $adminResult = $db->query($adminQuery);
@@ -50,12 +52,18 @@
         $_SESSION['loggedin'] = true;
         $_SESSION['main_currency'] = $main_currency;
         $_SESSION['userId'] = $userId;
-        $cookieExpire = time() + (30 * 24 * 60 * 60);
         setcookie('language', $language, [
             'expires' => $cookieExpire,
             'samesite' => 'Strict'
         ]);
 
+        if (!isset($_COOKIE['sortOrder'])) {
+            setcookie('sortOrder', 'next_payment', [
+                'expires' => $cookieExpire,
+                'samesite' => 'Strict'
+            ]);
+        }
+
         $query = "SELECT color_theme FROM settings";
         $stmt = $db->prepare($query);
         $result = $stmt->execute();
@@ -126,22 +134,28 @@
                 $_SESSION['loggedin'] = true;
                 $_SESSION['main_currency'] = $main_currency;
                 $_SESSION['userId'] = $userId;
-                $cookieExpire = time() + (30 * 24 * 60 * 60);
                 setcookie('language', $language, [
                     'expires' => $cookieExpire,
                     'samesite' => 'Strict'
                 ]);
 
-                if ($rememberMe) {
-                    $query = "SELECT color_theme FROM settings";
-                    $stmt = $db->prepare($query);
-                    $result = $stmt->execute();
-                    $settings = $result->fetchArray(SQLITE3_ASSOC);
-                    setcookie('colorTheme', $settings['color_theme'], [
+                if (!isset($_COOKIE['sortOrder'])) {
+                    setcookie('sortOrder', 'next_payment', [
                         'expires' => $cookieExpire,
                         'samesite' => 'Strict'
                     ]);
+                }
 
+                $query = "SELECT color_theme FROM settings";
+                $stmt = $db->prepare($query);
+                $result = $stmt->execute();
+                $settings = $result->fetchArray(SQLITE3_ASSOC);
+                setcookie('colorTheme', $settings['color_theme'], [
+                    'expires' => $cookieExpire,
+                    'samesite' => 'Strict'
+                ]);
+
+                if ($rememberMe) {
                     $token = bin2hex(random_bytes(32));
                     $addLoginTokens = "INSERT INTO login_tokens (user_id, token) VALUES (:userId, :token)";
                     $addLoginTokensStmt = $db->prepare($addLoginTokens);

diff --git a/scripts/dashboard.js b/scripts/dashboard.js
@@ -442,8 +442,15 @@ document.addEventListener('DOMContentLoaded', function () {
 
 function searchSubscriptions() {
   const searchInput = document.querySelector("#search");
+  const searchContainer = searchInput.parentElement;
   const searchTerm = searchInput.value.trim().toLowerCase();
 
+  if (searchTerm.length > 0) {
+    searchContainer.classList.add("has-text");
+  } else {
+    searchContainer.classList.remove("has-text");
+  }
+
   const subscriptions = document.querySelectorAll(".subscription");
   subscriptions.forEach(subscription => {
     const name = subscription.getAttribute('data-name').toLowerCase();
@@ -455,6 +462,13 @@ function searchSubscriptions() {
   });
 }
 
+function clearSearch() {
+  const searchInput = document.querySelector("#search");
+
+  searchInput.value = "";
+  searchSubscriptions();
+}
+
 function closeSubMenus() {
   var subMenus = document.querySelectorAll('.filtermenu-submenu-content');
   subMenus.forEach(subMenu => {

diff --git a/styles/styles.css b/styles/styles.css
@@ -277,7 +277,12 @@ button:hover svg .main-color {
   flex-grow: 1;
 }
 
-.top-actions>.search>.search-icon {
+.top-actions .search > input[type="text"] {
+  padding-right: 40px;
+}
+
+.top-actions>.search>.search-icon,
+.top-actions>.search>.clear-search  {
   float: right;
   right: 15px;
   margin-top: -35px;
@@ -287,7 +292,21 @@ button:hover svg .main-color {
   font-size: 20px;
 }
 
-.rtl .top-actions>.search>.search-icon {
+.top-actions>.search>.clear-search {
+  display: none;
+  cursor: pointer;
+}
+
+.top-actions>.search.has-text>.search-icon {
+  display: none;
+}
+
+.top-actions>.search.has-text>.clear-search {
+  display: block;
+}
+
+.rtl .top-actions>.search>.search-icon,
+.rtl .top-actions>.search>.clear-search {
   float: left;
   right: -15px;
 }
@@ -364,6 +383,11 @@ button:hover svg .main-color {
   margin: 0px;
 }
 
+.rtl .subscription-main .actions {
+  left: -16px;
+  right: auto;
+}
+
 .subscription-main .actions.is-open {
   display: flex;
 }
@@ -378,6 +402,10 @@ button:hover svg .main-color {
   border-bottom: 1px solid #eee;
 }
 
+.rtl .subscription-main .actions>li {
+  padding: 14px 18px 14px 35px;
+}
+
 .subscription-main .actions>li:hover {
   background-color: #f9f9f9;
 }