Revert special item with previous style. Add type managers and members in notification form

This commit is contained in:
Konstantinos Triantafyllou 2022-08-05 14:59:08 +03:00
parent 3756f8df83
commit 460cbdfc9a
5 changed files with 76 additions and 27 deletions

View File

@ -1,19 +1,6 @@
<aside id="sidebar_main"> <aside id="sidebar_main">
<div id="sidebar_content"> <div id="sidebar_content">
<ng-template [ngIf]="specialMenuItem"> <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<div class="menu_section uk-margin-large-top">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling" class="uk-button uk-button-link uk-margin-left">
<h6 class="uk-margin-remove-bottom uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.5" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
</div>
<span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
</h6>
</a>
</div>
</ng-template>
<div *ngIf="items.length > 0" class="menu_section" [class.uk-margin-xlarge-top]="!specialMenuItem" [class.uk-margin-large-top]="specialMenuItem" style="min-height: 30vh">
<ul class="uk-list uk-nav uk-nav-default" uk-nav> <ul class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index"> <ng-template ngFor [ngForOf]="items" let-item let-i="index">
<li [class.uk-active]="isTheActiveMenuItem(item)" <li [class.uk-active]="isTheActiveMenuItem(item)"
@ -33,5 +20,22 @@
</ng-template> </ng-template>
</ul> </ul>
</div> </div>
<ng-template [ngIf]="specialMenuItem">
<div class="menu_section uk-margin-xlarge-top">
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
</div>
<span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
</div>
</a>
</li>
</ul>
</div>
</ng-template>
</div> </div>
</aside> </aside>

View File

