Fix editonclick bug

Power-Components · Oct 1, 2024 · b84556f · b84556f
1 parent 8e93f2a
commit b84556f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/powergrid.js": "/powergrid.js?id=377a2e5641b0803a4bcc836ddc46270d",
+    "/powergrid.js": "/powergrid.js?id=df5ea910257b1759edb78c977a3ae6c8",
     "/bootstrap5.css": "/bootstrap5.css?id=a27af22343149104b2aa3283d8fd502b",
     "/tailwind.css": "/tailwind.css?id=924477e2afcb2cb56aa392e266ee56ca"
 }
diff --git a/dist/powergrid.js b/dist/powergrid.js
diff --git a/resources/js/components/pg-editable.js b/resources/js/components/pg-editable.js
@@ -1,18 +1,17 @@
 export default (params) => ({
     theme: params.theme,
-    editable: false,
-    tableName: params.tableName ?? null,
     id: params.id ?? null,
     dataField: params.dataField ?? null,
     content: params.content,
-    oldContent: null,
     fallback: params.fallback,
+    inputClass: params.inputClass,
+    saveOnMouseOut: params.saveOnMouseOut,
+    oldContent: null,
+    editable: false,
     hash: null,
     hashError: true,
     showEditable: false,
     editableInput: '',
-    inputClass: params.inputClass,
-    saveOnMouseOut: params.saveOnMouseOut,
     init() {
         if (this.content.length === 0 && this.fallback) {
             this.content = this.htmlSpecialChars(this.fallback);
@@ -28,8 +27,16 @@ export default (params) => ({
                 this.oldContent = this.content;
                 const editablePending = window.editablePending.notContains(this.hash)
                 this.hashError = editablePending
+
+                setTimeout(() => {
+                    if (window.editablePending.getTextContent(this.hash) && document.getElementById('editable-' + this.hash)) {
+                        document.getElementById('editable-' + this.hash).textContent =
+                            window.editablePending.getTextContent(this.hash)
+                    }
+                }, 220)
+
                 if (editablePending) {
-                    const pendingHash = window.editablePending.pending[0]
+                    const pendingHash = window.editablePending.get(this.hash)
                     document.getElementById('clickable-' + pendingHash).click()
                 } else {
                     showEditable = true
@@ -60,12 +67,13 @@ export default (params) => ({
         this.content = this.htmlSpecialChars(this.content);
     },
     save() {
-        if(this.$el.textContent == this.oldContent) {
-            this.editable = false;
-            this.showEditable = false;
+        window.editablePending.clear()
+        window.editablePending.set(this.hash, this.$el.textContent)
 
-            return;
-        }
+        setTimeout(() => {
+            document.getElementById('clickable-' + this.hash).textContent =
+                this.$el.textContent
+        }, 230)
 
         setTimeout(() => {
             window.addEventListener('pg:editable-close-'+this.id, () => {
@@ -75,16 +83,17 @@ export default (params) => ({
             })
 
             if(!window.editablePending.has(this.hash)) {
-                window.editablePending.set(this.hash)
+                window.editablePending.set(this.hash, this.$el.textContent)
+
             }
 
-            this.$wire.dispatch('pg:editable-' + this.tableName, {
+            this.$wire.dispatch('pg:editable-' + this.$wire.tableName, {
                 id: this.id,
                 value: this.$el.textContent,
                 field: this.dataField
             })
 
-            this.oldContent = null
+            this.oldContent = window.editablePending.getTextContent(this.hash)
 
             this.$nextTick(() => setTimeout(() => {
                 this.focus()

diff --git a/resources/js/stores/index.js b/resources/js/stores/index.js
@@ -1,23 +1,39 @@
 document.addEventListener('alpine:init', () => {
     window.Alpine.store('editablePending', {
         pending: [],
-        set(value) {
-            this.pending.push(value)
+
+        set(value, textContent) {
+            this.pending = this.pending.filter(item => item.value !== value);
+            this.pending.push({ value, textContent });
         },
+
         has(value) {
-            return this.pending.includes(value)
+            return this.pending.some(item => item.value === value);
         },
+
+        get(value) {
+            return this.pending.find(item => item.value === value);
+        },
+
         notContains(value) {
-            return this.pending.length > 0 && !this.pending.includes(value)
+            return this.pending.length > 0 && !this.has(value);
         },
+
         clear() {
-            this.pending = []
+            this.pending = [];
         },
+
         isNotEmpty() {
-            return this.pending.length > 0
+            return this.pending.length > 0;
         },
+
+        getTextContent(value) {
+            const item = this.pending.find(item => item.value === value);
+            return item ? item.textContent : null;
+        }
     });
 
+
     window.Alpine.store('pgBulkActions', {
         selected: [],
         init() {