Remove form reset when saving, add translatable error messages

6 years ago · ed2920eddc
3 changed files with 76 additions and 62 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@ -39,7 +39,7 @@
                     (blur)="key.isFocused = false; inputChanged(source, key)">
              <mat-icon *ngIf="key.settings.icon" matPrefix>{{key.settings.icon}}</mat-icon>
              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-                {{key.settings.requiredErrorMessage}}
+                {{ getErrorMessageText(key.settings.requiredErrorMessage, '') }}
              </mat-error>
            </mat-form-field>
          </div>
@ -59,52 +59,54 @@
                     (blur)="key.isFocused = false; inputChanged(source, key)">
              <mat-icon *ngIf="key.settings.icon" matPrefix>{{key.settings.icon}}</mat-icon>
              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-                {{key.settings.requiredErrorMessage}}
+                {{ getErrorMessageText(key.settings.requiredErrorMessage, '') }}
              </mat-error>
              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('min')">
-                {{ 'widgets.input-widgets.min-value-error' | translate:{value: key.settings.minValue} }}
+                {{ getErrorMessageText(key.settings.minValueErrorMessage,
+                        'widgets.input-widgets.min-value-error',
+                        {value: key.settings.minValue}) }}
              </mat-error>
              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('max')">
-                {{ 'widgets.input-widgets.max-value-error' | translate:{value: key.settings.maxValue} }}
+                {{ getErrorMessageText(key.settings.maxValueErrorMessage,
+                        'widgets.input-widgets.max-value-error',
+                        {value: key.settings.maxValue}) }}
              </mat-error>
            </mat-form-field>
          </div>
          <div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'">
            <mat-checkbox formControlName="{{key.formId}}"
                          (change)="inputChanged(source, key)">
-              {{key.label}}
+              <span class="label-wrapper">{{key.label}}</span>
            </mat-checkbox>
          </div>
          <div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'">
            <mat-slide-toggle formControlName="{{key.formId}}"
                              (change)="inputChanged(source, key)">
-              {{key.label}}
+              <span class="label-wrapper">{{key.label}}</span>
            </mat-slide-toggle>
          </div>
          <div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') ||
                                                    (key.settings.dataKeyValueType === 'date') ||
                                                    (key.settings.dataKeyValueType === 'time')" fxLayout="column">
