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

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
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">
<mat-form-field *ngIf="!isExcludedType(configItem.inputType)">
<div class="config-field-wrapper">
<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) -->
<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>
<!-- required for all kinds of input -->
<mat-label>{{ configItem.label | translate }}</mat-label>
<mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
<span matSuffix>
<mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
</span>
<mat-error *ngIf="error"> {{ error }} </mat-error>
<!-- required for all kinds of input -->
<mat-label>{{ configItem.label | translate }}</mat-label>
<mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
<span matSuffix>
<mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
</span>
<mat-error *ngIf="error">
{{ error }}
</mat-error>
<!-- templates for exchangeable inputs. Add more here if necessary -->
<ng-template #date ngProjectAs="[matInput]">
<input matInput formControlName="value" [matDatepicker]="picker" [errorStateMatcher]="matcher" />
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</ng-template>
<!-- templates for exchangeable inputs. Add more here if necessary -->
<ng-template #date ngProjectAs="[matInput]">
<input matInput formControlName="value" [matDatepicker]="picker" [errorStateMatcher]="matcher" />
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</ng-template>
<ng-template #select ngProjectAs="mat-select">
<mat-select formControlName="value" [errorStateMatcher]="matcher">
<mat-option *ngFor="let choice of configItem.choices" [value]="choice.value">
{{ choice.display_name | translate }}
</mat-option>
</mat-select>
</ng-template>
<ng-template #select ngProjectAs="mat-select">
<mat-select formControlName="value" [errorStateMatcher]="matcher">
<mat-option *ngFor="let choice of configItem.choices" [value]="choice.value">
{{ choice.display_name | translate }}
</mat-option>
</mat-select>
</ng-template>
<ng-template #input ngProjectAs="[matInput]">
<input
matInput
formControlName="value"
[value]="translatedValue"
[errorStateMatcher]="matcher"
[type]="formType(configItem.inputType)"
/>
</ng-template>
</mat-form-field>
<ng-template #input ngProjectAs="[matInput]">
<input matInput formControlName="value" [value]="translatedValue" [errorStateMatcher]="matcher"
[type]="formType(configItem.inputType)">
</ng-template>
</mat-form-field>
<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>
<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>
</div>
</form>
</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 {
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();
}
/**
* 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.
* @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 _label: string;
private _choices: ConfigChoice[];
private _defaultValue: any;
/**
* Saves, if this config already got constants information.
@ -88,6 +89,18 @@ export class ViewConfig extends BaseViewModel {
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) {
super();
this._config = config;
@ -123,6 +136,9 @@ export class ViewConfig extends BaseViewModel {
this._helpText = constant.help_text;
this._inputType = constant.input_type;
this._choices = constant.choices;
if (constant.default_value !== undefined) {
this._defaultValue = constant.default_value;
}
this._hasConstantsInfo = true;
}