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

On multiple autocomple inputs removes permanent placeholder inside the container, adds overflow

This commit is contained in:
apapachristou 2020-11-19 10:38:43 +02:00
parent 0159baf8ed
commit 4552525e1c
8 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,10 +8,10 @@
.align-arrow-right {
position: absolute;
// position: absolute;
right: 0;
// bottom: 0;
vertical-align: middle;
// vertical-align: middle;
cursor: pointer;
align-self: center;
color: rgba(0, 0, 0, 0.54);
@ -39,3 +39,8 @@
.two-line-mat-option {
line-height: 1.2em;
}
::ng-deep .mat-chip-list-wrapper {
max-height: 4.8em !important;
overflow: auto !important;
}

12
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
View File

@ -38,8 +38,8 @@
<div class="col-10 gray-container">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DATASET-TEMPLATES' | translate}}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
placeholder="{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}"
[configuration]="datasetTemplateAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -50,8 +50,8 @@
<div class="col-10 gray-container">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')"
placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}"
[configuration]="dmpAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -69,8 +69,8 @@
<div class="col-10 gray-container">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-GRANT' | translate}}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
placeholder="{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}"
[configuration]="grantAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -81,8 +81,8 @@
<div class="col-10 gray-container" *ngIf="!isPublic">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-COLLABORATORS' | translate}}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
placeholder="{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}"
[configuration]="collaboratorsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -104,8 +104,8 @@
<div class="col-10 gray-container">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.ORGANIZATION' | translate }}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}"
[configuration]="organisationAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -116,8 +116,8 @@
<div class="col-10 gray-container">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.TAGS' | translate }}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('tags')"
placeholder="{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}"
[configuration]="tagsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>

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

@ -36,7 +36,8 @@
<div class="col-12">
<div class="heading">{{'DMP-EDITOR.FIELDS.TEMPLATES' | translate}}</div>
<mat-form-field>
<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
</app-multiple-auto-complete>
<mat-error *ngIf="data.formGroup.get('profiles').hasError('backendError')">
{{data.formGroup.get('profiles').getError('backendError').message}}</mat-error>

3
dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
View File

@ -13,7 +13,8 @@
</div>
<div class="profile-form">
<mat-form-field>
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>

6
dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
View File

@ -81,7 +81,8 @@
</div>
<div class="researchers-form">
<mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
<mat-label>{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" [configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
@ -108,7 +109,8 @@
</div>
<div class="organizations-form">
<mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
<mat-label>{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" [configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>

1
dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
View File

@ -8,6 +8,7 @@
</div>
<div mat-dialog-content class="row content">
<mat-form-field class="col pt-0 pb-2 mb-4 search">
<!-- <mat-label>{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}</mat-label> -->
<app-multiple-auto-complete [formControl]="formGroup.get('users')" placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}" [configuration]="usersAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>

8
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
View File

@ -45,8 +45,8 @@
<div *ngIf="showGrant" class="col-10 gray-container">
<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-DATASET-TEMPLATES' | translate}}</h6>
<mat-form-field>
<mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
placeholder="{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}"
[configuration]="datasetTemplateAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -57,8 +57,8 @@
<div *ngIf="showGrant" class="col-10 gray-container">
<h6 class="category-title">{{ 'DMP-RELATED-GRANT.RELATED-GRANT' | translate}}</h6>
<mat-form-field>
<mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
placeholder="{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}"
[configuration]="grantAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -69,8 +69,8 @@
<div *ngIf="isAuthenticated()" class="col-10 gray-container">
<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-COLLABORATORS' | translate}}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
placeholder="{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}"
[configuration]="collaboratorsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
@ -92,8 +92,8 @@
<div *ngIf="showGrant" class="col-10 gray-container">
<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
<mat-form-field>
<mat-label>{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}"
[configuration]="organisationAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>

4
dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html
View File

@ -32,7 +32,9 @@
</div>
<div class="upload-form col-sm-12 col-md-12">
<mat-form-field>
<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
<mat-label>{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}</mat-label>
<app-multiple-auto-complete [(ngModel)]="dmpProfiles" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
<!-- <app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)"> -->
</app-multiple-auto-complete>
</mat-form-field>
</div>