feat(opsserver,web): replace the Angular UI and REST management layer with a TypedRequest-based ops server and bundled web frontend

ts_web/elements/sg-view-packages.ts

@@ -0,0 +1,156 @@
+import * as appstate from '../appstate.js';
+import * as shared from './shared/index.js';
+import {
+  css,
+  cssManager,
+  customElement,
+  DeesElement,
+  html,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('sg-view-packages')
+export class SgViewPackages extends DeesElement {
+  @state()
+  accessor packagesState: appstate.IPackagesState = {
+    packages: [],
+    currentPackage: null,
+    versions: [],
+    total: 0,
+    query: '',
+    protocolFilter: '',
+  };
+
+  @state()
+  accessor uiState: appstate.IUiState = { activeView: 'packages' };
+
+  constructor() {
+    super();
+    const pkgSub = appstate.packagesStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.packagesState = s;
+      });
+    this.rxSubscriptions.push(pkgSub);
+
+    const uiSub = appstate.uiStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.uiState = s;
+      });
+    this.rxSubscriptions.push(uiSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    if (this.uiState.activeEntityId) {
+      await this.loadPackageDetail(this.uiState.activeEntityId);
+    } else {
+      await appstate.packagesStatePart.dispatchAction(
+        appstate.searchPackagesAction,
+        { offset: 0 },
+      );
+    }
+  }
+
+  private async loadPackageDetail(packageId: string) {
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.fetchPackageAction,
+      { packageId },
+    );
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.fetchPackageVersionsAction,
+      { packageId },
+    );
+  }
+
+  public render(): TemplateResult {
+    if (this.uiState.activeEntityId && this.packagesState.currentPackage) {
+      return html`
+        <sg-package-detail-view
+          .package="${this.packagesState.currentPackage}"
+          .versions="${this.packagesState.versions}"
+          @back="${() => this.goBack()}"
+          @delete="${(e: CustomEvent) => this.deletePackage(e.detail.packageId)}"
+          @delete-version="${(e: CustomEvent) => this.deleteVersion(e.detail)}"
+        ></sg-package-detail-view>
+      `;
+    }
+
+    return html`
+      <sg-packages-list-view
+        .packages="${this.packagesState.packages}"
+        .total="${this.packagesState.total}"
+        .query="${this.packagesState.query}"
+        .protocols="${['npm', 'oci', 'maven', 'cargo', 'pypi', 'composer', 'rubygems']}"
+        @search="${(e: CustomEvent) => this.search(e.detail.query)}"
+        @filter="${(e: CustomEvent) => this.filter(e.detail.protocol)}"
+        @select="${(e: CustomEvent) => this.selectPackage(e.detail.packageId)}"
+        @page="${(e: CustomEvent) => this.paginate(e.detail.offset)}"
+      ></sg-packages-list-view>
+    `;
+  }
+
+  private selectPackage(packageId: string) {
+    appstate.uiStatePart.setState({
+      ...appstate.uiStatePart.getState(),
+      activeEntityId: packageId,
+    });
+    this.loadPackageDetail(packageId);
+  }
+
+  private goBack() {
+    appstate.uiStatePart.setState({
+      ...appstate.uiStatePart.getState(),
+      activeEntityId: undefined,
+    });
+    appstate.packagesStatePart.setState({
+      ...appstate.packagesStatePart.getState(),
+      currentPackage: null,
+      versions: [],
+    });
+  }
+
+  private async search(query: string) {
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      { query, protocol: this.packagesState.protocolFilter, offset: 0 },
+    );
+  }
+
+  private async filter(protocol: string) {
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      { query: this.packagesState.query, protocol, offset: 0 },
+    );
+  }
+
+  private async paginate(offset: number) {
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      {
+        query: this.packagesState.query,
+        protocol: this.packagesState.protocolFilter,
+        offset,
+      },
+    );
+  }
+
+  private async deletePackage(packageId: string) {
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.deletePackageAction,
+      { packageId },
+    );
+    this.goBack();
+  }
+
+  private async deleteVersion(detail: { packageId: string; version: string }) {
+    // TODO: implement deletePackageVersion action
+  }
+}