MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

made sidebar's footer-items configurable

This commit is contained in:
Sofia Papacharalampous 2024-07-03 11:28:16 +03:00
parent 4ea3a94f6d
commit f9ddf24fa5
2 changed files with 21 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
View File

@ -1,45 +1,9 @@
<div class="sidebar-footer col-12"> <div class="sidebar-footer col-12">
<div class="row ml-2">
<div class="col-auto">
<p class="option" (click)="navigate()" [ngClass]="{'option-active': this.router.url === '/about'}">
{{'FOOTER.ABOUT' | translate}}</p>
</div>
<div class="col-auto ml-3">
<p class="option" [routerLink]="routerUtils.generateUrl('/terms-and-conditions')" [routerLinkActive]="['option-active']">
{{'FOOTER.TERMS-OF-SERVICE' | translate}}</p>
</div>
</div>
<div class="row ml-2"> <div *ngFor="let footerItems of nestedFooterItems" class="row ml-2">
<div class="col-auto"> <div *ngFor="let item of footerItems; let index = index;" class="col-auto" [ngClass]="{'ml-3': index%2==1}">
<p class="option" [routerLink]="routerUtils.generateUrl('/glossary')" [routerLinkActive]="['option-active']"> <p class="option" [ngClass]="{'option-active': this.router.url === item.routerPath}" [routerLink]="routerUtils.generateUrl(item.routerPath)">
{{'FOOTER.GLOSSARY' | translate}}</p> {{ item.title | translate}}</p>
<!-- <p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
{{'FOOTER.GLOSSARY' | translate}}</p> -->
</div> </div>
<div class="col-auto">
<p class="option" [routerLink]="routerUtils.generateUrl('/user-guide')" [routerLinkActive]="['option-active']">
{{'FOOTER.GUIDE' | translate}}</p>
<!-- <p class="option" (click)="openUserGuideDialog()" [ngClass]="{'option-active': this.router.url === '/user-guide'}">
{{'FOOTER.GUIDE' | translate}}</p> -->
</div>
<!-- <div class="col-6 text-center">
<p class="option" (click)="openFaqDialog()" [ngClass]="{'option-active': this.router.url === '/faq'}">
{{'FOOTER.FAQ' | translate}}</p>
</div> -->
</div>
<div class="row ml-2">
<div *ngIf="isAuthenticated()" class="col-auto">
<p class="option" [routerLink]="routerUtils.generateUrl('/contact-support')" [routerLinkActive]="['option-active']">
{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
<!-- <p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
{{'FOOTER.CONTACT-SUPPORT' | translate}}</p> -->
</div>
<!-- <div class="col-auto text-center">
<a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']">
<i class="fa fa-user-secret pr-2 pt-1"></i>
{{'FOOTER.PRIVACY-POLICY' | translate}}</a>
</div> -->
</div> </div>
</div> </div>

20
dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
View File

@ -15,10 +15,12 @@ import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { AuthService } from "@app/core/services/auth/auth.service"; import { AuthService } from "@app/core/services/auth/auth.service";
import { UserGuideDialogComponent } from '@app/ui/user-guide/dialog/user-guide-dialog.component'; import { UserGuideDialogComponent } from '@app/ui/user-guide/dialog/user-guide-dialog.component';
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { AnalyticsService } from '@app/core/services/matomo/analytics-service'; import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service'; import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { RouterUtilsService } from '@app/core/services/router/router-utils.service'; import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { AccessLevel, SidebarItem } from '@app/core/model/configuration-models/sidebar.model';
@Component({ @Component({
selector: 'app-sidebar-footer', selector: 'app-sidebar-footer',
@ -27,6 +29,7 @@ import { RouterUtilsService } from '@app/core/services/router/router-utils.servi
}) })
export class SidebarFooterComponent extends BaseComponent implements OnInit { export class SidebarFooterComponent extends BaseComponent implements OnInit {
nestedFooterItems: SidebarItem[][];
private contactEmailFormModel: ContactEmailFormModel; private contactEmailFormModel: ContactEmailFormModel;
private formGroup: UntypedFormGroup; private formGroup: UntypedFormGroup;
@ -39,9 +42,9 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
private uiNotificationService: UiNotificationService, private uiNotificationService: UiNotificationService,
private formService: FormService, private formService: FormService,
private authentication: AuthService, private authentication: AuthService,
private httpClient: HttpClient,
private analyticsService: AnalyticsService, private analyticsService: AnalyticsService,
private httpErrorHandlingService: HttpErrorHandlingService private httpErrorHandlingService: HttpErrorHandlingService,
private configurationService: ConfigurationService,
) { ) {
super(); super();
} }
@ -49,6 +52,17 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.analyticsService.trackPageView(AnalyticsService.SidebarFooter); this.analyticsService.trackPageView(AnalyticsService.SidebarFooter);
const flattenedFooterItems = this.configurationService.sidebar?.footerItems ?? [];
this.nestedFooterItems = flattenedFooterItems.reduce((prev, current, index) => {
if (current.accessLevel == AccessLevel.Authenticated && !this.isAuthenticated()) return prev;
if (current.accessLevel == AccessLevel.Unauthenticated && this.isAuthenticated()) return prev;
if (index%2==0) prev.push([current]);
else prev[prev.length-1].push(current);
return prev;
}, []);
this.contactEmailFormModel = new ContactEmailFormModel(); this.contactEmailFormModel = new ContactEmailFormModel();
this.formGroup = this.contactEmailFormModel.buildForm(); this.formGroup = this.contactEmailFormModel.buildForm();
} }