Improve details page & index page (now with colours)

frankframework · Dec 17, 2024 · cc6bdca · cc6bdca
1 parent 585dd14
commit cc6bdca
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 25 deletions.
diff --git a/frank-doc-frontend/src/app/app.service.ts b/frank-doc-frontend/src/app/app.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, signal, WritableSignal } from '@angular/core';
+import { inject, Injectable, signal, WritableSignal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
@@ -53,8 +53,9 @@ export class AppService {
     minMatchCharLength: 3,
     ignoreLocation: true,
   };
+  readonly filterColours: string[] = ['#CD55EB', '#037CD4', '#00B31D'];
 
-  constructor(private http: HttpClient) {}
+  private readonly http: HttpClient = inject(HttpClient);
 
   getFrankDoc(): Observable<FrankDoc> {
     return this.http.get<FrankDoc>(`${environment.frankDocUrl}?cache=${Date.now()}`);
@@ -94,6 +95,10 @@ export class AppService {
     return labels[labelGroups[0]][0];
   }
 
+  getLabelColor(colours: string[], index: number): string {
+    return colours[index % colours.length];
+  }
+
   private getSelectedFiltersLength(selectedFilters: ElementLabels): number {
     if (Object.values(selectedFilters).length === 0) return 0;
     return Object.values(selectedFilters).reduce((acc, val) => acc + val.length, 0);

diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element.component.html b/frank-doc-frontend/src/app/views/details/details-element/details-element.component.html
@@ -3,7 +3,7 @@ <h2>{{ element.name }}</h2>
   @if (element.labels) {
     @for (filter of element.labels | keyvalue; track filter; let index = $index) {
       @for (label of filter.value; track label) {
-        <ff-chip [colour]="getLabelColor(index)" rounded>{{ label }}</ff-chip>
+        <ff-chip [colour]="getLabelColor(filterColours, index)" rounded>{{ label }}</ff-chip>
       }
     }
   }
@@ -28,9 +28,7 @@ <h3>Quick Links</h3>
   </div>
   <div class="section syntax">
     <h3>Syntax</h3>
-    <pre><button (click)="copyToClipboard(elementSyntax)">Copy</button><code [innerText]="elementSyntax"
-    >&lt;{{element.name}} name=”my-test-pipe” version=”1” /&gt;</code
-    ></pre>
+    <pre><button (click)="copyToClipboard(elementSyntax)">Copy</button><code [innerText]="elementSyntax"></code></pre>
   </div>
   <div class="section options">
     <h3>Component Options</h3>
@@ -132,7 +130,7 @@ <h3>Component Options</h3>
         </div>
       </div>
     }
-    @if (element.parameters || inheritedProperties.parameters.length > 0) {
+    @if (element.parameters) {
       <ng-template #parametersTemplate let-parameters>
         <table>
           <thead>
@@ -173,7 +171,7 @@ <h3>Component Options</h3>
         </div>
       </div>
     }
-    @if (element.children || inheritedProperties.children.length > 0) {
+    @if (element.children) {
       <ng-template #childrenTemplate let-children>
         <table>
           <thead>
@@ -213,7 +211,7 @@ <h3>Component Options</h3>
         </div>
       </div>
     }
-    @if (element.forwards || inheritedProperties.forwards.length > 0) {
+    @if (element.forwards) {
       <ng-template #forwardTemplate let-forwards>
         <table>
           <thead>

diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element.component.ts b/frank-doc-frontend/src/app/views/details/details-element/details-element.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { AlertComponent, ChipComponent } from '@frankframework/angular-components';
 import { KeyValuePipe, NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
@@ -8,6 +8,7 @@ import { JavadocTransformDirective } from '../../../components/javadoc-transform
 import { CollapseDirective } from '../../../components/collapse.directive';
 import { IconCaretComponent } from '../../../icons/icon-caret-down/icon-caret.component';
 import { IconArrowRightUpComponent } from '../../../icons/icon-arrow-right-up/icon-arrow-right-up.component';
+import { AppService } from '../../../app.service';
 
 type InheritedParentElementProperties<T> = {
   parentElementName: string;
@@ -61,7 +62,9 @@ export class DetailsElementComponent implements OnChanges {
   protected undefinedType = 'string';
   protected elementSyntax: string = '';
 
-  private filterColours: string[] = ['#CD55EB', '#037CD4', '#00B31D'];
+  private readonly appService: AppService = inject(AppService);
+  protected readonly filterColours = this.appService.filterColours;
+  protected readonly getLabelColor = this.appService.getLabelColor;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['element']) {
@@ -83,10 +86,6 @@ export class DetailsElementComponent implements OnChanges {
     }
   }
 
-  protected getLabelColor(index: number): string {
-    return this.filterColours[index % this.filterColours.length];
-  }
-
   protected githubUrlOf(name: string): string {
     return `${environment.githubWikiBaseUrl}/${name}`;
   }
@@ -159,7 +158,7 @@ export class DetailsElementComponent implements OnChanges {
   private generateElementSyntax(): void {
     if (this.element) {
       this.elementSyntax = `
-<${this.element.name} name=”my-${this.element.name.toLowerCase()}” />
+<${this.element.name} name="my-${this.element.name.toLowerCase()}" />
 `.trim();
     }
   }

diff --git a/frank-doc-frontend/src/app/views/home/home-component-list/home-component-list.component.html b/frank-doc-frontend/src/app/views/home/home-component-list/home-component-list.component.html
@@ -36,6 +36,6 @@
       >
     </div>
   } @empty {
-    <p>No Frank!Elements found.</p>
+    <p>No Elements found.</p>
   }
 </div>
diff --git a/frank-doc-frontend/src/app/views/index/index.component.html b/frank-doc-frontend/src/app/views/index/index.component.html
@@ -1,6 +1,6 @@
 <div class="page-container">
   <div class="sidenav">
-    @for (filter of filters(); track filter.name) {
+    @for (filter of filters(); track filter.name; let index = $index) {
       <div class="filter-name" [collapse]="filterList" (collapsedChange)="collapsedFilters[filter.name] = $event">
         <span>{{ filter.name }} ({{ filter.labels.length }})</span>
         <app-icon-caret
@@ -12,9 +12,8 @@
       <ul #filterList>
         @for (label of filter.labels; track label.name) {
           <li>
-            <ff-chip colour="#CD55EB" slim>{{ label.name.charAt(0) }}</ff-chip> {{ label.name }} ({{
-              label.elements.length
-            }})
+            <ff-chip [colour]="getLabelColor(filterColours, index)" slim>{{ label.name.charAt(0) }}</ff-chip>
+            {{ label.name }} ({{ label.elements.length }})
           </li>
         }
       </ul>
@@ -30,7 +29,7 @@ <h2>Index</h2>
       repeat this once again just so I don't have to lorum ipsum.
     </p>
 
-    @for (filter of filters(); track filter.name) {
+    @for (filter of filters(); track filter.name; let index = $index) {
       <div class="filter-container">
         <h3>{{ filter.name }}</h3>
         @for (label of filter.labels; track label.name) {
@@ -39,7 +38,8 @@ <h4>{{ label.name }}</h4>
             <div class="elements">
               @for (element of label.elements; track element) {
                 <a [routerLink]="['/', filter.name, label.name, element]"
-                  ><ff-chip colour="#CD55EB" slim>{{ label.name.charAt(0) }}</ff-chip> {{ element }}</a
+                  ><ff-chip [colour]="getLabelColor(filterColours, index)" slim>{{ label.name.charAt(0) }}</ff-chip>
+                  {{ element }}</a
                 >
               } @empty {
                 <p>No elements found.</p>

diff --git a/frank-doc-frontend/src/app/views/index/index.component.ts b/frank-doc-frontend/src/app/views/index/index.component.ts
@@ -17,7 +17,9 @@ import { environment } from '../../../environments/environment';
 export class IndexComponent {
   protected collapsedFilters: Record<string, boolean> = {};
   protected readonly showFeedback: boolean = environment.feedbackButtons;
+  protected readonly filters: Signal<Filter[]> = computed(() => this.appService.filters());
 
-  private appService: AppService = inject(AppService);
-  protected filters: Signal<Filter[]> = computed(() => this.appService.filters());
+  private readonly appService: AppService = inject(AppService);
+  protected readonly filterColours = this.appService.filterColours;
+  protected readonly getLabelColor = this.appService.getLabelColor;
 }