Merge indicators and indicators/:topic path in one route configuration. Fix transitions in admin dashboard

This commit is contained in:
Konstantinos Triantafyllou 2022-11-07 17:01:30 +02:00
parent b970b9c302
commit f7db2d03b2
5 changed files with 67 additions and 33 deletions

View File

@ -1,5 +1,6 @@
import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
@NgModule({
imports: [RouterModule.forChild([
@ -19,13 +20,7 @@ import {RouterModule} from "@angular/router";
pathMatch: 'full'
},
{
path: 'indicators',
loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
data: {hasInternalSidebar: true},
pathMatch: 'full'
},
{
path: 'indicators/:topic',
matcher: HelperFunctions.routingMatcher(['indicators', 'indicators/:topic']),
loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
data: {hasInternalSidebar: true},
pathMatch: 'full'

View File

@ -350,8 +350,8 @@ export class AppComponent implements OnInit, OnDestroy {
title: this.stakeholder.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Dashboard</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">Dashboard</div></div>',
position: 'center',
badge: true,
menuPosition: "center"

@ -1 +1 @@
Subproject commit 7bae3b1ebb01a87246f9cc886cc5777ab5ddcf33
Subproject commit ed20502959df400f5ba38fdd5d4b3ba3cf9389c4

View File

@ -12,7 +12,7 @@
</a>
</div>
<div class="menu_section uk-margin-large-top">
<ul #topics class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" transition-group uk-nav="duration: 400">
<ul class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" transition-group [id]="'topics'" uk-nav="duration: 400">
<li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i" transition-group-item>
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
[title]="topic.name" class="uk-visible-toggle">
@ -93,7 +93,7 @@
</span>
</span>
</a>
<ul class="uk-nav-sub" #categories transition-group>
<ul class="uk-nav-sub" [id]="'categories-' + i.toString()" transition-group>
<li *ngFor="let category of topic.categories; let j=index" transition-group-item class="uk-visible-toggle" [class.uk-active]="categoryIndex == j">
<a (click)="chooseCategory(j)" [title]="category.name">
<div class="uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
@ -201,11 +201,11 @@
<div actions>
<div class="uk-margin-medium-top uk-margin-bottom">
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
#subCategories transition-group class="uk-tab">
transition-group class="uk-tab" [id]="'subCategories'">
<ng-template ngFor [ngForOf]=" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
<a (click)="chooseSubcategory(i)">
<span class="title"> {{subCategory.name}}</span>
<span> {{subCategory.name}}</span>
</a>
<span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="subCategoryIndex !== i"

View File

@ -1,4 +1,13 @@
import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {
AfterViewInit,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@ -64,10 +73,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
@ViewChild('deleteModal', {static: true}) deleteModal: AlertModal;
@ViewChild('editModal', {static: true}) editModal: AlertModal;
@ViewChild('visibilityModal', {static: true}) visibilityModal: AlertModal;
@ViewChild("topics") topics: TransitionGroupComponent;
@ViewChild("categories") categories: TransitionGroupComponent;
@ViewChild("subCategories") subCategories: TransitionGroupComponent;
@ViewChildren(TransitionGroupComponent) transitions: QueryList<TransitionGroupComponent>;
public elementChildrenActionOnDelete: string;
public filters: UntypedFormGroup;
@ -137,7 +143,14 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
}
ngAfterViewInit() {
UIkit.nav(this.topics.element.nativeElement).toggle(this.topicIndex, false);
if(this.topics) {
let activeIndex = UIkit.nav(this.topics.element.nativeElement).items.findIndex(item => item.classList.contains('uk-open'));
if(activeIndex !== this.topicIndex) {
setTimeout(() => {
UIkit.nav(this.topics.element.nativeElement).toggle(this.topicIndex, true);
});
}
}
}
public ngOnDestroy() {
@ -163,6 +176,22 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
return true;
}
private findById(id: string) {
return this.transitions?this.transitions.find(item => item.id === id):null;
}
get topics(): TransitionGroupComponent {
return this.findById('topics');
}
get categories(): TransitionGroupComponent {
return this.findById('categories-' + this.topicIndex);
}
get subCategories(): TransitionGroupComponent {
return this.findById('subCategories');
}
hide(element: any) {
UIkit.dropdown(element).hide();
}
@ -319,9 +348,12 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
this.stakeholder.topics[this.index]._id
];
let callback = (): void => {
this.chooseTopic(Math.max(0, this.index - 1));
this.stakeholder.topics.splice(this.index, 1);
this.topics.init();
this.topicChanged(() => {
this.stakeholder.topics.splice(this.index, 1);
if(this.topicIndex === this.index) {
this.chooseTopic(Math.max(0, this.index));
}
}, true);
};
this.delete('Topic has been successfully be deleted', path, callback, (this.topicIndex === this.index));
}
@ -457,9 +489,12 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
this.stakeholder.topics[this.topicIndex].categories[this.index]._id
];
let callback = (): void => {
this.chooseCategory(Math.max(0, this.index - 1));
this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
this.categories.init();
this.categoryChanged(() => {
this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
if(this.categoryIndex === this.index) {
this.chooseCategory(Math.max(0, this.index));
}
}, true);
};
this.delete('Category has been successfully be deleted', path, callback);
}
@ -485,15 +520,15 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
this.subCategoryIndexSubject.next(subcategoryIndex);
}
subCategoryChanged(callback: Function) {
if(this.subCategories) {
subCategoryChanged(callback: Function, save: boolean = false) {
if(this.subCategories && save) {
this.subCategories.disable();
}
if(callback) {
callback();
}
this.cdr.detectChanges();
if(this.subCategories) {
if(this.subCategories && save) {
this.subCategories.init();
this.subCategories.enable();
}
@ -552,7 +587,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
} else {
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index] = HelperFunctions.copy(subCategory);
}
});
}, true);
};
if (this.index === -1) {
this.save('Subcategory has been successfully created', path, this.form.value, callback);
@ -572,7 +607,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
let callback = (subcategory: SubCategory): void => {
this.subCategoryChanged(() => {
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index] = HelperFunctions.copy(subcategory);
});
}, true);
}
this.changeStatus(this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index], path, this.visibility, callback, propagate);
this.visibilityModal.cancel();
@ -594,8 +629,12 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index]._id
];
let callback = (): void => {
this.chooseSubcategory(Math.max(0, this.index - 1));
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories.splice(this.index, 1);
this.subCategoryChanged(() => {
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories.splice(this.index, 1);
if(this.subCategoryIndex === this.index) {
this.chooseSubcategory(Math.max(0, this.index));
}
}, true);
};
this.delete('Subcategory has been successfully be deleted', path, callback);
}