Merge pull request #166 from BitBagCommerce/OPSRC-645/Adding_modals_t…

…o_wishlist_actions Opsrc 645/Adding modals to wishlist actions
BitBagCommerce · Aug 12, 2022 · 3cc5715 · 3cc5715
2 parents bac3cb0 + 612bff3
commit 3cc5715
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 142 deletions.
diff --git a/src/Resources/assets/shop/js/addAnotherWishlistModal.js b/src/Resources/assets/shop/js/addAnotherWishlistModal.js
diff --git a/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js b/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js
@@ -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);
@@ -47,7 +53,8 @@ const turnOnListener = () => {
     if (!addWishlistBtn) {
         return;
     }
-    setAddWishlistModal();
+
+    setWishlistModal();
 };
 
 turnOnListener();
diff --git a/src/Resources/assets/shop/js/handleEditWishlistModal.js b/src/Resources/assets/shop/js/handleEditWishlistModal.js
@@ -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();
diff --git a/src/Resources/assets/shop/js/handleRemoveWishlistModal.js b/src/Resources/assets/shop/js/handleRemoveWishlistModal.js
@@ -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;
+    }
+
+    setWishlistModal();
+};
+
+turnOnListener();
diff --git a/src/Resources/assets/shop/js/index.js b/src/Resources/assets/shop/js/index.js
@@ -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,