@myissue/vue-website-page-builder 3.2.75 → 3.2.77

package/package.json

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

package/src/DemoComponents/HomeSection.vue

@@ -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

@@ -199,6 +199,8 @@ onMounted(async () => {
 
   pageBuilderClass.updateLocalStorageItemName()
 
+  pageBuilderClass.deleteOldPageBuilderLocalStorage()
+
   await pageBuilderClass.clearHtmlSelection()
 
   await pageBuilderClass.setEventListenersForElements()

package/src/composables/PageBuilderClass.ts

@@ -958,7 +958,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 +1135,7 @@ class PageBuilderClass {
       localStorage.setItem(
         this.getLocalStorageItemName.value,
         JSON.stringify({
-          savedAt: new Date().toISOString(),
+          pageBuilderContentSavedAt: new Date().toISOString(),
           components: componentsToSave,
         }),
       )
@@ -1157,6 +1160,61 @@ 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)
+      }
+    }
+  }
+
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -1431,20 +1489,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 {
-    console.log(1111)
     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[] = []
@@ -1480,9 +1538,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,
       }
 
@@ -1499,7 +1557,6 @@ class PageBuilderClass {
   }
   // Private method to parse HTML components
   #parseHTMLComponents(htmlData: string): void {
-    console.log(2222)
     try {
       const parser = new DOMParser()
       const doc = parser.parseFromString(htmlData, 'text/html')
@@ -1551,13 +1608,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)
       }