From 5511ac084e58825ade7f29e9b3041692d3694620 Mon Sep 17 00:00:00 2001
From: Bello Babakolo <fleetbeekay@gmail.com>
Date: Tue, 28 Jan 2025 13:20:19 +0100
Subject: [PATCH] feat(app): display selected organization in the organization
 pane

---
 .../organization/organization.actions.ts        |  4 ++++
 .../organization/organization.facade.ts         |  7 +++++++
 .../organization/organization.reducer.ts        |  9 +++++++++
 .../organization/organization.selectors.ts      | 15 ++++++++++++++-
 .../header/header-toolbar.component.html        | 17 +++++++++++++----
 .../header/header-toolbar.component.ts          | 13 ++++++++++---
 6 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/packages/core/state/src/lib/+state/management/organization/organization.actions.ts b/packages/core/state/src/lib/+state/management/organization/organization.actions.ts
index f85ce0d7..5755a32b 100644
--- a/packages/core/state/src/lib/+state/management/organization/organization.actions.ts
+++ b/packages/core/state/src/lib/+state/management/organization/organization.actions.ts
@@ -69,6 +69,10 @@ export const setPreviousSelectedGlobalOrganizationHistory = createAction(
   '[ORGANIZATION] Set previously selected global organization'
 );
 
+export const cancelSelection = createAction(
+  '[ORGANIZATION] Set the global selected leaf to null'
+);
+
 export const organizationCreateRequest = createAction(
   '[ORGANIZATION] Organization create request',
   props<{ payload: IIoRestorecommerceOrganizationOrganizationList }>()
diff --git a/packages/core/state/src/lib/+state/management/organization/organization.facade.ts b/packages/core/state/src/lib/+state/management/organization/organization.facade.ts
index cb662404..dccee8cd 100644
--- a/packages/core/state/src/lib/+state/management/organization/organization.facade.ts
+++ b/packages/core/state/src/lib/+state/management/organization/organization.facade.ts
@@ -65,6 +65,10 @@ export class OrganizationFacade {
     organizationSelectors.selectGlobalChildrenOrganizations
   );
 
+  readonly globalOrganizationLeafId$ = this.store.select(
+    organizationSelectors.selectGlobalOrganizationLeafId
+  );
+
   readonly globalOrganizationLeaf$ = this.store.select(
     organizationSelectors.selectGlobalOrganizationLeaf
   );
@@ -104,6 +108,9 @@ export class OrganizationFacade {
       organizationActions.setPreviousSelectedGlobalOrganizationHistory()
     );
 
+  cancelSelection = () =>
+    this.store.dispatch(organizationActions.cancelSelection());
+
   create = (payload: IIoRestorecommerceOrganizationOrganizationList) =>
     this.store.dispatch(
       organizationActions.organizationCreateRequest({ payload })
diff --git a/packages/core/state/src/lib/+state/management/organization/organization.reducer.ts b/packages/core/state/src/lib/+state/management/organization/organization.reducer.ts
index 5f922e1e..01d4d185 100644
--- a/packages/core/state/src/lib/+state/management/organization/organization.reducer.ts
+++ b/packages/core/state/src/lib/+state/management/organization/organization.reducer.ts
@@ -160,6 +160,15 @@ const reducer = createReducer<IOrganizationState>(
         state.selectedGlobalOrganizationHistory.slice(0, -1),
     })
   ),
