config reset

This commit is contained in:
Maximilian Krambach 2019-01-19 18:18:28 +01:00
parent df85e01b16
commit e8de30b23e
4 changed files with 105 additions and 58 deletions

View File

@ -1,6 +1,7 @@
<form class="config-form-group" [formGroup]="form"> <div class="config-field-wrapper">
<div class="form-item">
<form class="config-form-group" [formGroup]="form">
<mat-form-field *ngIf="!isExcludedType(configItem.inputType)"> <mat-form-field *ngIf="!isExcludedType(configItem.inputType)">
<!-- Decides which input-type to take (i.e) date, select, input) --> <!-- Decides which input-type to take (i.e) date, select, input) -->
<ng-container [ngSwitch]="configItem.inputType"> <ng-container [ngSwitch]="configItem.inputType">
<ng-container *ngSwitchCase="'datetimepicker'"> <ng-container *ngSwitchCase="'datetimepicker'">
@ -20,9 +21,7 @@
<span matSuffix> <span matSuffix>
<mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon> <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
</span> </span>
<mat-error *ngIf="error"> <mat-error *ngIf="error"> {{ error }} </mat-error>
{{ error }}
</mat-error>
<!-- templates for exchangeable inputs. Add more here if necessary --> <!-- templates for exchangeable inputs. Add more here if necessary -->
<ng-template #date ngProjectAs="[matInput]"> <ng-template #date ngProjectAs="[matInput]">
@ -40,17 +39,19 @@
</ng-template> </ng-template>
<ng-template #input ngProjectAs="[matInput]"> <ng-template #input ngProjectAs="[matInput]">
<input matInput formControlName="value" [value]="translatedValue" [errorStateMatcher]="matcher" <input
[type]="formType(configItem.inputType)"> matInput
formControlName="value"
[value]="translatedValue"
[errorStateMatcher]="matcher"
[type]="formType(configItem.inputType)"
/>
</ng-template> </ng-template>
</mat-form-field> </mat-form-field>
<div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)"> <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
<div *ngIf="configItem.inputType === 'boolean'"> <div *ngIf="configItem.inputType === 'boolean'">
<mat-checkbox formControlName="value"> <mat-checkbox formControlName="value"> {{ configItem.label | translate }} </mat-checkbox>
{{ configItem.label | translate }}
</mat-checkbox>
<div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div> <div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
<div class="error" *ngIf="error">{{ error }}</div> <div class="error" *ngIf="error">{{ error }}</div>
</div> </div>
@ -60,6 +61,13 @@
<h4>{{ configItem.label | translate }}</h4> <h4>{{ configItem.label | translate }}</h4>
<editor formControlName="value" [init]="tinyMceSettings"></editor> <editor formControlName="value" [init]="tinyMceSettings"></editor>
</div> </div>
</div> </div>
</form> </form>
</div>
<div class="reset-button">
<button mat-icon-button *ngIf="configItem.hasDefault" matTooltip="{{ 'Reset' | translate }}"
(click)="onResetButton()">
<mat-icon>replay</mat-icon>
</button>
</div>
</div>

View File

@ -24,3 +24,17 @@ input[type='color'] {
.error { .error {
color: #f44336; color: #f44336;
} }
.config-field-wrapper {
width: 100%;
display: flex;
.form-item {
flex: 2;
}
.reset-button {
max-width: 30px;
width: 30px;
flex: 1;
}
}

View File

@ -133,6 +133,15 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }
/**
* Triggers a reset to the default value (if a default value is present)
*/
public onResetButton(): void {
if (this.configItem.hasDefault) {
this.onChange(this.configItem.defaultValue);
}
}
/** /**
* Updates the config field. * Updates the config field.
* @param value The new value to set. * @param value The new value to set.

View File

@ -46,6 +46,7 @@ export class ViewConfig extends BaseViewModel {
private _inputType: ConfigInputType; private _inputType: ConfigInputType;
private _label: string; private _label: string;
private _choices: ConfigChoice[]; private _choices: ConfigChoice[];
private _defaultValue: any;
/** /**
* Saves, if this config already got constants information. * Saves, if this config already got constants information.
@ -88,6 +89,18 @@ export class ViewConfig extends BaseViewModel {
return this._choices; return this._choices;
} }
/**
* @returns true if a default value exists
*/
public get hasDefault(): boolean {
return this._defaultValue !== undefined;
}
public get defaultValue(): any {
// TODO type is ugly
return this._defaultValue;
}
public constructor(config: Config) { public constructor(config: Config) {
super(); super();
this._config = config; this._config = config;
@ -123,6 +136,9 @@ export class ViewConfig extends BaseViewModel {
this._helpText = constant.help_text; this._helpText = constant.help_text;
this._inputType = constant.input_type; this._inputType = constant.input_type;
this._choices = constant.choices; this._choices = constant.choices;
if (constant.default_value !== undefined) {
this._defaultValue = constant.default_value;
}
this._hasConstantsInfo = true; this._hasConstantsInfo = true;
} }