latest updated fragments for demo

studio/src/aem/aem-fragments.js

@@ -55,7 +55,7 @@ class AemFragments extends LitElement {
     /**
      * @type {AEM}
      */
-    #aem;
+    aem;
 
     /**
      *
@@ -79,12 +79,11 @@ class AemFragments extends LitElement {
             throw new Error(
                 'Either the bucket or baseUrl attribute is required.',
             );
-        this.#aem = new AEM(this.bucket, this.baseUrl);
-        this.style.display = 'none';
+        this.aem = new AEM(this.bucket, this.baseUrl);
     }
 
     async selectFragment(x, y, fragment) {
-        const latest = await this.#aem.sites.cf.fragments.getById(fragment.id);
+        const latest = await this.aem.sites.cf.fragments.getById(fragment.id);
         Object.assign(fragment, latest);
         fragment.refreshFrom(latest);
         this.setFragment(fragment);
@@ -102,7 +101,7 @@ class AemFragments extends LitElement {
     }
 
     async getTopFolders() {
-        const { children } = await this.#aem.folders.list(ROOT);
+        const { children } = await this.aem.folders.list(ROOT);
         const ignore = window.localStorage.getItem('ignore_folders') || [
             'images',
         ];
@@ -173,7 +172,7 @@ class AemFragments extends LitElement {
                 bubbles: true,
             }),
         );
-        let fragmentData = await this.#aem.sites.cf.fragments.getById(
+        let fragmentData = await this.aem.sites.cf.fragments.getById(
             this.searchText,
         );
         if (this.tags) {
@@ -220,22 +219,22 @@ class AemFragments extends LitElement {
         if (this.isFragmentId(this.searchText)) {
             await this.searchFragmentByUUID();
         } else {
-            const cursor = await this.#aem.sites.cf.fragments.search(
+            const cursor = await this.aem.sites.cf.fragments.search(
                 this.#search,
             );
             await this.processFragments(cursor, search);
         }
     }
 
     async saveFragment() {
-        let fragment = await this.#aem.sites.cf.fragments.save(this.fragment);
+        let fragment = await this.aem.sites.cf.fragments.save(this.fragment);
         if (!fragment) throw new Error('Failed to save fragment');
         aemFragmentCache.get(fragment.id)?.refreshFrom(fragment);
     }
 
     async copyFragment() {
         const oldFragment = this.fragment;
-        const fragment = await this.#aem.sites.cf.fragments.copy(oldFragment);
+        const fragment = await this.aem.sites.cf.fragments.copy(oldFragment);
         const newFragment = new Fragment(fragment, this);
         aemFragmentCache?.add(newFragment);
         if (this.searchText) {
@@ -248,11 +247,11 @@ class AemFragments extends LitElement {
     }
 
     async publishFragment() {
-        await this.#aem.sites.cf.fragments.publish(this.fragment);
+        await this.aem.sites.cf.fragments.publish(this.fragment);
     }
 
     async deleteFragment() {
-        await this.#aem.sites.cf.fragments.delete(this.fragment);
+        await this.aem.sites.cf.fragments.delete(this.fragment);
         if (this.searchText) {
             const fragmentIndex = this.#searchResult.indexOf(this.fragment);
             this.#searchResult.splice(fragmentIndex, 1);

studio/src/aem/aem.js

@@ -58,7 +58,7 @@ class AEM {
      * @param {string} [params.query] - The search query
      * @returns A generator function that fetches all the matching data using a cursor that is returned by the search API
      */
-    async *searchFragment({ path, query = '', tags = [], sort }) {
+    async *searchFragment({ path, query = '', tags = [], sort }, limit) {
         const filter = {
             path,
         };
@@ -80,6 +80,10 @@ class AEM {
             query: JSON.stringify(searchQuery),
         };
 
+        if (limit) {
+            params.limit = limit;
+        }
+
         let cursor;
         while (true) {
             if (cursor) {

studio/src/mas-latest-fragments.js

@@ -0,0 +1,67 @@
+import { html } from 'lit';
+
+import { Fragment } from './aem/fragment.js';
+import { AemFragments } from './aem/aem-fragments.js';
+
+/** aem-fragment cache */
+let aemFragmentCache;
+
+class MasLatestFragments extends AemFragments {
+    static get properties() {
+        return {
+            loading: { type: Boolean, reflect: true },
+            fragments: { type: Array, state: true },
+        };
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    constructor() {
+        super();
+        this.fragments = [];
+        this.loading = true;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadLatestFragments();
+    }
+
+    async loadLatestFragments() {
+        this.loading = true;
+        this.fragments = [];
+        const cursor = await this.aem.sites.cf.fragments.search(
+            {
+                sort: [{ on: 'modifiedOrCreated', order: 'DESC' }],
+                path: '/content/dam/mas',
+                // tags: ['mas:status/DEMO']
+            },
+            6,
+        );
+        const result = await cursor.next();
+        this.fragments = result.value.map((item) => new Fragment(item, this));
+        this.addToCache(this.fragments);
+        this.loading = false;
+    }
+
+    renderItem(fragment) {
+        return html`<merch-card>
+            <aem-fragment fragment="${fragment.id}" ims author></aem-fragment>
+            <sp-status-light
+                size="l"
+                variant="${fragment.statusVariant}"
+            ></sp-status-light>
+        </merch-card>`;
+    }
+
+    render() {
+        return html`<h3>Latest Updates</h3>
+            <div class="container">
+                ${this.fragments.map(this.renderItem)}
+            </div>`;
+    }
+}
+
+customElements.define('mas-latest-fragments', MasLatestFragments);

studio/src/studio.js

@@ -5,6 +5,7 @@ import './editors/merch-card-editor.js';
 import './rte/rte-field.js';
 import './rte/rte-link-editor.js';
 import './mas-top-nav.js';
+import './mas-latest-fragments.js';
 
 const EVENT_LOAD_START = 'load-start';
 const EVENT_LOAD_END = 'load-end';
@@ -325,6 +326,14 @@ class MasStudio extends LitElement {
         `;
     }
 
+    get latestFragments() {
+        return html`<mas-latest-fragments
+            base-url="${this.baseUrl}"
+            path="${this.path}"
+        >
+        </mas-latest-fragments>`;
+    }
+
     customRenderItem(item) {
         if (!item) return html`<sp-table-cell></sp-table-cell>`;
         return html` <sp-table-cell>${item.variant}</sp-table-cell>`;
@@ -334,8 +343,8 @@ class MasStudio extends LitElement {
         return html`
             <mas-top-nav env="${this.env}"></mas-top-nav>
             <side-nav></side-nav>
-            ${this.content} ${this.fragmentEditor} ${this.selectFragmentDialog}
-            ${this.toast} ${this.loadingIndicator}
+            ${this.content} ${this.latestFragments} ${this.fragmentEditor}
+            ${this.selectFragmentDialog} ${this.toast} ${this.loadingIndicator}
         `;
     }
 

studio/style.css

@@ -140,3 +140,19 @@ merch-card-editor mas-multifield,
 rte-field {
     margin-inline-end: 16px;
 }
+
+mas-latest-fragments[loading] {
+    visibility: hidden;
+}
+
+mas-latest-fragments {
+    background-color: var(--spectrum-red-100);
+    padding: 32px;
+}
+
+mas-latest-fragments > .container {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    padding-inline-start: 0;
+}