@ -212,6 +212,22 @@ export class Role {
return "CURATOR_" + this.mapType(type, true).toUpperCase(); return "CURATOR_" + this.mapType(type, true).toUpperCase();
} }
/**
* Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT
*
* */
public static typeManager(type: string): string {
return "MANAGER_" + this.mapType(type, true).toUpperCase();
}
/**
* Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT
*
* */
public static typeMember(type: string): string {
return this.mapType(type, false).toUpperCase();
}
/** /**
* Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT * Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT
* *

View File

@ -51,7 +51,7 @@ declare var UIkit;
</li> </li>
</ul> </ul>
</div> </div>
<div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [service]="service" notify-form class="notify"></div> <div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [entities]="entities" [service]="service" notify-form class="notify"></div>
</ng-template> </ng-template>
<div *ngIf="notification" class="notification"> <div *ngIf="notification" class="notification">
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom"> <div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
@ -85,6 +85,8 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
@Input() @Input()
public availableGroups: Option[] = []; public availableGroups: Option[] = [];
@Input() @Input()
public entities: string[] = [];
@Input()
public service: string; public service: string;
public notification: Notification; public notification: Notification;
private subscriptions: any[] = []; private subscriptions: any[] = [];

View File

@ -1,6 +1,6 @@
import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core"; import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core";
import {FormArray, FormBuilder, FormGroup} from "@angular/forms"; import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
import {User} from "../../login/utils/helper.class"; import {Role, User} from "../../login/utils/helper.class";
import {UserManagementService} from "../../services/user-management.service"; import {UserManagementService} from "../../services/user-management.service";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {NotificationService} from "../notification.service"; import {NotificationService} from "../notification.service";
@ -22,7 +22,7 @@ import {NotificationHandler} from "../../utils/notification-handler";
</div> </div>
</ng-template> </ng-template>
<ng-template [ngIf]="form.get('groups') && availableGroups"> <ng-template [ngIf]="form.get('groups') && availableGroups">
<div #recipients input type="chips" [options]="availableGroups" <div #recipients input type="chips" [options]="groups"
placeholder="Sent to:" hint="Add a recipient" inputClass="recipients" [formInput]="form.get('groups')"> placeholder="Sent to:" hint="Add a recipient" inputClass="recipients" [formInput]="form.get('groups')">
</div> </div>
<div class="uk-position-relative uk-margin-medium-top"> <div class="uk-position-relative uk-margin-medium-top">
@ -50,10 +50,11 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
public form: FormGroup; public form: FormGroup;
@Input() @Input()
public availableGroups: Option[] = null; public availableGroups: Option[] = null;
public groups: Option[] = [];
@Input() service: string; @Input() service: string;
public types: string[] = [];
public user: User; public user: User;
public focused: boolean = false; public focused: boolean = false;
public groups: string[] = [];
@ViewChild('recipients', { static: false }) recipients: InputComponent; @ViewChild('recipients', { static: false }) recipients: InputComponent;
private notification: Notification; private notification: Notification;
private subscriptions: any[] = []; private subscriptions: any[] = [];
@ -65,6 +66,12 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
private notificationService: NotificationService) { private notificationService: NotificationService) {
} }
@Input()
set entities(entities: string[]) {
this.types = entities.map(entity => Role.typeMember(entity));
this.types = this.types.concat(entities.map(entity => Role.typeManager(entity)));
}
ngOnInit() { ngOnInit() {
this.reset(); this.reset();
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
@ -96,11 +103,12 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
groups: this.fb.array([]), groups: this.fb.array([]),
message: this.fb.control(message) message: this.fb.control(message)
}); });
this.groups = []; this.groups = this.availableGroups;
this.subscriptions.push(this.form.get('groups').valueChanges.subscribe(value => { this.subscriptions.push(this.form.get('groups').valueChanges.subscribe(value => {
this.groups = []; let typeGroups = this.typeGroups;
value.forEach(group => { this.groups = this.availableGroups.map(group => {
this.groups.push(this.availableGroups.find(available => available.value === group).label); group.hidden = typeGroups.includes(group.value)
return group;
}); });
this.cdr.detectChanges(); this.cdr.detectChanges();
})); }));
@ -111,7 +119,7 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
if (this.message) { if (this.message) {
if(notification === null) { if(notification === null) {
notification = new Notification('CUSTOM', [this.service], null, null); notification = new Notification('CUSTOM', [this.service], null, null);
notification.groups = this.groupsAsFromArray.value; notification.groups = this.parseGroups();
this.sending = true; this.sending = true;
} }
this.notification = notification; this.notification = notification;
@ -119,7 +127,7 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
// TODO remove // TODO remove
this.notification.name = this.user.firstname; this.notification.name = this.user.firstname;
this.notification.surname = this.user.lastname; this.notification.surname = this.user.lastname;
this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(notification => { this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(() => {
this.sending = false; this.sending = false;
NotificationHandler.rise('A notification has been <b>sent</b> successfully'); NotificationHandler.rise('A notification has been <b>sent</b> successfully');
this.reset(); this.reset();
@ -131,6 +139,24 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
} }
} }
parseGroups(): string[] {
let typeGroups = this.typeGroups;
return this.groupsAsFromArray.getRawValue().filter(group => !this.types.includes(group) && !typeGroups.includes(group)).concat(typeGroups);
}
get typeGroups(): string[] {
let groups: string[] = [];
this.groupsAsFromArray.getRawValue().filter(group => this.types.includes(group)).forEach(roleType => {
if(roleType.includes("MANAGER_")) {
let type = roleType.replace("MANAGER_", "");
groups = groups.concat(this.availableGroups.map(option => option.value).filter(group => group.includes(type) && group.includes("_MANAGER")));
} else {
groups = groups.concat(this.availableGroups.map(option => option.value).filter(group => group.includes(roleType + "_") && !group.includes("_MANAGER") && !group.includes("MANAGER_")));
}
});
return groups;
}
get groupsAsFromArray(): FormArray { get groupsAsFromArray(): FormArray {
return this.form.get('groups')?(<FormArray>this.form.get('groups')):null; return this.form.get('groups')?(<FormArray>this.form.get('groups')):null;
} }

View File

@ -28,7 +28,8 @@ export interface Option {
value: any, value: any,
label: string, label: string,
tooltip?: string, tooltip?: string,
disabled?: boolean disabled?: boolean,
hidden?: boolean
} }
export interface Placeholder { export interface Placeholder {
@ -141,7 +142,7 @@ declare var UIkit;
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id"> uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i"> <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
<a (click)="selectOption(option, $event)" <a (click)="selectOption(option, $event)"
[class]="option.disabled ? 'uk-disabled uk-text-muted' : ''"> [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
<span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span> <span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
@ -465,7 +466,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
private filter(value: string): Option[] { private filter(value: string): Option[] {
let options = this.optionsArray; let options = this.optionsArray.filter(option => !option.hidden);
if (this.type === "chips") { if (this.type === "chips") {
options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value))); options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value)));
} }