config reset

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

@@ -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)">
-
                 <!-- Decides which input-type to take (i.e) date, select, input) -->
                 <ng-container [ngSwitch]="configItem.inputType">
                     <ng-container *ngSwitchCase="'datetimepicker'">
@@ -20,9 +21,7 @@
                 <span matSuffix>
                     <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
                 </span>
-        <mat-error *ngIf="error">
+                <mat-error *ngIf="error"> {{ error }} </mat-error>
-            {{ error }}
-        </mat-error>
 
                 <!-- templates for exchangeable inputs. Add more here if necessary -->
                 <ng-template #date ngProjectAs="[matInput]">
@@ -40,17 +39,19 @@
                 </ng-template>
 
                 <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>
             </mat-form-field>
 
             <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
-
                 <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="error" *ngIf="error">{{ error }}</div>
                 </div>
@@ -60,6 +61,13 @@
                     <h4>{{ configItem.label | translate }}</h4>
                     <editor formControlName="value" [init]="tinyMceSettings"></editor>
                 </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>

client/src/app/site/config/components/config-field/config-field.component.scss

@@ -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;
+    }
+}

client/src/app/site/config/components/config-field/config-field.component.ts

@@ -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.

client/src/app/site/config/models/view-config.ts

@@ -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;
     }