Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Opsrc 645/Adding modals to wishlist actions #166

Merged
merged 3 commits into from
Aug 12, 2022
Merged

Opsrc 645/Adding modals to wishlist actions #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
197748e
Add edit and remove modals to wishlist
dead-playmod Aug 11, 2022
94d7e11
Code clean up
dead-playmod Aug 11, 2022
612bff3
CR fixes
dead-playmod Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 0 additions & 115 deletions src/Resources/assets/shop/js/addAnotherWishlistModal.js
View file
Open in desktop

This file was deleted.

27 changes: 17 additions & 10 deletions src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
import { AddWishlistModal } from './addAnotherWishlistModal';
import { WishlistModal } from './wishlistModal';

const addWishlistBtn = document.querySelector('[data-bb-wishlist-add="add-another-wishlist"]');
const wishlistFormName = 'create_new_wishlist';

const setAddWishlistModal = () => {

addWishlistBtn.addEventListener('click', (e) => {
e.preventDefault();
new AddWishlistModal(
{},
const setWishlistModal = () => {
addWishlistBtn.addEventListener('click', () => {
new WishlistModal(
{
headerTitle: 'Choose name for your new wishlist',
wishlistFormName: wishlistFormName,
wishlistBodyContent: `
<input type="text" id="${wishlistFormName}_name" name="${wishlistFormName}[name]" required="required" class="wishlist-confirmation-modal__body--input" data-bb-target="input">
<div class="ui red pointing label validation-error hidden" data-bb-target="error">Please enter wishlist name.</div>
`
},
{
cancelAction: () => {},
performAction: async () => {
const form = document.querySelector('#create_new_wishlist');
const formValue = form.querySelector('#create_new_wishlist_name');
const form = document.querySelector(`#${wishlistFormName}`);
const formValue = form.querySelector(`#${wishlistFormName}_name`);

const url = '/wishlists/create';
const formData = new FormData(form);
Expand Down Expand Up @@ -47,7 +53,8 @@ const turnOnListener = () => {
if (!addWishlistBtn) {
return;
}
setAddWishlistModal();

setWishlistModal();
};

turnOnListener();
63 changes: 63 additions & 0 deletions src/Resources/assets/shop/js/handleEditWishlistModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { WishlistModal } from './wishlistModal';

const editWishlistBtns = document.querySelectorAll('[data-wishlist-edit-id]');
const wishlistFormName = 'edit_wishlist';

const setWishlistModal = () => {
editWishlistBtns.forEach(btn => {
btn.addEventListener('click', () => {
new WishlistModal(
{
headerTitle: 'Choose new name for your wishlist',
wishlistFormName: wishlistFormName,
wishlistBodyContent: `
<input type="text" id="${wishlistFormName}_name" name="${wishlistFormName}_name[name]" required="required" class="wishlist-confirmation-modal__body--input" data-bb-target="input">
<div class="ui red pointing label validation-error hidden" data-bb-target="error">Please enter wishlist name.</div>
`
},
{
cancelAction: () => {},
performAction: async () => {
const form = document.querySelector(`#${wishlistFormName}`);
const formValue = form.querySelector(`#${wishlistFormName}_name`);

const wishlistId = btn.dataset.wishlistEditId;
const url = `/wishlists/${wishlistId}/edit`;
const formData = new FormData(form);
const csrfToken = document.querySelector("[data-bb-csrf]").dataset.bbCsrf;

const headers = new Headers({
'X-CSRF-TOKEN': csrfToken
});

const requestConfig = {
method: 'POST',
headers: headers,
body: formData
}

try {
const response = await fetch(url, requestConfig);
const data = await response.json();

} catch (error) {
console.error(error);
} finally {
location.reload();
}
},
}
).init();
});
})
};

const turnOnListener = () => {
if (!editWishlistBtns) {
return;
}

setWishlistModal();
};

turnOnListener();
59 changes: 59 additions & 0 deletions src/Resources/assets/shop/js/handleRemoveWishlistModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { WishlistModal } from './wishlistModal';

const removeWishlistBtns = document.querySelectorAll('[data-wishlist-remove-id]');
const wishlistFormName = 'remove_wishlist';

const setWishlistModal = () => {
removeWishlistBtns.forEach(btn => {
btn.addEventListener('click', () => {
new WishlistModal(
{
headerTitle: 'Remove wishlist',
wishlistFormName: wishlistFormName,
wishlistBodyContent: 'Are you sure?'
},
{
cancelAction: () => {},
performAction: async () => {
const form = document.querySelector(`#${wishlistFormName}`);

const wishlistId = btn.dataset.wishlistRemoveId;
const url = `/wishlists/${wishlistId}/remove`;
const formData = new FormData(form);
const csrfToken = document.querySelector("[data-bb-csrf]").dataset.bbCsrf;

const headers = new Headers({
'X-CSRF-TOKEN': csrfToken
});

const requestConfig = {
method: 'POST',
headers: headers,
body: formData
}

try {
const response = await fetch(url, requestConfig);
const data = await response.json();

} catch (error) {
console.error(error);
} finally {
location.reload();
}
},
}
).init();
});
})
};

const turnOnListener = () => {
if (!removeWishlistBtns) {
return;
}
dead-playmod marked this conversation as resolved.
Show resolved Hide resolved

setWishlistModal();
};

turnOnListener();
12 changes: 7 additions & 5 deletions src/Resources/assets/shop/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import './handleWishlistMainCheckbox.js'
import './handleCopyToWishlistListModal.js'
import './handleAddAnotherWishlistModal.js'
import './handleWishlistMainCheckbox';
import './handleCopyToWishlistListModal';
import './handleAddAnotherWishlistModal';
import './handleRemoveWishlistModal';
import './handleEditWishlistModal';
import { WishlistVariantButton } from './WishlistVariantButton';
import { WishlistVariantPrice } from './WishlistVariantPrice';

const WishlistVariantElements = [...document.querySelectorAll('[data-bb-toggle="wishlist-variant"]')];
export const WishlistVariantButtonList = WishlistVariantElements.map(button => new WishlistVariantButton(button).init())
export const WishlistVariantButtonList = WishlistVariantElements.map(button => new WishlistVariantButton(button).init());

const WishlistVariantPrices = [...document.querySelectorAll('[data-bb-toggle="wishlist-variant-price"]')];
export const WishlistVariantPricesList = WishlistVariantPrices.map(price => new WishlistVariantPrice(price).init())
export const WishlistVariantPricesList = WishlistVariantPrices.map(price => new WishlistVariantPrice(price).init());

export default {
WishlistVariantButtonList,
Expand Down
Loading