Merge pull request #927 from geonetwork/ME-adapt-display-sidebar

ME: Adapt styling of sidebar

apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html

@@ -1,5 +1,61 @@
-<div class="flex flex-col pt-9 px-5 gap-12 bg-neutral-100 h-full">
-  <div>
+<div class="flex h-full">
+  <div
+    class="h-full bg-black w-[50px] rounded-r-lg flex flex-col justify-between"
+  >
+    <div class="flex flex-col justify-between h-24">
+      <div class="flex justify-center items-center h-12">
+        <img src="assets/editor-logo.svg" alt="Editor logo" />
+      </div>
+      <div class="">
+        <div translate class="uppercase text-white rotate-[-0.25turn]">
+          editor.sidebar.menu.editor
+        </div>
+      </div>
+    </div>
+
+    <ng-container *ngIf="platformService.getMe() | async as user">
+      <div
+        *ngIf="user && user.name"
+        class="basis-1/12 mb-2 flex flex-col justify-center items-center"
+      >
+        <gn-ui-button
+          type="default"
+          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer"
+        >
+          <gn-ui-user-preview
+            [user]="user"
+            [avatarPlaceholder]="placeholder$ | async"
+            extraClass="w-10 h-10"
+          ></gn-ui-user-preview>
+        </gn-ui-button>
+        <gn-ui-button
+          type="default"
+          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer"
+        >
+          <img src="assets/system-shut.svg" alt="Log out" class="w-4 h-4" />
+        </gn-ui-button>
+      </div>
+    </ng-container>
+  </div>
+
+  <div class="flex flex-col pt-9 px-5 gap-10 bg-neutral-100 h-full grow">
+    <ng-container *ngIf="organisations$ | async as organisations">
+      <ng-container *ngIf="organisations[0]?.name">
+        <gn-ui-button
+          *ngIf="organisations[0].logoUrl?.href"
+          type="default"
+          class="flex flex-col gap-3 items-center gap-2"
+          [routerLink]="['/organizations', organisations[0].id]"
+        >
+          <img
+            [src]="organisations[0].logoUrl?.href"
+            alt="Organization logo"
+            class="w-12 h-12"
+          />
+          <span>{{ organisations[0].name }}</span>
+        </gn-ui-button>
+      </ng-container>
+    </ng-container>
     <md-editor-dashboard-menu></md-editor-dashboard-menu>
   </div>
 </div>

apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.spec.ts

@@ -6,11 +6,26 @@ import { ActivatedRoute } from '@angular/router'
 import { TranslateModule } from '@ngx-translate/core'
 import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
+import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
+import { AvatarServiceInterface } from '@geonetwork-ui/api/repository'
+import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 
 class RecordsRepositoryMock {
   getAllDrafts = jest.fn().mockReturnValue(of(DATASET_RECORDS))
 }
 
