This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit bf75a79b authored by Michael Breu's avatar Michael Breu
Browse files

First implementation of better Help Pages

parent 0d855f66
Branches
2 merge requests!237From Development to Master (Feb 2024),!236Resolve "Aktualisierung der Hilfetexte der Sharing Plattform"
......@@ -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
}
......
......@@ -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,
......
<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>
......@@ -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>
......
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({
......
......@@ -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 });
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment