104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
import { Component, Input, OnInit } from '@angular/core';
|
|
import { FormArray } from '@angular/forms';
|
|
import { DmpUserRole } from '@app/core/common/enum/dmp-user-role';
|
|
import { DmpUserType } from '@app/core/common/enum/dmp-user-type';
|
|
import { DmpBlueprintDefinitionSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
|
|
import { UserService } from '@app/core/services/user/user.service';
|
|
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
|
|
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
|
import { BaseComponent } from '@common/base/base.component';
|
|
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
|
|
import { DmpEditorModel, DmpUserEditorModel } from '../dmp-editor-blueprint/dmp-editor.model';
|
|
|
|
@Component({
|
|
selector: 'app-dmp-user-field-component',
|
|
templateUrl: 'dmp-user-field.component.html',
|
|
styleUrls: ['./dmp-user-field.component.scss']
|
|
})
|
|
export class DmpUserFieldComponent extends BaseComponent implements OnInit {
|
|
|
|
@Input() form;
|
|
@Input() validationErrorModel: ValidationErrorModel;
|
|
@Input() label: string = null;
|
|
@Input() required: boolean = false;
|
|
@Input() placeholder: string;
|
|
@Input() sections: DmpBlueprintDefinitionSection[] = null;
|
|
@Input() initializeUsers: boolean = false;
|
|
|
|
@Input() enableSorting: boolean = true;
|
|
hoveredUser:number = -1;
|
|
|
|
dmpUserTypeEnum = DmpUserType;
|
|
dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType);
|
|
dmpUserRoleEnumValues = this.enumUtils.getEnumValues<DmpUserRole>(DmpUserRole);
|
|
|
|
multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration;
|
|
|
|
|
|
constructor(
|
|
public enumUtils: EnumUtils,
|
|
public userService: UserService
|
|
) { super(); }
|
|
|
|
ngOnInit() {
|
|
console.log('sorting mode: ', this.enableSorting);
|
|
if(this.initializeUsers) {
|
|
this.addUser();
|
|
}
|
|
}
|
|
|
|
addUser(): void {
|
|
const userArray = this.form.get('users') as FormArray;
|
|
const dmpUser: DmpUserEditorModel = new DmpUserEditorModel(this.validationErrorModel);
|
|
userArray.push(dmpUser.buildForm({ rootPath: "users[" + userArray.length + "]." }));
|
|
}
|
|
|
|
removeUser(userIndex: number): void {
|
|
(this.form.get('users') as FormArray).removeAt(userIndex);
|
|
|
|
DmpEditorModel.reApplyPropertiesValidators(
|
|
{
|
|
formGroup: this.form,
|
|
validationErrorModel: this.validationErrorModel
|
|
}
|
|
);
|
|
this.form.get('users').markAsDirty();
|
|
}
|
|
|
|
//
|
|
//
|
|
// Users
|
|
//
|
|
//
|
|
|
|
dropUsers(event: CdkDragDrop<string[]>) {
|
|
const usersFormArray = (this.form.get('users') as FormArray);
|
|
|
|
moveItemInArray(usersFormArray.controls, event.previousIndex, event.currentIndex);
|
|
usersFormArray.updateValueAndValidity();
|
|
|
|
DmpEditorModel.reApplyPropertiesValidators(
|
|
{
|
|
formGroup: this.form,
|
|
validationErrorModel: this.validationErrorModel
|
|
}
|
|
);
|
|
this.form.get('users').markAsDirty();
|
|
}
|
|
|
|
isUserSelected(userId: number): boolean {
|
|
return this.hoveredUser === userId;
|
|
}
|
|
|
|
onUserHover(userIndex: number): void {
|
|
if (this.enableSorting === false) return;
|
|
|
|
this.hoveredUser = userIndex;
|
|
}
|
|
|
|
clearHoveredUser(): void {
|
|
this.hoveredUser = -1;
|
|
}
|
|
}
|