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

ts_web/elements/sg-view-packages.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,
@@ -25,6 +26,9 @@ export class SgViewPackages extends DeesElement {
   @state()
   accessor uiState: appstate.IUiState = { activeView: 'packages' };
 
+  @state()
+  accessor detailPackageId: string | null = null;
+
   constructor() {
     super();
     const pkgSub = appstate.packagesStatePart
@@ -49,8 +53,10 @@ export class SgViewPackages extends DeesElement {
 
   async connectedCallback() {
     super.connectedCallback();
+    // If there's an entity ID from the URL, copy it to internal state
     if (this.uiState.activeEntityId) {
-      await this.loadPackageDetail(this.uiState.activeEntityId);
+      this.detailPackageId = this.uiState.activeEntityId;
+      await this.loadPackageDetail(this.detailPackageId);
     } else {
       await appstate.packagesStatePart.dispatchAction(
         appstate.searchPackagesAction,
@@ -71,7 +77,7 @@ export class SgViewPackages extends DeesElement {
   }
 
   public render(): TemplateResult {
-    if (this.uiState.activeEntityId && this.packagesState.currentPackage) {
+    if (this.detailPackageId && this.packagesState.currentPackage) {
       return html`
         <sg-package-detail-view
           .package="${this.packagesState.currentPackage}"
@@ -98,18 +104,12 @@ export class SgViewPackages extends DeesElement {
   }
 
   private selectPackage(packageId: string) {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: packageId,
-    });
+    this.detailPackageId = packageId;
     this.loadPackageDetail(packageId);
   }
 
   private goBack() {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: undefined,
-    });
+    this.detailPackageId = null;
     appstate.packagesStatePart.setState({
       ...appstate.packagesStatePart.getState(),
       currentPackage: null,