refactor(static): add base component types

static/src/app/schedule/component.ts

@@ -1,110 +1,52 @@
+import { ListElement, ListItemElement, ValueElement } from "../base/component";
 import { Channel } from "./model";
 
-export class ScheduleChannelElement extends HTMLElement {
-  static observedAttributes = ["channel", "removable"];
+export class ScheduleChannelGroup extends ValueElement<string | Channel[], {}> {
+  className: string = "list-group-item list-group-item-action";
 
-  channel: Channel | null = null;
-
-  constructor() {
-    super();
-    this.handleClick = this.handleClick.bind(this);
-    this.handleRemoveClick = this.handleRemoveClick.bind(this);
-    this.handleAddClick = this.handleAddClick.bind(this);
-  }
-
-  connectedCallback() {
-    this.channel = JSON.parse(this.getAttribute("channel") || "{}");
-    this.innerHTML = `
-    <a href="${this.channel?.provider}/${this.channel?.id}"
+  buildHTML(): string {
+    const groupName = Array.isArray(this.value) ? "Open All" : this.value;
+    const groupId = Array.isArray(this.value)
+      ? this.value.map((item) => `${item.provider}:${item.id}`).join(",")
+      : this.value || "";
+    return `
+    <a href="group/${encodeURIComponent(groupId)}"
       class="d-flex justify-content-between align-items-start text-decoration-none">
       <span>
-        <span class="text-success me-2" style="color: green;" data-add>
-          &plus;
-        </span>
-        <span class="badge me-1 text-bg-secondary">${this.channel?.provider}</span>
-        <span class="text-primary">${this.channel?.name}</span>
-      </span>
-      <span>
-        <span class="text-danger ms-2" data-remove>
-          &#x2715;
-        </span>
+        <span class="text-primary" style="text-transform: capitalize">${groupName}</span>
       </span>
     </a>`;
-    this.classList = "list-group-item list-group-item-action";
-    this.addEventListener("click", this.handleClick);
-    if (this.hasAttribute("removable")) {
-      this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);
+  }
+}
+
+customElements.define("schedule-channel-group", ScheduleChannelGroup);
+
+export class ScheduleChannelItem extends ListItemElement<Channel> {
+  getHref(value: Channel): string {
+    return `${value.provider}/${value.id}`;
+  }
+
+  getContent(value: Channel): string {
+    return `
+    <span class="badge me-1 text-bg-secondary">${value.provider}</span>
+    <span class="text-primary">${value.name}</span>
+    `;
+  }
+}
+
+export class ScheduleChannelList extends ListElement<Channel, ScheduleChannelItem> {
+  childType = ScheduleChannelItem;
+
+  public onRefresh(): void {
+    super.onRefresh();
+    if (this.value?.length) {
+      const groupElement = new ScheduleChannelGroup(this.value);
+      this.prepend(groupElement);
     } else {
-      this.querySelector("[data-remove]")?.remove();
-    }
-    if (this.hasAttribute("addeable")) {
-      this.querySelector<HTMLElement>("[data-add]")?.addEventListener("click", this.handleAddClick);
-    } else {
-      this.querySelector("[data-add]")?.remove();
-    }
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
-    this.querySelector<HTMLElement>("[data-remove]")?.removeEventListener("click", this.handleRemoveClick);
-  }
-
-  handleClick(event: MouseEvent) {
-    if (this.channel) {
-      window.scheduleChannelStorage.add(this.channel);
-    }
-  }
-
-  handleRemoveClick(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (this.channel) {
-      window.scheduleChannelStorage.remove(this.channel.id);
-    }
-    this.remove();
-  }
-
-  handleAddClick(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (this.channel) {
-      if (window.scheduleChannelStorage.add(this.channel)) {
-        const storedChannels = document.querySelector("#storedChannels");
-        if (storedChannels) {
-          const clone: Element = this.cloneNode(true) as Element;
-          clone.removeAttribute("addeable");
-          clone.setAttribute("removable", "");
-          storedChannels.appendChild(clone);
-        }
-      }
+      this.prepend("Empty");
     }
   }
 }
 
-export class ScheduleChannelGroupElement extends HTMLElement {
-  static observedAttributes = ["group", "channels"];
-
-  group: string | null = null;
-  channels: Channel[] | null = null;
-
-  constructor() {
-    super();
-  }
-
-  connectedCallback() {
-    this.channels = JSON.parse(this.getAttribute("channels") || "[]");
-    this.group = this.getAttribute("group");
-    const groupId = this.channels?.map((item) => `${item.provider}:${item.id}`).join(",") || this.group || "n/a";
-    this.innerHTML = `
-    <a href="group/${encodeURIComponent(groupId)}"
-      class="d-flex justify-content-between align-items-start  text-decoration-none">
-      <span>
-        <span class="text-primary" style="text-transform: capitalize">${this.group || "Open group"}</span>
-      </span>
-    </a>`;
-    this.classList = "list-group-item list-group-item-action";
-  }
-}
-
-customElements.define("schedule-channel", ScheduleChannelElement);
-customElements.define("schedule-channel-group", ScheduleChannelGroupElement);
+customElements.define("schedule-channel-item", ScheduleChannelItem);
+customElements.define("schedule-channel-list", ScheduleChannelList);