feat(web-organizations): add organization detail editing and isolate detail view state from global navigation

ts_web/elements/sg-view-organizations.ts

@@ -1,5 +1,6 @@
 import * as appstate from '../appstate.js';
 import * as shared from './shared/index.js';
+import { appRouter } from '../router.js';
 import {
   css,
   cssManager,
@@ -23,6 +24,9 @@ export class SgViewOrganizations extends DeesElement {
   @state()
   accessor uiState: appstate.IUiState = { activeView: 'organizations' };
 
+  @state()
+  accessor detailOrgId: string | null = null;
+
   constructor() {
     super();
     const orgSub = appstate.organizationsStatePart
@@ -48,9 +52,10 @@ export class SgViewOrganizations extends DeesElement {
   async connectedCallback() {
     super.connectedCallback();
     await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
-    // If there's an entity ID, load the detail
+    // If there's an entity ID from the URL, copy it to internal state
     if (this.uiState.activeEntityId) {
-      await this.loadOrgDetail(this.uiState.activeEntityId);
+      this.detailOrgId = this.uiState.activeEntityId;
+      await this.loadOrgDetail(this.detailOrgId);
     }
   }
 
@@ -70,7 +75,7 @@ export class SgViewOrganizations extends DeesElement {
   }
 
   public render(): TemplateResult {
-    if (this.uiState.activeEntityId && this.organizationsState.currentOrg) {
+    if (this.detailOrgId && this.organizationsState.currentOrg) {
       return html`
         <sg-organization-detail-view
           .organization="${this.organizationsState.currentOrg}"
@@ -79,6 +84,8 @@ export class SgViewOrganizations extends DeesElement {
           @back="${() => this.goBack()}"
           @select-repo="${(e: CustomEvent) => this.selectRepo(e.detail.repositoryId)}"
           @create-repo="${() => {/* TODO: create repo modal */}}"
+          @edit="${(e: CustomEvent) => this.handleEditOrg(e.detail)}"
+          @delete="${(e: CustomEvent) => this.handleDeleteOrg(e.detail.organizationId)}"
         ></sg-organization-detail-view>
       `;
     }
@@ -93,10 +100,7 @@ export class SgViewOrganizations extends DeesElement {
   }
 
   private selectOrg(orgId: string) {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: orgId,
-    });
+    this.detailOrgId = orgId;
     this.loadOrgDetail(orgId);
   }
 
@@ -106,10 +110,7 @@ export class SgViewOrganizations extends DeesElement {
   }
 
   private goBack() {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: undefined,
-    });
+    this.detailOrgId = null;
     appstate.organizationsStatePart.setState({
       ...appstate.organizationsStatePart.getState(),
       currentOrg: null,
@@ -118,6 +119,31 @@ export class SgViewOrganizations extends DeesElement {
     });
   }
 
+  private async handleEditOrg(data: {
+    organizationId: string;
+    displayName?: string;
+    description?: string;
+    website?: string;
+    isPublic?: boolean;
+  }) {
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.updateOrganizationAction,
+      data,
+    );
+    // Re-load detail to reflect changes
+    if (this.detailOrgId) {
+      await this.loadOrgDetail(this.detailOrgId);
+    }
+  }
+
+  private async handleDeleteOrg(organizationId: string) {
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.deleteOrganizationAction,
+      { organizationId },
+    );
+    this.goBack();
+  }
+
   private async createOrg(data: { name: string; displayName?: string; description?: string }) {
     await appstate.organizationsStatePart.dispatchAction(
       appstate.createOrganizationAction,