@myissue/vue-website-page-builder 3.2.90 → 3.2.92

package/src/PageBuilder/PageBuilder.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { onMounted, computed, ref, watch, provide, nextTick } from 'vue'
-import PageBuilderClass from '../composables/PageBuilderClass.ts'
+import { onMounted, computed, ref, watch, provide } from 'vue'
 import ModalBuilder from '../Components/Modals/ModalBuilder.vue'
 import Preview from './Preview.vue'
 import ComponentTopMenu from '../Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue'
@@ -8,12 +7,13 @@ import EditGetElement from '../Components/PageBuilder/EditorMenu/Editables/EditG
 import BuilderComponents from '../Components/Modals/BuilderComponents.vue'
 import RightSidebarEditor from '../Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
 import { sharedPageBuilderPinia, sharedPageBuilderStore } from '../stores/shared-store'
-import { updateOrCreateIsFalsy } from '../helpers/passedPageBuilderConfig'
 import ToolbarOption from '../Components/PageBuilder/ToolbarOption/ToolbarOption.vue'
 import { delay } from '../composables/delay'
 import { useDebounce } from '../composables/useDebounce.ts'
 import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
-
+import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
+import { getPageBuilder } from '../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 /**
  * Props for PageBuilder component
  * @typedef {Object} Props
@@ -37,9 +37,6 @@ const internalPinia = sharedPageBuilderPinia
 
 const pageBuilderStateStore = sharedPageBuilderStore
 
-// Initialize PageBuilder with store
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
 // Provide store for child components (all pointing to the same consolidated store)
 provide('pageBuilderStateStore', pageBuilderStateStore)
 
@@ -56,28 +53,28 @@ const closeAddComponentModal = () => {
 }
 provide('closeAddComponentModal', closeAddComponentModal)
 
