fix: organization list filter

Author: belsman

packages/core/state/src/lib/+state/management/organization/organization.effects.ts

@@ -19,6 +19,8 @@ import { OrganizationService, ErrorHandlingService } from '../../../services';
 import { AppFacade } from '../../app';
 
 import * as organizationActions from './organization.actions';
+import { concatLatestFrom } from '@ngrx/operators';
+import { OrganizationFacade } from './organization.facade';
 
 @Injectable()
 export class OrganizationEffects {
@@ -302,6 +304,31 @@ export class OrganizationEffects {
     { dispatch: false }
   );
 
+  handleOrganizationChangedNotification$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(
+          organizationActions.setSelectedGlobalOrganizationId,
+          organizationActions.selectedGlobalOrganizationHistory,
+          organizationActions.setPreviousSelectedGlobalOrganizationHistory,
+          organizationActions.cancelSelection
+        ),
+        concatLatestFrom(() => [
+          this.organizationFacade.globalOrganizationLeaf$,
+          this.organizationFacade.globalOrganization$,
+        ]),
+        tap(([, leafOrganization, parentOrganization]) => {
+          const organization = leafOrganization || parentOrganization;
+          this.appFacade.addNotification({
+            content: `Organization changed to ${organization?.name}`,
+            type: ENotificationTypes.Info,
+          });
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   handleNotificationErrors$ = createEffect(
     () => {
       return this.actions$.pipe(
@@ -329,6 +356,7 @@ export class OrganizationEffects {
     private readonly actions$: Actions,
     private readonly appFacade: AppFacade,
     private readonly organizationService: OrganizationService,
+    private readonly organizationFacade: OrganizationFacade,
     private readonly errorHandlingService: ErrorHandlingService
   ) {}
 }

packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.html

@@ -45,42 +45,45 @@
   [positions]="rightOrientedPositions"
 >
   <div>
-    <div class="row justify-content-between align-items-center">
-      <div class="flex p-2">
-        @if (vm.globalOrganization?.parentId) {
-        <button
-          vcl-button
-          class="half-transparent organization"
-          (click)="resetGlobalSelectOrganization($event)"
-        >
-          <vcl-icon icon="vcl:home"></vcl-icon>
-        </button>
+    <rc-toolbar>
+      @if (vm.globalOrganization?.parentId || vm.selectedParent?.parentId) {
+      <button
+        rc-prepend
+        vcl-button
+        class="half-transparent organization"
+        (click)="resetGlobalSelectOrganization($event)"
+      >
+        <vcl-icon icon="vcl:home"></vcl-icon>
+      </button>
 
-        <button
-          vcl-button
-          class="half-transparent organization"
-          (click)="lastSelectedGlobalOrganization($event)"
-        >
-          <vcl-icon icon="vcl:arrow-left"></vcl-icon>
-        </button>
-        }
-      </div>
-      <div class="overflow-ellipsis flex p-2">
-        {{ vm.globalOrganization?.name }}
-      </div>
+      } @if (vm.globalOrganization?.parentId || vm.selectedParent?.parentId) {
+      <button
+        rc-prepend
+        vcl-button
+        class="half-transparent organization"
+        (click)="lastSelectedGlobalOrganization($event)"
+        title=""
+      >
+        <vcl-icon icon="vcl:arrow-left"></vcl-icon>
+      </button>
+      }
+
+      <span class="pr-2 overflow-ellipsis">{{
+        vm.globalOrganization?.name || vm.selectedParent?.name
+      }}</span>
 
-      <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>
+      @if (vm.globalOrganization?.parentId) {
+      <button
+        rc-append
+        vcl-button
+        class="half-transparent organization"
+        (click)="cancelSelection()"
+        title=""
+      >
+        <vcl-icon icon="vcl:close"></vcl-icon>
+      </button>
+      }
+    </rc-toolbar>
 
     <vcl-data-list
       [noBorder]="true"