Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-7069, add unified edit dialog.

Browse Source
This commit is contained in:
George 2023-07-27 18:31:50 +03:00
parent b368fa6fe8
commit e1323070c6
2 changed files with 12 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/inputs/details-radio/details-radio.component.html
View File

@ -4,26 +4,26 @@
*ngFor="let option of options"
[class.active]="option.value === value?.value"
[class.disabled]="option.disabled"
[matTooltip]="option.tooltip || '' | translate"
[matTooltipPosition]="'above'"
[id]="groupId(option)"
[matTooltipPosition]="'above'"
[matTooltip]="option.tooltip || '' | translate"
[ngClass]="{ 'mb-8': !displayInRow, 'mr-8': displayInRow }"
class="option pointer"
>
<div class="icon-option" *ngIf="option.icon; else withoutIcon">
<mat-icon class="icon" [svgIcon]="option.icon"></mat-icon>
<div *ngIf="option.icon; else withoutIcon" class="icon-option">
<mat-icon [svgIcon]="option.icon" class="icon"></mat-icon>
<div class="text">
<label class="details-radio-label pointer">{{ option.label | translate }}</label>
<span class="hint" [innerHTML]="option.description"></span>
<span class="hint">{{ option.description | translate }}</span>
<div class="iqser-input-group" *ngIf="option.extraOption && !option.extraOption.hidden && isSelected(option)">
<div *ngIf="option.extraOption && !option.extraOption.hidden && isSelected(option)" class="iqser-input-group">
<mat-checkbox
color="primary"
(change)="emitExtraOption()"
[(ngModel)]="option.extraOption.checked"
[checked]="option.extraOption.checked"
[disabled]="!!option.extraOption.disabled"
(change)="emitExtraOption()"
color="primary"
>
{{ option.extraOption.label | translate }}
</mat-checkbox>

21
src/lib/inputs/details-radio/details-radio.component.ts
View File

@ -1,10 +1,10 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DetailsRadioOption } from './details-radio-option';
import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { FormFieldComponent } from '../form-field/form-field-component.directive';
import { NgClass, NgForOf, NgIf } from '@angular/common';
import { RoundCheckboxComponent } from '../round-checkbox/round-checkbox.component';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
@ -39,20 +39,16 @@ import { MatTooltipModule } from '@angular/material/tooltip';
MatTooltipModule,
],
})
export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> implements OnInit {
export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
@Input() options: DetailsRadioOption<I>[] = [];
@Input() displayInRow = false;
@Output() readonly extraOptionChanged: EventEmitter<DetailsRadioOption<I>> = new EventEmitter();
constructor(private readonly _translateService: TranslateService) {
constructor() {
super();
}
ngOnInit() {
this.#escapeDescriptionNonBreakingSpaces();
}
toggleOption(option: DetailsRadioOption<I>): void {
if (option.value !== this._value?.value && !option.disabled) {
this.markAsTouched();
@ -73,13 +69,4 @@ export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOpt
emitExtraOption(): void {
this.extraOptionChanged.emit(this.value);
}
#escapeDescriptionNonBreakingSpaces() {
this.options.forEach(o => {
o.description = this._translateService.instant(o.description, {
...o.descriptionParams,
});
o.description = o.description.replace(/&nbsp;/g, ' ');
});
}
}