Add wish edit modal

src/assets/js/parts/wish.js

@@ -1,5 +1,7 @@
 const wish_button_mark_as_fulfilled = '.ui.button.wish-fulfilled';
 const wish_button_visit             = '.ui.button.wish-visit';
+const wish_button_options           = '.ui.button.wish-options';
+const wish_button_options_edit      = wish_button_options + ' .item.wish-edit';
 
 var wish;
 
@@ -13,6 +15,16 @@ function wish_set_to(wish_data) {
         .attr('href', wish.url)
         .removeClass('disabled');
     }
+
+    /**
+     * Options
+     */
+    $(wish_button_options)
+    .dropdown()
+    .removeClass('disabled');
+
+    /** Edit */
+    $(wish_button_options_edit).removeClass('disabled');
 }
 
 function wish_unset() {
@@ -37,9 +49,7 @@ $(function () {
                  * Dirty hack to change the default `display: block;` to
                  * `display: flex;` (using CSS).
                  */
-                setTimeout(() => {
+                setTimeout(() => { $(this).css('display', ''); }, 0);
-                    $(this).css('display', '');
-                }, 0);
             },
             'onHide' : function(modal) {
                 wish_unset();
@@ -130,4 +140,66 @@ $(function () {
     });
     /** */
 
+    /**
+     * Options: Edit
+     */
+    $(document).on('click', wish_button_options_edit, function() {
+        var wish_edit_template = $('template#wish-edit').clone(true, true);
+        var wish_edit          = wish_edit_template.contents().filter(function() { return this.nodeType !== 3; });
+
+        /**
+         * Initialise
+         */
+        /** Checkbox */
+        const checkbox_is_purchasable = wish_edit.find('.ui.checkbox.wish-is-purchasable');
+
+        checkbox_is_purchasable
+        .checkbox({
+            onChecked   : function() {
+                wish_edit.find('.item[data-tab="product"]').removeClass('disabled');
+            },
+            onUnchecked : function() {
+                wish_edit.find('.item[data-tab="product"]').addClass('disabled');
+            },
+        });
+
+        /**
+         * Set values
+         */
+        /**
+         * Save global-scope wish since it will be unset when the wish-details
+         * modal is closed.
+         */
+        var wish_local = wish;
+
+        wish_edit.modal('show');
+
+        /** Initialise Tabs */
+        wish_edit.find('.item[data-tab]')
+        .tab();
+
+        /** General */
+        $('[name="wish_id"]').val(wish_local.id);
+        $('[name="wish_title"]').val(wish_local.title);
+        $('[name="wish_description"]').val(wish_local.description);
+        $('[name="wish_image"]').val(wish_local.image);
+        $('[name="wish_url"]').val(wish_local.url);
+        $('.ui.selection.dropdown.priority').dropdown('set selected', wish_local.priority);
+
+        if (wish_local.is_purchasable) {
+            checkbox_is_purchasable.checkbox('check');
+        } else {
+            checkbox_is_purchasable.checkbox('uncheck');
+        }
+
+        /** Product */
+        $('[name="wish_price"]').val(wish_local.price);
+    });
+    /** */
+
+    /**
+     * Options: Delete
+     */
+    /** */
+
 });

src/assets/js/parts/wishlists.js

@@ -1,3 +1,7 @@
+/**
+ * The currently selected wishlist.
+ */
+var wishlist;
 var wishlists = [];
 
 $(function () {
@@ -307,91 +311,6 @@ $(function () {
         }
     });
 
-    /**
-     * Edit Wish
-     */
-    $(document).on('click', '.wish-edit', function (event) {
-        validateURL = true;
-
-        /** Form */
-        var formEdit = $('.form.wishlist-wish-edit');
-        formEdit.addClass('loading');
-        formEdit.trigger('reset');
-        formEdit.find('.dropdown').dropdown('restore defaults');
-        formEdit.find('.item').tab('change tab', 'general');
-
-        /** Checkbox */
-        formEdit
-        .find('.checkbox')
-        .checkbox({
-            onChecked   : function() {
-                formEdit.find('.item[data-tab="product"]').removeClass('disabled');
-            },
-            onUnchecked : function() {
-                formEdit.find('.item[data-tab="product"]').addClass('disabled');
-            },
-        })
-        .checkbox('uncheck');
-
-        /** Get Wish */
-        var wishID = $(this).attr('data-id');
-
-        var wishFormData = new URLSearchParams(
-            {
-                'module' : 'wishes',
-                'page'   : 'api',
-
-                'wish_id' : wishID
-            }
-        );
-
-        fetch('/?' + wishFormData, {
-            method: 'GET'
-        })
-        .then(handleFetchError)
-        .then(handleFetchResponse)
-        .then(function(response) {
-            var wish = response.info;
-
-            /** General */
-            $('[name="wish_id"]').val(wish.id);
-            $('[name="wish_title"]').val(wish.title);
-            $('[name="wish_description"]').val(wish.description);
-            $('[name="wish_image"]').val(wish.image);
-            $('[name="wish_url"]').val(wish.url);
-            $('.ui.selection.dropdown.priority').dropdown('set selected', wish.priority);
-
-            if (wish.is_purchasable) {
-                formEdit.find('.checkbox').checkbox('check');
-            } else {
-                formEdit.find('.checkbox').checkbox('uncheck');
-            }
-
-            /** Product */
-            $('[name="wish_price"]').val(wish.price);
-        })
-        .catch(handleFetchCatch)
-        .finally(function() {
-            formEdit.removeClass('loading');
-        });
-
-        /** Save wish */
-        var modalWishlistWishEdit = $('.ui.modal.wishlist-wish-edit');
-
-        modalWishlistWishEdit.find('[name="wishlist_id"]').val($('.ui.dropdown.wishlists').dropdown('get value'));
-        modalWishlistWishEdit
-        .modal({
-            autoShow  : true,
-            onApprove : function (buttonSave) {
-                validateWishURL(formEdit, buttonSave, modalWishlistWishEdit, validateURL);
-
-                return false;
-            }
-        });
-
-        event.preventDefault();
-    });
-
     /**
      * Delete Wish
      */

src/pages/parts/wish-add.php

@@ -13,7 +13,7 @@ namespace wishthis;
     <a class="item disabled" data-tab="product"><?= __('Product') ?></a>
 </div>
 
-<div class="ui tab" data-tab="general">
+<div class="ui tab active" data-tab="general">
     <div class="ui two column grid">
         <div class="stackable row">
             <div class="column">
@@ -22,10 +22,8 @@ namespace wishthis;
                     <label><?= __('Title') ?></label>
 
                     <div class="ui input">
-                        <input type="text"
+                        <input type     ="text"
-                               name="wish_title"
+                               name     ="wish_title"
-                               placeholder="<?= $wish->title ?? '' ?>"
-                               value="<?= $wish->title ?? '' ?>"
                                maxlength="128"
                         />
                     </div>
@@ -35,7 +33,7 @@ namespace wishthis;
                     <label><?= __('Description') ?></label>
 
                     <div class="ui input">
-                        <textarea name="wish_description" placeholder="<?= $wish->description ?? '' ?>"><?= $wish->description ?? '' ?></textarea>
+                        <textarea name="wish_description"></textarea>
                     </div>
                 </div>
 
@@ -46,10 +44,8 @@ namespace wishthis;
                 <div class="field">
                     <label><?= __('URL') ?></label>
 
-                    <input type="url"
+                    <input type     ="url"
-                           name="wish_url"
+                           name     ="wish_url"
-                           placeholder="<?= $wish->url ?? '' ?>"
-                           value="<?= $wish->url ?? '' ?>"
                            maxlength="255"
                     />
                 </div>
@@ -58,16 +54,12 @@ namespace wishthis;
                     <label><?= __('Priority') ?></label>
 
                     <select class="ui selection clearable dropdown priority"
-                            name="wish_priority"
+                            name ="wish_priority"
                     >
                         <option value=""><?= __('Select priority') ?></option>
 
                         <?php foreach (Wish::$priorities as $priority => $item) { ?>
-                            <?php if (isset($wish->priority) && $wish->priority === $priority) { ?>
+                            <option value="<?= $priority ?>"><?= $item['name'] ?></option>
-                                <option value="<?= $priority ?>" selected><?= $item['name'] ?></option>
-                            <?php } else { ?>
-                                <option value="<?= $priority ?>"><?= $item['name'] ?></option>
-                            <?php } ?>
                         <?php } ?>
                     </select>
                 </div>
@@ -75,10 +67,8 @@ namespace wishthis;
                 <div class="field">
                     <label><?= __('Image') ?></label>
 
-                    <input type="url"
+                    <input type     ="url"
-                           name="wish_image"
+                           name     ="wish_image"
-                           placeholder="<?= $wish->image ?? '' ?>"
-                           value="<?= $wish->image ?? '' ?>"
                            maxlength="255"
                     />
                 </div>
@@ -87,11 +77,10 @@ namespace wishthis;
                     <label><?= __('Properties') ?></label>
 
                     <div class="field">
-                        <div class="ui checkbox">
+                        <div class="ui checkbox wish-is-purchasable">
 
                             <input type="checkbox"
-                                name="wish_is_purchasable"
+                                   name="wish_is_purchasable"
-                                <?= isset($wish->is_purchasable) && $wish->is_purchasable ? 'checked' : '' ?>
                             />
                             <label><?= __('Is purchasable') ?></label>
                         </div>
@@ -111,10 +100,8 @@ namespace wishthis;
                 <div class="field">
                     <label><?= __('Price') ?></label>
 
-                    <input type="text"
+                    <input type     ="text"
-                           name="wish_price"
+                           name     ="wish_price"
-                           placeholder="<?= $wish->price ?? '' ?>"
-                           value="<?= $wish->price ?? '' ?>"
                            maxlength="9"
                     />
                 </div>

src/pages/parts/wishlist.php

@@ -156,32 +156,34 @@ namespace wishthis;
 </div>
 
 <!-- Wishlist: Edit a wish -->
-<div class="ui modal wishlist-wish-edit">
+<template id="wish-edit">
-    <div class="header">
+    <div class="ui modal wishlist-wish-edit">
-        <?= __('Edit wish') ?>
+        <div class="header">
-    </div>
+            <?= __('Edit wish') ?>
-    <div class="content">
+        </div>
-        <div class="description">
+        <div class="content">
-            <p><?= __('If specified, wishthis will attempt to fetch all missing information from the URL.') ?></p>
+            <div class="description">
+                <p><?= __('If specified, wishthis will attempt to fetch all missing information from the URL.') ?></p>
 
-            <form class="ui form wishlist-wish-edit" method="POST">
+                <form class="ui form wishlist-wish-edit" method="POST">
-                <input type="hidden" name="wish_id" />
+                    <input type="hidden" name="wish_id" />
 
-                <?php include 'wish-add.php' ?>
+                    <?php include 'wish-add.php' ?>
 
-                <div class="ui error message"></div>
+                    <div class="ui error message"></div>
-            </form>
+                </form>
+            </div>
+        </div>
+        <div class="actions">
+            <div class="ui primary approve button" title="<?= __('Save') ?>">
+                <?= __('Save') ?>
+            </div>
+            <div class="ui deny button" title="<?= __('Cancel') ?>">
+                <?= __('Cancel') ?>
+            </div>
         </div>
     </div>
-    <div class="actions">
+</template>
-        <div class="ui primary approve button" title="<?= __('Save') ?>">
-            <?= __('Save') ?>
-        </div>
-        <div class="ui deny button" title="<?= __('Cancel') ?>">
-            <?= __('Cancel') ?>
-        </div>
-    </div>
-</div>
 
 <!-- Wish: Validate -->
 <div class="ui small modal validate">