Merge pull request #408 from swisstopo/feature/assets-387-umbau-user-…

…ui-uebersicht Feature/assets 387 umbau user UI uebersicht
swisstopo · Feb 13, 2025 · 2b8979e · 2b8979e
2 parents ceeaf99 + f9e085b
commit 2b8979e
Show file tree

Hide file tree

Showing 37 changed files with 716 additions and 137 deletions.
diff --git a/apps/client-asset-sg/project.json b/apps/client-asset-sg/project.json
@@ -26,8 +26,8 @@
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "1.4mb",
-              "maximumError": "1.6mb"
+              "maximumWarning": "1.8mb",
+              "maximumError": "2.0mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/apps/client-asset-sg/src/app/app.component.html b/apps/client-asset-sg/src/app/app.component.html
@@ -11,7 +11,9 @@
     <asset-sg-app-bar>
       <ng-template [cdkPortalOutlet]="(appPortalService.appBarPortalContent$ | push) ?? ''"></ng-template>
     </asset-sg-app-bar>
+    @if (shouldShowMenuBar) {
     <asset-sg-menu-bar />
+    }
     <div class="router-outlet">
       @if (authState === AuthState.Success) {
       <router-outlet />
@@ -30,7 +32,6 @@ <h1 translate>resourceForbidden</h1>
     }
   </ng-container>
 </ng-template>
-
 <div class="alerts">
   <ul app-alert-list></ul>
 </div>
