Skip to content
Snippets Groups Projects
Commit 171653e6 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #12636 TIME 0:35 add error + label required for custom field

parent 0a78bb69
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/administration/contact/page/form/contacts-form.component.html
+ 12
− 2
View file @ 171653e6
...@@ -122,21 +122,31 @@ ...@@ -122,21 +122,31 @@
</mat-form-field> </mat-form-field>
</ng-container> </ng-container>
<ng-container *ngIf="field.type === 'radio'"> <ng-container *ngIf="field.type === 'radio'">
<label class="labelCustom">{{field.label}}</label> <label class="labelCustom">{{field.label}} <ng-container *ngIf="field.required">*</ng-container></label>
<mat-radio-group class="radio-form" color="primary" [formControl]="field.control"> <mat-radio-group class="radio-form" color="primary" [formControl]="field.control">
<mat-radio-button *ngFor="let value of field.values" [value]="value.id"> <mat-radio-button *ngFor="let value of field.values" [value]="value.id">
{{value.label}} {{value.label}}
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
<i *ngIf="field.filling" style="position:absolute;height: auto;padding-right: 10px;right: 0px;z-index: 1;top: 50%;transform: translateY(-50%);"
[title]="lang.targetFillingField" [style.color]="fillingRate.color"
class="fas fa-circle rate"></i>
<mat-error *ngIf="field.control.status!=='VALID' && field.control.touched">
{{getErrorMsg(field.control.errors)}}</mat-error>
</ng-container> </ng-container>
<ng-container *ngIf="field.type === 'checkbox'"> <ng-container *ngIf="field.type === 'checkbox'">
<label class="labelCustom">{{field.label}}</label> <label class="labelCustom">{{field.label}} <ng-container *ngIf="field.required">*</ng-container></label>
<mat-selection-list #shoes class="checkbox-form" [formControl]="field.control"> <mat-selection-list #shoes class="checkbox-form" [formControl]="field.control">
<mat-list-option *ngFor="let value of field.values" [value]="value.id" <mat-list-option *ngFor="let value of field.values" [value]="value.id"
color="primary" checkboxPosition="before"> color="primary" checkboxPosition="before">
{{value.label}} {{value.label}}
</mat-list-option> </mat-list-option>
</mat-selection-list> </mat-selection-list>
<i *ngIf="field.filling" style="position:absolute;height: auto;padding-right: 10px;right: 0px;z-index: 1;top: 50%;transform: translateY(-50%);"
[title]="lang.targetFillingField" [style.color]="fillingRate.color"
class="fas fa-circle rate"></i>
<mat-error *ngIf="field.control.status!=='VALID' && field.control.touched">
{{getErrorMsg(field.control.errors)}}</mat-error>
</ng-container> </ng-container>
</p> </p>
<button *ngIf="field.display" [disabled]="!canDelete(field)" mat-icon-button matSuffix <button *ngIf="field.display" [disabled]="!canDelete(field)" mat-icon-button matSuffix
......
src/frontend/app/administration/contact/page/form/contacts-form.component.scss
+ 65
− 58
View file @ 171653e6
@import "../../../../../css/vars.scss"; @import "../../../../../css/vars.scss";
.contact-item { .contact-item {
height: auto !important; height: auto !important;
} }
.multipleUnits div:nth-child(1) { .multipleUnits div:nth-child(1) {
display: inline-grid !important; display: inline-grid !important;
width: 50%; width: 50%;
} }
.multipleUnits div:nth-child(2) { .multipleUnits div:nth-child(2) {
display: inline-grid !important; display: inline-grid !important;
width: 50%; width: 50%;
} }
.unitTitle { .unitTitle {
display: flex; display: flex;
color: $primary; color: $primary;
} }
.contact-address { .contact-address {
cursor: pointer; cursor: pointer;
color: #337ab7; color: #337ab7;
&:hover { &:hover {
.contact-content { .contact-content {
text-decoration: underline; text-decoration: underline;
}
} }
} }
.contact-content {
position: relative;
} }
.smallInput { .smallInput {
font-size: 11px; font-size: 11px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
.mat-button {
width: 30px; .mat-button {
height: 25px; width: 30px;
color: $primary; height: 25px;
color: $primary;
::ng-deep.mat-button-wrapper {
display: flex;
line-height: initial;
align-items: center;
}
}
::ng-deep.mat-button-wrapper { ::ng-deep.mat-form-field-infix {
display: flex; padding: 0px;
line-height: initial; padding-bottom: 5px;
align-items: center;
} }
}
::ng-deep.mat-form-field-infix {
padding: 0px;
padding-bottom: 5px;
}
} }
.radio-form { .radio-form {
display: flex; display: flex;
.mat-radio-button { .mat-radio-button {
flex: 1; flex: 1;
} }
} }
.checkbox-form { .checkbox-form {
overflow: auto; overflow: auto;
max-height: 200px; max-height: 200px;
} }
.loading { .loading {
display: flex; display: flex;
height: 100%; height: 100%;
} }
.fillingBar { .fillingBar {
::ng-deep .mat-progress-bar-buffer { ::ng-deep .mat-progress-bar-buffer {
background: #e4e8eb; background: #e4e8eb;
} }
} }
.rate { .rate {
font-size: 10px; font-size: 10px;
text-align: right; text-align: right;
} }
.fillingBar.mat-warn { .fillingBar.mat-warn {
::ng-deep.mat-progress-bar-fill::after { ::ng-deep.mat-progress-bar-fill::after {
background-color: #e81c2b; background-color: #e81c2b;
} }
} }
.fillingBar.mat-primary { .fillingBar.mat-primary {
::ng-deep.mat-progress-bar-fill::after { ::ng-deep.mat-progress-bar-fill::after {
background-color: #f4891e; background-color: #f4891e;
} }
} }
.fillingBar.mat-accent { .fillingBar.mat-accent {
::ng-deep.mat-progress-bar-fill::after { ::ng-deep.mat-progress-bar-fill::after {
background-color: #0aa34f; background-color: #0aa34f;
} }
} }
.mat-error { .mat-error {
font-size: 10px; font-size: 10px;
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
} }
.labelCustom { .labelCustom {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
transform: scale(0.75); transform: scale(0.75);
font-weight: 400; font-weight: 400;
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment