registry/ts_web/elements/sg-view-admin.ts

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 },
    );
  }
}