[ACA] 3.3.0 alpha update (#1108)

* update to 3.3.0 alpha * add arabic language * layout orientation support * take direction from parent * set direction based on language locale on initialization * test
2025-06-02 17:34:51 +00:00 · 2019-05-15 15:38:51 +03:00 · 2019-05-15 15:38:51 +03:00 · 07c7f49af1
commit 07c7f49af1
parent 1c18f6c555
9 changed files with 119 additions and 97 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -5,33 +5,33 @@
  "requires": true,
  "dependencies": {
    "@alfresco/adf-content-services": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-3.2.0.tgz",
-      "integrity": "sha512-G8+vSL3GTGm2rAtvNgFpCctcX7WwRBoAkvkvwnIWETrl5zYb4ftzvCpSkrj8FKxueE8Ys59oTMOv1o22ev2+AA==",
+      "version": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82.tgz",
+      "integrity": "sha512-G4zvUwzVDm5YAK4/eo/U8tMA7osIU5axBhc1JGxRyWR3jcd1E6tVeHDQP+i4X9cQWdYF6fvSOYNS4qqapk8JAg==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@alfresco/adf-core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-3.2.0.tgz",
-      "integrity": "sha512-mgDNroAiKjDSOVS3nfc0vYrgGtWt2dUNLfLReU89jvMAiXLVCghA/Gufhjx0t64TOneWofD9hNGV0KuIXx0wFQ==",
+      "version": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82.tgz",
+      "integrity": "sha512-7SEJLDr23/JgZDZaw4aD6FDgvnOIfQ5SIh/qJUdhxyD1eC852qpm/OlNRg4zqJ+6so8pvvOqEEqrDgFJvr1OWg==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@alfresco/adf-extensions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-3.2.0.tgz",
-      "integrity": "sha512-nw7rzgG7WznekyzNQF+unsWITuBfQva2wvTiqRPtimpA1hZWIcxKUWhKf5nkw8nCb8qlgkVIimylZjNZFlsr7A==",
+      "version": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82.tgz",
+      "integrity": "sha512-l8VIc3Zg0Nr1mJUGbeC+9oPUdBAtqg5f4NUNedb8vSMumYAyK/p8DvZdEERHPXxRCfrxxGuYvDwxu1IlcZkCZg==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@alfresco/js-api": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-3.2.0.tgz",
-      "integrity": "sha512-HgB/8M4mSi1mVx7ZDbgrNLP5xZiPUamkNzQI198DkWwQRxXh9V0khEavm82Rr9M5nrLw4VdPUARFLmxsNQwmng==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-3.2.1.tgz",
+      "integrity": "sha512-qaXftaHqFonWRKRmYxhB2/bEpUh5fvUj6cN+xuKUXIGgt9XxF76NpWkXnEEQLZ0BWg5upd19Q3N1x4E7DiNGUg==",
      "requires": {
        "event-emitter": "0.3.4",
        "superagent": "3.8.2"
@ -4961,8 +4961,7 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "aproba": {
          "version": "1.2.0",
@ -4983,14 +4982,12 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@ -5005,20 +5002,17 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "core-util-is": {
          "version": "1.0.2",
@ -5135,8 +5129,7 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "ini": {
          "version": "1.3.5",
@ -5148,7 +5141,6 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@ -5163,7 +5155,6 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@ -5171,14 +5162,12 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@ -5197,7 +5186,6 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@ -5278,8 +5266,7 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "object-assign": {
          "version": "4.1.1",
@ -5291,7 +5278,6 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@ -5377,8 +5363,7 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@ -5414,7 +5399,6 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@ -5434,7 +5418,6 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@ -5478,14 +5461,12 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "yallist": {
          "version": "3.0.3",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        }
      }
    },
--- a/package.json
+++ b/package.json
@ -37,10 +37,10 @@
  },
  "private": true,
  "dependencies": {
-    "@alfresco/adf-content-services": "3.2.0",
-    "@alfresco/adf-core": "3.2.0",
-    "@alfresco/adf-extensions": "3.2.0",
-    "@alfresco/js-api": "3.2.0",
+    "@alfresco/adf-content-services": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
+    "@alfresco/adf-core": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
+    "@alfresco/adf-extensions": "3.3.0-4a363c731be09d8213e25cd149bee302ebcbeb82",
+    "@alfresco/js-api": "3.2.1",
    "@angular/animations": "7.2.14",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "7.2.14",
--- a/src/app.config.json
+++ b/src/app.config.json
@ -104,6 +104,11 @@
    {
      "key": "sv",
      "label": "Svenska"
+    },
+    {
+      "key": "ar",
+      "label": "Arabic",
+      "direction": "rtl"
    }
  ],
  "content-metadata": {
--- a/src/app/components/layout/app-layout/app-layout.component.html
+++ b/src/app/components/layout/app-layout/app-layout.component.html
@ -7,6 +7,7 @@
    [hideSidenav]="hideSidenav"
    [expandedSidenav]="expandedSidenav"
    (expanded)="onExpanded($event)"
+    [direction]="direction"
  >
    <adf-sidenav-layout-header>
      <ng-template>
@ -23,7 +24,6 @@
    <adf-sidenav-layout-navigation>
      <ng-template let-isMenuMinimized="isMenuMinimized">
        <app-sidenav
-          [direction]="direction"
          [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
          [attr.data-automation-id]="
            isMenuMinimized() ? 'collapsed' : 'expanded'
--- a/src/app/components/layout/app-layout/app-layout.component.spec.ts
+++ b/src/app/components/layout/app-layout/app-layout.component.spec.ts
@ -79,13 +79,16 @@ describe('AppLayoutComponent', () => {
    userPreference = TestBed.get(UserPreferencesService);
  });

+  beforeEach(() => {
+    appConfig.config.languages = [];
+    appConfig.config.locale = 'en';
+  });
+
  describe('sidenav state', () => {
    it('should get state from configuration', () => {
-      appConfig.config = {
-        sideNav: {
-          expandedSidenav: false,
-          preserveState: false
-        }
+      appConfig.config.sideNav = {
+        expandedSidenav: false,
+        preserveState: false
      };

      fixture.detectChanges();
@ -94,7 +97,7 @@ describe('AppLayoutComponent', () => {
    });

    it('should resolve state to true is no configuration', () => {
-      appConfig.config = {};
+      appConfig.config.sidenav = {};

      fixture.detectChanges();

@ -102,11 +105,9 @@ describe('AppLayoutComponent', () => {
    });

    it('should get state from user settings as true', () => {
-      appConfig.config = {
-        sideNav: {
-          expandedSidenav: false,
-          preserveState: true
-        }
+      appConfig.config.sideNav = {
+        expandedSidenav: false,
+        preserveState: true
      };

      spyOn(userPreference, 'get').and.callFake(key => {
@ -121,11 +122,9 @@ describe('AppLayoutComponent', () => {
    });

    it('should get state from user settings as false', () => {
-      appConfig.config = {
-        sideNav: {
-          expandedSidenav: false,
-          preserveState: true
-        }
+      appConfig.config.sidenav = {
+        expandedSidenav: false,
+        preserveState: true
      };

      spyOn(userPreference, 'get').and.callFake(key => {
@ -196,4 +195,43 @@ describe('AppLayoutComponent', () => {

    expect(component.layout.container.toggleMenu).toHaveBeenCalled();
  });
+
+  it('should set direction `ltr` if no direction declared', () => {
+    appConfig.config.languages = [
+      {
+        key: 'en'
+      }
+    ];
+
+    spyOn(userPreference, 'get').and.callFake(key => {
+      if (key === 'locale') {
+        return 'en';
+      }
+    });
+
+    const spy = spyOn(userPreference, 'set');
+    fixture.detectChanges();
+
+    expect(spy.calls.mostRecent().args).toEqual(['textOrientation', 'ltr']);
+  });
+
+  it('should set direction `rtl` based on locale language direction', () => {
+    appConfig.config.languages = [
+      {
+        key: 'en',
+        direction: 'rtl'
+      }
+    ];
+
+    spyOn(userPreference, 'get').and.callFake(key => {
+      if (key === 'locale') {
+        return 'en';
+      }
+    });
+
+    const spy = spyOn(userPreference, 'set');
+    fixture.detectChanges();
+
+    expect(spy.calls.mostRecent().args).toEqual(['textOrientation', 'rtl']);
+  });
 });
--- a/src/app/components/layout/app-layout/app-layout.component.ts
+++ b/src/app/components/layout/app-layout/app-layout.component.ts
@ -26,7 +26,9 @@
 import {
  AppConfigService,
  SidenavLayoutComponent,
-  UserPreferencesService
+  UserPreferencesService,
+  LanguageItem,
+  AppConfigValues
 } from '@alfresco/adf-core';
 import {
  Component,
@ -46,6 +48,7 @@ import {
  SetSelectedNodesAction,
  getCurrentFolder
 } from '@alfresco/aca-shared/store';
+import { Directionality } from '@angular/cdk/bidi';

@Component({
  selector: 'app-layout',
@ -66,6 +69,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {

  minimizeSidenav = false;
  hideSidenav = false;
+  direction: Directionality;

  private minimizeConditions: string[] = ['search'];
  private hideConditions: string[] = ['preview'];
@ -147,6 +151,18 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
        takeUntil(this.onDestroy$)
      )
      .subscribe(() => this.store.dispatch(new SetSelectedNodesAction([])));
+
+    this.userPreferenceService
+      .select('textOrientation')
+      .subscribe((textOrientation: Directionality) => {
+        this.direction = textOrientation;
+      });
+
+    this.userPreferenceService.set(
+      'textOrientation',
+      this.getCurrentLanguage(this.userPreferenceService.get('locale'))
+        .direction || 'ltr'
+    );
  }

  ngOnDestroy() {
@ -205,4 +221,12 @@ export class AppLayoutComponent implements OnInit, OnDestroy {

    return expand;
  }
+
+  private getCurrentLanguage(key: string): LanguageItem {
+    return (
+      this.appConfigService
+        .get<Array<LanguageItem>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY)
+        .find(language => language.key === key) || <LanguageItem>{}
+    );
+  }
 }
--- a/src/app/components/sidenav/sidenav.component.scss
+++ b/src/app/components/sidenav/sidenav.component.scss
@ -103,12 +103,10 @@
  }
 }

-.app-sidenav-rtl {
-  .action-button .action-button__label {
-    margin-right: 8px !important;
-  }
-
-  .mat-expansion-panel-header {
-    padding: 0 0 0 8px !important;
-  }
+[dir='rtl'] .action-button .action-button__label {
+  margin-right: 8px !important;
+}
+
+[dir='rtl'] .mat-expansion-panel-header {
+  padding: 0 0 0 8px !important;
 }
--- a/src/app/components/sidenav/sidenav.component.spec.ts
+++ b/src/app/components/sidenav/sidenav.component.spec.ts
@ -74,22 +74,4 @@ describe('SidenavComponent', () => {
      }
    ]);
  }));
-
-  it('should add RTL class when direction is set to `rtl`', () => {
-    component.direction = 'rtl';
-    fixture.detectChanges();
-
-    expect(
-      fixture.debugElement.nativeElement.classList.contains('app-sidenav-rtl')
-    ).toBe(true);
-  });
-
-  it('should not add RTL class when direction is set to `ltr`', () => {
-    component.direction = 'ltr';
-    fixture.detectChanges();
-
-    expect(
-      fixture.debugElement.nativeElement.classList.contains('app-sidenav-rtl')
-    ).toBe(false);
-  });
 });
--- a/src/app/components/sidenav/sidenav.component.ts
+++ b/src/app/components/sidenav/sidenav.component.ts
@ -30,8 +30,7 @@ import {
  TemplateRef,
  OnInit,
  ViewEncapsulation,
-  OnDestroy,
-  HostBinding
+  OnDestroy
 } from '@angular/core';
 import { CollapsedTemplateDirective } from './directives/collapsed-template.directive';
 import { ExpandedTemplateDirective } from './directives/expanded-template.directive';
@ -51,7 +50,6 @@ import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 })
 export class SidenavComponent implements OnInit, OnDestroy {
  @Input() mode: 'collapsed' | 'expanded' = 'expanded';
-  @Input() direction: 'ltr' | 'rtl' = 'ltr';

  @ContentChild(ExpandedTemplateDirective, { read: TemplateRef })
  expandedTemplate;
@ -62,10 +60,6 @@ export class SidenavComponent implements OnInit, OnDestroy {
  groups: Array<NavBarGroupRef> = [];
  private onDestroy$: Subject<boolean> = new Subject<boolean>();

-  @HostBinding('class.app-sidenav-rtl') get isRtlDirection(): boolean {
-    return this.direction === 'rtl';
-  }
-
  constructor(
    private store: Store<AppStore>,
    private extensions: AppExtensionService