Combine create wishlist with other options

src/api/wishlists.php

@@ -16,6 +16,30 @@ $response = array(
 require '../../index.php';
 
 switch ($_SERVER['REQUEST_METHOD']) {
+    case 'POST':
+        /**
+         * Create
+         */
+        if (isset($_POST['wishlist-name'], $_SESSION['user']['id'])) {
+            $database->query('INSERT INTO `wishlists`
+                (
+                    `user`,
+                    `name`,
+                    `hash`
+                ) VALUES (
+                    ' . $_SESSION['user']['id'] . ',
+                    "' . $_POST['wishlist-name'] . '",
+                    "' . sha1(time() . $_SESSION['user']['id'] . $_POST['wishlist-name']) . '"
+                )
+            ;');
+
+            $response['success'] = true;
+            $response['data']    = array(
+                'lastInsertId' => $database->lastInsertId(),
+            );
+        }
+        break;
+
     case 'GET':
         if (isset($_GET['userid']) || isset($_SESSION['user']['id'])) {
             $user = isset($_GET['userid']) ? new User($_GET['userid']) : new User();

src/assets/css/default.css

@@ -33,10 +33,6 @@ img {
 /**
  * Card
  */
-.wishlist-cards {
-    margin-top: 1rem;
-}
-
 .ui.card {
     overflow: hidden;
 }
@@ -135,10 +131,3 @@ p .ui.horizontal.label {
     cursor: default;
     user-select: none;
 }
-
-/**
- * Segment
- */
-.ui.segments {
-    overflow: hidden;
-}

src/assets/js/default.js

@@ -10,7 +10,6 @@ if ('serviceWorker' in navigator) {
     })
 }
 
-
 const urlParams = new URLSearchParams(window.location.search);
 
 $(function() {

src/assets/js/wishlists.js

@@ -4,6 +4,7 @@ $(function () {
      */
     var wishlists = [];
 
+    function wishlistsRefresh() {
         $('.ui.dropdown.wishlists').api({
             action: 'get wishlists',
             method: 'GET',
@@ -25,6 +26,9 @@ $(function () {
                 }
             }
         });
+    }
+
+    wishlistsRefresh();
 
     /**
      * Selection
@@ -53,7 +57,11 @@ $(function () {
         /**
          * Cards
          */
+        if (wishlistIndex >= 0) {
             $('.wishlist-cards').html(wishlists[wishlistIndex].cards);
+        } else {
+            $('.wishlist-cards').html('');
+        }
 
         /**
          * Generate cache
@@ -292,7 +300,7 @@ $(function () {
                     onSuccess: function () {
                         column.fadeOut();
 
-                        location.reload();
+                        wishlistsRefresh();
                     },
                 });
             }
@@ -329,7 +337,7 @@ $(function () {
 
                     button.removeClass('loading');
 
-                    location.reload();
+                    wishlistsRefresh();
                 });
 
                 return false;
@@ -420,4 +428,44 @@ $(function () {
         });
     });
 
+    /**
+     * Create wishlist
+     */
+     $(document).on('click', '.button.wishlist-create', function () {
+        var modalWishlistCreate = $('.ui.modal.wishlist-create');
+        var formWishlistCreate  = modalWishlistCreate.find('.ui.form');
+
+        modalWishlistCreate
+        .modal({
+            onApprove: function (buttonCreate) {
+                const formData = new URLSearchParams(new FormData(formWishlistCreate[0]));
+
+                formWishlistCreate.addClass('loading');
+                buttonCreate.addClass('loading');
+
+                fetch('/src/api/wishlists.php', {
+                    method: 'POST',
+                    body:   formData
+                })
+                .then(response => response.json())
+                .then(response => {
+                    if(response.success) {
+                        modalWishlistCreate.modal('hide');
+
+                        urlParams.set('wishlist', response.data.lastInsertId);
+
+                        wishlistsRefresh();
+                    }
+                })
+                .finally(() => {
+                    formWishlistCreate.removeClass('loading');
+                    buttonCreate.removeClass('loading');
+                });
+
+                return false;
+            }
+        })
+        .modal('show');
+    });
+
 });

src/classes/wishlist.php

@@ -81,7 +81,6 @@ class Wishlist
         $cardIndex     = 0;
 
         if (!empty($products)) { ?>
-            <div class="ui container">
             <div class="ui stackable three column grid">
                 <?php foreach ($products as $product) {
                     $cache  = new EmbedCache($product['url']);
@@ -162,7 +161,6 @@ class Wishlist
                     </div>
                 <?php } ?>
             </div>
-            </div>
 
             <? $cardIndex++ ?>
         <?php } else { ?>

src/pages/wishlist.php

@@ -68,6 +68,9 @@ $page->navigation();
         </div>
     </div>
 
+    <div class="ui container">
+        <h2 class="ui header">Products</h2>
+
         <div class="wishlist-cards">
             <?php
             echo $wishlist->getCards(
@@ -77,6 +80,7 @@ $page->navigation();
             );
             ?>
         </div>
+    </div>
 </main>
 
 <?php

src/pages/wishlists.php

@@ -11,47 +11,20 @@ use wishthis\{Page, User, Wishlist};
 $page = new page(__FILE__, 'Wishlists');
 $page->header();
 $page->navigation();
-
-/**
- * Create
- */
-if (isset($_POST['wishlist-create'], $_POST['name'])) {
-    $database->query('INSERT INTO `wishlists`
-        (
-            `user`,
-            `name`,
-            `hash`
-        ) VALUES (
-            ' . $_SESSION['user']['id'] . ',
-            "' . $_POST['name'] . '",
-            "' . sha1(time() . $_SESSION['user']['id'] . $_POST['name']) . '"
-        )
-    ;');
-
-    header('Location: /?page=wishlists');
-    die();
-}
-
-/**
- * Delete
- */
-if (isset($_POST['wishlist_delete_id'])) {
-    $database->query('DELETE FROM `wishlists`
-        WHERE id = ' . $_POST['wishlist_delete_id'] . '
-    ;');
-}
 ?>
 <main>
     <div class="ui container">
         <h1 class="ui header"><?= $page->title ?></h1>
+        <p>Here you can view and edit all of your wishlists.</p>
 
-        <div class="ui equal width stackable grid">
-
-            <div class="column">
-                <div class="ui segment form">
         <h2 class="ui header">View</h2>
+
+        <div class="ui horizontal stackable segments">
+
+            <div class="ui segment">
                 <p>Please select a wishlist to view.</p>
 
+                <div class="ui form">
                     <div class="field">
                         <label>Wishlist</label>
                         <select class="ui fluid search selection dropdown loading wishlists" name="wishlist">
@@ -59,40 +32,8 @@ if (isset($_POST['wishlist_delete_id'])) {
                         </select>
                     </div>
                 </div>
-            </div>
 
-            <div class="column">
+                <div class="ui divider"></div>
-                <div class="ui segment">
-                    <h2 class="ui header">Create</h2>
-                    <p>
-                        Choose a new name for your wishlist.
-                        Here's a suggestion to get you started!
-                    </p>
-
-                    <form class="ui form" method="post">
-                        <div class="field">
-                            <label>Name</label>
-                            <input type="text"
-                                name="name"
-                                placeholder="<?= getCurrentSeason() ?>"
-                                value="<?= getCurrentSeason() ?>"
-                            />
-                        </div>
-
-                        <input class="ui primary button"
-                            type="submit"
-                            name="wishlist-create"
-                            value="Create"
-                        />
-                    </form>
-                </div>
-            </div>
-
-        </div>
-
-        <div class="ui segment">
-            <h2 class="ui header">Options</h1>
-            <p>Wishlist related options.</p>
 
                 <a class="ui small labeled icon button wishlist-product-add disabled">
                     <i class="add icon"></i>
@@ -113,11 +54,60 @@ if (isset($_POST['wishlist_delete_id'])) {
                     </button>
                 </form>
             </div>
+
+            <div class="ui segment">
+                <p>General options.</p>
+
+                <a class="ui small labeled icon button wishlist-create">
+                    <i class="add icon"></i>
+                    Create a wishlist
+                </a>
             </div>
 
+        </div>
+
+        <h2 class="ui header">Products</h2>
+
         <div class="wishlist-cards"></div>
+    </div>
 </main>
 
+<!-- Wishlist: Create -->
+<div class="ui modal wishlist-create">
+    <div class="header">
+        Create a wishlist
+    </div>
+    <div class="content">
+        <div class="description">
+            <div class="ui header">Wishlist</div>
+            <p>
+                Choose a new name for your wishlist.
+                Here's a suggestion to get you started.
+            </p>
+
+            <form class="ui form">
+                <div class="field">
+                    <label>Name</label>
+                    <input type="text"
+                           name="wishlist-name"
+                           placeholder="<?= getCurrentSeason() ?>"
+                           value="<?= getCurrentSeason() ?>"
+                    />
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="actions">
+        <div class="ui approve primary button create">
+            Create
+        </div>
+        <div class="ui deny button cancel">
+            Cancel
+        </div>
+    </div>
+</div>
+
+<!-- Wishlist: Add a product -->
 <div class="ui modal wishlist-product-add">
     <div class="header">
         Add a product
@@ -152,6 +142,7 @@ if (isset($_POST['wishlist_delete_id'])) {
     </div>
 </div>
 
+<!-- Wishlist: Add a product (fetch) -->
 <div class="ui small modal wishlist-product-fetch">
     <div class="header">
         Incorrect URL