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-organizations.ts

@@ -0,0 +1,127 @@
+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-organizations')
+export class SgViewOrganizations extends DeesElement {
+  @state()
+  accessor organizationsState: appstate.IOrganizationsState = {
+    organizations: [],
+    currentOrg: null,
+    repositories: [],
+    members: [],
+  };
+
+  @state()
+  accessor uiState: appstate.IUiState = { activeView: 'organizations' };
+
+  constructor() {
+    super();
+    const orgSub = appstate.organizationsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.organizationsState = s;
+      });
+    this.rxSubscriptions.push(orgSub);
+
+    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();
+    await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
+    // If there's an entity ID, load the detail
+    if (this.uiState.activeEntityId) {
+      await this.loadOrgDetail(this.uiState.activeEntityId);
+    }
+  }
+
+  private async loadOrgDetail(orgId: string) {
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.fetchOrganizationAction,
+      { organizationId: orgId },
+    );
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.fetchRepositoriesAction,
+      { organizationId: orgId },
+    );
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.fetchMembersAction,
+      { organizationId: orgId },
+    );
+  }
+
+  public render(): TemplateResult {
+    if (this.uiState.activeEntityId && this.organizationsState.currentOrg) {
+      return html`
+        <sg-organization-detail-view
+          .organization="${this.organizationsState.currentOrg}"
+          .repositories="${this.organizationsState.repositories}"
+          .members="${this.organizationsState.members}"
+          @back="${() => this.goBack()}"
+          @select-repo="${(e: CustomEvent) => this.selectRepo(e.detail.repositoryId)}"
+          @create-repo="${() => {/* TODO: create repo modal */}}"
+        ></sg-organization-detail-view>
+      `;
+    }
+
+    return html`
+      <sg-organizations-list-view
+        .organizations="${this.organizationsState.organizations}"
+        @select="${(e: CustomEvent) => this.selectOrg(e.detail.organizationId)}"
+        @create="${(e: CustomEvent) => this.createOrg(e.detail)}"
+      ></sg-organizations-list-view>
+    `;
+  }
+
+  private selectOrg(orgId: string) {
+    appstate.uiStatePart.setState({
+      ...appstate.uiStatePart.getState(),
+      activeEntityId: orgId,
+    });
+    this.loadOrgDetail(orgId);
+  }
+
+  private selectRepo(repoId: string) {
+    // Navigate to repository within org context
+    // For now, we could switch to packages view
+  }
+
+  private goBack() {
+    appstate.uiStatePart.setState({
+      ...appstate.uiStatePart.getState(),
+      activeEntityId: undefined,
+    });
+    appstate.organizationsStatePart.setState({
+      ...appstate.organizationsStatePart.getState(),
+      currentOrg: null,
+      repositories: [],
+      members: [],
+    });
+  }
+
+  private async createOrg(data: { name: string; displayName?: string; description?: string }) {
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.createOrganizationAction,
+      data,
+    );
+  }
+}