Feat/1049 styling resource page (#809)

feat: improve styling 1049
liimaorg · Dec 18, 2024 · 9460905 · 9460905
1 parent 36fbf50
commit 9460905
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 12 deletions.
diff --git a/AMW_angular/io/src/app/resources/resources-page.component.css b/AMW_angular/io/src/app/resources/resources-page.component.css
@@ -0,0 +1,9 @@
+.nav-item,
+.nav-link {
+  cursor: pointer;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  font-weight: bold;
+}
diff --git a/AMW_angular/io/src/app/resources/resources-page.component.html b/AMW_angular/io/src/app/resources/resources-page.component.html
@@ -11,10 +11,11 @@ <h5 class="mb-3">Resource types</h5>
           <li class="nav-item">
             <a
               class="nav-link ps-0"
+              [ngClass]="{ active: selection === resourceType }"
               style="display: inline-block"
               (click)="toggleChildrenAndOrLoadResourcesList(resourceType)"
-              >{{ resourceType.name }}
-            </a>
+              >{{ resourceType.name }}</a
+            >
           </li>
           }
         </ul>
@@ -31,27 +32,28 @@ <h5 class="mb-3">Resource types</h5>
           <li class="nav-item">
             <a
               class="nav-link ps-0"
+              [ngClass]="{ active: selection === resourceType }"
               style="display: inline-block"
               (click)="toggleChildrenAndOrLoadResourcesList(resourceType)"
             >
-              {{ resourceType.name }}
-              @if (resourceType.hasChildren) { @if (expandedResourceTypeId === resourceType.id) {
+              @if (resourceType.hasChildren) { @if (isExpanded(resourceType)) {
               <app-icon icon="dash"></app-icon>
               } @else {
               <app-icon icon="plus"></app-icon>
               } }
+              {{ resourceType.name }}
             </a>
-            @if (resourceType.hasChildren && expandedResourceTypeId === resourceType.id) {
+            @if (resourceType.hasChildren && isExpanded(resourceType) ) {
             <ul class="nav flex-column ps-4">
               @for (child of resourceType.children; track child.name) {
               <li class="nav-item">
                 <a
                   class="nav-link ps-0"
+                  [ngClass]="{ active: selection === child }"
                   style="display: inline-block"
                   (click)="toggleChildrenAndOrLoadResourcesList(child)"
+                  >{{ child.name }}</a
                 >
-                  {{ child.name }}
-                </a>
               </li>
               }
             </ul>

diff --git a/AMW_angular/io/src/app/resources/resources-page.component.ts b/AMW_angular/io/src/app/resources/resources-page.component.ts
@@ -8,6 +8,7 @@ import {
   OnDestroy,
   WritableSignal,
 } from '@angular/core';
+import { NgClass } from '@angular/common';
 import { AuthService } from '../auth/auth.service';
 import { PageComponent } from '../layout/page/page.component';
 import { LoadingIndicatorComponent } from '../shared/elements/loading-indicator.component';
@@ -31,8 +32,9 @@ import { takeUntil } from 'rxjs/operators';
   selector: 'app-resources-page',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PageComponent, LoadingIndicatorComponent, ButtonComponent, IconComponent, ResourcesListComponent],
+  imports: [PageComponent, LoadingIndicatorComponent, ButtonComponent, IconComponent, ResourcesListComponent, NgClass],
   templateUrl: './resources-page.component.html',
+  styleUrl: 'resources-page.component.css',
 })
 export class ResourcesPageComponent implements OnDestroy {
   private authService = inject(AuthService);
@@ -50,7 +52,9 @@ export class ResourcesPageComponent implements OnDestroy {
   releases: Signal<Release[]> = this.releaseService.allReleases;
   isLoading = signal(false);
   expandedResourceTypeId: number | null = null;
+  expandedItems: ResourceType[] = [];
   selectedResourceType: WritableSignal<ResourceType | null> = signal(null);
+  selection: any;
 
   permissions = computed(() => {
     if (this.authService.restrictions().length > 0) {
@@ -75,12 +79,17 @@ export class ResourcesPageComponent implements OnDestroy {
   });
 
   toggleChildrenAndOrLoadResourcesList(resourceType: ResourceType): void {
+    this.selection = resourceType;
     this.resourceService.setTypeForResourceGroupList(resourceType);
-    if (resourceType && resourceType.hasChildren)
-      this.expandedResourceTypeId = this.expandedResourceTypeId === resourceType.id ? null : resourceType.id;
+    if (resourceType && resourceType.hasChildren) this.getUpdateExpandedItems(resourceType);
+    this.expandedResourceTypeId = this.expandedResourceTypeId === resourceType.id ? null : resourceType.id;
     this.selectedResourceType.set(resourceType);
   }
 
+  isExpanded(resourceType: ResourceType) {
+    return this.expandedItems.find((element) => element.id === resourceType.id);
+  }
+
   addResource(resource: any) {
     this.resourceService
       .createResourceForResourceType(resource)
@@ -131,4 +140,13 @@ export class ResourcesPageComponent implements OnDestroy {
         },
       });
   }
+
+  private getUpdateExpandedItems(resourceType: ResourceType) {
+    const index = this.expandedItems?.findIndex((element: ResourceType) => element.id === resourceType.id);
+    if (index > -1) {
+      this.expandedItems.splice(index, 1);
+    } else {
+      this.expandedItems.push(resourceType);
+    }
+  }
 }
diff --git a/AMW_angular/io/src/app/shared/icon/icon.component.css b/AMW_angular/io/src/app/shared/icon/icon.component.css
@@ -0,0 +1,11 @@
+:host {
+  height: 17px;
+  width: 17px;
+  display: inline-block;
+  vertical-align: middle
+
+}
+
+.icon {
+  vertical-align: unset;
+}
diff --git a/AMW_angular/io/src/app/shared/icon/icon.component.ts b/AMW_angular/io/src/app/shared/icon/icon.component.ts
@@ -2,10 +2,10 @@ import { Component, Input, OnChanges } from '@angular/core';
 
 @Component({
   selector: 'app-icon',
-  template: ` <svg class="bi" width="16" height="16" fill="currentColor">
+  template: ` <svg class="icon" width="16" height="16" fill="currentColor">
     <use [attr.xlink:href]="iconPath" />
   </svg>`,
-  styles: [],
+  styleUrl: './icon.component.css',
   standalone: true,
 })
 export class IconComponent implements OnChanges {