-            <div fxLayout="row" [ngClass]="{'vertically-aligned': smallWidthContainer}" fxLayoutGap="16px">
-              <mat-form-field>
-                <mat-placeholder>{{key.label}}</mat-placeholder>
-                <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
-                <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
-                                    openOnFocus="true"></mat-datetimepicker>
-                <input matInput formControlName="{{key.formId}}"
-                       [required]="key.settings.required"
-                       [readonly]="key.settings.isEditable === 'readonly'"
-                       [matDatetimepicker]="datePicker"
-                       (focus)="key.isFocused = true;"
-                       (blur)="key.isFocused = false;"
-                       (dateChange)="inputChanged(source, key)">
-                <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-                  {{key.settings.requiredErrorMessage}}
-                </mat-error>
-                <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
-                  {{ 'widgets.input-widgets.invalid-date' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </div>
+            <mat-form-field>
+              <mat-placeholder>{{key.label}}</mat-placeholder>
+              <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
+              <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
+                                  openOnFocus="true"></mat-datetimepicker>
+              <input matInput formControlName="{{key.formId}}"
+                     [required]="key.settings.required"
+                     [readonly]="key.settings.isEditable === 'readonly'"
+                     [matDatetimepicker]="datePicker"
+                     (focus)="key.isFocused = true;"
+                     (blur)="key.isFocused = false;"
+                     (dateChange)="inputChanged(source, key)">
+              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
+                {{ getErrorMessageText(key.settings.requiredErrorMessage, '') }}
+              </mat-error>
+              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
+                {{ getErrorMessageText(key.settings.invalidDateErrorMessage, 'widgets.input-widgets.invalid-date') }}
+              </mat-error>
+            </mat-form-field>
          </div>
        </div>
      </div>
@ -114,12 +116,12 @@
      <button mat-button color="primary" type="button"
              (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
              [disabled]="!multipleInputFormGroup.dirty">
-        {{ 'action.undo' | translate }}
+        {{ settings.resetButtonLabel }}
      </button>
      <button mat-button mat-raised-button color="primary" type="submit"
                 style="max-height: 50px; margin-right:20px;"
                 [disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
-        {{ 'action.save' | translate }}
+        {{ settings.saveButtonLabel }}
      </button>
    </div>
  </div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
@ -44,7 +44,13 @@
      display: block;
      margin-top: 20px;
      margin-bottom: 16px;
-      white-space: normal;
+      .label-wrapper {
+        white-space: normal;
+      }
+    }
+
+    mat-slide-toggle {
+      height: auto;
    }

    .date-time-input {
@ -56,20 +62,6 @@

    .vertical-alignment {
      flex-direction: column;
-
-      mat-checkbox,
-      mat-slide-toggle {
-        margin-top: 18px;
-      }
-
-      mat-slide-toggle {
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-
-    .vertically-aligned {
-      flex-direction: column;
    }
  }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@ -47,6 +47,8 @@ interface MultipleInputWidgetSettings {
  widgetTitle: string;
  showActionButtons: boolean;
  updateAllValues: boolean;
+  saveButtonLabel: string;
+  resetButtonLabel: string;
  showResultMessage: boolean;
  showGroupTitle: boolean;
  groupTitle: string;
@ -67,27 +69,19 @@ interface MultipleInputWidgetDataKeySettings {
  maxValue?: number;
  requiredErrorMessage?: string;
  invalidDateErrorMessage?: string;
-  minErrorMessage?: string;
-  maxErrorMessage?: string;
+  minValueErrorMessage?: string;
+  maxValueErrorMessage?: string;
  icon: string;
  inputTypeNumber?: boolean;
  readOnly?: boolean;
  disabledOnCondition?: boolean;
 }

-interface MultipleInputWidgetDataKeyErrorMessages {
-  requiredErrorMessage?: string;
-  invalidDateErrorMessage?: string;
-  minErrorMessage?: string;
-  maxErrorMessage?: string;
-}
-
 interface MultipleInputWidgetDataKey extends DataKey {
  formId?: string;
  settings: MultipleInputWidgetDataKeySettings;
  isFocused: boolean;
  value?: any;
-  errorMessages?: MultipleInputWidgetDataKeyErrorMessages;
 }

 interface MultipleInputWidgetSource {
@ -170,6 +164,17 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni

    this.settings.groupTitle = this.settings.groupTitle || '${entityName}';

+    if (this.settings.saveButtonLabel && this.settings.saveButtonLabel.length) {
+      this.settings.saveButtonLabel = this.utils.customTranslation(this.settings.saveButtonLabel, this.settings.saveButtonLabel);
+    } else {
+      this.settings.saveButtonLabel = this.translate.instant('action.save');
+    }
+    if (this.settings.resetButtonLabel && this.settings.resetButtonLabel.length) {
+      this.settings.resetButtonLabel = this.utils.customTranslation(this.settings.resetButtonLabel, this.settings.resetButtonLabel);
+    } else {
+      this.settings.resetButtonLabel = this.translate.instant('action.undo');
+    }
+
    // For backward compatibility
    if (isUndefined(this.settings.showActionButtons)) {
      this.settings.showActionButtons = true;
@ -338,25 +343,40 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni

  private updateWidgetDisplaying() {
    this.changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620);
-    this.smallWidthContainer = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 420);
  }

  public onDataUpdated() {
-    this.ngZone.run(() => {
+    // this.ngZone.run(() => {
      this.updateWidgetData(this.subscription.data);
      this.ctx.detectChanges();
-    });
+    // });
  }

  private resize() {
-    this.ngZone.run(() => {
+    // this.ngZone.run(() => {
      this.updateWidgetDisplaying();
      this.ctx.detectChanges();
-    });
+    // });
  }

  public getGroupTitle(datasource: Datasource): string {
-    return createLabelFromDatasource(datasource, this.settings.groupTitle);
+    const groupTitle = createLabelFromDatasource(datasource, this.settings.groupTitle);
+    return this.utils.customTranslation(groupTitle, groupTitle);
+  }
+
+  public getErrorMessageText(errorMessage, defaultMessage, messageValues?): string {
+    let messageText;
+    if (errorMessage && errorMessage.length) {
+      messageText = this.utils.customTranslation(errorMessage, errorMessage);
+    } else if (defaultMessage && defaultMessage.length) {
+      if (!messageValues) {
+        messageValues = {};
+      }
+      messageText = this.translate.instant(defaultMessage, messageValues);
+    } else {
+      messageText = '';
+    }
+    return messageText;
  }

  public visibleKeys(source: MultipleInputWidgetSource): MultipleInputWidgetDataKey[] {
@ -480,8 +500,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
    if (tasks.length) {
      forkJoin(tasks).subscribe(
        () => {
-          // this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
          this.multipleInputFormGroup.markAsPristine();
+          this.ctx.detectChanges();
          if (this.settings.showResultMessage) {
            this.ctx.showSuccessToast(this.translate.instant('widgets.input-widgets.update-successful'),
              1000, 'bottom', 'left', this.toastTargetId);
@ -494,8 +514,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
          }
        });
    } else {
-      // this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
      this.multipleInputFormGroup.markAsPristine();
+      this.ctx.detectChanges();
    }
  }