First implementation of better Help Pages

src/main/java/at/ac/uibk/gitsearch/service/EditorialPagesService.java

@@ -22,6 +22,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.cache.annotation.CacheConfig;
 import org.springframework.cache.annotation.CacheEvict;
 import org.springframework.cache.annotation.Cacheable;
+import org.springframework.cache.annotation.Caching;
 import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Service;
 
@@ -59,7 +60,7 @@ public class EditorialPagesService {
     public static class HelpContentTree {
 
         String title;
-        String url;
+        String path;
         List<HelpContentTree> children = new ArrayList<>();
 
         protected HelpContentTree() {
@@ -67,18 +68,18 @@ public class EditorialPagesService {
             super();
         }
 
-        protected HelpContentTree(String title, String url) {
+        protected HelpContentTree(String title, String path) {
             super();
             this.title = title;
-            this.url = url;
+            this.path = path;
         }
 
         public String getTitle() {
             return title;
         }
 
-        public String getUrl() {
-            return url;
+        public String getPath() {
+            return path;
         }
 
         public List<HelpContentTree> getChildren() {
@@ -86,7 +87,12 @@ public class EditorialPagesService {
         }
 
         public static HelpContentTree getDefaultTree(String lang) {
-            return new HelpContentTree("Help Content", lang + "/helpStart");
+            // sollte man über i18n updaten!
+            String helpTitle = "Help Content:";
+            if ("de".equals(lang)) {
+                helpTitle = "Hilfeseiten:";
+            }
+            return new HelpContentTree(helpTitle, lang + "/helpStart");
         }
 
         @Override
@@ -100,7 +106,7 @@ public class EditorialPagesService {
                 "[" +
                 title +
                 "=>" +
-                url +
+                path +
                 "]" +
                 children.stream().map(m -> "\n" + m.toString(prefix + "  ")).collect(Collectors.joining())
             );
@@ -115,7 +121,7 @@ public class EditorialPagesService {
         return new EditorialPageDTO(path, page.getContent());
     }
 
-    @CacheEvict(value = PAGES_CACHE, allEntries = true)
+    @Caching(evict = { @CacheEvict(value = PAGES_CACHE, allEntries = true), @CacheEvict(value = HELPMENUTREE_CACHE, allEntries = true) })
     public boolean resetCache() {
         return true; // nothing to do
     }

src/main/webapp/app/app.module.ts

@@ -24,6 +24,8 @@ import { MainComponent } from './layouts/main/main.component';
 import {
   NavbarComponent,
   MenuItemBadgeComponent,
+  MatchWidthDirective,
+  HelpMenuComponent,
   ReviewMenuBadgeComponent,
   ReviewRequestedMenuBadgeComponent,
   ImprovementsRequestedMenuBadgeComponent,
@@ -80,6 +82,8 @@ const ngHttpCachingConfig: NgHttpCachingConfig = {
     MainComponent,
     NavbarComponent,
     MenuItemBadgeComponent,
+    HelpMenuComponent,
+    MatchWidthDirective,
     ReviewMenuBadgeComponent,
     ReviewRequestedMenuBadgeComponent,
     ImprovementsRequestedMenuBadgeComponent,

src/main/webapp/app/layouts/navbar/helpMenu.component.html

+<li>
+  <a class="dropdown-item" href="{{ toPagesUrl(helpContentTree!.path) }}" *ngIf="helpContentTree!.path">
+    <fa-icon icon="question-circle" class="navIcon"></fa-icon><span class="label" dropdown-toggle>{{ helpContentTree!.title }}</span>
+  </a>
+  <span class="label" *ngIf="!helpContentTree!.path" dropdown-toggle>{{ helpContentTree!.title }}</span>
+
+  <ul *ngIf="helpContentTree!.children">
+    <jhi-helpMenu
+      *ngFor="let child of helpContentTree!.children"
+      [helpContentTree]="child"
+      [navbarComponent]="navbarComponent"
+    ></jhi-helpMenu>
+  </ul>
+</li>

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -406,16 +406,12 @@
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
       >
-        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);">
+        <a #b class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);">
           <fa-icon icon="question-circle" class="navIcon"></fa-icon>
           <span jhiTranslate="global.menu.help">Help</span>
         </a>
-        <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="help-menu" style="left: auto; right: 0">
-          <li ngbDropdownItem>
-            <a class="dropdown-item" routerLink="pages/{{ translateService.currentLang }}/helpStart" (click)="collapseNavbar()">
-              <fa-icon icon="question-circle"></fa-icon><span jhiTranslate="global.menu.helpEntry.helpPages">Erste Hilfe Seite</span>
-            </a>
-          </li>
+        <ul class="dropdown-menu" ngbDropdownMenu [matchWidth]="400" *ngIf="helpContentTree">
+          <jhi-helpMenu [helpContentTree]="helpContentTree" [navbarComponent]="this"></jhi-helpMenu>
         </ul>
       </li>
     </ul>

src/main/webapp/app/layouts/navbar/navbar.component.ts

 import { Location } from '@angular/common';
-import { Component, Directive, Input, OnInit } from '@angular/core';
+import { Component, Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -15,13 +15,15 @@ import { LoginService } from 'app/login/login.service';
 import { ProfileService } from 'app/layouts/profiles/profile.service';
 import { EntityNavbarItems } from 'app/entities/entity-navbar-items';
 import { WatchlistManager } from 'app/shared/watchlist/watchlist-manager';
-import { PagesService } from 'app/shared/service/pages-service';
+import { HelpContentTree, PagesService } from 'app/shared/service/pages-service';
 import { ApplicationInfoService } from 'app/core/application/applicationInfo.service';
 import { AuthServerProvider } from 'app/core/auth/auth-jwt.service';
 import { UtilityService } from 'app/admin/util/utility.service';
 import { ReviewManagementService } from 'app/admin/review-management/review-management.service';
 import { ReviewStatisticsDTO } from 'app/admin/review-management/review.model';
 import { IconName } from '@fortawesome/fontawesome-common-types';
+import { Subscription } from 'rxjs';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 @Component({
   selector: 'jhi-navbar',
   templateUrl: './navbar.component.html',
@@ -77,6 +79,11 @@ export class NavbarComponent implements OnInit {
       this.inProduction = profileInfo.inProduction;
       this.openAPIEnabled = profileInfo.openAPIEnabled;
     });
+    this.getHelpContentTree();
+    // change help content tree on language change
+    this.translateService.onLangChange.subscribe(() => {
+      this.getHelpContentTree();
+    });
 
     this.oAuth2ConfigService.getAllConfigs().subscribe((loadedConfigs: OAuth2Config[]) => {
       this.configs = loadedConfigs;
@@ -198,6 +205,71 @@ export class NavbarComponent implements OnInit {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this.isAuthenticated() ? this.accountService.getImageUrl() : '';
   }
+
+  helpContentTree: HelpContentTree | undefined = undefined;
+
+  getHelpContentTree(): void {
+    this.pagesService.getHelpContentTree(this.translateService.currentLang).subscribe(data => {
+      this.helpContentTree = data;
+    });
+  }
+}
+
+@Component({
+  selector: 'jhi-helpMenu',
+  templateUrl: './helpMenu.component.html',
+  styles: [
+    `
+      .label {
+        text-wrap: wrap;
+      }
+      li {
+      }
+      ul {
+        padding-left: 30px;
+        list-style-type: none;
+      }
+      .dropdown-item {
+        padding-left: 10px;
+      }
+    `,
+  ],
+})
+export class HelpMenuComponent {
+  @Input() public helpContentTree: HelpContentTree | undefined;
+  @Input() public navbarComponent: NavbarComponent | undefined;
+
+  constructor(private pagesService: PagesService) {}
+
+  toPagesUrl(page: string | undefined): string {
+    if (page) {
+      return '/pages/' + page;
+    } else {
+      return '#';
+    }
+  }
+}
+
+/**
+ * helper class to enlarge the dropdown menu to the width of the dropdown button
+ */
+@Directive({ selector: '[ngbDropdownMenu][matchWidth]' })
+export class MatchWidthDirective implements OnDestroy {
+  private subscription: Subscription;
+
+  @Input() matchWidth = 200;
+
+  constructor(private dropdown: NgbDropdown, private elementRef: ElementRef) {
+    this.subscription = dropdown.openChange.subscribe(opened => {
+      if (opened && this.matchWidth) {
+        this.elementRef.nativeElement.style.width = `${this.matchWidth}px`;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 }
 
 @Component({

src/main/webapp/app/shared/service/pages-service.ts

@@ -10,6 +10,12 @@ export interface EditorialPage {
   content: string;
 }
 
+export interface HelpContentTree {
+  title: string;
+  path: string;
+  children: HelpContentTree[];
+}
+
 /**
  provides access to pages
  */
@@ -26,6 +32,22 @@ export class PagesService {
     return resp;
   }
 
+  private helpContentTree: { [Name: string]: HelpContentTree } = {};
+
+  public getHelpContentTree(lang: string): Observable<HelpContentTree> {
+    if (this.helpContentTree[lang]) {
+      return new Observable<HelpContentTree>(observer => {
+        observer.next(this.helpContentTree[lang]);
+        observer.complete();
+      });
+    }
+    const resp = this.http.get<HelpContentTree>(this.pageResourceURL + '/helpTree/' + lang);
+    resp.subscribe(tree => {
+      this.helpContentTree[lang] = tree;
+    });
+    return resp;
+  }
+
   public getAttachmentURL(path: string): Observable<string> {
     const parameters = new HttpParams().set('path', path);
     const resp = this.http.get<string>(this.attachmentResourceURL, { params: parameters });