+  on(
+    organizationActions.cancelSelection,
+    (state): IOrganizationState => ({
+      ...state,
+      setSelectedGlobalLeaf: null,
+      selectedGlobalOrganizationHistory:
+        state.selectedGlobalOrganizationHistory.slice(),
+    })
+  ),
   on(
     organizationActions.organizationCreateRequest,
     (state): IOrganizationState => ({
diff --git a/packages/core/state/src/lib/+state/management/organization/organization.selectors.ts b/packages/core/state/src/lib/+state/management/organization/organization.selectors.ts
index b46ded68..d77807de 100644
--- a/packages/core/state/src/lib/+state/management/organization/organization.selectors.ts
+++ b/packages/core/state/src/lib/+state/management/organization/organization.selectors.ts
@@ -164,7 +164,20 @@ export const selectGlobalChildrenOrganizations = createSelector(
   }
 );
 
-export const selectGlobalOrganizationLeaf = createSelector(
+export const selectGlobalOrganizationLeafId = createSelector(
   selectOrganization,
   (state: IOrganizationState) => state.setSelectedGlobalLeaf
 );
+
+export const selectGlobalOrganizationLeaf = createSelector(
+  selectOrganizationEntities,
+  selectGlobalOrganizationLeafId,
+  (entities, selectGlobalOrganizationLeafId) => {
+    return (
+      selectGlobalOrganizationLeafId &&
+      selectGlobalOrganizationLeafId in entities
+        ? entities[selectGlobalOrganizationLeafId]
+        : null
+    ) as IOrganization | null;
+  }
+);
diff --git a/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.html b/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.html
index 4c647b7d..99851295 100644
--- a/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.html
+++ b/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.html
@@ -12,7 +12,7 @@
     >
       <vcl-icogram>
         <vcl-icon icon="mdi:home-outline" />
-        {{ vm.globalOrganization?.name }}
+        {{ vm.globalOrganization?.name || vm.selectedParent?.name }}
         <vcl-icon icon="mdi:chevron-down" />
       </vcl-icogram>
     </button>
@@ -44,7 +44,6 @@
   [closeOnOffClick]="true"
   [positions]="rightOrientedPositions"
 >
-  <!-- This are children -->
   <div>
     <div class="row justify-content-between align-items-center">
       <div class="flex p-2">
@@ -70,12 +69,22 @@
         {{ vm.globalOrganization?.name }}
       </div>
 
-      <div class="flex"></div>
+      <div class="flex row justify-content-end">
+        @if (vm.globalOrganization?.isLeaf) {
+        <button
+          vcl-button
+          class="half-transparent organization"
+          (click)="cancelSelection()"
+        >
+          <vcl-icon icon="vcl:close"></vcl-icon>
+        </button>
+        }
+      </div>
     </div>
 
     <vcl-data-list
       [noBorder]="true"
-      [value]="vm.selectedLeaf"
+      [value]="vm.globalOrganization?.id"
       class="m-0"
       (valueChange)="
         onSelectGlobalOrganization($event); templatePopoverOrganization.close()
diff --git a/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.ts b/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.ts
index 1fc67e15..dac1ac65 100644
--- a/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.ts
+++ b/packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.ts
@@ -6,7 +6,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { combineLatest } from 'rxjs';
+import { combineLatest, merge } from 'rxjs';
 
 import { ROUTER } from '@console-core/config';
 import { AccountFacade, OrganizationFacade } from '@console-core/state';
@@ -35,8 +35,11 @@ export class RcHeaderToolbarComponent implements OnInit {
   readonly vm$ = combineLatest({
     user: this.accountFacade.user$,
     organizations: this.organizationFacade.globalChildrenOrganizations$,
-    selectedLeaf: this.organizationFacade.globalOrganizationLeaf$,
-    globalOrganization: this.organizationFacade.globalOrganization$,
+    globalOrganization: merge(
+      this.organizationFacade.globalOrganizationLeaf$,
+      this.organizationFacade.globalOrganization$
+    ),
+    selectedParent: this.organizationFacade.globalOrganization$,
   });
 
   constructor(
@@ -63,6 +66,10 @@ export class RcHeaderToolbarComponent implements OnInit {
     this.organizationFacade.setSelectedGlobalOrganizationId(id);
   }
 
+  cancelSelection(): void {
+    this.organizationFacade.cancelSelection();
+  }
+
   onSearchOrganizations(str: string): void {
     // TODO: Implement search
     console.log('Search', str);