Add wish edit modal
This commit is contained in:
grandeljay
parent
0511eff87d
commit
ac57daee5e
4 changed files with 116 additions and 136 deletions
|
|
@ -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
|
||||
*/
|
||||
/** */
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
name="wish_title"
|
||||
placeholder="<?= $wish->title ?? '' ?>"
|
||||
value="<?= $wish->title ?? '' ?>"
|
||||
<input type ="text"
|
||||
name ="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"
|
||||
name="wish_url"
|
||||
placeholder="<?= $wish->url ?? '' ?>"
|
||||
value="<?= $wish->url ?? '' ?>"
|
||||
<input type ="url"
|
||||
name ="wish_url"
|
||||
maxlength="255"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -58,27 +54,21 @@ 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 ?>" selected><?= $item['name'] ?></option>
|
||||
<?php } else { ?>
|
||||
<option value="<?= $priority ?>"><?= $item['name'] ?></option>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label><?= __('Image') ?></label>
|
||||
|
||||
<input type="url"
|
||||
name="wish_image"
|
||||
placeholder="<?= $wish->image ?? '' ?>"
|
||||
value="<?= $wish->image ?? '' ?>"
|
||||
<input type ="url"
|
||||
name ="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>
|
||||
|
|
@ -111,10 +100,8 @@ namespace wishthis;
|
|||
<div class="field">
|
||||
<label><?= __('Price') ?></label>
|
||||
|
||||
<input type="text"
|
||||
name="wish_price"
|
||||
placeholder="<?= $wish->price ?? '' ?>"
|
||||
value="<?= $wish->price ?? '' ?>"
|
||||
<input type ="text"
|
||||
name ="wish_price"
|
||||
maxlength="9"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,8 @@ namespace wishthis;
|
|||
</div>
|
||||
|
||||
<!-- Wishlist: Edit a wish -->
|
||||
<div class="ui modal wishlist-wish-edit">
|
||||
<template id="wish-edit">
|
||||
<div class="ui modal wishlist-wish-edit">
|
||||
<div class="header">
|
||||
<?= __('Edit wish') ?>
|
||||
</div>
|
||||
|
|
@ -181,7 +182,8 @@ namespace wishthis;
|
|||
<?= __('Cancel') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Wish: Validate -->
|
||||
<div class="ui small modal validate">
|
||||
|
|
|
|||
Loading…
Reference in a new issue