Properly notify and handle duplication/deletion for fragments (#88)

* Properly notify and handle duplication/deletion for fragments * improved studio change handler --------- Co-authored-by: Nicolas Peltier <[email protected]>
adobecom · Nov 14, 2024 · 97c1491 · 97c1491
1 parent 9f5c11e
commit 97c1491
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/studio/src/aem/aem-fragments.js b/studio/src/aem/aem-fragments.js
@@ -2,7 +2,12 @@ import { LitElement, nothing } from 'lit';
 import { AEM } from './aem.js';
 import { Folder } from './folder.js';
 import { Fragment } from './fragment.js';
-import { EVENT_LOAD, EVENT_LOAD_END, EVENT_LOAD_START } from '../events.js';
+import {
+    EVENT_CHANGE,
+    EVENT_LOAD,
+    EVENT_LOAD_END,
+    EVENT_LOAD_START,
+} from '../events.js';
 
 /** aem-fragment cache */
 let aemFragmentCache;
@@ -232,12 +237,16 @@ class AemFragments extends LitElement {
 
     async copyFragment() {
         const oldFragment = this.fragment;
-        this.setFragment(null);
         const fragment = await this.#aem.sites.cf.fragments.copy(oldFragment);
-        aemFragmentCache?.add(fragment);
-        const newFragment = new Fragment(fragment);
-        this.#search.addToResult(newFragment, oldFragment);
+        const newFragment = new Fragment(fragment, this);
+        aemFragmentCache?.add(newFragment);
+        if (this.searchText) {
+            this.#searchResult.push(newFragment);
+        } else {
+            this.currentFolder?.add(newFragment);
+        }
         this.setFragment(newFragment);
+        this.dispatchEvent(new CustomEvent(EVENT_CHANGE, { bubbles: true }));
     }
 
     async publishFragment() {
@@ -246,8 +255,14 @@ class AemFragments extends LitElement {
 
     async deleteFragment() {
         await this.#aem.sites.cf.fragments.delete(this.fragment);
-        this.#search.removeFromResult(this.fragment);
+        if (this.searchText) {
+            const fragmentIndex = this.#searchResult.indexOf(this.fragment);
+            this.#searchResult.splice(fragmentIndex, 1);
+        } else {
+            this.currentFolder?.remove(this.fragment);
+        }
         this.setFragment(null);
+        this.dispatchEvent(new CustomEvent(EVENT_CHANGE, { bubbles: true }));
     }
 
     clearSelection() {

diff --git a/studio/src/aem/aem.js b/studio/src/aem/aem.js
@@ -7,7 +7,7 @@ const defaultSearchOptions = {
 class AEM {
     #author;
     constructor(bucket, baseUrlOverride) {
-        this.#author = /^author-/.test(bucket);
+        this.#author = Boolean(bucket);
         const baseUrl =
             baseUrlOverride || `https://${bucket}.adobeaemcloud.com`;
         this.baseUrl = baseUrl;
@@ -222,7 +222,7 @@ class AEM {
         if (!newPath) {
             throw new Error('Failed to extract new path from copy response');
         }
-        await this.wait(); // give AEM time to process the copy
+        await this.wait(2000); // give AEM time to process the copy
         let newFragment = await this.getFragmentByPath(newPath);
         if (newFragment) {
             newFragment = await this.sites.cf.fragments.getById(newFragment.id);

diff --git a/studio/src/aem/folder.js b/studio/src/aem/folder.js
@@ -32,4 +32,10 @@ export class Folder {
     add(...fragments) {
         this.fragments = [...this.fragments, ...fragments];
     }
+
+    remove(fragment) {
+        const fragmentIndex = this.fragments.indexOf(fragment);
+        if (fragmentIndex === -1) return;
+        this.fragments.splice(fragmentIndex, 1);
+    }
 }
diff --git a/studio/src/studio.js b/studio/src/studio.js
@@ -1,5 +1,5 @@
 import { html, LitElement, nothing } from 'lit';
-import { EVENT_SUBMIT } from './events.js';
+import { EVENT_CHANGE, EVENT_SUBMIT } from './events.js';
 import { deeplink, pushState } from './deeplink.js';
 import './editors/merch-card-editor.js';
 import './rte/rte-field.js';
@@ -53,6 +53,10 @@ class MasStudio extends LitElement {
             this.requestUpdate();
         });
         this.addEventListener(EVENT_LOAD_END, () => this.requestUpdate());
+        this.addEventListener(EVENT_CHANGE, () => {
+            if (!this.fragment) this.showEditorPanel = false;
+            else this.requestUpdate();
+        });
 
         // Listen for ESC key to close the fragment editor and quit selection mode
         document.addEventListener('keydown', (e) => {