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

In Dataset Template selection cut description when templates are displayed in list and show description (instead of DMP-EDITOR.DATASET-DESCRIPTION.INTRO) in template preview. 

1. multiple-auto-complete.component.html: Added class "title-fn-inner" to cut the displayed description of dataset templates.
2. multiple-auto-complete.component.scss: Css for class "title-fn" updated and for class "title-fn-inner" added to cut the displayed description of dataset templates.
3. available-profiles.component.html: Added class "list-option-inner" to cut the displayed description of dataset templates.
4. available-profiles.component.scss: Css for class "list-option" updated and for class "list-option-inner" added to cut the displayed description of dataset templates.
5. dataset-preview-dialog.component.html: Added [datasetDescription]="data?.template?.description" in <app-dataset-description>
6. dataset-description.component.ts: Added in class, field "datasetDescription".
7. dataset-description.component.html: Show template datasetDescription (as html) instead of DMP-EDITOR.DATASET-DESCRIPTION.INTRO.
This commit is contained in:
Konstantina Galouni 2021-11-02 16:50:43 +02:00
parent 39795f177f
commit ca5883724a
7 changed files with 77 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -1,5 +1,7 @@
<div class="row multiple-auto-complete" ngForm> <div class="row multiple-auto-complete" ngForm>
<!-- style="width: calc(100% - 28px) !important;"-->
<mat-chip-list #chipList ngDefaultControl> <mat-chip-list #chipList ngDefaultControl>
<!-- style="width: calc(100%) !important;"-->
<ng-container *ngIf="value as values"> <ng-container *ngIf="value as values">
<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)"> <mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem"> <ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
@ -9,8 +11,19 @@
</ng-container> </ng-container>
</mat-chip> </mat-chip>
</ng-container> </ng-container>
<!-- <div style="height: 0 !important; width: calc(100% - 28px) !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>-->
</mat-chip-list> </mat-chip-list>
<input matInput #autocompleteInput class="col" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> <input matInput #autocompleteInput class="col" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<!-- <input matInput #autocompleteInput class="col"-->
<!-- style="width: calc(100% - 28px) !important;"-->
<!-- [class.hide-placeholder]="hidePlaceholder" [name]="id"-->
<!-- autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger"-->
<!-- [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue"-->
<!-- (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()"-->
<!-- (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"-->
<!-- [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur"-->
<!-- (matChipInputTokenEnd)="_addItem($event)"-->
<!-- [matAutocompleteConnectedTo]="origin">-->
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing) <!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> --> <input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon> <mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
@ -24,9 +37,11 @@
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="d-flex"> <div *ngIf="!_optionTemplate(item)" class="d-flex">
<div class="title-fn"> <div class="title-fn">
<span>{{_titleFn(item)}}</span> <!-- <div class="title-fn-inner"> &lt;!&ndash;remove this if you want to see all the description &ndash;&gt;-->
<br *ngIf="_subtitleFn(item)"> <span>{{_titleFn(item)}}</span>
<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
<!-- </div>-->
</div> </div>
<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>
@ -43,9 +58,11 @@
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="d-flex"> <div *ngIf="!_optionTemplate(item)" class="d-flex">
<div class="title-fn"> <div class="title-fn">
<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span> <div class="title-fn-inner"> <!--remove this if you want to see all the description -->
<br *ngIf="_subtitleFn(item)"> <span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small>
</div>
</div> </div>
<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>

25
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -19,12 +19,27 @@
} }
.title-fn-inner {
width: inherit;
height: inherit;
overflow: hidden;
text-overflow: ellipsis;
}
.title-fn { .title-fn {
flex-grow: 1; height: inherit;
white-space: nowrap; width: calc(100% - 16px);
width: calc(100% - 16px); overflow: hidden;
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; display: -webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
line-clamp: 2;
} }
.option-icon { .option-icon {

3
dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html
View File

@ -7,7 +7,8 @@
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar> <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div> </div>
<div mat-dialog-content class="definition-content"> <div mat-dialog-content class="definition-content">
<app-dataset-description *ngIf="datasetProfileDefinitionFormGroup && datasetProfileDefinitionModel" [form]="datasetProfileDefinitionFormGroup" [visibilityRules]="datasetProfileDefinitionModel.rules" [datasetProfileId]="data.template.id"></app-dataset-description> <app-dataset-description *ngIf="datasetProfileDefinitionFormGroup && datasetProfileDefinitionModel" [form]="datasetProfileDefinitionFormGroup" [visibilityRules]="datasetProfileDefinitionModel.rules"
[datasetProfileId]="data.template.id" [datasetDescription]="data?.template?.description"></app-dataset-description>
</div> </div>
<div mat-mat-dialog-actions *ngIf="datasetProfileDefinitionFormGroup"> <div mat-mat-dialog-actions *ngIf="datasetProfileDefinitionFormGroup">
<div class="col-auto d-flex pb-4 pt-2"> <div class="col-auto d-flex pb-4 pt-2">

8
dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
View File

@ -3,9 +3,11 @@
<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" > <mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" >
<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' class="mb-1"> <mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' class="mb-1">
<div class="list-option"> <div class="list-option">
{{profile.label}} <div class="list-option-inner">
<br *ngIf="profile.description"> {{profile.label}}
<small *ngIf="profile.description" [innerHTML]="profile.description"></small> <br *ngIf="profile.description">
<small *ngIf="profile.description" [innerHTML]="profile.description"></small>
</div>
</div> </div>
</mat-list-option> </mat-list-option>
</mat-selection-list> </mat-selection-list>

22
dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss
View File

@ -1,7 +1,25 @@
.list-option { .list-option-inner {
flex-grow: 1; flex-grow: 1;
white-space: nowrap; white-space: nowrap;
width: calc(100% - 16px); width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.list-option {
width: calc(100% - 16px);
flex-grow: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
line-clamp: 2;
}
::ng-deep .mat-list-text {
max-height: 100%;
}

7
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
View File

@ -1,6 +1,7 @@
<div class="col-12 intro"> <!--<div class="col-12 intro">-->
{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}} <!-- {{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}-->
</div> <!--</div>-->
<div *ngIf="datasetDescription" class="col-12 intro" [innerHTML]="datasetDescription"></div>
<form *ngIf="form" novalidate [formGroup]="form" class="col-12 card"> <form *ngIf="form" novalidate [formGroup]="form" class="col-12 card">
<div class="row"> <div class="row">
<div class="dynamic-form-editor p-0 col-md-12"> <div class="dynamic-form-editor p-0 col-md-12">

1
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
View File

@ -23,6 +23,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
@Input() path: string; @Input() path: string;
@Input() visibilityRules: Rule[] = []; @Input() visibilityRules: Rule[] = [];
@Input() datasetProfileId: String; @Input() datasetProfileId: String;
@Input() datasetDescription: String;
@Input() linkToScroll: LinkToScroll; @Input() linkToScroll: LinkToScroll;
@Output() formChanged: EventEmitter<any> = new EventEmitter(); @Output() formChanged: EventEmitter<any> = new EventEmitter();
@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>(); @Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();