Nithish/cx 15828

web-components/src/[sandbox]/examples/AdvanceList/components/ErrorLoader/ErrorLoader.scss

@@ -0,0 +1,22 @@
+.infinite-scroll-error {
+    display: flex;
+    padding-left: 15px;
+    font-size: var(--font-size-small);
+    color: var(--md-alert-error-text-color, --red-70-color);
+    flex-direction: column;
+    .error-block {
+      display: flex;
+      flex-direction: column;
+      .error-span-padding {
+        padding-right: 8px;
+      }
+      .tracking-error-block {
+        display: inline-flex;
+      }
+      .infinite-scroll-retry-link::part(link) {
+        font-size: var(--font-size-small);
+        color: var(--md-alert-error-text-color, --red-70-color);
+      }
+    }
+  }
+

web-components/src/[sandbox]/examples/AdvanceList/components/ErrorLoader/ErrorLoader.ts

@@ -0,0 +1,77 @@
+import { html, LitElement, css, property, internalProperty, PropertyValues } from 'lit-element';
+import { customElementWithCheck } from '@/mixins/CustomElementCheck';
+import './ErrorLoader.scss';
+import '@/components/help-text/HelpText';
+import '@/components/link/Link';
+export namespace MdFetchError {
+  @customElementWithCheck('md-fetch-error')
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) messageType = 'error';
+    @property({ type: String }) customStyle = '';
+    @property({ type: String }) commonErrorMsg = '';
+    @property({ type: String }) commonTryAgain = '';
+    @property({ type: String }) trackingId = '';
+    @property({ type: String }) trackingIdInputLabel = '';
+
+    @internalProperty() isLoading = false;
+    @internalProperty() hasError = false;
+
+
+    private onRetry(event: Event) {
+      this.dispatchEvent(
+        new CustomEvent('retry', {
+          detail: { message: 'Retrying fetch...' },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+
+    render() {
+      return html`
+        <md-help-text
+          .messageType="${this.messageType}"
+          class="infinite-scroll-error"
+          style="${this.style}"
+          aria-live="polite"
+        >
+          <div class="error-block">
+            <span>
+              <span class="error-span-padding">
+                ${this.commonErrorMsg}.
+              </span>
+              <md-link
+                inline
+                class="infinite-scroll-retry-link"
+                aria-label="${this.commonTryAgain}"
+                @click="${this.onRetry}"
+                @keydown="${this.onRetry}"
+                tag="span"
+                data-testid="retry-page"
+              >
+                ${this.commonTryAgain}
+              </md-link>
+            </span>
+            ${this.trackingId && this.trackingId !== ''
+              ? html`<span class="tracking-error-block">
+                  ${this.trackingIdInputLabel} ${this.trackingId}
+                </span>`
+              : null}
+          </div>
+        </md-help-text>
+      `;
+    }
+
+    updated(changedProperties: PropertyValues) {
+      if (changedProperties.has('hasError') && this.hasError) {
+        this.requestUpdate();
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-fetch-error': MdFetchError.ELEMENT;
+  }
+}

web-components/src/[sandbox]/examples/AdvanceList/components/ParentComponentError.ts

@@ -0,0 +1,112 @@
+import { html, LitElement, css, property, internalProperty } from "lit-element";
+import "@/components/advance-list/AdvanceList";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import './ErrorLoader/ErrorLoader';
+
+export namespace ParentComponentError {
+  @customElementWithCheck("parent-component-error")
+  export class ELEMENT extends LitElement {
+    @property({ type: Array }) items: any = [];
+    @internalProperty() page = 1;
+    @property({ type: Boolean }) isLoading = false;
+    @internalProperty() shouldFail = false;
+    @property({ type: Boolean }) isError = false;
+
+    constructor() {
+      super();
+      this.items = [];
+      this.page = 1;
+      this.isLoading = false;
+      this.isError = false;
+      this.loadMoreItems();
+      this.shouldFail = false; // Initialize the flag
+    }
+
+    async loadMoreItems() {
+      console.log('event dispatched ----->>>');
+      try {
+        if (this.shouldFail) {
+          throw new Error('Simulated alternating failure');
+        }
+        this.isLoading = true;
+        const newItems = await this.fetchItems(this.page);
+
+        this.items = [...this.items, ...newItems];
+        this.page += 1;
+        this.isLoading = false;
+        this.isError = false;
+
+      } catch (err) {
+        this.isLoading = false;
+        this.isError = true;
+        console.log('line no 44', this.isLoading, this.isError);
+      } finally {
+        // Toggle the flag after each attempt
+        this.shouldFail = !this.shouldFail;
+        // this.requestUpdate(); // re-rendering is not happening
+      }
+    }
+
+    async fetchItems(page: number) {
+      console.log('Fetching items for page', page);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      const newItems = Array.from({ length: 20 }, (_, i) => ({
+        data: `Item ${(page - 1) * 20 + i + 1}`,
+        id: crypto.randomUUID(),
+        index: i,
+        template: (data: string, index: number) => html`<div indexing="${index}" >${data}</div>`
+      }));
+      return newItems;
+    }
+
+    handleRetry() {
+      console.log('Retry triggered');
+      this.loadMoreItems();
+    }
+
+    render() {
+      console.log("rendering parent component--error is loading", this.isLoading);
+      return html`
+        <h2>Error scenario</h2>
+        <md-advance-list 
+          .items=${this.items}
+          .isLoading=${this.isLoading}
+          .isError=${this.isError}
+          @load-more=${this.loadMoreItems}>
+          <md-spinner size="24" slot="spin-loader"></md-spinner>
+        </md-advance-list>
+
+        ${this.isError ? html`
+          <md-fetch-error
+            messageType="error"
+            style="color: red;"
+            commonErrorMsg="An error occurred while fetching data"
+            commonTryAgain="Try Again"
+            trackingId="12345"
+            trackingIdInputLabel="Tracking ID:"
+            @retry="${this.handleRetry}">
+          </md-fetch-error>
+        ` : ''}
+      `;
+    }
+
+    static get styles() {
+      return css`
+        .item {
+          padding: 16px;
+          border-bottom: 1px solid #ccc;
+        }
+        .error {
+          color: red;
+        }
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "parent-component-error": ParentComponentError.ELEMENT;
+  }
+}

web-components/src/[sandbox]/examples/AdvanceList/components/ParentComponentGeneric.ts

@@ -0,0 +1,96 @@
+import { html, LitElement, css, property, internalProperty } from "lit-element";
+// import "@/components/list/InfiniteScrollList";
+import "@/components/advance-list/AdvanceList";
+import "@/components/list/ListItem"
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+
+export namespace ParentComponentGeneric {
+    @customElementWithCheck("parent-component-generic")
+    export class ELEMENT extends LitElement {
+        @property({ type: Array }) items: any = [];
+        @internalProperty() page = 1;
+        @property({ type: Boolean }) isLoading = false;
+        @property({ type: String }) isError: string | null = null;
+
+        constructor() {
+            super();
+            this.items = [];
+            this.page = 1;
+            this.isLoading = false;
+            this.isError = null;
+            this.loadMoreItems();
+        }
+
+        async loadMoreItems() {
+            console.log('event dispatched ----->>>')
+            try {
+                this.isLoading = true;
+                const newItems = await this.fetchItems(this.page);
+                this.items = [...this.items, ...newItems];
+                this.page += 1;
+                this.isLoading = false;
+                this.isError = null;
+            } catch (err) {
+                this.isLoading = false;
+                this.isError = 'Failed to load more items. Please try again.';
+            }
+        }
+
+        async fetchItems(page: number) {
+            console.log('Fetching items for page', page);
+            await new Promise(resolve => setTimeout(resolve, 1000));
+
+            const newItems = Array.from({ length: 20 }, (_, i) => ({
+                data: `Item ${(page - 1) * 20 + i + 1}`,
+                id: crypto.randomUUID(),
+                index: i,
+                template: (data: string, index: number) => html`<md-list-item indexing="${index}" >${data}</md-list-item>`
+            }));
+            console.log('newItems', newItems)
+            return newItems;
+        }
+
+        private handleListItemChange(event: CustomEvent) {
+            console.log('event dispatched from momentum ----->>>', event)
+            //API call send to end point to upate the item
+        }
+
+        render() {
+            // console.log("rendering parent component--generic", this.items)
+            console.log("rendering parent component--generic is loading", this.isLoading)
+            return html`
+        <h2>Generic Item List</h2>
+        <md-advance-list
+          .items=${this.items}
+          .isLoading=${this.isLoading}
+          .isError=${this.isError}
+          @list-item-change=${this.handleListItemChange}
+          @load-more=${this.loadMoreItems}>
+          <md-spinner size="24" slot="spin-loader"></md-spinner>
+        </md-advance-list>
+
+        `;
+            // this should inside backtik
+            // ${this.isLoading ? html`<p>isLoading...</p>` : ''}
+            // ${this.isError ? html`<p class="isError">${this.isError}</p>` : ''}
+        }
+
+        static get styles() {
+            return css`
+        .item {
+          padding: 16px;
+          border-bottom: 1px solid #ccc;
+        }
+        .error {
+          color: red;
+        }
+      `;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "parent-component-generic": ParentComponentGeneric.ELEMENT;
+    }
+}

web-components/src/[sandbox]/examples/advance-list.ts

@@ -0,0 +1,36 @@
+import "@/components/list/InfiniteScrollList";
+import "@/components/list/ListItem";
+import "./AdvanceList/components/ParentComponentGeneric";
+import "./AdvanceList/components/ParentComponentError";
+import { html } from "lit-element";
+
+const data = [
+    { id: "0", country: "Afghanistan" },
+    { id: "1", country: "Aland Islands" },
+    { id: "2", country: "Albania" },
+    { id: "3", country: "Algeria" },
+    { id: "4", country: "American Samoa" },
+    { id: "5", country: "Andorra" }]
+
+
+
+
+export const advanceListTemplate = html`
+  <h3>VIRTUAL LIST</h3>
+
+  <parent-component-generic></parent-component-generic>
+
+  <parent-component-error></parent-component-error>
+
+  </div>
+
+
+`;
+
+
+// <div style="width: 300px; margin-bottom: 50px"> 
+// <parent-component-generic></parent-component-generic>
+// </div>
+
+//   <div style="width: 300px; margin-bottom: 50px"> 
+// <parent-component-error></parent-component-error>

web-components/src/[sandbox]/examples/index.ts

@@ -31,6 +31,7 @@ export { inputFileTemplate } from "./input-file";
 export { labelTemplate } from "./label";
 export { linkTemplate } from "./link";
 export { listTemplate } from "./list";
+export { advanceListTemplate } from "./advance-list";
 export { loadingTemplate } from "./loading";
 export { meetingAlertTemplate } from "./meeting-alert";
 export { menuItemTemplate } from "./menu-item";

web-components/src/[sandbox]/examples/virtual-list.ts

@@ -0,0 +1,27 @@
+import "@/components/list/VirtualList";
+import "@/components/list/ListItem";
+import "@/components/list/ParentComponent";
+import { html } from "lit-element";
+
+const data = [
+    { id: "0", country: "Afghanistan" },
+    { id: "1", country: "Aland Islands" },
+    { id: "2", country: "Albania" },
+    { id: "3", country: "Algeria" },
+    { id: "4", country: "American Samoa" },
+    { id: "5", country: "Andorra" }]
+
+
+
+
+export const virtualListTemplate = html`
+  <h3>VIRTUAL LIST</h3>
+
+  <md-virtual-list ?virtual={true} .options=${data} label="Transuranium elements">
+
+  </md-virtual-list>
+
+  <parent-component></parent-component>
+
+`;
+