2024-03-21 17:01:17 +01:00
< 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" >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl-auto pb-1" >
2024-03-21 17:01:17 +01:00
< 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 >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl-auto" >
2024-03-21 17:49:11 +01:00
< mat-button-toggle-group name = "fontStyle" aria-label = "Font Style" [ formControl ] = " user . get ( ' userType ' ) " class = "w-100" >
< div * ngFor = "let userType of dmpUserTypeEnumValues" class = "col p-0" >
< mat-button-toggle class = "lang-button w-100" [ value ] = " userType " > {{enumUtils.toDmpUserTypeString(userType)}}< / mat-button-toggle >
2024-03-21 17:01:17 +01:00
< / div >
< / mat-button-toggle-group >
< / div >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl mt-3" * ngIf = "user.get('userType').value == dmpUserTypeEnum.Internal" >
2024-03-21 17:01:17 +01:00
< mat-form-field class = "w-100" >
2024-04-15 17:19:56 +02:00
< mat-label > {{'DMP-EDITOR.FIELDS.USER' | translate}}< / mat-label >
2024-03-21 17:01:17 +01:00
< 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 >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl mt-3" * ngIf = "user.get('userType').value == dmpUserTypeEnum.External" >
2024-03-21 17:01:17 +01:00
< mat-form-field class = "w-100" >
2024-04-15 17:19:56 +02:00
< mat-label > {{'DMP-EDITOR.FIELDS.EMAIL' | translate}}< / mat-label >
2024-03-21 17:01:17 +01:00
< 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 >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl mt-3" >
2024-03-21 17:01:17 +01:00
< mat-form-field class = "w-100" >
2024-03-22 17:37:10 +01:00
< mat-label > {{'DMP-EDITOR.FIELDS.USER-ROLE' | translate}}< / mat-label >
2024-03-21 17:01:17 +01:00
< 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 >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl mt-3" * ngIf = "sections" >
2024-03-21 17:01:17 +01:00
< mat-form-field class = "w-100" >
2024-03-22 17:37:10 +01:00
< mat-label > {{'DMP-EDITOR.FIELDS.SECTION' | translate}}< / mat-label >
2024-03-21 17:01:17 +01:00
< 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 >
2024-03-22 10:04:11 +01:00
< div class = "col-12 col-xl-auto" >
2024-04-19 16:32:48 +02:00
< button mat-icon-button class = "action-list-icon" matTooltip = "{{'DMP-EDITOR.ACTIONS.REMOVE-USER' | translate}}" ( click ) = " removeUser ( userIndex ) " [ disabled ] = " form . disabled " >
2024-03-21 17:01:17 +01:00
< 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 >