+class PlatformServiceMock {
+  getMe = jest.fn().mockReturnValue(of({ organisation: 'organisation' }))
+}
+
+class AvatarServiceInterfaceMock {
+  getPlaceholder = () => of('http://placeholder.com')
+}
+
+class OrganisationsServiceMock {
+  organisations$ = of([{ name: 'organisation' }])
+}
+
 describe('SidebarComponent', () => {
   let component: SidebarComponent
   let fixture: ComponentFixture<SidebarComponent>
@@ -27,6 +42,18 @@ describe('SidebarComponent', () => {
           provide: RecordsRepositoryInterface,
           useClass: RecordsRepositoryMock,
         },
+        {
+          provide: PlatformServiceInterface,
+          useClass: PlatformServiceMock,
+        },
+        {
+          provide: AvatarServiceInterface,
+          useClass: AvatarServiceInterfaceMock,
+        },
+        {
+          provide: OrganizationsServiceInterface,
+          useClass: OrganisationsServiceMock,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     })

apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts

@@ -1,14 +1,44 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { DashboardMenuComponent } from '../dashboard-menu/dashboard-menu.component'
+import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
+import { AvatarServiceInterface } from '@geonetwork-ui/api/repository'
+import { LetDirective } from '@ngrx/component'
+import { UiElementsModule } from '@geonetwork-ui/ui/elements'
+import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
+import { Observable, combineLatest } from 'rxjs'
+import { Organization } from '@geonetwork-ui/common/domain/model/record'
 
 @Component({
   selector: 'md-editor-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DashboardMenuComponent, CommonModule, TranslateModule],
+  imports: [
+    DashboardMenuComponent,
+    CommonModule,
+    TranslateModule,
+    LetDirective,
+    UiElementsModule,
+  ],
 })
-export class SidebarComponent {}
+export class SidebarComponent implements OnInit {
+  public placeholder$ = this.avatarService.getPlaceholder()
+  organisations$: Observable<Organization[]>
+
+  constructor(
+    public platformService: PlatformServiceInterface,
+    private avatarService: AvatarServiceInterface,
+    public organisationsService: OrganizationsServiceInterface
+  ) {}
+
+  ngOnInit(): void {
+    this.organisations$ = combineLatest(
+      this.organisationsService.organisations$,
+      this.platformService.getMe(),
+      (orgs, me) => orgs.filter((org) => org.name === me?.organisation)
+    )
+  }
+}

libs/ui/elements/src/lib/user-preview/user-preview.component.html

@@ -1,6 +1,6 @@
 <figure class="text-center">
   <div
-    class="w-12 h-12 border border-primary rounded-full capitalize"
+    class="w-10 h-10 border border-primary rounded-full capitalize"
     [matTooltip]="userFullName"
   >
     <gn-ui-avatar

translations/de.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "Als Entwurf gespeichert - Änderungen stehen aus",
   "editor.record.saveStatus.recordUpToDate": "Datensatz ist auf dem neuesten Stand",
   "editor.record.upToDate": "Dieser Datensatz ist auf dem neuesten Stand",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "Datensatz aus dem Datahub",
   "facets.block.title.OrgForResource": "Organisation",
   "facets.block.title.availableInServices": "Verfügbar für",

translations/en.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "Saved as draft - changes are pending",
   "editor.record.saveStatus.recordUpToDate": "Record is up to date",
   "editor.record.upToDate": "This record is up to date",
+  "editor.sidebar.menu.editor": "Editor",
   "externalviewer.dataset.unnamed": "Datahub layer",
   "facets.block.title.OrgForResource": "Organisation",
   "facets.block.title.availableInServices": "Available for",

translations/es.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "",
   "editor.record.saveStatus.recordUpToDate": "",
   "editor.record.upToDate": "",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "",
   "facets.block.title.availableInServices": "",

translations/fr.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "Brouillon enregistré - modifications en cours",
   "editor.record.saveStatus.recordUpToDate": "La fiche publiée est à jour",
   "editor.record.upToDate": "",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "Couche du datahub",
   "facets.block.title.OrgForResource": "Organisation",
   "facets.block.title.availableInServices": "Disponible pour",

translations/it.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "",
   "editor.record.saveStatus.recordUpToDate": "",
   "editor.record.upToDate": "",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "Layer del datahub",
   "facets.block.title.OrgForResource": "Organizzazione",
   "facets.block.title.availableInServices": "Disponibile per",

translations/nl.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "",
   "editor.record.saveStatus.recordUpToDate": "",
   "editor.record.upToDate": "",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "",
   "facets.block.title.availableInServices": "",

translations/pt.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "",
   "editor.record.saveStatus.recordUpToDate": "",
   "editor.record.upToDate": "",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "",
   "facets.block.title.availableInServices": "",

translations/sk.json

@@ -229,6 +229,7 @@
   "editor.record.saveStatus.draftWithChangesPending": "",
   "editor.record.saveStatus.recordUpToDate": "",
   "editor.record.upToDate": "",
+  "editor.sidebar.menu.editor": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "Organizácia",
   "facets.block.title.availableInServices": "Dostupné pre",