feat(web): add public package browsing and organization redirect management

2026-03-21 10:54:10 +00:00
parent 392060bf23
commit 6d6ed61e70
10 changed files with 244 additions and 16 deletions
--- a/ts_web/elements/sg-view-public-packages.ts
+++ b/ts_web/elements/sg-view-public-packages.ts
@@ -0,0 +1,132 @@
+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-public-packages')
+export class SgViewPublicPackages extends DeesElement {
+  @state()
+  accessor packagesState: appstate.IPackagesState = {
+    packages: [],
+    currentPackage: null,
+    versions: [],
+    total: 0,
+    query: '',
+    protocolFilter: '',
+  };
+
+  @state()
+  accessor detailPackageId: string | null = null;
+
+  @state()
+  accessor loading: boolean = false;
+
+  constructor() {
+    super();
+    const pkgSub = appstate.packagesStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.packagesState = s;
+        this.loading = false;
+      });
+    this.rxSubscriptions.push(pkgSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.loading = true;
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      { offset: 0 },
+    );
+    this.loading = false;
+  }
+
+  public render(): TemplateResult {
+    if (this.detailPackageId && this.packagesState.currentPackage) {
+      return html`
+        <sg-package-detail-view
+          .package="${this.packagesState.currentPackage}"
+          .versions="${this.packagesState.versions}"
+          @back="${() => this.goBack()}"
+        ></sg-package-detail-view>
+      `;
+    }
+
+    return html`
+      <sg-public-search-view
+        .packages="${this.packagesState.packages}"
+        .total="${this.packagesState.total}"
+        .query="${this.packagesState.query}"
+        .activeProtocol="${this.packagesState.protocolFilter}"
+        .protocols="${['npm', 'oci', 'maven', 'cargo', 'pypi', 'composer', 'rubygems']}"
+        .loading="${this.loading}"
+        @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-public-search-view>
+    `;
+  }
+
+  private async selectPackage(packageId: string) {
+    this.detailPackageId = packageId;
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.fetchPackageAction,
+      { packageId },
+    );
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.fetchPackageVersionsAction,
+      { packageId },
+    );
+  }
+
+  private goBack() {
+    this.detailPackageId = null;
+    appstate.packagesStatePart.setState({
+      ...appstate.packagesStatePart.getState(),
+      currentPackage: null,
+      versions: [],
+    });
+  }
+
+  private async search(query: string) {
+    this.loading = true;
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      { query, protocol: this.packagesState.protocolFilter, offset: 0 },
+    );
+  }
+
+  private async filter(protocol: string) {
+    this.loading = true;
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      { query: this.packagesState.query, protocol, offset: 0 },
+    );
+  }
+
+  private async paginate(offset: number) {
+    this.loading = true;
+    await appstate.packagesStatePart.dispatchAction(
+      appstate.searchPackagesAction,
+      {
+        query: this.packagesState.query,
+        protocol: this.packagesState.protocolFilter,
+        offset,
+      },
+    );
+  }
+}