disabled drag contacts and disable dmp user fields when canEdit is false
This commit is contained in:
parent
34f471fb30
commit
62120517b1
|
@ -189,10 +189,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
|
||||||
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
|
<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">
|
<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>
|
<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>
|
||||||
<div class="col-12 col-xl-auto">
|
<div class="col-12 col-xl-auto">
|
||||||
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="contact.get('contactType')">
|
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="contact.get('contactType')">
|
||||||
|
@ -269,8 +269,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
|
||||||
<div>
|
<div>
|
||||||
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-dmp-user-field-component>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
|
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
|
||||||
|
|
|
@ -93,7 +93,8 @@ export class DmpEditorModel extends BaseEditorModel implements DmpPersist {
|
||||||
users: this.formBuilder.array(
|
users: this.formBuilder.array(
|
||||||
(this.users ?? []).map(
|
(this.users ?? []).map(
|
||||||
(item, index) => item.buildForm({
|
(item, index) => item.buildForm({
|
||||||
rootPath: `users[${index}].`
|
rootPath: `users[${index}].`,
|
||||||
|
disabled: disabled
|
||||||
})
|
})
|
||||||
), context.getValidation('users').validators
|
), context.getValidation('users').validators
|
||||||
),
|
),
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<div cdkDropList (cdkDropListDropped)="dropUsers($event)" *ngIf="enableSorting===true; else sortingDisabled" class="row">
|
<div cdkDropList (cdkDropListDropped)="dropUsers($event)" *ngIf="enableSorting===true; else sortingDisabled" class="row">
|
||||||
<div class="col-12">
|
<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>
|
<ng-container *ngTemplateOutlet="userForm; context: {$implicit: user, index: userIndex}"></ng-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<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>
|
<mat-icon>add</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
<div class="col-12 col-xl-auto pb-1">
|
<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>
|
<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>
|
||||||
<div class="col-12 col-xl-auto">
|
<div class="col-12 col-xl-auto">
|
||||||
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" class="w-100">
|
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" class="w-100">
|
||||||
|
@ -87,7 +87,7 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-xl-auto">
|
<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>
|
<mat-icon>delete</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -25,7 +25,7 @@ export class DmpUserFieldComponent 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() viewOnly: boolean = false;
|
||||||
@Input() enableSorting: boolean = true;
|
@Input() enableSorting: boolean = true;
|
||||||
hoveredUser:number = -1;
|
hoveredUser:number = -1;
|
||||||
hasTemplatesSections: DmpBlueprintDefinitionSection[] = null;
|
hasTemplatesSections: DmpBlueprintDefinitionSection[] = null;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div mat-dialog-content class="row">
|
<div mat-dialog-content class="row">
|
||||||
<div>
|
<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>
|
||||||
<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>
|
||||||
|
|
Loading…
Reference in New Issue