-const getConfigPageBuilder = computed(() => {
-  return pageBuilderStateStore.getConfigPageBuilder
+const getBuilderStarted = computed(() => {
+  return pageBuilderStateStore.getBuilderStarted
 })
-
-const getIsSaving = computed(() => {
-  return pageBuilderStateStore.getIsSaving
+const getPageBuilderConfig = computed(() => {
+  return pageBuilderStateStore.getPageBuilderConfig
 })
 
 const getMenuRight = computed(() => {
   return pageBuilderStateStore.getMenuRight
 })
 const previewCurrentDesign = function () {
-  pageBuilderClass.previewCurrentDesign()
+  pageBuilderService.previewCurrentDesign()
 }
+const openAppNotStartedModal = ref(false)
 const openPageBuilderPreviewModal = ref(false)
 
+const handlAppNotStartedModal = function () {
+  openAppNotStartedModal.value = false
+}
 const handlePageBuilderPreview = function () {
   previewCurrentDesign()
-
   openPageBuilderPreviewModal.value = true
-  // handle click
-  // end modal
 }
 
 const firstPageBuilderPreviewModalButton = function () {
@@ -90,7 +87,7 @@ const firstButtonTextSearchComponents = ref('')
 const firstModalButtonSearchComponentsFunction = ref(null)
 
 const handleAddComponent = async function () {
-  await pageBuilderClass.clearHtmlSelection()
+  await pageBuilderService.clearHtmlSelection()
 
   //
   titleModalAddComponent.value = 'Add Components to Page'
@@ -105,15 +102,24 @@ const handleAddComponent = async function () {
   // end modal
 }
 
-const getComponents = computed(() => {
-  const components = pageBuilderStateStore.getComponents
-  return components
+const getHasLocalDraftForUpdate = computed(() => {
+  return pageBuilderStateStore.getHasLocalDraftForUpdate
 })
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
 
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents
+})
+
+watch(getHasLocalDraftForUpdate, (newVal) => {
+  if (newVal) {
+    handlerRumeEditingForUpdate()
+  }
+})
+
 const getElementAttributes = computed(() => {
   if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
     return ''
@@ -143,8 +149,8 @@ watch(getElementAttributes, async (newAttributes, oldAttributes) => {
     newAttributes?.dataImage !== oldAttributes?.dataImage
   ) {
     debounce(async () => {
-      await pageBuilderClass.handleAutoSave()
-      await pageBuilderClass.initializeElementStyles()
+      await pageBuilderService.handleAutoSave()
+      await pageBuilderService.initializeElementStyles()
     }, 200)
   }
 })
@@ -155,42 +161,23 @@ const handleSelectComponent = function (componentObject) {
 
 const draggableZone = ref(null)
 
-const defaultConfigValues = {
-  updateOrCreate: {
-    formType: 'create',
-    formName: 'post',
-  },
-}
-
-const handleConfig = function (config) {
-  // Set config for page builder if not set by user
-  if (
-    config === null ||
-    config === undefined ||
-    (config && Object.keys(config).length === 0 && config.constructor === Object)
-  ) {
-    pageBuilderClass.applyPageBuilderConfig(defaultConfigValues)
-    return
-  }
+const getIsLoadingGlobal = computed(() => {
+  return pageBuilderStateStore.getIsLoadingGlobal
+})
+const getIsSaving = computed(() => {
+  return pageBuilderStateStore.getIsSaving
+})
 
-  if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
-    if (updateOrCreateIsFalsy(config)) {
-      return
-    }
+const getIsResumeEditing = computed(() => {
+  if (pageBuilderStateStore.getIsResumeEditing) {
+    handlerRumeEditingForUpdate()
   }
-}
-
-watch(
-  () => getConfigPageBuilder.value,
-  (config) => {
-    pageBuilderClass.updateLocalStorageItemName()
+  return pageBuilderStateStore.getIsResumeEditing
+})
+const getIsRestoring = computed(() => {
+  return pageBuilderStateStore.getIsRestoring
+})
 
-    if (config && config.updateOrCreate && config.updateOrCreate.formType === 'create') {
-      pageBuilderClass.mountComponentsToDOM()
-    }
-  },
-  { immediate: true },
-)
 const gridColumnModalResumeEditing = ref(Number(1))
 const typeModal = ref('')
 const showModalResumeEditing = ref(false)
@@ -203,51 +190,86 @@ const firstModalButtonResumeEditingFunction = ref(null)
 const secondModalButtonResumeEditingFunction = ref(null)
 const thirdModalButtonResumeEditingFunction = ref(null)
 
-const isLoadingResumeEditing = ref(null)
-
 const handlerRumeEditingForUpdate = async function () {
-  await pageBuilderClass.clearHtmlSelection()
+  await pageBuilderService.clearHtmlSelection()
+
+  typeModal.value = 'warning'
+  showModalResumeEditing.value = true
 
-  typeModal.value = 'default'
   titleModalResumeEditing.value = 'Continue Your Work?'
   descriptionModalResumeEditing.value =
-    'We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently saved?'
+    'We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently loaded from the database?'
   firstButtonResumeEditing.value = 'Use Saved Version'
   secondButtonResumeEditing.value = null
   thirdButtonResumeEditing.value = 'Continue Where I Left Off'
-  showModalResumeEditing.value = true
 
   firstModalButtonResumeEditingFunction.value = function () {
     showModalResumeEditing.value = false
   }
 
   secondModalButtonResumeEditingFunction.value = function () {}
+
   thirdModalButtonResumeEditingFunction.value = async function () {
-    isLoadingResumeEditing.value = true
-    await delay(600)
-    await pageBuilderClass.resumeEditingForUpdate()
-    isLoadingResumeEditing.value = false
+    await pageBuilderService.resumeEditingForUpdate()
+
     showModalResumeEditing.value = false
   }
 
   // end modal
 }
 
-onMounted(async () => {
-  const config = getConfigPageBuilder.value
-  handleConfig(config)
+const gridColumnModalRestore = ref(Number(1))
+const typeModalRestore = ref('')
+const showModalRestore = ref(false)
+const titleModalRestore = ref('')
+const descriptionModalRestore = ref('')
+const firstButtonRestore = ref('')
+const secondButtonRestore = ref(null)
+const thirdButtonRestore = ref(null)
+const firstModalButtonRestoreFunction = ref(null)
+const secondModalButtonRestoreFunction = ref(null)
+const thirdModalButtonRestoreFunction = ref(null)
+
+const handleRestoreOriginalContent = async function () {
+  await pageBuilderService.clearHtmlSelection()
+
+  typeModalRestore.value = 'success'
+  showModalRestore.value = true
+
+  titleModalRestore.value = 'Do you want to restore the original content from the database?'
+  descriptionModalRestore.value =
+    'Are you sure you want to restore the original content from the database? This will overwrite your current page layout.'
+  firstButtonRestore.value = 'Close'
+  secondButtonRestore.value = null
+  thirdButtonRestore.value = 'Restore original Content'
+
+  firstModalButtonRestoreFunction.value = function () {
+    showModalRestore.value = false
+  }
 
-  pageBuilderClass.updateLocalStorageItemName()
+  secondModalButtonRestoreFunction.value = async function () {}
+  thirdModalButtonRestoreFunction.value = async function () {
+    await pageBuilderService.restoreOriginalContent()
+    showModalRestore.value = false
+  }
 
-  pageBuilderClass.deleteOldPageBuilderLocalStorage()
+  // end modal
+}
 
-  await pageBuilderClass.clearHtmlSelection()
+const ensureBuilderInitialized = function () {
+  if (!getBuilderStarted.value) {
+    openAppNotStartedModal.value = true
+  }
+}
 
-  await pageBuilderClass.addListenersToEditableElements()
+onMounted(async () => {
+  // Check if Builder started
+  await delay(5000)
+  ensureBuilderInitialized()
 
-  if (await pageBuilderClass.hasLocalDraftForUpdate()) {
-    handlerRumeEditingForUpdate()
-  }
+  // Re-check if Builder started
+  await delay(5000)
+  ensureBuilderInitialized()
 })
 </script>
 
@@ -257,22 +279,23 @@ onMounted(async () => {
     class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-scroll"
   >
     <div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
+      <GlobalLoader v-if="getIsLoadingGlobal"></GlobalLoader>
       <div
-        @click.self="pageBuilderClass.clearHtmlSelection()"
-        class="pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
+        @click.self="pageBuilderService.clearHtmlSelection()"
+        class="pbx-min-h-24 pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
       >
         <!-- Logo # start -->
-        <div @click="pageBuilderClass.clearHtmlSelection()">
+        <div @click="pageBuilderService.clearHtmlSelection()">
           <div
             v-if="
-              getConfigPageBuilder &&
-              getConfigPageBuilder.pageBuilderLogo &&
-              getConfigPageBuilder.pageBuilderLogo.src
+              getPageBuilderConfig &&
+              getPageBuilderConfig.pageBuilderLogo &&
+              getPageBuilderConfig.pageBuilderLogo.src
             "
             class="pbx-flex pbx-items-center pbx-divide-x pbx-divide-gray-200"
           >
             <div id="pagebuilder-logo-main" class="pbx-pr-4">
-              <img class="pbx-h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
+              <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
             </div>
             <span class="pbx-myPrimaryParagraph pbx-font-medium pbx-pl-4">Editing Page </span>
           </div>
@@ -312,7 +335,7 @@ onMounted(async () => {
 
     <DynamicModalBuilder
       :showDynamicModalBuilder="showModalResumeEditing"
-      :isLoading="isLoadingResumeEditing"
+      :isLoading="getIsResumeEditing"
       :type="typeModal"
       :gridColumnAmount="gridColumnModalResumeEditing"
       :title="titleModalResumeEditing"
@@ -327,11 +350,41 @@ onMounted(async () => {
       <header></header>
       <main></main>
     </DynamicModalBuilder>
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalRestore"
+      :isLoading="getIsRestoring"
+      :type="typeModalRestore"
+      :gridColumnAmount="gridColumnModalRestore"
+      :title="titleModalRestore"
+      :description="descriptionModalRestore"
+      :firstButtonText="firstButtonRestore"
+      :secondButtonText="secondButtonRestore"
+      :thirdButtonText="thirdButtonRestore"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonRestoreFunction"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonRestoreFunction"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonRestoreFunction"
+    >
+      <header></header>
+      <main></main>
+    </DynamicModalBuilder>
+
+    <ModalBuilder
+      title="The builder hasn’t started yet"
+      :showModalBuilder="openAppNotStartedModal"
+      @closeMainModalBuilder="handlAppNotStartedModal"
+      type="delete"
+      maxWidth="2xl"
+      :backgroundOpacity="true"
+    >
+      The builder hasn’t started yet. If this screen doesn’t go away soon, it may just need a little
+      setup in the background. You can safely contact support and ask them to initialize the builder
+      by running the start method.
+    </ModalBuilder>
 
     <div>
       <div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
         <div
-          @click.self="pageBuilderClass.clearHtmlSelection()"
+          @click.self="pageBuilderService.clearHtmlSelection()"
           id="pagebuilder-left-area"
           class="pbx-min-w-[3.5rem] pbx-pt-6 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
         >
@@ -350,7 +403,7 @@ onMounted(async () => {
                 <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
               </button>
             </div>
-            <div @click.self="pageBuilderClass.clearHtmlSelection()">
+            <div @click.self="pageBuilderService.clearHtmlSelection()">
               <ComponentTopMenu v-if="getElement"></ComponentTopMenu>
             </div>
           </div>
@@ -364,15 +417,16 @@ onMounted(async () => {
             class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-bg-myPrimaryLightGrayColor pbx-min-w-[30rem]"
           >
             <div
-              @click.self="pageBuilderClass.clearHtmlSelection()"
+              @click.self="pageBuilderService.clearHtmlSelection()"
               class="pbx-flex pbx-myPrimaryGap pbx-items-center pbx-pt-4 pbx-pb-2 pbx-pl-2 pbx-h-24 pbx-w-full pbx-min-w-36"
             >
+              <!-- Save Start -->
               <button
                 class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2"
                 @click.stop="
                   async () => {
-                    await pageBuilderClass.clearHtmlSelection()
-                    await pageBuilderClass.handleManualSave()
+                    await pageBuilderService.clearHtmlSelection()
+                    await pageBuilderService.handleManualSave()
                   }
                 "
                 type="button"
@@ -399,16 +453,60 @@ onMounted(async () => {
                 </div>
                 <div>Save</div>
               </button>
-
-              <!-- Continue editing # end -->
+              <!-- Save End -->
+
+              <!-- Restore Start -->
+              <template
+                v-if="
+                  getPageBuilderConfig &&
+                  getPageBuilderConfig.updateOrCreate &&
+                  getPageBuilderConfig.updateOrCreate.formType === 'update'
+                "
+              >
+                <button
+                  class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2"
+                  @click.stop="
+                    async () => {
+                      await pageBuilderService.clearHtmlSelection()
+                      await handleRestoreOriginalContent()
+                    }
+                  "
+                  type="button"
+                  :disabled="getIsRestoring"
+                >
+                  <div
+                    v-if="!getIsRestoring"
+                    class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
+                  >
+                    <span class="material-symbols-outlined"> settings_backup_restore </span>
+                  </div>
+                  <div
+                    v-if="getIsRestoring"
+                    class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
+                  >
+                    <span class="pbx-relative pbx-flex pbx-size-3">
+                      <span
+                        class="pbx-absolute pbx-inline-flex pbx-h-full pbx-w-full pbx-animate-ping pbx-rounded-full pbx-bg-gray-400 pbx-opacity-75"
+                      ></span>
+                      <span
+                        class="pbx-relative pbx-inline-flex pbx-size-3 pbx-rounded-full pbx-bg-green-200"
+                      ></span>
+                    </span>
+                  </div>
+                  <div>
+                    <span class="lg:pbx-block pbx-hidden"> Restore </span>
+                  </div>
+                </button>
+              </template>
+              <!-- Restore End -->
             </div>
 
             <div
-              @click.self="pageBuilderClass.clearHtmlSelection()"
+              @click.self="pageBuilderService.clearHtmlSelection()"
               class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-h-24 pbx-w-full"
             >
               <div
-                @click.self="pageBuilderClass.clearHtmlSelection()"
+                @click.self="pageBuilderService.clearHtmlSelection()"
                 class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
                 <button
@@ -438,7 +536,7 @@ onMounted(async () => {
                       () => {
                         pageBuilderStateStore.setMenuRight(false)
                         pageBuilderStateStore.setElement(null)
-                        pageBuilderClass.clearHtmlSelection()
+                        pageBuilderService.clearHtmlSelection()
                         handlePageBuilderPreview()
                       }
                     "
@@ -458,11 +556,11 @@ onMounted(async () => {
             </div>
 
             <div
-              @click.self="pageBuilderClass.clearHtmlSelection()"
+              @click.self="pageBuilderService.clearHtmlSelection()"
               class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-w-full pbx-h-24"
             >
               <div
-                @click.self="pageBuilderClass.clearHtmlSelection()"
+                @click.self="pageBuilderService.clearHtmlSelection()"
                 class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
                 <button
@@ -508,7 +606,7 @@ onMounted(async () => {
               <!-- Add Component # start -->
 
               <div
-                @click="pageBuilderClass.clearHtmlSelection()"
+                @click="pageBuilderService.clearHtmlSelection()"
                 id="pagebuilder-bottom-components-area"
                 class="pbx-pt-8 pbx-pb-12 pbx-text-center focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-indigo-500 focus:pbx-ring-offset-2 pbx-my-2 pbx-mx-4"
                 :class="{ 'pbx-border-t pbx-border-gray-200': getComponents.length > 0 }"