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

1. renamed user-field->dmp-user-field, 2. fixed sorting issue, 3. styling changes

This commit is contained in:
Sofia Papacharalampous 2024-03-21 18:01:17 +02:00
parent abb7aca6da
commit 6ca7b792e7
9 changed files with 142 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
View File

@ -244,7 +244,7 @@
</div> </div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User"> <div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
<div> <div>
<app-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-user-field-component> <app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-dmp-user-field-component>
</div> </div>
</div> </div>
</div> </div>

4
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts
View File

@ -9,7 +9,7 @@ import { DmpEditorRoutingModule } from './dmp-editor.routing';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module'; import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { ReferenceFieldModule } from '@app/ui/reference/reference-field/reference-field.module'; import { ReferenceFieldModule } from '@app/ui/reference/reference-field/reference-field.module';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { UserFieldModule } from '../user-field/user-field.module'; import { DmpUserFieldModule } from '../dmp-user-field/dmp-user-field.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -22,7 +22,7 @@ import { UserFieldModule } from '../user-field/user-field.module';
AutoCompleteModule, AutoCompleteModule,
ReferenceFieldModule, ReferenceFieldModule,
DragDropModule, DragDropModule,
UserFieldModule DmpUserFieldModule
], ],
declarations: [ declarations: [
DmpEditorComponent, DmpEditorComponent,

90
dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html Normal file
View File

@ -0,0 +1,90 @@
<div class="p-2">
<div cdkDropList (cdkDropListDropped)="dropUsers($event)" *ngIf="enableSorting===true; else sortingDisabled" class="row">
<div class="col-12">
<div *ngFor="let user of form.get('users').controls; let userIndex = index" cdkDrag class="row align-items-center user-fields" [cdkDragDisabled]="form.disabled" (mouseenter)="onUserHover(userIndex)" (mouseleave)="clearHoveredUser()">
<ng-container *ngTemplateOutlet="userForm; context: {$implicit: user, index: userIndex}" ></ng-container>
</div>
</div>
</div>
<ng-template #sortingDisabled>
<div class="row">
<div class="col-12">
<div *ngFor="let user of form.get('users').controls; let userIndex = index" class="row align-items-center user-fields">
<ng-container *ngTemplateOutlet="userForm; context: {$implicit: user, index: userIndex}" ></ng-container>
</div>
</div>
</div>
</ng-template>
<div class="row">
<div class="col">
<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>
<ng-template #userForm let-user let-userIndex="index">
<div class="col-auto pb-1">
<span *ngIf="!isUserSelected(userIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{userIndex + 1}}</span>
<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
<div *ngFor="let userType of dmpUserTypeEnumValues">
<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
</div>
</mat-button-toggle-group>
</div>
<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
<input matInput type="text" name="email" [formControl]="user.get('email')">
<mat-error *ngIf="user.get('email').hasError('backendError')">{{user.get('email').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto mt-3 user-field">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
<mat-select [formControl]="user.get('role')">
<mat-option *ngFor="let userRole of dmpUserRoleEnumValues" [value]="userRole">{{enumUtils.toDmpUserRoleString(userRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="user.get('role').hasError('backendError')">{{user.get('role').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto mt-3 user-field" *ngIf="sections">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
<mat-select [formControl]="user.get('sectionId')">
<mat-option *ngFor="let section of sections" [value]="section.id">
{{ section.label }}
</mat-option>
</mat-select>
<mat-error *ngIf="user.get('sectionId').hasError('backendError')">{{user.get('sectionId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto user-field">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
<mat-error *ngIf="form.get('users').dirty && form.get('users').hasError('required')">{{'DMP-EDITOR.USERS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('users').hasError('backendError')">{{form.get('users').getError('backendError').message}}</mat-error>
</ng-template>

12
dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss → dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
View File

@ -1,4 +1,4 @@
.invite-users-dialog-wrapper { .invite-users-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: baseline; align-items: baseline;
@ -14,6 +14,14 @@
color: rgba(0, 0, 0, 0.38);; color: rgba(0, 0, 0, 0.38);;
} }
.user-fields-wrapper {
@media (max-width:1400px) {
.user-fields {
flex-direction: column;
}
.user-field {
align-self: flex-start;
}
} }

31
dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts → dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.ts
View File

@ -12,11 +12,11 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid
import { DmpEditorModel, DmpUserEditorModel } from '../dmp-editor-blueprint/dmp-editor.model'; import { DmpEditorModel, DmpUserEditorModel } from '../dmp-editor-blueprint/dmp-editor.model';
@Component({ @Component({
selector: 'app-user-field-component', selector: 'app-dmp-user-field-component',
templateUrl: 'user-field.component.html', templateUrl: 'dmp-user-field.component.html',
styleUrls: ['./user-field.component.scss'] styleUrls: ['./dmp-user-field.component.scss']
}) })
export class UserFieldComponent extends BaseComponent implements OnInit { export class DmpUserFieldComponent extends BaseComponent implements OnInit {
@Input() form; @Input() form;
@Input() validationErrorModel: ValidationErrorModel; @Input() validationErrorModel: ValidationErrorModel;
@ -25,7 +25,9 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
@Input() placeholder: string; @Input() placeholder: string;
@Input() sections: DmpBlueprintDefinitionSection[] = null; @Input() sections: DmpBlueprintDefinitionSection[] = null;
@Input() initializeUsers: boolean = false; @Input() initializeUsers: boolean = false;
@Input() enableSorting: boolean = true; @Input() enableSorting: boolean = true;
hoveredUser:number = -1;
dmpUserTypeEnum = DmpUserType; dmpUserTypeEnum = DmpUserType;
dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType); dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType);
@ -33,6 +35,7 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration; multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration;
constructor( constructor(
public enumUtils: EnumUtils, public enumUtils: EnumUtils,
public userService: UserService public userService: UserService
@ -63,6 +66,12 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
this.form.get('users').markAsDirty(); this.form.get('users').markAsDirty();
} }
//
//
// Users
//
//
dropUsers(event: CdkDragDrop<string[]>) { dropUsers(event: CdkDragDrop<string[]>) {
const usersFormArray = (this.form.get('users') as FormArray); const usersFormArray = (this.form.get('users') as FormArray);
@ -77,4 +86,18 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
); );
this.form.get('users').markAsDirty(); 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;
}
} }

12
dmp-frontend/src/app/ui/dmp/user-field/user-field.module.ts → dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.module.ts
View File

@ -3,20 +3,24 @@ import { FormattingModule } from '@app/core/formatting.module';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module'; import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { CommonFormsModule } from '@common/forms/common-forms.module'; import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module'; import { CommonUiModule } from '@common/ui/common-ui.module';
import { UserFieldComponent } from './user-field.component'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgxDropzoneModule } from "ngx-dropzone";
import { DmpUserFieldComponent } from './dmp-user-field.component';
@NgModule({ @NgModule({
imports: [ imports: [
CommonUiModule, CommonUiModule,
CommonFormsModule, CommonFormsModule,
FormattingModule, FormattingModule,
NgxDropzoneModule,
DragDropModule,
AutoCompleteModule AutoCompleteModule
], ],
declarations: [ declarations: [
UserFieldComponent DmpUserFieldComponent
], ],
exports: [ exports: [
UserFieldComponent DmpUserFieldComponent
] ]
}) })
export class UserFieldModule { } export class DmpUserFieldModule { }

2
dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
View File

@ -9,7 +9,7 @@
</div> </div>
<div mat-dialog-content class="row"> <div mat-dialog-content class="row">
<div> <div>
<app-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [initializeUsers]="'true'" [enableSorting]="'false'"></app-user-field-component> <app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [initializeUsers]="true" [enableSorting]="false"></app-dmp-user-field-component>
</div> </div>
<div class="col mt-2"> <div class="col mt-2">
<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn">{{'DMP-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button> <button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn">{{'DMP-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>

4
dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.module.ts
View File

@ -4,10 +4,10 @@ import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.mod
import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module"; import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module";
import { CommonUiModule } from '@common/ui/common-ui.module'; import { CommonUiModule } from '@common/ui/common-ui.module';
import { DmpInvitationDialogComponent } from './dmp-invitation-dialog.component'; import { DmpInvitationDialogComponent } from './dmp-invitation-dialog.component';
import { UserFieldModule } from '../../user-field/user-field.module'; import { DmpUserFieldModule } from '../../dmp-user-field/dmp-user-field.module';
@NgModule({ @NgModule({
imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule, RichTextEditorModule, UserFieldModule], imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule, RichTextEditorModule, DmpUserFieldModule],
declarations: [DmpInvitationDialogComponent], declarations: [DmpInvitationDialogComponent],
exports: [DmpInvitationDialogComponent] exports: [DmpInvitationDialogComponent]
}) })

82
dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
View File

@ -1,82 +0,0 @@
<div class="invite-users-dialog-wrapper">
<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
<ng-container *ngTemplateOutlet="userForm"></ng-container>
</div>
<ng-template class="col-12" #sortingDisabled>
<ng-container *ngTemplateOutlet="userForm"></ng-container>
</ng-template>
<div class="row">
<div class="col">
<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>
<ng-template #userForm>
<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="mb-4 row user-fields-wrapper" [cdkDragDisabled]="form.disabled">
<!-- <div class="pb-2 col-auto">
<span style="font-size: 15px;">{{userIndex + 1}}</span>
</div> -->
<div class="pb-2 mb-1 col-auto">
<span class="col-auto" style="font-size: 18px;">{{userIndex + 1}}</span>
</div>
<div *ngIf="enableSorting==true" class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="pb-4 col-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
<div *ngFor="let userType of dmpUserTypeEnumValues">
<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
</div>
</mat-button-toggle-group>
</div>
<div class="col-auto" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
<input matInput type="text" name="email" [formControl]="user.get('email')">
<mat-error *ngIf="user.get('email').hasError('backendError')">{{user.get('email').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
<mat-select [formControl]="user.get('role')">
<mat-option *ngFor="let userRole of dmpUserRoleEnumValues" [value]="userRole">{{enumUtils.toDmpUserRoleString(userRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="user.get('role').hasError('backendError')">{{user.get('role').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="sections">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
<mat-select [formControl]="user.get('sectionId')">
<mat-option *ngFor="let section of sections" [value]="section.id">
{{ section.label }}
</mat-option>
</mat-select>
<mat-error *ngIf="user.get('sectionId').hasError('backendError')">{{user.get('sectionId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<mat-error *ngIf="form.get('users').dirty && form.get('users').hasError('required')">{{'DMP-EDITOR.USERS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('users').hasError('backendError')">{{form.get('users').getError('backendError').message}}</mat-error>
</ng-template>