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

issue 29 fix disappearing "insert manually" hint in reference field

This commit is contained in:
mchouliara 2024-09-27 11:04:19 +03:00
parent d774254a1f
commit feb65468b8
2 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/ui/reference/reference-field/reference-field.component.html
View File

@ -1,26 +1,30 @@
<mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration"> <div class="d-flex flex-column">
@if(multipleAutoCompleteSearchConfiguration){
<mat-form-field class="w-100" subscriptSizing="dynamic">
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label> <mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration"> <app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error> <mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-hint *ngIf="hint" align="start">{{hint}}</mat-hint> <mat-hint *ngIf="hint" align="start">{{hint}}</mat-hint>
<mat-hint align="end">
<span *ngIf="!form.disabled" class="not-found">{{'REFERENCE-FIELD.COULD-NOT-FIND-MESSAGE' | translate}} </span>
<span *ngIf="!form.disabled" class="insert-manually" (click)="addReference($event)">{{'REFERENCE-FIELD.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration"> <small class="ml-auto inherit-mat-hint" *ngIf="!form.disabled">
<span class="not-found">{{'REFERENCE-FIELD.COULD-NOT-FIND-MESSAGE' | translate}} </span>
<span class="insert-manually" (click)="addReference($event)">{{'REFERENCE-FIELD.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</small>
}
@if(singleAutoCompleteSearchConfiguration){
<mat-form-field class="w-100" subscriptSizing="dynamic">
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label> <mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration"> <app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error> <mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-hint *ngIf="hint" align="start">{{hint}}</mat-hint> <mat-hint *ngIf="hint" align="start">{{hint}}</mat-hint>
<mat-hint align="end">
<span *ngIf="!form.disabled" class="not-found">{{'REFERENCE-FIELD.COULD-NOT-FIND-MESSAGE' | translate}} </span>
<span *ngIf="!form.disabled" class="insert-manually" (click)="addReference($event)">{{'REFERENCE-FIELD.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</mat-hint>
</mat-form-field> </mat-form-field>
<div class="mb-4"> <small class="ml-auto inherit-mat-hint" *ngIf="!form.disabled">
<span class="not-found">{{'REFERENCE-FIELD.COULD-NOT-FIND-MESSAGE' | translate}} </span>
<span class="insert-manually" (click)="addReference($event)">{{'REFERENCE-FIELD.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</small>
}
</div> </div>

4
frontend/src/app/ui/reference/reference-field/reference-field.component.scss
View File

@ -10,3 +10,7 @@
font-weight: 400; font-weight: 400;
padding: 0rem 0.5rem 0rem 0rem; padding: 0rem 0.5rem 0rem 0rem;
} }
.inherit-mat-hint { //todo mchouliara move to styles.scss after accessibility refactor merge
font-size: var(--mat-form-field-subscript-text-size);
}