Merge pull request #49 from gisaia/feat/upgradeToolkit

feat: use top-menu from toolkit

package.json

@@ -34,7 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "ajv-keywords": "5.1.0",
-    "arlas-wui-toolkit": "24.2.0-beta-iam.12",
+    "arlas-wui-toolkit": "24.3.0-beta.14",
     "eslint": "^8.2.0",
     "js-yaml": "4.1.0",
     "patch-package": "^6.4.7",

src/app/app.module.ts

@@ -25,9 +25,11 @@ import { RouterModule } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import {
-  ArlasCollaborativesearchService, ArlasConfigurationDescriptor, ArlasIamService, ArlasStartupService, AuthentificationService,
+  ArlasCollaborativesearchService, ArlasConfigurationDescriptor, ArlasIamService,
+  ArlasSettingsService,
+  ArlasStartupService, ArlasToolkitSharedModule, AuthentificationService,
   CONFIG_UPDATER,
-  FETCH_OPTIONS, GET_OPTIONS, LoginModule, configUpdaterFactory, getOptionsFactory
+  FETCH_OPTIONS, GET_OPTIONS, LoginModule, PersistenceService, configUpdaterFactory, getOptionsFactory
 } from 'arlas-wui-toolkit';
 import { ToastrModule } from 'ngx-toastr';
 import { AppRoutingModule } from './app-routing.module';
@@ -39,6 +41,9 @@ import {
   PermissionCreateColumnFilterComponent
 } from './components/permission/permission-create-column-filter/permission-create-column-filter.component';
 import { PermissionCreateComponent } from './components/permission/permission-create/permission-create.component';
+
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { OAuthModule } from 'angular-oauth2-oidc';
 import { PermissionComponent } from './components/permission/permission.component';
 import { RoleFormComponent } from './components/role/role-form/role-form.component';
 import { RoleComponent } from './components/role/role.component';
@@ -49,8 +54,7 @@ import { UserAddComponent } from './components/user/user-add/user-add.component'
 import { UserFormComponent } from './components/user/user-form/user-form.component';
 import { UserComponent } from './components/user/user.component';
 import { IamStartupService } from './services/startup/startup.service';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { OAuthModule } from 'angular-oauth2-oidc';
