@myissue/vue-website-page-builder 3.2.76 → 3.2.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.76",
+  "version": "v3.2.78",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/Modals/DynamicModalBuilder.vue

@@ -17,6 +17,11 @@ defineProps({
     default: false,
     required: false,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
   disabledWhichButton: {
     type: String,
     default: '',
@@ -97,7 +102,7 @@ const thirdButtonBuilder = function () {
       </div>
     </div>
 
-    <template v-if="simpleModal !== true">
+    <template v-if="simpleModal !== true && !isLoading">
       <div class="py-4 flex sm:justify-end justify-center border-t border-gray-200 mt-4">
         <slot name="footer" />
         <div
@@ -362,6 +367,18 @@ const thirdButtonBuilder = function () {
         </div>
       </div>
     </template>
+    <template v-if="isLoading">
+      <div class="flex items-center my-2 py-4 px-2 justify-end">
+        <div
+          class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+        >
+          <span
+            class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+            >Loading...</span
+          >
+        </div>
+      </div>
+    </template>
   </ModalBuilder>
 </template>
 

package/src/DemoComponents/HomeSection.vue

@@ -71,7 +71,7 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'create' as 'create',
+    formType: 'update' as 'update',
     formName: 'news',
   },
   pageBuilderLogo: {
@@ -95,10 +95,10 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
 
 onMounted(async () => {
   if (typeof getLocalStorageItemName.value === 'string' && getLocalStorageItemName.value) {
-    if (localStorage.getItem(getLocalStorageItemName.value)) {
-      pageBuilderClass.loadExistingContent(
-        JSON.stringify(localStorage.getItem(getLocalStorageItemName.value)),
-      )
+    const value = localStorage.getItem(getLocalStorageItemName.value)
+
+    if (value) {
+      pageBuilderClass.loadExistingContent(JSON.stringify(value))
     } else {
       pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
       // pageBuilderClass.loadExistingContent(rawHTML, true)

package/src/DemoComponents/html.json

@@ -1,5 +1,4 @@
 {
-  "savedAt": "2016-06-19T12:34:56.000Z",
   "components": [
     {
       "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",

package/src/PageBuilder/PageBuilder.vue

@@ -12,12 +12,13 @@ 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'
 
 /**
  * Props for PageBuilder component
  * @typedef {Object} Props
  * @property {Object|null} CustomMediaLibraryComponent - Custom media component
- * @property {Object|null} CustomBuilderComponents - Custom search component
+ * @property {Object|null} CustomBuilderComponents - Custom component
  * @property {Object} configPageBuilder - Configuration object containing:
  */
 const props = defineProps({
@@ -192,6 +193,47 @@ watch(
   },
   { immediate: true },
 )
+const gridColumnModalResumeEditing = ref(Number(1))
+const typeModal = ref('')
+const showModalResumeEditing = ref(false)
+const titleModalResumeEditing = ref('')
+const descriptionModalResumeEditing = ref('')
+const firstButtonResumeEditing = ref('')
+const secondButtonResumeEditing = ref(null)
+const thirdButtonResumeEditing = ref(null)
+const firstModalButtonResumeEditingFunction = ref(null)
+const secondModalButtonResumeEditingFunction = ref(null)
+const thirdModalButtonResumeEditingFunction = ref(null)
+
+const isLoadingResumeEditing = ref(null)
+
+const handlerRumeEditingForUpdate = async function () {
+  await pageBuilderClass.clearHtmlSelection()
+
+  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?'
+  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(1000)
+    await pageBuilderClass.resumeEditingForUpdate()
+    isLoadingResumeEditing.value = false
+    showModalResumeEditing.value = false
+  }
+
+  // end modal
+}
 
 onMounted(async () => {
   const config = getConfigPageBuilder.value
@@ -199,9 +241,15 @@ onMounted(async () => {
 
   pageBuilderClass.updateLocalStorageItemName()
 
+  pageBuilderClass.deleteOldPageBuilderLocalStorage()
+
   await pageBuilderClass.clearHtmlSelection()
 
   await pageBuilderClass.setEventListenersForElements()
+
+  if (await pageBuilderClass.hasLocalDraftForUpdate()) {
+    handlerRumeEditingForUpdate()
+  }
 })
 </script>
 
@@ -264,6 +312,24 @@ onMounted(async () => {
       <Preview></Preview>
     </ModalBuilder>
 
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalResumeEditing"
+      :isLoading="isLoadingResumeEditing"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModalResumeEditing"
+      :title="titleModalResumeEditing"
+      :description="descriptionModalResumeEditing"
+      :firstButtonText="firstButtonResumeEditing"
+      :secondButtonText="secondButtonResumeEditing"
+      :thirdButtonText="thirdButtonResumeEditing"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonResumeEditingFunction"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonResumeEditingFunction"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonResumeEditingFunction"
+    >
+      <header></header>
+      <main></main>
+    </DynamicModalBuilder>
+
     <div>
       <div class="relative h-full flex pb-2 gap-2">
         <div
@@ -304,7 +370,7 @@ onMounted(async () => {
               class="flex myPrimaryGap items-center pt-4 pb-2 pl-2 h-24 w-full min-w-36"
             >
               <button
-                class="myPrimaryButton h-6 flex gap-2"
+                class="mySecondaryButton h-6 flex gap-2"
                 @click.stop="
                   async () => {
                     await pageBuilderClass.clearHtmlSelection()
@@ -333,6 +399,8 @@ onMounted(async () => {
                 </div>
                 <div>Save</div>
               </button>
+
+              <!-- Continue editing # end -->
             </div>
 
             <div

package/src/composables/PageBuilderClass.ts

@@ -50,6 +50,8 @@ class PageBuilderClass {
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.nextTick = nextTick()
 
+    this.hasStartedEditing = false
+
     this.containsPagebuilder = document.querySelector('#contains-pagebuilder')
 
     this.pageBuilderStateStore = pageBuilderStateStore
@@ -275,6 +277,7 @@ class PageBuilderClass {
   }
 
   handleAutoSave = async () => {
+    this.startEditing()
     const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
 
     // Check if config is set
@@ -312,6 +315,7 @@ class PageBuilderClass {
   }
 
   handleManualSave = async () => {
+    this.startEditing()
     const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
 
     // Check if config is set
@@ -958,7 +962,10 @@ class PageBuilderClass {
   }
 
   updateLocalStorageItemName(): void {
-    const updateOrCreate = this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType
+    const updateOrCreate =
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType
 
     const resourceData = this.pageBuilderStateStore.getConfigPageBuilder?.resourceData
 
@@ -1132,7 +1139,7 @@ class PageBuilderClass {
       localStorage.setItem(
         this.getLocalStorageItemName.value,
         JSON.stringify({
-          savedAt: new Date().toISOString(),
+          pageBuilderContentSavedAt: new Date().toISOString(),
           components: componentsToSave,
         }),
       )
@@ -1157,6 +1164,121 @@ class PageBuilderClass {
     }
   }
 
+  //
+  deleteOldPageBuilderLocalStorage(): void {
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+    ) {
+      let oldCountLocalStorages = 0
+      const deletedItemsLog: { Number: number; Key: string; SavedAt: string }[] = []
+
+      // const pastTime = new Date(Date.now() - 1 * 60 * 1000) // 1 minute
+      const pastTime = new Date(Date.now() - 14 * 24 * 60 * 60 * 1000) // 2 weeks
+
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+
+        if (!key) continue
+        if (!key.startsWith('page-builder-update-resource-')) continue
+
+        try {
+          const storeComponents = localStorage.getItem(key)
+          if (!storeComponents) continue
+
+          const storeComponentsParsed = JSON.parse(storeComponents)
+          const savedAt = storeComponentsParsed.pageBuilderContentSavedAt
+          if (savedAt) {
+            const savedAtDate = new Date(savedAt)
+
+            if (savedAtDate < pastTime) {
+              oldCountLocalStorages++
+              deletedItemsLog.push({
+                Number: oldCountLocalStorages,
+                Key: key,
+                SavedAt: savedAt,
+              })
+
+              // Delete old items
+              localStorage.removeItem(key)
+            }
+          }
+        } catch (e) {
+          // Ignore parse errors for unrelated keys
+        }
+      }
+
+      if (deletedItemsLog.length > 0) {
+        console.info(
+          `Deleted ${deletedItemsLog.length} localStorage item(s) older than ${pastTime} days:`,
+        )
+        console.table(deletedItemsLog)
+      }
+    }
+  }
+
+  async hasLocalDraftForUpdate(): boolean {
+    if (this.hasStartedEditing) return false
+
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+    ) {
+      const key = this.getLocalStorageItemName.value
+      if (typeof key === 'string') {
+        const draft = localStorage.getItem(key)
+        if (draft) {
+          try {
+            await this.delay(1000)
+            const draftParsed = JSON.parse(draft)
+            const dbComponents = this.getComponents.value
+            return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
+          } catch (e) {
+            return false
+          }
+        }
+      }
+    }
+    return false
+  }
+
+  // Call this when the user starts editing (e.g., on first change or when resuming a draft)
+  startEditing() {
+    this.hasStartedEditing = true
+  }
+
+  async resumeEditingForUpdate() {
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+    ) {
+      const key = this.getLocalStorageItemName.value
+      if (typeof key === 'string') {
+        const savedCurrentDesign = localStorage.getItem(key)
+        if (savedCurrentDesign) {
+          try {
+            const parsed = JSON.parse(savedCurrentDesign)
+            if (parsed && Array.isArray(parsed.components)) {
+              this.pageBuilderStateStore.setComponents(parsed.components)
+              localStorage.removeItem(key)
+              await nextTick()
+              await this.setEventListenersForElements()
+              await this.handleAutoSave()
+            }
+          } catch (e) {
+            console.error('Failed to parse local draft:', e)
+          }
+        }
+      }
+    }
+  }
+
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -1165,6 +1287,7 @@ class PageBuilderClass {
 
     if (
       this.getLocalStorageItemName.value &&
+      typeof this.getLocalStorageItemName.value === 'string' &&
       localStorage.getItem(this.getLocalStorageItemName.value)
     ) {
       const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)
@@ -1431,19 +1554,20 @@ class PageBuilderClass {
     }
   }
 
-  // Private method to parse JSON components and save savedAt to localStorage
+  // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
   #parseJSONComponents(jsonData: string): void {
     try {
       const parsedData = JSON.parse(jsonData)
       let componentsArray: ComponentObject[] = []
-      let savedAt: string | undefined = undefined
+      let pageBuilderContentSavedAt: string | undefined = undefined
 
       // Support both old and new structure
       if (Array.isArray(parsedData)) {
         componentsArray = parsedData
       } else if (parsedData && Array.isArray(parsedData.components)) {
         componentsArray = parsedData.components
-        savedAt = parsedData.savedAt
+
+        pageBuilderContentSavedAt = parsedData.pageBuilderContentSavedAt
       }
 
       let savedCurrentDesign: ComponentObject[] = []
@@ -1479,9 +1603,9 @@ class PageBuilderClass {
 
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
 
-      // Save to localStorage with savedAt using the correct key
+      // Save to localStorage with pageBuilderContentSavedAt using the correct key
       const dataToSave = {
-        savedAt: savedAt || new Date().toISOString(),
+        pageBuilderContentSavedAt: parsedData.pageBuilderContentSavedAt || new Date().toISOString(),
         components: savedCurrentDesign,
       }
 
@@ -1549,13 +1673,23 @@ class PageBuilderClass {
 
     const storedData = this.areComponentsStoredInLocalStorage()
 
-    if (this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType === 'create') {
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'create'
+    ) {
       if (storedData) {
         this.setComponentsFromData(storedData)
       }
     }
 
-    if (this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType === 'update') {
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+    ) {
       if (data) {
         this.setComponentsFromData(data)
       }