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

ui fixes on autocomplete of add-description-dialog

This commit is contained in:
Sofia Papacharalampous 2024-04-16 11:37:09 +03:00
parent 50881d059e
commit 730011a83b
4 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
View File

@ -12,9 +12,9 @@
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)"> <div *ngIf="!_optionTemplate(item)">
<span>{{_titleFn(item)}}</span> <span class="title-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</mat-option> </mat-option>
@ -29,9 +29,9 @@
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)"> <div *ngIf="!_optionTemplate(item)">
<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span> <span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</mat-option> </mat-option>

13
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
View File

@ -69,3 +69,16 @@
// .mat-form-field-type-single-autocomplete:not(.mat-form-field-disabled) .mat-form-field-flex { // .mat-form-field-type-single-autocomplete:not(.mat-form-field-disabled) .mat-form-field-flex {
// cursor: pointer; // cursor: pointer;
// } // }
.title-text {
font-weight: 300;
line-height: 1.2em;
text-align: left;
font-size: 16px;
}
.subtitle-text {
font-weight: 400;
font-size: 14px;
line-height: 1.2em;
}

3
dmp-frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
View File

@ -1,3 +1,4 @@
import { DatePipe } from '@angular/common';
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms'; import { UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
@ -32,6 +33,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent {
filterFn: (searchQuery: string, data?: any) => this.dmpService.query(this.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)), filterFn: (searchQuery: string, data?: any) => this.dmpService.query(this.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)),
getSelectedItem: (selectedItem: any) => this.dmpService.query(this.buildAutocompleteLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])), getSelectedItem: (selectedItem: any) => this.dmpService.query(this.buildAutocompleteLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])),
displayFn: (item: Dmp) => item.label, displayFn: (item: Dmp) => item.label,
subtitleFn: (item: Dmp) => `${this.language.instant('DASHBOARD.ADD-NEW-DATASET.OPTIONS.CREATED-AT')} ${this.datePipe.transform(item.createdAt ,'dd/MM/yyyy')}`,
titleFn: (item: Dmp) => item.label, titleFn: (item: Dmp) => item.label,
valueAssign: (item: Dmp) => item.id, valueAssign: (item: Dmp) => item.id,
}; };
@ -63,6 +65,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent {
private language: TranslateService, private language: TranslateService,
private dmpService: DmpService, private dmpService: DmpService,
private filterService: FilterService, private filterService: FilterService,
private datePipe: DatePipe
) { ) {
super(); super();
this.formGroup = data.formGroup; this.formGroup = data.formGroup;

5
dmp-frontend/src/assets/i18n/en.json
View File

@ -1901,7 +1901,10 @@
}, },
"ADD-NEW-DATASET": { "ADD-NEW-DATASET": {
"OPTIONS-NOT-ENOUGH": "Are those options not enough?", "OPTIONS-NOT-ENOUGH": "Are those options not enough?",
"START-NEW-DMP": "Start new Plan" "START-NEW-DMP": "Start new Plan",
"OPTIONS": {
"CREATED-AT": "Created At:"
}
} }
}, },
"USER-DIALOG": { "USER-DIALOG": {