UI: Improved component and clear code

ui-ngx/package.json

@@ -43,7 +43,6 @@
     "@ngrx/store": "^15.4.0",
     "@ngrx/store-devtools": "^15.4.0",
     "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
     "@svgdotjs/svg.filter.js": "^3.0.8",
     "@svgdotjs/svg.js": "^3.2.0",
     "@tinymce/tinymce-angular": "^7.0.0",

ui-ngx/src/app/core/core.module.ts

@@ -31,7 +31,6 @@ import {
   TranslateModule,
   TranslateParser
 } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TbMissingTranslationHandler } from './translate/missing-translate-handler';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
@@ -41,9 +40,10 @@ import { TranslateDefaultCompiler } from '@core/translate/translate-default-comp
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
 import { HotkeyModule } from 'angular2-hotkeys';
 import { TranslateDefaultParser } from '@core/translate/translate-default-parser';
+import { TranslateDefaultLoader } from '@core/translate/translate-default-loader';
 
 export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/locale/locale.constant-', '.json');
+  return new TranslateDefaultLoader(http);
 }
 
 @NgModule({

ui-ngx/src/app/core/services/resources.service.ts

@@ -34,6 +34,7 @@ import { select, Store } from '@ngrx/store';
 import { selectIsAuthenticated } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { map, tap } from 'rxjs/operators';
+import { RequestConfig } from '@core/http/http-utils';
 
 declare const System;
 
@@ -106,11 +107,11 @@ export class ResourcesService {
     return this.loadResourceByType(fileType, url);
   }
 
-  public downloadResource(downloadUrl: string): Observable<any> {
-    return this.http.get(downloadUrl, {
+  public downloadResource(downloadUrl: string, config?: RequestConfig): Observable<any> {
+    return this.http.get(downloadUrl, {...config, ...{
       responseType: 'arraybuffer',
       observe: 'response'
-    }).pipe(
+    }}).pipe(
       map((response) => {
         const headers = response.headers;
         const filename = headers.get('x-filename');

ui-ngx/src/app/core/settings/settings.effects.ts

@@ -28,7 +28,6 @@ import { AppState } from '@app/core/core.state';
 import { LocalStorageService } from '@app/core/local-storage/local-storage.service';
 import { TitleService } from '@app/core/services/title.service';
 import { updateUserLang } from '@app/core/settings/settings.utils';
-import { AuthService } from '@core/auth/auth.service';
 import { UtilsService } from '@core/services/utils.service';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { ActionAuthUpdateLastPublicDashboardId } from '../auth/auth.actions';
@@ -40,7 +39,6 @@ export class SettingsEffects {
   constructor(
     private actions$: Actions<SettingsActions>,
     private store: Store<AppState>,
-    private authService: AuthService,
     private utils: UtilsService,
     private router: Router,
     private localStorageService: LocalStorageService,
@@ -49,7 +47,6 @@ export class SettingsEffects {
   ) {
   }
 
-  
   persistSettings = createEffect(() => this.actions$.pipe(
     ofType(
       SettingsActionTypes.CHANGE_LANGUAGE,
@@ -60,7 +57,6 @@ export class SettingsEffects {
     )
   ), {dispatch: false});
 
-  
   setTranslateServiceLanguage = createEffect(() => this.store.pipe(
     select(selectSettingsState),
     map(settings => settings.userLang),
@@ -68,7 +64,6 @@ export class SettingsEffects {
     tap(userLang => updateUserLang(this.translate, userLang))
   ), {dispatch: false});
 
-  
   setTitle = createEffect(() => merge(
     this.actions$.pipe(ofType(SettingsActionTypes.CHANGE_LANGUAGE)),
     this.router.events.pipe(filter(event => event instanceof ActivationEnd))
@@ -81,7 +76,6 @@ export class SettingsEffects {
     })
   ), {dispatch: false});
 
-  
   setPublicId = createEffect(() => merge(
     this.router.events.pipe(filter(event => event instanceof ActivationEnd))
   ).pipe(

ui-ngx/src/app/core/settings/settings.utils.ts

@@ -18,7 +18,7 @@ import { environment as env } from '@env/environment';
 import { TranslateService } from '@ngx-translate/core';
 import * as _moment from 'moment';
 
-export function updateUserLang(translate: TranslateService, userLang: string) {
+export function updateUserLang(translate: TranslateService, userLang: string, translations = env.supportedLangs) {
   let targetLang = userLang;
   if (!env.production) {
     console.log(`User lang: ${targetLang}`);
@@ -29,7 +29,7 @@ export function updateUserLang(translate: TranslateService, userLang: string) {
       console.log(`Fallback to browser lang: ${targetLang}`);
     }
   }
-  const detectedSupportedLang = detectSupportedLang(targetLang);
+  const detectedSupportedLang = detectSupportedLang(targetLang, translations);
   if (!env.production) {
     console.log(`Detected supported lang: ${detectedSupportedLang}`);
   }
@@ -37,10 +37,10 @@ export function updateUserLang(translate: TranslateService, userLang: string) {
   _moment.locale([detectedSupportedLang]);
 }
 
-function detectSupportedLang(targetLang: string): string {
+function detectSupportedLang(targetLang: string, translations: string[]): string {
   const langTag = (targetLang || '').split('-').join('_');
   if (langTag.length) {
-    if (env.supportedLangs.indexOf(langTag) > -1) {
+    if (translations.indexOf(langTag) > -1) {
       return langTag;
     } else {
       const parts = langTag.split('_');
@@ -50,7 +50,7 @@ function detectSupportedLang(targetLang: string): string {
       } else {
         lang = langTag;
       }
-      const foundLangs = env.supportedLangs.filter(
+      const foundLangs = translations.filter(
         (supportedLang: string) => {
           const supportedLangParts = supportedLang.split('_');
           return supportedLangParts[0] === lang;

ui-ngx/src/app/core/translate/translate-default-loader.ts

@@ -0,0 +1,14 @@
+import { TranslateLoader } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+export class TranslateDefaultLoader implements TranslateLoader {
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  getTranslation(lang: string): Observable<object> {
+    return this.http.get(`/assets/locale/locale.constant-${lang}.json`);
+  }
+}

ui-ngx/src/app/core/utils.ts

@@ -338,6 +338,8 @@ export const isEmpty = (a: any): boolean => _.isEmpty(a);
 
 export const unset = (object: any, path: string | symbol): boolean => _.unset(object, path);
 
+export const setByPath = <T extends object>(object: T, path: string | number | symbol, value: any): T => _.set(object, path, value);
+
 export const isEqualIgnoreUndefined = (a: any, b: any): boolean => {
   if (a === b) {
     return true;

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -46,7 +46,7 @@
               <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
               <mat-icon matPrefix>email</mat-icon>
               <mat-error *ngIf="loginFormGroup.get('username').invalid">
-                {{ 'user.invalid-email-format' | translate }}
+                {{ 'login.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
             <mat-form-field class="tb-appearance-transparent">

ui-ngx/src/app/shared/components/json-content.component.html

@@ -18,7 +18,7 @@
 <div class="tb-json-content" style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
      tb-fullscreen
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-json-content-toolbar">
+  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-json-content-toolbar" *ngIf="hideToolbar">
     <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
     <span fxFlex></span>
     <button type="button"

ui-ngx/src/app/shared/components/json-content.component.ts

@@ -18,17 +18,19 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  EventEmitter,
   forwardRef,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
+  Output,
   SimpleChanges,
-  ViewChild, ViewEncapsulation
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
-import { ControlValueAccessor, UntypedFormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
+import { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormControl, Validator } from '@angular/forms';
 import { Ace } from 'ace-builds';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -38,6 +40,7 @@ import { guid } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { getAce } from '@shared/models/ace/ace.models';
 import { beautifyJs } from '@shared/models/beautify.models';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-json-content',
@@ -79,41 +82,30 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
 
   @Input() editorStyle: {[klass: string]: any};
 
-  private readonlyValue: boolean;
-  get readonly(): boolean {
-    return this.readonlyValue;
-  }
-  @Input()
-  set readonly(value: boolean) {
-    this.readonlyValue = coerceBooleanProperty(value);
-  }
+  @Input() tbPlaceholder: string;
 
-  private validateContentValue: boolean;
-  get validateContent(): boolean {
-    return this.validateContentValue;
-  }
   @Input()
-  set validateContent(value: boolean) {
-    this.validateContentValue = coerceBooleanProperty(value);
-  }
+  @coerceBoolean()
+  hideToolbar = false;
 
-  private validateOnChangeValue: boolean;
-  get validateOnChange(): boolean {
-    return this.validateOnChangeValue;
-  }
   @Input()
-  set validateOnChange(value: boolean) {
-    this.validateOnChangeValue = coerceBooleanProperty(value);
-  }
+  @coerceBoolean()
+  readonly: boolean;
 
-  private requiredValue: boolean;
-  get required(): boolean {
-    return this.requiredValue;
-  }
   @Input()
-  set required(value: boolean) {
-    this.requiredValue = coerceBooleanProperty(value);
-  }
+  @coerceBoolean()
+  validateContent: boolean;
+
+  @Input()
+  @coerceBoolean()
+  validateOnChange: boolean;
+
+  @Input()
+  @coerceBoolean()
+  required: boolean;
+
+  @Output()
+  blur: EventEmitter<void> = new EventEmitter<void>();
 
   fullscreen = false;
 
@@ -124,6 +116,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
   errorShowed = false;
 
   private propagateChange = null;
+  private onTouched = () => {};
 
   constructor(public elementRef: ElementRef,
               protected store: Store<AppState>,
@@ -163,11 +156,17 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
             this.updateView();
           }
         });
-        if (this.validateContent) {
-          this.jsonEditor.on('blur', () => {
+        this.jsonEditor.on('blur', () => {
+          if (this.validateContent) {
             this.contentValid = this.doValidate(true);
             this.cd.markForCheck();
-          });
+          }
+          this.onTouched();
+          this.blur.next();
+        });
+
+        if (this.tbPlaceholder && this.tbPlaceholder.length) {
+          this.createPlaceholder();
         }
         this.editorResize$ = new ResizeObserver(() => {
           this.onAceEditorResize();
@@ -177,6 +176,39 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
     );
   }
 
+  private createPlaceholder() {
+    this.jsonEditor.on('input', this.updateEditorPlaceholder.bind(this));
+    setTimeout(this.updateEditorPlaceholder.bind(this), 100);
+  }
+
+  private updateEditorPlaceholder() {
+    const shouldShow = !this.jsonEditor.session.getValue().length;
+    let node: HTMLElement = (this.jsonEditor.renderer as any).emptyMessageNode;
+    if (!shouldShow && node) {
+      this.jsonEditor.renderer.getMouseEventTarget().removeChild(node);
+      (this.jsonEditor.renderer as any).emptyMessageNode = null;
+    } else if (shouldShow && !node) {
+      const placeholderElement = $('<textarea></textarea>');
+      placeholderElement.text(this.tbPlaceholder);
+      placeholderElement.addClass('ace_invisible ace_emptyMessage');
+      placeholderElement.css({
+        padding: '0 9px',
+        width: '100%',
+        border: 'none',
+        textWrap: 'nowrap',
+        whiteSpace: 'pre',
+        overflow: 'hidden',
+        resize: 'none',
+        fontSize: '15px'
+      });
+      const rows = this.tbPlaceholder.split('\n').length;
+      placeholderElement.attr('rows', rows);
+      node = placeholderElement[0];
+      (this.jsonEditor.renderer as any).emptyMessageNode = node;
+      this.jsonEditor.renderer.getMouseEventTarget().appendChild(node);
+    }
+  }
+
   ngOnDestroy(): void {
     if (this.editorResize$) {
       this.editorResize$.disconnect();
@@ -219,6 +251,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
   }
 
   registerOnTouched(fn: any): void {
+    this.onTouched = fn;
   }
 
   setDisabledState(isDisabled: boolean): void {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3314,6 +3314,7 @@
         "new-password-again": "Confirm new password",
         "password-link-sent-message": "Reset link has been sent",
         "email": "Email",
+        "invalid-email-format": "Invalid email format.",
         "login-with": "Login with {{name}}",
         "or": "or",
         "error": "Login error",

ui-ngx/yarn.lock

@@ -2572,13 +2572,6 @@
   dependencies:
     tslib "^2.3.0"
 
-"@ngx-translate/http-loader@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-7.0.0.tgz#905f38d8d13342621516635bf480ff9a4f73e9fc"
-  integrity sha512-j+NpXXlcGVdyUNyY/qsJrqqeAdJdizCd+GKh3usXExSqy1aE9866jlAIL+xrfDU4w+LiMoma5pgE4emvFebZmA==
-  dependencies:
-    tslib "^2.3.0"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"