Add product tab to wish

src/assets/js/parts/wish-add.js

@@ -1,5 +1,10 @@
 $(function () {
 
+    /**
+     * Tabs
+     */
+    $('.menu.wish-add .item').tab();
+
     /**
      * Priority
      */
@@ -8,6 +13,13 @@ $(function () {
     /**
      * Properties
      */
-    $('.checkbox').checkbox();
+    $('.checkbox').checkbox({
+        onChecked   : function() {
+            $('.menu.wish-add .item[data-tab="product"]').removeClass('disabled');
+        },
+        onUnchecked : function() {
+            $('.menu.wish-add .item[data-tab="product"]').addClass('disabled');
+        },
+    });
 
 });

src/pages/parts/wish-add.php

@@ -10,7 +10,14 @@ $scriptPart = '/src/assets/js/parts/wish-add.js';
 ?>
 <script defer src="<?= $scriptPart ?>?m=<?= filemtime(ROOT . $scriptPart) ?>"></script>
 
-<div class="stackable row">
+<div class="ui secondary menu wish-add">
+    <a class="item active" data-tab="general"><?= __('General') ?></a>
+    <a class="item disabled" data-tab="product"><?= __('Product') ?></a>
+</div>
+
+<div class="ui tab" data-tab="general">
+    <div class="ui two column grid">
+        <div class="stackable row">
             <div class="column">
 
                 <div class="field">
@@ -67,17 +74,6 @@ $scriptPart = '/src/assets/js/parts/wish-add.js';
                     </select>
                 </div>
 
-        <div class="field disabled">
-            <label><?= __('Price') ?></label>
-
-            <input type="text"
-                   name="wish_price"
-                   placeholder="<?= $wish->price ?? '' ?>"
-                   value="<?= $wish->price ?? '' ?>"
-                   maxlength="9"
-            />
-        </div>
-
                 <div class="grouped fields">
                     <label><?= __('Properties') ?></label>
 
@@ -94,4 +90,27 @@ $scriptPart = '/src/assets/js/parts/wish-add.js';
                 </div>
 
             </div>
+        </div>
+    </div>
+</div>
+
+<div class="ui tab" data-tab="product">
+    <div class="ui two column grid">
+        <div class="stackable row">
+            <div class="column">
+
+                <div class="field">
+                    <label><?= __('Price') ?></label>
+
+                    <input type="text"
+                        name="wish_price"
+                        placeholder="<?= $wish->price ?? '' ?>"
+                        value="<?= $wish->price ?? '' ?>"
+                        maxlength="9"
+                    />
+                </div>
+
+            </div>
+        </div>
+    </div>
 </div>

src/pages/wishlists.php

@@ -167,14 +167,12 @@ $page->navigation();
     </div>
     <div class="content">
         <div class="description">
-            <p><?= __('Fill out any or all of the below fields to add your new wish. If you just fill out the URL, wishthis will attempt to auto fill all other fields.') ?></p>
+            <p><?= __('Fill the title and/or description to add your new wish. If you just fill out the URL, wishthis will attempt to auto fill all other fields.') ?></p>
 
             <form class="ui form wishlist-wish-add" method="POST">
                 <input type="hidden" name="wishlist_id" />
 
-                <div class="ui two column grid">
                 <?php include 'parts/wish-add.php' ?>
-                </div>
 
                 <div class="ui error message"></div>
             </form>
@@ -201,9 +199,7 @@ $page->navigation();
                 <input type="hidden" name="wishlist_id" />
                 <input type="hidden" name="wish_id" />
 
-                <div class="ui two column grid">
                 <?php include 'parts/wish-add.php' ?>
-                </div>
 
                 <div class="ui error message"></div>
             </form>