1. renamed user-field->dmp-user-field, 2. fixed sorting issue, 3. styling changes
parent
abb7aca6da
commit
6ca7b792e7
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue