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

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

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

@ -1,12 +1,16 @@
.insert-manually { .insert-manually {
text-decoration: underline; text-decoration: underline;
color: var(--primary-color-3); color: var(--primary-color-3);
cursor: pointer; cursor: pointer;
font-weight: 400; font-weight: 400;
} }
.not-found { .not-found {
color: #333; color: #333;
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);
}