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

@@ -0,0 +1,100 @@
+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-admin')
+export class SgViewAdmin extends DeesElement {
+  @state()
+  accessor adminState: appstate.IAdminState = { providers: [], platformSettings: null };
+
+  @state()
+  accessor editingProviderId: string | null = null;
+
+  constructor() {
+    super();
+    const sub = appstate.adminStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.adminState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await appstate.adminStatePart.dispatchAction(appstate.fetchAdminProvidersAction, null);
+    await appstate.adminStatePart.dispatchAction(appstate.fetchPlatformSettingsAction, null);
+  }
+
+  public render(): TemplateResult {
+    if (this.editingProviderId !== null) {
+      const provider = this.editingProviderId
+        ? this.adminState.providers.find((p) => p.id === this.editingProviderId) || null
+        : null;
+      return html`
+        <sg-admin-provider-form-view
+          .provider="${provider}"
+          @save="${(e: CustomEvent) => this.saveProvider(e.detail)}"
+          @cancel="${() => {
+            this.editingProviderId = null;
+          }}"
+        ></sg-admin-provider-form-view>
+      `;
+    }
+
+    return html`
+      <sg-admin-providers-view
+        .providers="${this.adminState.providers}"
+        .settings="${this.adminState.platformSettings}"
+        @create="${() => {
+          this.editingProviderId = '';
+        }}"
+        @edit="${(e: CustomEvent) => {
+          this.editingProviderId = e.detail.providerId;
+        }}"
+        @delete="${(e: CustomEvent) => this.deleteProvider(e.detail.providerId)}"
+        @test="${(e: CustomEvent) => this.testProvider(e.detail.providerId)}"
+        @save-settings="${(e: CustomEvent) => this.saveSettings(e.detail.settings)}"
+      ></sg-admin-providers-view>
+    `;
+  }
+
+  private async saveProvider(detail: any) {
+    // TODO: implement create/update provider
+    this.editingProviderId = null;
+  }
+
+  private async deleteProvider(providerId: string) {
+    await appstate.adminStatePart.dispatchAction(
+      appstate.deleteAdminProviderAction,
+      { providerId },
+    );
+  }
+
+  private async testProvider(providerId: string) {
+    await appstate.adminStatePart.dispatchAction(
+      appstate.testAdminProviderAction,
+      { providerId },
+    );
+  }
+
+  private async saveSettings(settings: any) {
+    await appstate.adminStatePart.dispatchAction(
+      appstate.updatePlatformSettingsAction,
+      { auth: settings },
+    );
+  }
+}