+import { ArlasTranslateLoader } from '@tools/customLoader';
 
 export function startupServiceFactory(startup: IamStartupService) {
   const load = () => startup.load();
@@ -61,10 +65,6 @@ export function auhtentServiceFactory(service: AuthentificationService) {
   return service;
 }
 
-export function createTranslateLoader(http: HttpClient) {
-  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
-}
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -87,6 +87,7 @@ export function createTranslateLoader(http: HttpClient) {
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
+    ArlasToolkitSharedModule,
     FormsModule,
     ReactiveFormsModule,
     MatAutocompleteModule,
@@ -114,8 +115,8 @@ export function createTranslateLoader(http: HttpClient) {
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: (createTranslateLoader),
-        deps: [HttpClient]
+        useClass: ArlasTranslateLoader,
+        deps: [HttpClient, ArlasSettingsService, PersistenceService]
       }
     }),
     ToastrModule.forRoot({

src/app/components/home/home.component.html

@@ -1,6 +1,6 @@
-<mat-toolbar class="header" [color]="'primary'">
-  <span style="cursor: pointer;" [routerLink]="'/'">ARLAS IAM</span>
-  <div class="right">
+<arlas-top-menu [showAboutButton]="false">
+  <div left-menu>{{'ARLAS IAM' | translate}}</div>
+  <div right-menu>
     <div *ngIf="!domainOrgExist || isSuperAdmin" class="create-org">
       <button class="add-org" (click)="addOrg()" mat-flat-button color="accent">{{'Create organisation' |
         translate}}</button>
@@ -13,7 +13,7 @@
       </mat-select>
     </div>
   </div>
-</mat-toolbar>
+</arlas-top-menu>
 <div class="app">
   <div class="menu">
     <mat-nav-list class="route-nav-list">
@@ -58,20 +58,6 @@
 
 
 
-    </mat-nav-list>
-    <mat-nav-list class="route-nav-list login">
-      <mat-list-item [matTooltip]="this.user?.email" [matTooltipPosition]="'above'" class="username">
-        <span class="material-symbols-outlined">
-          person
-        </span>
-        <span class="label">{{this.user?.email}}</span>
-      </mat-list-item>
-      <mat-list-item [matTooltip]="'Logout' | translate" (click)="logout()" [matTooltipPosition]="'right'">
-        <span class="material-symbols-outlined">
-          logout
-        </span>
-        <span class="label">{{'Logout' | translate}}</span>
-      </mat-list-item>
     </mat-nav-list>
   </div>
   <div class="main-view">

src/app/components/home/home.component.scss

@@ -1,33 +1,25 @@
-.header {
-  color: #fff;
-  height: 48px;
-  display: flex;
-  justify-content: space-between;
-
-  .right {
-    display: flex;
-    gap: 0 15px;
-
-    .create-org {
-    }
-
-    .orga {
-      font-size: medium;
-      font-weight: 300;
-      margin: auto;
-
-      .current-orga {
-        width: 150px;
-        background-color: white;
-        color: black;
-        padding: 0 5px;
-      }
+@import "colors.scss";
+
+::ng-deep .top-menu {
+  background-color: $primaryColor !important;
+  padding: 0 10px !important;
+  color: white;
+  .orga {
+    font-size: medium;
+    font-weight: 300;
+    padding-right: 15px;
+
+    .current-orga {
+      width: 150px;
+      background-color: white;
+      color: black;
+      padding: 0 5px;
     }
   }
 }
 
 .app {
-  height: calc(100% - 84px);
+  height: calc(100% - 76px);
   display: flex;
   flex-direction: row;
 
@@ -129,7 +121,7 @@
               padding: 10px 20px;
               align-items: center;
 
-              button{
+              button {
                 background-color: white;
                 color: rgba(0, 0, 0, 0.7);
               }
@@ -151,7 +143,7 @@
                 }
               }
 
-              .selected-btn{
+              .selected-btn {
                 background-color: white;
                 color: #00bcd4;
                 border-color: #00bcd4;

src/app/components/home/home.component.spec.ts

@@ -11,15 +11,16 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ArlasIamService } from 'arlas-wui-toolkit';
-import { MockManagerService, MockToastrService } from '../../tools/mock';
+
 import { HomeComponent } from './home.component';
-import { ManagerService } from '../../services/manager/manager.service';
+import { ManagerService } from '@services/manager/manager.service';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatDividerModule } from '@angular/material/divider';
 import { TopMenuComponent } from '../top-menu/top-menu.component';
 import { ToastrService } from 'ngx-toastr';
 import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MockManagerService, MockToastrService } from '@tools/mock';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;

src/app/components/home/home.component.ts

@@ -7,9 +7,9 @@ import { OrgData, UserData } from 'arlas-iam-api';
 import { ArlasIamService } from 'arlas-wui-toolkit';
 import { ToastrService } from 'ngx-toastr';
 import { filter } from 'rxjs';
-import { ManagerService } from '../../services/manager/manager.service';
-import { Page } from '../../tools/model';
-import { getPrivateOrgDisplayName } from '../../tools/utils';
+import { ManagerService } from '@services/manager/manager.service';
+import { Page } from '@tools/model';
+import { getPrivateOrgDisplayName } from '@tools/utils';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
 import { CreateOrgModalComponent } from './create-org-modal/create-org-modal.component';
 

src/app/components/permission/permission-create-column-filter/permission-create-column-filter.component.spec.ts

@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
-import { MockToastrService } from 'src/app/tools/mock';
 
 import { PermissionCreateColumnFilterComponent } from './permission-create-column-filter.component';
+import { MockToastrService } from '@tools/mock';
 
 describe('PermissionCreateColumnFilterComponent', () => {
   let component: PermissionCreateColumnFilterComponent;

src/app/components/permission/permission-create-column-filter/permission-create-column-filter.component.ts

@@ -3,10 +3,10 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
+import { ManagerService } from '@services/manager/manager.service';
+import { Page } from '@tools/model';
 import { ToastrService } from 'ngx-toastr';
 import { Subscription } from 'rxjs';
-import { ManagerService } from 'src/app/services/manager/manager.service';
-import { Page } from 'src/app/tools/model';
 
 @Component({
   selector: 'arlas-iam-permission-create-column-filter',

src/app/components/permission/permission-create/permission-create.component.spec.ts

@@ -4,7 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { PermissionCreateComponent } from './permission-create.component';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
-import { MockToastrService } from '../../../tools/mock';
+import { MockToastrService } from '@tools/mock';
 
 describe('PermissionCreateComponent', () => {
   let component: PermissionCreateComponent;

src/app/components/permission/permission-create/permission-create.component.ts

@@ -3,9 +3,9 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
+import { ManagerService } from '@services/manager/manager.service';
+import { Page } from '@tools/model';
 import { ToastrService } from 'ngx-toastr';
-import { ManagerService } from 'src/app/services/manager/manager.service';
-import { Page } from '../../../tools/model';
 
 @Component({
   selector: 'arlas-iam-permission-create',

src/app/components/permission/permission.component.ts

@@ -4,10 +4,10 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { PermissionData } from 'arlas-iam-api';
 import { Subscription } from 'rxjs';
-import { ManagerService } from 'src/app/services/manager/manager.service';
 import { Router } from '@angular/router';
-import { Page } from '../../tools/model';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import { Page } from '@tools/model';
+import { ManagerService } from '@services/manager/manager.service';
 
 @Component({
   selector: 'arlas-iam-permission',

src/app/components/role/role-form/role-form.component.spec.ts

@@ -4,7 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { RoleFormComponent } from './role-form.component';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
-import { MockToastrService } from '../../../tools/mock';
+import { MockToastrService } from '@tools/mock';
 
 describe('RoleCreateComponent', () => {
   let component: RoleFormComponent;

src/app/components/role/role-form/role-form.component.ts

@@ -4,8 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
-import { ManagerService } from '../../../services/manager/manager.service';
-import { Page } from '../../../tools/model';
+import { ManagerService } from '@services/manager/manager.service';
+import { Page } from '@tools/model';
 
 @Component({
   selector: 'arlas-iam-role-create',

src/app/components/role/role.component.spec.ts

@@ -16,7 +16,7 @@ import { TopMenuComponent } from '../top-menu/top-menu.component';
 import { RoleComponent } from './role.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockToastrService } from '../../tools/mock';
+import { MockToastrService } from '@tools/mock';
 import { ToastrService } from 'ngx-toastr';
 
 describe('RoleComponent', () => {

src/app/components/role/role.component.ts

@@ -6,9 +6,9 @@ import { Router } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { RoleData } from 'arlas-iam-api';
 import { Subscription } from 'rxjs';
-import { ManagerService } from '../../services/manager/manager.service';
-import { Page } from '../../tools/model';
-import { getState, saveState } from '../../tools/utils';
+import { ManagerService } from '@services/manager/manager.service';
+import { Page } from '@tools/model';
+import { getState, saveState } from '@tools/utils';
 
 @Component({
   selector: 'arlas-iam-role',

src/app/components/rules-item/rules-item.component.spec.ts

@@ -3,7 +3,7 @@ import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-tran
 import { ToastrService } from 'ngx-toastr';
 
 import { RulesItemComponent } from './rules-item.component';
-import { MockToastrService } from '../../tools/mock';
+import { MockToastrService } from '@tools/mock';
 
 describe('RulesItemComponent', () => {
   let component: RulesItemComponent;

src/app/components/rules-item/rules-item.component.ts

@@ -1,8 +1,8 @@
-import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
-import { ManagerService } from '../../services/manager/manager.service';
-import { ToastrService } from 'ngx-toastr';
 import { TranslateService } from '@ngx-translate/core';
+import { ManagerService } from '@services/manager/manager.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'arlas-iam-rules-item',

src/app/components/rules/rules.component.spec.ts

@@ -3,7 +3,7 @@ import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-tran
 import { ToastrService } from 'ngx-toastr';
 
 import { RulesComponent } from './rules.component';
-import { MockToastrService } from '../../tools/mock';
+import { MockToastrService } from '@tools/mock';
 
 describe('RulesComponent', () => {
   let component: RulesComponent;

src/app/components/rules/rules.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ManagerService } from '../../services/manager/manager.service';
-import { RoleData, PermissionData } from 'arlas-iam-api';
-import { Subscription } from 'rxjs';
-import { Page } from '../../tools/model';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { getState, saveState } from '../../tools/utils';
+import { ManagerService } from '@services/manager/manager.service';
+import { Page } from '@tools/model';
+import { getState, saveState } from '@tools/utils';
+import { PermissionData, RoleData } from 'arlas-iam-api';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'arlas-iam-rules',

src/app/components/top-menu/top-menu.component.html

@@ -1,4 +1,4 @@
-<div class="top-menu">
+<div class="inner-menu">
   <div class="title">
     <ng-container *ngFor="let page of pages">
       <span class="link" *ngIf="!!page.route" (click)="navigateTo(page.route)">{{page.label | translate}}</span>

src/app/components/top-menu/top-menu.component.scss

@@ -1,4 +1,4 @@
-.top-menu {
+.inner-menu {
   background-color: whitesmoke;
   padding: 10px;
   display: flex;

src/app/components/top-menu/top-menu.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, Output } from '@angular/core';
 import { Subject } from 'rxjs';
-import { Page } from '../../tools/model';
+import { Page } from '@tools/model';
 import { Router } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { MatCheckboxChange } from '@angular/material/checkbox';

src/app/components/user/user-add/user-add.component.scss

@@ -5,6 +5,11 @@
     display: flex;
     flex-direction: column;
 
+    mat-form-field {
+      width: fit-content;
+      min-width: 400px;
+    }
+
     .owner{
       padding: 0 0 15px 10px;
     }