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

dmp-editor ui 

*contacts > toggle drag_handler icon on hover
This commit is contained in:
Sofia Papacharalampous 2024-03-26 10:34:51 +02:00
parent 2a515f095b
commit e4516ef0ed
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -164,12 +164,12 @@
</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"> <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 class="col-auto"> <div class="col-12 col-xl-auto pb-1">
<span style="font-size: 15px;">{{contactIndex + 1}}</span> <span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{contactIndex + 1}}</span>
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div> </div>
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div> <div class="col-12 col-xl-auto">
<div class="col-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')">
<div *ngFor="let contactType of dmpContactTypeEnumValues"> <div *ngFor="let contactType of dmpContactTypeEnumValues">
<mat-button-toggle class="lang-button" [value]="contactType">{{enumUtils.toDmpContactTypeString(contactType)}}</mat-button-toggle> <mat-button-toggle class="lang-button" [value]="contactType">{{enumUtils.toDmpContactTypeString(contactType)}}</mat-button-toggle>
@ -214,7 +214,7 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-12 col-xl-auto">
<button [disabled]="formGroup.disabled" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled"> <button [disabled]="formGroup.disabled" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>

15
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
View File

@ -80,6 +80,8 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
permissionPerSection: Map<Guid, string[]>; permissionPerSection: Map<Guid, string[]>;
hoveredContact: number = -1;
singleAutocompleteBlueprintConfiguration: SingleAutoCompleteConfiguration = { singleAutocompleteBlueprintConfiguration: SingleAutoCompleteConfiguration = {
initialItems: (data?: any) => this.dmpBlueprintService.query(this.dmpBlueprintService.buildAutocompleteLookup(null, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)), initialItems: (data?: any) => this.dmpBlueprintService.query(this.dmpBlueprintService.buildAutocompleteLookup(null, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)),
filterFn: (searchQuery: string, data?: any) => this.dmpBlueprintService.query(this.dmpBlueprintService.buildAutocompleteLookup(searchQuery, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)), filterFn: (searchQuery: string, data?: any) => this.dmpBlueprintService.query(this.dmpBlueprintService.buildAutocompleteLookup(searchQuery, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)),
@ -353,6 +355,19 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
// Contacts // Contacts
// //
// //
isContactSelected(contactId: number): boolean {
return this.hoveredContact === contactId;
}
onContactHover(contactIndex: number): void {
this.hoveredContact = contactIndex;
}
clearHoveredContact(): void {
this.hoveredContact = -1;
}
addContact(): void { addContact(): void {
const contactArray = this.formGroup.get('properties').get('contacts') as FormArray; const contactArray = this.formGroup.get('properties').get('contacts') as FormArray;
(this.formGroup.get('properties').get('contacts') as FormArray).push(this.editorModel.createChildContact(contactArray.length)); (this.formGroup.get('properties').get('contacts') as FormArray).push(this.editorModel.createChildContact(contactArray.length));