MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[umbrella]: Add reorder in umbrella admin page for types.

This commit is contained in:
Konstantinos Triantafyllou 2024-06-12 01:43:40 +03:00
parent 98508c980e
commit 179f0c4cd2
2 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
monitor-admin/umbrella/umbrella.component.ts
View File

@ -3,7 +3,7 @@ import {StakeholderBaseComponent} from "../utils/stakeholder-base.component";
import {ActivatedRoute, Router} from "@angular/router";
import {Title} from "@angular/platform-browser";
import {StakeholderService} from "../../monitor/services/stakeholder.service";
import {ManageStakeholders, Stakeholder, StakeholderType} from "../../monitor/entities/stakeholder";
import {ManageStakeholders, Stakeholder, StakeholderType, Umbrella} from "../../monitor/entities/stakeholder";
import {Session, User} from "../../login/utils/helper.class";
import {UserManagementService} from "../../services/user-management.service";
import {FormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
@ -15,6 +15,8 @@ import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full
import {map} from "rxjs/operators";
import {StakeholderCategory} from "../utils/indicator-utils";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {properties} from "../../../../environments/environment";
import {TransitionGroupComponent} from "../../utils/transition-group/transition-group.component";
declare var UIkit;
@ -23,9 +25,9 @@ declare var UIkit;
template: `
<div page-content>
<div header class="uk-margin-medium-top">
<ul *ngIf="umbrella" class="uk-tab uk-margin-xsmall-top">
<ul #typesGroup *ngIf="umbrella" class="uk-tab uk-margin-xsmall-top" transition-group>
<ng-container *ngFor="let type of umbrella.types; let i=index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="activeIndex === i">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="activeIndex === i" transition-group-item>
<a (click)="chooseType(i)">
<span class="uk-text-uppercase">{{ stakeholderUtils.entities[type] }}</span>
</a>
@ -38,6 +40,23 @@ declare var UIkit;
<div #element
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
<ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0">
<a (click)="hide(element);moveType(i)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="west" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Left</span>
</div>
</a>
</li>
<li *ngIf="i < umbrella.types.length - 1">
<a (click)="hide(element);moveType(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="east" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Right</span>
</div>
</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<a (click)="deleteTypeOpen(i); hide(element)">
<div class="uk-flex uk-flex-middle">
@ -51,7 +70,7 @@ declare var UIkit;
</div>
</li>
</ng-container>
<li *ngIf="isCurator">
<li *ngIf="isCurator && types.length > 0">
<a (click)="addTypeOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span class="uk-text-uppercase">Add type</span>
@ -116,7 +135,8 @@ declare var UIkit;
</div>
<div uk-height-match="target: .titleContainer; row: false">
<div uk-height-match="target: .logoContainer; row: false">
<filtered-stakeholders *ngFor="let category of categories" [add]="true" (added)="addStakeholder($event)"
<filtered-stakeholders *ngFor="let category of categories" [add]="true"
(added)="addStakeholder($event)"
[stakeholderCategory]="category" [remove]="true"
(removed)="removeStakeholder($event)"
[keyword]="keyword" [(stakeholders)]="manageStakeholders[category.value]">
@ -140,6 +160,7 @@ export class UmbrellaComponent extends StakeholderBaseComponent implements OnIni
@ViewChild('addTypeModal', {static: true}) addTypeModal: AlertModal;
@ViewChild('deleteTypeModal', {static: true}) deleteTypeModal: AlertModal;
@ViewChild('manageStakeholdersModal', {static: true}) manageStakeholdersModal: FullScreenModalComponent;
@ViewChild('typesGroup') typesGroup: TransitionGroupComponent;
constructor(protected _route: ActivatedRoute,
protected _router: Router,
@ -174,7 +195,7 @@ export class UmbrellaComponent extends StakeholderBaseComponent implements OnIni
return true;
}
resetUpdateForm(action: "ADD" | "REMOVE" = "ADD", type: StakeholderType = null, child: string = null): void {
resetUpdateForm(action: "ADD" | "REMOVE" | "UPDATE" = "ADD", type: StakeholderType = null, child: string = null): void {
this.updateFb = this.fb.group({
type: this.fb.control(type, Validators.required),
action: this.fb.control(action, Validators.required),
@ -184,6 +205,15 @@ export class UmbrellaComponent extends StakeholderBaseComponent implements OnIni
}
}
resetUpdateFormForReorder(index: number, newIndex: number = index - 1) {
let types = HelperFunctions.copy(this.umbrella.types);
HelperFunctions.swap(types, index, newIndex);
this.updateFb = this.fb.group({
types: this.fb.control(types, Validators.required),
action: this.fb.control("UPDATE", Validators.required)
});
}
addTypeOpen(): void {
this.resetUpdateForm();
this.addTypeModal.cancelButtonText = 'Cancel';
@ -206,22 +236,44 @@ export class UmbrellaComponent extends StakeholderBaseComponent implements OnIni
addType() {
this.loading = true;
this.updateUmbrella(this.addTypeModal);
this.updateUmbrella((umbrella: Umbrella) => {
this.addTypeModal.cancel();
this.umbrella = umbrella;
}, () => {
this.addTypeModal.cancel();
});
}
deleteType() {
this.loading = true;
this.updateUmbrella(this.deleteTypeModal);
this.updateUmbrella((umbrella: Umbrella) => {
this.deleteTypeModal.cancel();
this.umbrella = umbrella;
}, () => {
this.deleteTypeModal.cancel();
});
}
addStakeholder(id: string) {
this.resetUpdateForm('ADD', this.activeType, id);
this.updateUmbrella();
this.updateUmbrella((umbrella: Umbrella) => {
this.umbrella = umbrella;
});
}
removeStakeholder(id: string) {
this.resetUpdateForm('REMOVE', this.activeType, id);
this.updateUmbrella();
this.updateUmbrella((umbrella: Umbrella) => {
this.umbrella = umbrella;
});
}
public moveType(index: number, newIndex: number = index - 1): void {
this.resetUpdateFormForReorder(index, newIndex);
this.typesGroup.init();
this.updateUmbrella( () => {
HelperFunctions.swap(this.umbrella.types, index, newIndex);
});
}
public manageStakeholdersOpen() {
@ -266,23 +318,24 @@ export class UmbrellaComponent extends StakeholderBaseComponent implements OnIni
}
}
updateUmbrella(modal: AlertModal = null) {
updateUmbrella(successFn: Function = null, errorFn: Function = null): void {
this.subscriptions.push(this.stakeholderService.updateUmbrella(this.properties.monitorServiceAPIURL, this.stakeholder._id, this.updateFb.getRawValue())
.subscribe(umbrella => {
this.loading = false;
if(modal) {
modal.cancel();
}
this.umbrella = umbrella;
if(!this.activeType) {
this.activeIndex = 0;
}
this.filterManagedStakeholders(this.manageStakeholders);
if(successFn) {
successFn(umbrella);
}
if(this.manageStakeholders) {
this.filterManagedStakeholders(this.manageStakeholders);
}
this.cdr.detectChanges();
}, error => {
this.loading = false;
if(modal) {
modal.cancel();
if(errorFn) {
errorFn();
}
NotificationHandler.rise(error.error.message, 'danger');
}));

3
monitor-admin/umbrella/umbrella.module.ts
View File

@ -15,12 +15,13 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
import {PagingModule} from "../../utils/paging.module";
import {FilteredStakeholdersComponent} from "./filtered-stakeholders.component";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {TransitionGroupModule} from "../../utils/transition-group/transition-group.module";
@NgModule({
declarations: [UmbrellaComponent, FilteredStakeholdersComponent],
imports: [CommonModule, RouterModule.forChild([
{path: '', component: UmbrellaComponent, canDeactivate: [PreviousRouteRecorder, CanExitGuard]}
]), PageContentModule, IconsModule, AlertModalModule, LoadingModule, ReactiveFormsModule, InputModule, FullScreenModalModule, LogoUrlPipeModule, PagingModule, SearchInputModule],
]), PageContentModule, IconsModule, AlertModalModule, LoadingModule, ReactiveFormsModule, InputModule, FullScreenModalModule, LogoUrlPipeModule, PagingModule, SearchInputModule, TransitionGroupModule],
exports: [UmbrellaComponent]
})
export class UmbrellaModule {}