diff --git a/apps/client-asset-sg/src/app/app.component.scss b/apps/client-asset-sg/src/app/app.component.scss
@@ -43,6 +43,12 @@ asset-sg-menu-bar {
     grid-template-columns: $menu-bar-width 1fr;
     box-shadow: 0 0 60px 0 rgb(0 0 0 / 60%);
     --viewport-width: min(calc(100vw - #{$menu-bar-width}), calc(1920px - #{$menu-bar-width}));
+
+    &.menu-hidden {
+      grid-template-areas: "app-bar app-bar" "router-outlet router-outlet";
+      grid-template-columns: 1fr;
+      --viewport-width: min(calc(100vw - #{$menu-bar-width}), calc(1920px - #{$menu-bar-width}));
+    }
   }
 }
 

diff --git a/apps/client-asset-sg/src/app/app.component.ts b/apps/client-asset-sg/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, inject } from '@angular/core';
+import { Component, HostBinding, inject } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import {
   AppPortalService,
   appSharedStateActions,
@@ -11,7 +12,7 @@ import {
 } from '@asset-sg/client-shared';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
-import { debounceTime, fromEvent, startWith, switchMap } from 'rxjs';
+import { debounceTime, filter, fromEvent, map, startWith, switchMap } from 'rxjs';
 import { environment } from '../environments/environment';
 import { AppState } from './state/app-state';
 
@@ -27,11 +28,13 @@ const fullHdWidth = 1920;
 export class AppComponent {
   private readonly httpClient = inject(HttpClient);
   public readonly appPortalService = inject(AppPortalService);
+  public shouldShowMenuBar = true;
 
   public readonly errorService = inject(ErrorService);
   public readonly authService = inject(AuthService);
   private readonly store = inject(Store<AppState>);
   private readonly configService = inject(ConfigService);
+  private readonly router = inject(Router);
 
   constructor() {
     this.configService.setHideDisclaimer(environment.hideDisclaimer);
@@ -57,6 +60,30 @@ export class AppComponent {
         }
         setCssCustomProperties(document.documentElement, ['font-size', fontSize]);
       });
+
+    this.router.events
+      .pipe(
+        untilDestroyed(this),
+        filter((event) => event instanceof NavigationEnd),
+        startWith(() => undefined),
+        map(() => {
+          const segments = (this.router.getCurrentNavigation() ?? this.router.lastSuccessfulNavigation)?.finalUrl?.root
+            .children['primary'].segments;
+          if (segments == null || segments.length === 1) {
+            return true;
+          }
+          const path = segments.slice(1).join('/');
+          return !(path === 'admin' || path.startsWith(`admin/`));
+        }),
+        startWith(true)
+      )
+      .subscribe((showMenuBar) => {
+        this.shouldShowMenuBar = showMenuBar;
+      });
+  }
+
+  @HostBinding('class.menu-hidden') get isMenuHidden() {
+    return !this.shouldShowMenuBar;
   }
 
   protected readonly AuthState = AuthState;

diff --git a/apps/client-asset-sg/src/app/components/app-bar/app-bar.component.scss b/apps/client-asset-sg/src/app/components/app-bar/app-bar.component.scss
@@ -1,7 +1,7 @@
 @use "../../styles/variables";
 
 :host {
-  box-shadow: 0 4px 4px #00000029;
+  border-bottom: 1px solid #dfe4e9;
   z-index: 10;
   display: flex;
   align-items: center;

diff --git a/apps/client-asset-sg/src/app/i18n/de.ts b/apps/client-asset-sg/src/app/i18n/de.ts
@@ -265,6 +265,8 @@ export const deAppTranslations = {
     name: 'Name',
     role: 'Rolle',
     actions: 'Aktionen',
+    firstName: 'Vorname',
+    lastName: 'Nachname',
     email: 'E-Mail',
     back: 'Zurück',
     languages: {
@@ -275,6 +277,7 @@ export const deAppTranslations = {
     },
     userPage: {
       admin: 'Admin',
+      noAdmin: 'Nicht Admin',
       lang: 'Sprache',
       addWorkgroups: 'Arbeitsgruppen hinzufügen',
       more: 'weitere',
@@ -291,6 +294,9 @@ export const deAppTranslations = {
       addUsers: 'Benutzer hinzufügen',
     },
   },
+  paginator: {
+    itemsPerPage: 'Elemente pro Seite',
+  },
   disclaimer: {
     title: 'Nutzungsbedingungen',
     subtitle: 'Haftung',

diff --git a/apps/client-asset-sg/src/app/i18n/en.ts b/apps/client-asset-sg/src/app/i18n/en.ts
@@ -266,6 +266,8 @@ export const enAppTranslations: AppTranslations = {
     name: 'Name',
     role: 'Role',
     actions: 'Actions',
+    firstName: 'First name',
+    lastName: 'Last name',
     email: 'Email',
     back: 'Back',
     languages: {
@@ -276,6 +278,7 @@ export const enAppTranslations: AppTranslations = {
     },
     userPage: {
       admin: 'Admin',
+      noAdmin: 'No admin',
       lang: 'Language',
       addWorkgroups: 'Add workgroups',
       more: 'more',
@@ -292,6 +295,9 @@ export const enAppTranslations: AppTranslations = {
       addUsers: 'Add users',
     },
   },
+  paginator: {
+    itemsPerPage: 'Items per page',
+  },
   disclaimer: {
     title: 'Terms of service',
     subtitle: 'Limitation of liability',

diff --git a/apps/client-asset-sg/src/app/i18n/fr.ts b/apps/client-asset-sg/src/app/i18n/fr.ts
@@ -267,6 +267,8 @@ export const frAppTranslations: AppTranslations = {
     name: 'Nom',
     role: 'Rôle',
     actions: 'Actions',
+    firstName: 'Prénom',
+    lastName: 'Nom de famille',
     email: 'E-mail',
     back: 'Retour',
     languages: {
@@ -277,6 +279,7 @@ export const frAppTranslations: AppTranslations = {
     },
     userPage: {
       admin: 'Admin',
+      noAdmin: "Pas d'admin",
       lang: 'Langue',
       addWorkgroups: 'Ajouter des groupes de travail',
       more: 'en plus',
@@ -293,6 +296,9 @@ export const frAppTranslations: AppTranslations = {
       addUsers: 'Ajouter des utilisateurs',
     },
   },
+  paginator: {
+    itemsPerPage: 'Éléments par page',
+  },
   disclaimer: {
     title: "Conditions d'utilisation",
     subtitle: 'Responsabilité',

diff --git a/apps/client-asset-sg/src/app/i18n/it.ts b/apps/client-asset-sg/src/app/i18n/it.ts
@@ -266,6 +266,8 @@ export const itAppTranslations: AppTranslations = {
     name: 'IT Name',
     role: 'IT Rolle',
     actions: 'IT Aktionen',
+    firstName: 'IT Vorname',
+    lastName: 'IT Nachname',
     email: 'IT E-Mail',
     back: 'IT Zurück',
     languages: {
@@ -276,6 +278,7 @@ export const itAppTranslations: AppTranslations = {
     },
     userPage: {
       admin: 'IT Admin',
+      noAdmin: 'IT Kein Admin',
       lang: 'IT Sprache',
       addWorkgroups: 'IT Arbeitsgruppen hinzufügen',
       more: 'IT weitere',
@@ -292,6 +295,9 @@ export const itAppTranslations: AppTranslations = {
       addUsers: 'IT Benutzer hinzufügen',
     },
   },
+  paginator: {
+    itemsPerPage: 'IT Elemente pro Seite',
+  },
   disclaimer: {
     title: 'Condizioni di utilizzo',
     subtitle: 'Responsabilità',

diff --git a/apps/client-asset-sg/src/styles.scss b/apps/client-asset-sg/src/styles.scss
@@ -131,6 +131,47 @@ input {
   }
 }
 
+.table {
+  box-shadow: none;
+
+  .mat-mdc-row:hover .mat-mdc-cell {
+    background-color: variables.$grey-01;
+  }
+
+  .cell-tooltip {
+    font-size: 12px;
+  }
+
+  .table__header {
+    background-color: variables.$grey-03;
+    border-radius: 4px;
+    height: 44px;
+
+    th {
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 0.0025em;
+
+      &:first-of-type {
+        border-top-left-radius: 4px;
+      }
+
+      &:last-of-type {
+        border-top-right-radius: 4px;
+      }
+    }
+  }
+}
+
+mat-paginator {
+  box-shadow: 0px -4px 4px -5px;
+
+  .mat-mdc-paginator-icon {
+    fill: #828e9a;
+  }
+}
+
 .asset-sg-dialog {
   display: block;
   border-radius: 8px;

diff --git a/apps/client-asset-sg/src/theme.scss b/apps/client-asset-sg/src/theme.scss
@@ -3,7 +3,7 @@
 @use "@angular/material" as mat;
 @use "sass:map";
 
-$asset-sg-palette: map.set(mat.$m2-indigo-palette, 500, variables.$cyan-03);
+$asset-sg-palette: map.set(mat.$m2-indigo-palette, 500, variables.$cyan-09);
 
 $asset-sg-primary: mat.m2-define-palette($asset-sg-palette);
 $asset-sg-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

diff --git a/libs/admin/src/lib/admin.module.ts b/libs/admin/src/lib/admin.module.ts
@@ -6,13 +6,16 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatCard } from '@angular/material/card';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { MatChip, MatChipSet } from '@angular/material/chips';
 import { MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
   MatCell,
   MatCellDef,
@@ -30,8 +33,11 @@ import { MatTooltip } from '@angular/material/tooltip';
 import {
   AnchorComponent,
   ButtonComponent,
+  ChipComponent,
   DrawerComponent,
   DrawerPanelComponent,
+  FilterSelectorComponent,
+  SearchInputComponent,
   ViewChildMarker,
 } from '@asset-sg/client-shared';
 import { SvgIconComponent } from '@ngneat/svg-icon';
@@ -49,6 +55,7 @@ import { UserEditComponent } from './components/user-edit/user-edit.component';
 import { UsersComponent } from './components/users/users.component';
 import { WorkgroupEditComponent } from './components/workgroup-edit/workgroup-edit.component';
 import { WorkgroupsComponent } from './components/workgroups/workgroups.component';
+import { CustomPaginatorIntl } from './services/custom-paginator-intl';
 import { AdminEffects } from './state/admin.effects';
 import { adminReducer } from './state/admin.reducer';
 
@@ -61,6 +68,12 @@ import { adminReducer } from './state/admin.reducer';
     UserEditComponent,
     AddWorkgroupUserDialogComponent,
   ],
+  providers: [
+    {
+      provide: MatPaginatorIntl,
+      useClass: CustomPaginatorIntl,
+    },
+  ],
   imports: [
     CommonModule,
     AdminPageRoutingModule,
@@ -107,6 +120,14 @@ import { adminReducer } from './state/admin.reducer';
     MatCard,
     MatSlideToggle,
     IfModule,
+    MatPaginator,
+    SearchInputComponent,
+    FilterSelectorComponent,
+    MatChipSet,
+    MatChip,
+    MatSort,
+    MatSortHeader,
+    ChipComponent,
   ],
 })
 export class AdminModule {}
diff --git a/libs/admin/src/lib/components/admin-page/admin-page.component.html b/libs/admin/src/lib/components/admin-page/admin-page.component.html
@@ -1,21 +1,32 @@
 <mat-progress-bar *rxIf="isLoading$" mode="indeterminate" class="loading-bar" />
-<div class="admin-page">
+<div class="header" *rxLet="currentLang$; let currentLang">
+  <button asset-sg-primary (click)="navigateBack(currentLang)" class="back-button">
+    <svg-icon key="arrow-left" class="close" />
+  </button>
+  @if (isWorkgroupsPage) {
+  <h3>{{ (selectedWorkgroup$ | async)?.name }}</h3>
+  } @else if (isUsersPage) {
+  <h3>{{ (selectedUser$ | async)?.email }}</h3>
+  } @else {
+  <h3>{{ "menuBar.settings" | translate }}</h3>
+  }
+</div>
+<div class="main">
   @if (!isDetailPage) {
   <div class="navigation">
     <a routerLink="users" class="navigation__link" routerLinkActive="navigation__link--active">{{
       "admin.users" | translate
     }}</a>
-    <span> | </span>
     <a routerLink="workgroups" class="navigation__link" routerLinkActive="navigation__link--active">{{
       "admin.workgroups" | translate
     }}</a>
   </div>
-  } @else {
-  <div class="navigation" *rxLet="currentLang$; let currentLang">
-    <a [routerLink]="getBackPath(currentLang)" class="navigation__link pointer" translate>admin.back</a>
-  </div>
-  }
   <div class="content">
     <router-outlet></router-outlet>
   </div>
+  } @else {
+  <div>
+    <router-outlet></router-outlet>
+  </div>
+  }
 </div>