fix(app): replace organization selection with the vcl's data-list

Author: belsman

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

@@ -142,14 +142,43 @@ export const selectError = createSelector(
   (state: IOrganizationState) => state.error
 );
 
+export const selectGlobalOrganizationHistory = createSelector(
+  selectOrganization,
+  (state: IOrganizationState) => state.selectedGlobalOrganizationHistory
+);
+
+export const selectGlobalChildrenOrganizationsHelperSelector = createSelector({
+  organizations: selectOrganizationAll,
+  currentParentId: selectOrganizationSelectedGlobalOrganizationId,
+  globalOrganizationHistory: selectGlobalOrganizationHistory,
+});
+
 export const selectGlobalChildrenOrganizations = createSelector(
-  selectOrganizationAll,
-  selectOrganizationSelectedGlobalOrganizationId,
-  (organizations, currentParentId) => {
-    const filteredOrganization = organizations.filter(
-      (org) => org.parentId === currentParentId
+  selectGlobalChildrenOrganizationsHelperSelector,
+  (data) => {
+    const filteredOrganization = data.organizations.filter(
+      (org) => org.parentId === data.currentParentId
     ) as IOrganization[];
 
+    if (filteredOrganization.length === 0) {
+      // This is most likely a Leaf organization
+      const currentIndex = data.globalOrganizationHistory.findIndex(
+        (his) => his === data.currentParentId
+      );
+
+      console.log(
+        'data.globalOrganizationHistory[currentIndex - 1]',
+        data.globalOrganizationHistory[currentIndex - 1]
+      );
+
+      if (currentIndex > 0) {
+        return data.organizations.filter(
+          (org) =>
+            org.parentId === data.globalOrganizationHistory[currentIndex - 1]
+        ) as IOrganization[];
+      }
+    }
+
     return filteredOrganization;
   }
 );

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

@@ -1,42 +1,25 @@
 @if (vm$ | async; as vm) {
 <div>
-  <div
+  <span
     #popoverOrganizationTarget
     class="inline-block"
   >
-    <div
-      class="row align-items-center"
+    <button
+      vcl-button
+      [selectable]="true"
       (click)="
         templatePopoverOrganization.toggle();
         onClickGlobalOrganizationSelector()
       "
+      class="half-transparent organization"
     >
-      <button
-        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 class="row">
+      <vcl-icogram>
+        <vcl-icon icon="mdi:home-outline" />
         {{ vm.globalOrganization?.name }}
-      </div>
-
-      <button
-        vcl-button
-        class="half-transparent organization"
-      >
-        <vcl-icon icon="vcl:arrow-down"></vcl-icon>
-      </button>
-    </div>
-  </div>
+        <vcl-icon icon="mdi:chevron-down" />
+      </vcl-icogram>
+    </button>
+  </span>
 
   <span
     #popoverAccountTarget
@@ -65,19 +48,50 @@
   [positions]="rightOrientedPositions"
 >
   <!-- This are children -->
-  <vcl-select-list
-    (valueChange)="
-      onSelectGlobalOrganization($event, vm.globalOrganization?.id ?? '');
-      templatePopoverOrganization.close()
-    "
-  >
-    <vcl-select-list-item
-      [value]="o?.id"
-      *ngFor="let o of vm.organizations"
+  <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>
+
+        <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>
+
+      <div class="flex"></div>
+    </div>
+
+    <vcl-data-list
+      [noBorder]="true"
+      [value]="vm.globalOrganization?.id"
+      class="m-0"
+      (valueChange)="
+        onSelectGlobalOrganization($event, vm.globalOrganization?.id ?? '');
+        templatePopoverOrganization.close()
+      "
     >
-      {{ o?.name }}
-    </vcl-select-list-item>
-  </vcl-select-list>
+      @for (organization of vm.organizations; track $index) {
+      <vcl-data-list-item [value]="organization.id">
+        <div class="p-2">{{ organization?.name }}</div>
+      </vcl-data-list-item>
+      }
+    </vcl-data-list>
+  </div>
 </ng-template>
 
 <ng-template