Add wish edit modal

This commit is contained in:
grandeljay 2022-12-31 13:41:15 +01:00
parent 0511eff87d
commit ac57daee5e
4 changed files with 116 additions and 136 deletions

View file

@ -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(() => {
$(this).css('display', '');
}, 0);
setTimeout(() => { $(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
*/
/** */
});

View file

@ -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
*/

View file

@ -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">
@ -24,8 +24,6 @@ namespace wishthis;
<div class="ui input">
<input type ="text"
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>
@ -48,8 +46,6 @@ namespace wishthis;
<input type ="url"
name ="wish_url"
placeholder="<?= $wish->url ?? '' ?>"
value="<?= $wish->url ?? '' ?>"
maxlength="255"
/>
</div>
@ -63,12 +59,8 @@ namespace wishthis;
<option value=""><?= __('Select priority') ?></option>
<?php foreach (Wish::$priorities as $priority => $item) { ?>
<?php if (isset($wish->priority) && $wish->priority === $priority) { ?>
<option value="<?= $priority ?>" selected><?= $item['name'] ?></option>
<?php } else { ?>
<option value="<?= $priority ?>"><?= $item['name'] ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
@ -77,8 +69,6 @@ namespace wishthis;
<input type ="url"
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"
<?= isset($wish->is_purchasable) && $wish->is_purchasable ? 'checked' : '' ?>
/>
<label><?= __('Is purchasable') ?></label>
</div>
@ -113,8 +102,6 @@ namespace wishthis;
<input type ="text"
name ="wish_price"
placeholder="<?= $wish->price ?? '' ?>"
value="<?= $wish->price ?? '' ?>"
maxlength="9"
/>
</div>

View file

@ -156,6 +156,7 @@ namespace wishthis;
</div>
<!-- Wishlist: Edit a wish -->
<template id="wish-edit">
<div class="ui modal wishlist-wish-edit">
<div class="header">
<?= __('Edit wish') ?>
@ -182,6 +183,7 @@ namespace wishthis;
</div>
</div>
</div>
</template>
<!-- Wish: Validate -->
<div class="ui small modal validate">