Remove form reset when saving, add translatable error messages

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-form-field>
+              <mat-placeholder>{{key.label}}</mat-placeholder>
-                <mat-placeholder>{{key.label}}</mat-placeholder>
+              <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
-                <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
+              <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
-                <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
+                                  openOnFocus="true"></mat-datetimepicker>
-                                    openOnFocus="true"></mat-datetimepicker>
+              <input matInput formControlName="{{key.formId}}"
-                <input matInput formControlName="{{key.formId}}"
+                     [required]="key.settings.required"
-                       [required]="key.settings.required"
+                     [readonly]="key.settings.isEditable === 'readonly'"
-                       [readonly]="key.settings.isEditable === 'readonly'"
+                     [matDatetimepicker]="datePicker"
-                       [matDatetimepicker]="datePicker"
+                     (focus)="key.isFocused = true;"
-                       (focus)="key.isFocused = true;"
+                     (blur)="key.isFocused = false;"
-                       (blur)="key.isFocused = false;"
+                     (dateChange)="inputChanged(source, key)">
-                       (dateChange)="inputChanged(source, key)">
+              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
-                <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
+                {{ getErrorMessageText(key.settings.requiredErrorMessage, '') }}
-                  {{key.settings.requiredErrorMessage}}
+              </mat-error>
-                </mat-error>
+              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
-                <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
+                {{ getErrorMessageText(key.settings.invalidDateErrorMessage, 'widgets.input-widgets.invalid-date') }}
-                  {{ 'widgets.input-widgets.invalid-date' | translate }}
+              </mat-error>
-                </mat-error>
+            </mat-form-field>
-              </mat-form-field>
-            </div>
           </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>

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

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;
+  minValueErrorMessage?: string;
-  maxErrorMessage?: 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();
     }
   }