disabled drag contacts and disable dmp user fields when canEdit is false

This commit is contained in:
amentis 2024-05-23 11:12:30 +03:00
parent 34f471fb30
commit 62120517b1
5 changed files with 11 additions and 11 deletions

View File

@ -189,10 +189,10 @@
</div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled || !canEdit" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
<div class="col-12 col-xl-auto pr-0">
<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col-12 col-xl-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="contact.get('contactType')">
@ -269,8 +269,7 @@
</div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
<div>
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-dmp-user-field-component>
</div>
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-dmp-user-field-component> </div>
</div>
</div>
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">

View File

@ -93,7 +93,8 @@ export class DmpEditorModel extends BaseEditorModel implements DmpPersist {
users: this.formBuilder.array(
(this.users ?? []).map(
(item, index) => item.buildForm({
rootPath: `users[${index}].`
rootPath: `users[${index}].`,
disabled: disabled
})
), context.getValidation('users').validators
),

View File

@ -2,7 +2,7 @@
<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()">
<div *ngFor="let user of form.get('users').controls; let userIndex = index" cdkDrag class="row align-items-center user-fields" [cdkDragDisabled]="viewOnly" (mouseenter)="onUserHover(userIndex)" (mouseleave)="clearHoveredUser()">
<ng-container *ngTemplateOutlet="userForm; context: {$implicit: user, index: userIndex}"></ng-container>
</div>
</div>
@ -20,7 +20,7 @@
<div class="row">
<div class="col">
<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
<button mat-icon-button (click)="addUser()" [disabled]="viewOnly">
<mat-icon>add</mat-icon>
</button>
</div>
@ -32,7 +32,7 @@
<div class="col-12 col-xl-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>
<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': viewOnly}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
<div class="col-12 col-xl-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" class="w-100">
@ -87,7 +87,7 @@
</mat-form-field>
</div>
<div class="col-12 col-xl-auto">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>
</button>
</div>

View File

@ -25,7 +25,7 @@ export class DmpUserFieldComponent extends BaseComponent implements OnInit {
@Input() placeholder: string;
@Input() sections: DmpBlueprintDefinitionSection[] = null;
@Input() initializeUsers: boolean = false;
@Input() viewOnly: boolean = false;
@Input() enableSorting: boolean = true;
hoveredUser:number = -1;
hasTemplatesSections: DmpBlueprintDefinitionSection[] = null;

View File

@ -9,7 +9,7 @@
</div>
<div mat-dialog-content class="row">
<div>
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [initializeUsers]="true" [enableSorting]="false"></app-dmp-user-field-component>
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="false" [initializeUsers]="true" [enableSorting]="false"></app-dmp-user-field-component>
</div>
<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>