refactor(static): add base component types

static/src/app/base/manager.ts

@@ -0,0 +1,50 @@
+import { ListElement, ListItemElement } from "./component";
+import { DataStorage, StorageValue } from "./storage";
+
+export class DataManager<T extends StorageValue> {
+  private storage: DataStorage<T>;
+
+  private get dataList(): ListElement<T> {
+    return document.querySelector(this.dataListSelector)!;
+  }
+
+  constructor(
+    listComponentType: typeof ListElement<T>, //prevent removing as unusing
+    storageKey: string,
+    private dataListSelector: string,
+  ) {
+    this.storage = new DataStorage(storageKey);
+    this.load = this.load.bind(this);
+    this.store = this.store.bind(this);
+    this.add = this.add.bind(this);
+    this.remove = this.remove.bind(this);
+  }
+
+  load() {
+    this.dataList.value = this.storage.getAll();
+  }
+
+  store(element: ListItemElement<T>) {
+    if (element.value) {
+      this.storage.add(element.value);
+    }
+  }
+
+  add(element: ListItemElement<T>) {
+    const value = element.value;
+    value;
+    if (value && this.storage.add(value)) {
+      const clone: ListItemElement<T> = element.cloneNode(true) as ListItemElement<T>;
+      clone.options = { onRemove: this.remove };
+      this.dataList.appendChild(clone);
+    }
+  }
+
+  remove(element: ListItemElement<T>) {
+    const value = element.value;
+    if (value) {
+      this.storage.remove(value.id);
+      element.remove();
+    }
+  }
+}