Add wish priorities filter

src/api/wishlists.php

@@ -40,7 +40,34 @@ switch ($_SERVER['REQUEST_METHOD']) {
         break;
 
     case 'GET':
-        if (isset($_GET['userid']) || isset($_SESSION['user']['id'])) {
+        if (isset($_GET['wishlist'], $_GET['priority'])) {
+            /**
+             * Get wishlist cards
+             */
+            $wishlist = new Wishlist($_GET['wishlist']);
+            $options  = array();
+            $where    = array(
+                'wishlist' => '`wishlist` = ' . $wishlist->id,
+                'priority' => '`priority` = ' . $_GET['priority'],
+            );
+
+            if (-1 == $_GET['priority']) {
+                unset($where['priority']);
+            }
+
+            if (empty($_GET['priority'])) {
+                $where['priority'] = '`priority` IS NULL';
+            }
+
+            $options = array(
+                'WHERE' => implode(' AND ', $where),
+            );
+
+            $response['results'] = $wishlist->getCards($options);
+        } elseif (isset($_GET['userid']) || isset($_SESSION['user']['id'])) {
+            /**
+             * Get user wishlists
+             */
             $user = isset($_GET['userid']) ? new User($_GET['userid']) : new User();
 
             $wishlists = $user->getWishlists();

src/assets/css/default.css

@@ -279,3 +279,10 @@ p .ui.horizontal.label {
 .ui.dropdown .menu > a.item:hover {
 	color: rgba(0,0,0,.95);
 }
+
+/**
+ * Filter
+ */
+.ui.basic.white.button {
+    background-color: #fff;
+}

src/assets/js/wishlists.js

@@ -62,6 +62,10 @@ $(function () {
             .then(handleFetchResponse)
             .then(function(response) {
                 window.history.pushState({}, '', response.data.url);
+
+                $('.ui.dropdown.filter.priority')
+                .dropdown('restore default value')
+                .dropdown('restore default text');
             });
         } else {
             $('.button.wishlist-wish-add').addClass('disabled');
@@ -436,4 +440,42 @@ $(function () {
         });
     });
 
+    /**
+     * Filter wishes
+     */
+    $('.ui.dropdown.filter.priority')
+    .dropdown({
+        match          : 'text',
+        fullTextSearch : true,
+        onChange       : function() {
+            $(this).addClass('disabled loading');
+
+            var wishlist_id = $('.dropdown.wishlists').dropdown('get value');
+
+            if (!Number.isInteger(parseInt(wishlist_id))) {
+                $(this).removeClass('disabled loading');
+                return false;
+            }
+
+            var paramater = new URLSearchParams({
+                wishlist : wishlist_id,
+                priority : $(this).dropdown('get value'),
+            });
+
+            fetch('/src/api/wishlists.php?' + paramater, {
+                method : 'GET',
+            })
+            .then(handleFetchError)
+            .then(handleFetchResponse)
+            .then(function(response) {
+                var html = response.results ? response.results : '';
+
+                $('.wishlist-cards').html(html);
+            })
+            .finally(() => {
+                $(this).removeClass('disabled loading');
+            });
+        }
+    });
+
 });

src/pages/wish.php

@@ -19,7 +19,7 @@ if ('POST' === $_SERVER['REQUEST_METHOD'] && count($_POST) >= 0) {
     $wish_description = $_POST['wish_description'] ?: '';
     $wish_image       = trim($_POST['wish_image']);
     $wish_url         = trim($_POST['wish_url']);
-    $wish_priority    = $_POST['wish_priority'] ?: 'NULL';
+    $wish_priority    = isset($_POST['wish_priority']) && $_POST['wish_priority'] ? $_POST['wish_priority'] : 'NULL';
 
     $database
     ->query('UPDATE `wishes`
@@ -153,6 +153,8 @@ $referer = '/?page=wishlists&wishlist=' . $wish->wishlist;
                                 <select class="ui selection clearable dropdown priority"
                                         name="wish_priority"
                                 >
+                                    <option value=""><?= __('Select priority') ?></option>
+
                                     <?php foreach (Wish::$priorities as $priority => $item) { ?>
                                         <?php if ($wish->priority === $priority) { ?>
                                             <option value="<?= $priority ?>" selected><?= $item['name'] ?></option>

src/pages/wishlists.php

@@ -6,7 +6,7 @@
  * @author Jay Trees <github.jay@grandel.anonaddy.me>
  */
 
-use wishthis\{Page, User, Wishlist};
+use wishthis\{Page, User, Wishlist, Wish};
 
 $page = new Page(__FILE__, __('My lists'));
 $page->header();
@@ -96,6 +96,49 @@ $page->navigation();
             </div>
         </div>
 
+        <div>
+            <div class="ui small labeled icon basic white button floating dropdown filter priority">
+                <input type="hidden" name="filters" />
+
+                <i class="filter icon"></i>
+                <span class="text"><?= __('Filter priorities') ?></span>
+
+                <div class="menu">
+                    <div class="ui icon search input">
+                        <i class="search icon"></i>
+                        <input type="text" placeholder="<?= __('Search priorities') ?>" />
+                    </div>
+
+                    <div class="divider"></div>
+
+                    <div class="header">
+                        <i class="filter icon"></i>
+                        <?= __('Priorities') ?>
+                    </div>
+
+                    <div class="scrolling menu">
+                        <div class="item" data-value="-1">
+                            <i class="small circle icon"></i>
+                            <?= __('All priorities') ?>
+                        </div>
+
+                        <div class="item" data-value="">
+                            <i class="small circle outline icon"></i>
+                            <?= __('No priority') ?>
+                        </div>
+
+                        <?php foreach (Wish::$priorities as $number => $priority) { ?>
+                            <div class="item" data-value="<?= $number ?>">
+                                <i class="small <?= $priority['color'] ?> circle icon"></i>
+                                <?= $priority['name'] ?>
+                            </div>
+                        <?php } ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br />
+
         <div class="wishlist-cards"></div>
     </div>
 </main>