ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4146 from MaximilianKrambach/configReset

Browse Source 
config reset
This commit is contained in:
Emanuel Schütze 2019-01-19 21:12:52 +01:00 committed by GitHub
commit 12c6554064
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
client/src/app/site/config/components/config-field/config-field.component.html
View File

@ -1,65 +1,73 @@
<form class="config-form-group" [formGroup]="form"> <div class="config-field-wrapper">
<mat-form-field *ngIf="!isExcludedType(configItem.inputType)"> <div class="form-item">
<form class="config-form-group" [formGroup]="form">
<mat-form-field *ngIf="!isExcludedType(configItem.inputType)">
<!-- Decides which input-type to take (i.e) date, select, input) -->
<ng-container [ngSwitch]="configItem.inputType">
<ng-container *ngSwitchCase="'datetimepicker'">
<ng-container *ngTemplateOutlet="date"></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'choice'">
<ng-container *ngTemplateOutlet="select"></ng-container>
</ng-container>
<ng-container *ngSwitchDefault>
<ng-container *ngTemplateOutlet="input"></ng-container>
</ng-container>
</ng-container>
<!-- Decides which input-type to take (i.e) date, select, input) --> <!-- required for all kinds of input -->
<ng-container [ngSwitch]="configItem.inputType"> <mat-label>{{ configItem.label | translate }}</mat-label>
<ng-container *ngSwitchCase="'datetimepicker'"> <mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
<ng-container *ngTemplateOutlet="date"></ng-container> <span matSuffix>
</ng-container> <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
<ng-container *ngSwitchCase="'choice'"> </span>
<ng-container *ngTemplateOutlet="select"></ng-container> <mat-error *ngIf="error"> {{ error }} </mat-error>
</ng-container>
<ng-container *ngSwitchDefault>
<ng-container *ngTemplateOutlet="input"></ng-container>
</ng-container>
</ng-container>
<!-- required for all kinds of input --> <!-- templates for exchangeable inputs. Add more here if necessary -->
<mat-label>{{ configItem.label | translate }}</mat-label> <ng-template #date ngProjectAs="[matInput]">
<mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint> <input matInput formControlName="value" [matDatepicker]="picker" [errorStateMatcher]="matcher" />
<span matSuffix> <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
<mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon> <mat-datepicker #picker></mat-datepicker>
</span> </ng-template>
<mat-error *ngIf="error">
{{ error }}
</mat-error>
<!-- templates for exchangeable inputs. Add more here if necessary --> <ng-template #select ngProjectAs="mat-select">
<ng-template #date ngProjectAs="[matInput]"> <mat-select formControlName="value" [errorStateMatcher]="matcher">
<input matInput formControlName="value" [matDatepicker]="picker" [errorStateMatcher]="matcher" /> <mat-option *ngFor="let choice of configItem.choices" [value]="choice.value">
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle> {{ choice.display_name | translate }}
<mat-datepicker #picker></mat-datepicker> </mat-option>
</ng-template> </mat-select>
</ng-template>
<ng-template #select ngProjectAs="mat-select"> <ng-template #input ngProjectAs="[matInput]">
<mat-select formControlName="value" [errorStateMatcher]="matcher"> <input
<mat-option *ngFor="let choice of configItem.choices" [value]="choice.value"> matInput
{{ choice.display_name | translate }} formControlName="value"
</mat-option> [value]="translatedValue"
</mat-select> [errorStateMatcher]="matcher"
</ng-template> [type]="formType(configItem.inputType)"
/>
</ng-template>
</mat-form-field>
<ng-template #input ngProjectAs="[matInput]"> <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
<input matInput formControlName="value" [value]="translatedValue" [errorStateMatcher]="matcher" <div *ngIf="configItem.inputType === 'boolean'">
[type]="formType(configItem.inputType)"> <mat-checkbox formControlName="value"> {{ configItem.label | translate }} </mat-checkbox>
</ng-template> <div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
</mat-form-field> <div class="error" *ngIf="error">{{ error }}</div>
</div>
<div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
<div *ngIf="configItem.inputType === 'boolean'">
<mat-checkbox formControlName="value">
{{ configItem.label | translate }}
</mat-checkbox>
<div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
<div class="error" *ngIf="error">{{ error }}</div>
</div>
<!-- The editor -->
<div *ngIf="configItem.inputType === 'markupText'">
<h4>{{ configItem.label | translate }}</h4>
<editor formControlName="value" [init]="tinyMceSettings"></editor>
</div>
<!-- The editor -->
<div *ngIf="configItem.inputType === 'markupText'">
<h4>{{ configItem.label | translate }}</h4>
<editor formControlName="value" [init]="tinyMceSettings"></editor>
</div>
</div>
</form>
</div> </div>
</form> <div class="reset-button">
<button mat-icon-button *ngIf="configItem.hasDefault" matTooltip="{{ 'Reset' | translate }}"
(click)="onResetButton()">
<mat-icon>replay</mat-icon>
</button>
</div>
</div>

14
client/src/app/site/config/components/config-field/config-field.component.scss
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;
}
}

9
client/src/app/site/config/components/config-field/config-field.component.ts
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.

16
client/src/app/site/config/models/view-config.ts
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;
} }