Merge pull request #899 from geonetwork/ME-rework-sidebar

chore(ME): Rework sidebar and routing

apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts

@@ -2,7 +2,7 @@ describe('dashboard', () => {
   let pageOne
   describe('pagination', () => {
     it('should display different results on click on arrow', () => {
-      cy.visit('/records/search')
+      cy.visit('/catalog/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .first()
@@ -13,7 +13,7 @@ describe('dashboard', () => {
     })
     //TODO remove skip when dump contains more than 15 records
     it.skip('should display different results on click on specific page and change url', () => {
-      cy.visit('/records/search?_page=2')
+      cy.visit('/catalog/search?_page=2')
       cy.get('gn-ui-pagination-buttons').find('gn-ui-button').eq(1).click()
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
@@ -36,8 +36,8 @@ describe('dashboard', () => {
   })
 
   describe('sorting', () => {
-    it('should order the result list on click', () => {
-      cy.visit('/records/search')
+    it.only('should order the result list on click', () => {
+      cy.visit('/catalog/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .eq(1)
@@ -65,7 +65,7 @@ describe('dashboard', () => {
 
   describe('checkboxes', () => {
     it('should show the correct amount of selected records when they are selected', () => {
-      cy.visit('/records/search')
+      cy.visit('/catalog/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .get('gn-ui-checkbox')
@@ -75,7 +75,7 @@ describe('dashboard', () => {
     })
 
     it('should show nothing when none are selected', () => {
-      cy.visit('/records/search')
+      cy.visit('/catalog/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .get('gn-ui-checkbox')
@@ -87,7 +87,7 @@ describe('dashboard', () => {
     })
 
     it('should select all records when the "select all" checkbox is checked', () => {
-      cy.visit('/records/search')
+      cy.visit('/catalog/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .get('gn-ui-checkbox')

apps/metadata-editor-e2e/src/e2e/my-org.cy.ts

@@ -5,8 +5,7 @@ describe('my-org', () => {
       method: 'GET',
       url: '/geonetwork/srv/api/userselections/0/101',
     }).as('dataGetFirst')
-    cy.visit(`/records/my-org`)
-    cy.get('md-editor-dashboard-menu').find('a').first().click()
+    cy.visit(`/catalog/my-org`)
     cy.wait('@dataGetFirst').its('response.statusCode').should('equal', 200)
   })
   describe('my-org display', () => {
@@ -31,8 +30,7 @@ describe('my-org', () => {
         })
     })
     it('should access the user list page and show my-org users', () => {
-      cy.visit(`/records/my-org`)
-      cy.get('md-editor-dashboard-menu').find('a').first().click()
+      cy.visit(`/catalog/my-org`)
       cy.get('[data-cy=link-to-users]').click()
       cy.url().should('include', '/users/my-org')
       cy.get('gn-ui-interactive-table .contents').should('have.length.above', 1)

apps/metadata-editor/src/app/app.routes.ts

@@ -3,18 +3,18 @@ import { DashboardPageComponent } from './dashboard/dashboard-page.component'
 import { SignInPageComponent } from './sign-in/sign-in-page.component'
 import { EditPageComponent } from './edit/edit-page.component'
 import { EditRecordResolver } from './edit-record.resolver'
-import { MyOrgRecordsComponent } from './records/my-org-records/my-org-records.component'
 import { MyRecordsComponent } from './records/my-records/my-records.component'
 import { MyDraftComponent } from './records/my-draft/my-draft.component'
 import { MyLibraryComponent } from './records/my-library/my-library.component'
 import { SearchRecordsComponent } from './records/search-records/search-records-list.component'
 import { MyOrgUsersComponent } from './my-org-users/my-org-users.component'
+import { MyOrgRecordsComponent } from './records/my-org-records/my-org-records.component'
 import { NewRecordResolver } from './new-record.resolver'
 
 export const appRoutes: Route[] = [
-  { path: '', component: DashboardPageComponent, pathMatch: 'prefix' },
+  { path: '', redirectTo: 'catalog/search', pathMatch: 'prefix' },
   {
-    path: 'records',
+    path: 'catalog',
     component: DashboardPageComponent,
     outlet: 'primary',
     children: [
@@ -23,12 +23,45 @@ export const appRoutes: Route[] = [
         redirectTo: 'search',
         pathMatch: 'prefix',
       },
+      {
+        path: 'discussion',
+        component: SearchRecordsComponent,
+        pathMatch: 'prefix',
+      },
+      {
+        path: 'calendar',
+        component: SearchRecordsComponent,
+        pathMatch: 'prefix',
+      },
+      {
+        path: 'contacts',
+        component: SearchRecordsComponent,
+        pathMatch: 'prefix',
+      },
+      {
+        path: 'thesaurus',
+        component: SearchRecordsComponent,
+        pathMatch: 'prefix',
+      },
+      {
+        path: 'search',
+        title: 'Search Records',
+        component: SearchRecordsComponent,
+        pathMatch: 'prefix',
+      },
       {
         path: 'my-org',
         title: 'My Organisation',
         component: MyOrgRecordsComponent,
-        pathMatch: 'prefix',
       },
+    ],
+  },
+  {
+    path: 'my-space',
+    component: DashboardPageComponent,
+    outlet: 'primary',
+    title: 'My space',
+    children: [
       {
         path: 'my-records',
         title: 'My Records',
@@ -42,17 +75,11 @@ export const appRoutes: Route[] = [
         pathMatch: 'prefix',
       },
       {
-        path: 'my-library',
-        title: 'My Library',
+        path: 'templates',
+        title: 'Templates',
         component: MyLibraryComponent,
         pathMatch: 'prefix',
       },
-      {
-        path: 'search',
-        title: 'Search Records',
-        component: SearchRecordsComponent,
-        pathMatch: 'prefix',
-      },
     ],
   },
   {

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

@@ -1,50 +1,84 @@
-<div class="flex flex-col gap-3">
-  <a
-    class="menu-item"
-    routerLink="/records/my-org"
-    routerLinkActive="btn-active"
-    #rlaMyOrg="routerLinkActive"
-  >
-    <mat-icon class="material-symbols-outlined">home</mat-icon>
-    <span translate="">dashboard.records.myOrg</span>
-  </a>
+<div class="flex flex-col gap-4">
+  <div class="flex flex-col">
+    <div class="menu-title" translate="">dashboard.labels.catalog</div>
+    <a
+      class="menu-item"
+      routerLink="/catalog/search"
+      routerLinkActive="btn-active"
+      #rlaAll="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">newsmode</mat-icon>
+      <span translate="">dashboard.catalog.allRecords</span>
+    </a>
+    <a
+      class="menu-item"
+      routerLink="/catalog/discussion"
+      routerLinkActive="btn-active"
+      #rlaDiscussion="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">chat_bubble</mat-icon>
+      <span translate="">dashboard.catalog.discussion</span>
+    </a>
+    <a
+      class="menu-item"
+      routerLink="/catalog/calendar"
+      routerLinkActive="btn-active"
+      #rlaCalendar="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">calendar_today</mat-icon>
+      <span translate="">dashboard.catalog.calendar</span>
+    </a>
+    <a
+      class="menu-item"
+      routerLink="/catalog/contacts"
+      routerLinkActive="btn-active"
+      #rlaContacts="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">person</mat-icon>
+      <span translate="">dashboard.catalog.contacts</span>
+    </a>
+    <a
+      class="menu-item"
+      routerLink="/catalog/thesaurus"
+      routerLinkActive="btn-active"
+      #rlaThesaurus="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">label</mat-icon>
+      <span translate="">dashboard.catalog.thesaurus</span>
+    </a>
+  </div>
 
-  <a
-    class="menu-item"
-    routerLink="/records/search"
-    routerLinkActive="btn-active"
-    #rlaAll="routerLinkActive"
-  >
-    <mat-icon class="material-symbols-outlined">work_outline</mat-icon>
-    <span translate="">dashboard.records.all</span>
-  </a>
-
-  <div class="menu-title" translate="">dashboard.labels.mySpace</div>
-  <a
-    class="menu-item"
-    routerLink="/records/my-records"
-    routerLinkActive="btn-active"
-    #rlaMyRecords="routerLinkActive"
-  >
-    <mat-icon class="material-symbols-outlined">post_add</mat-icon>
-    <span translate="">dashboard.records.myRecords</span>
-  </a>
-  <a
-    class="menu-item"
-    routerLink="/records/my-draft"
-    routerLinkActive="btn-active"
-    #rlaMyDraft="routerLinkActive"
-  >
-    <mat-icon class="material-symbols-outlined">edit_note</mat-icon>
-    <span translate="">dashboard.records.myDraft</span>
-  </a>
-  <a
-    class="menu-item"
-    routerLink="/records/my-library"
-    routerLinkActive="btn-active"
-    #rlaMyLibrary="routerLinkActive"
-  >
-    <mat-icon class="material-symbols-outlined">bookmark_border</mat-icon>
-    <span translate="">dashboard.records.myLibrary</span>
-  </a>
+  <div class="flex flex-col">
+    <div class="menu-title" translate="">dashboard.labels.mySpace</div>
+    <a
+      class="menu-item"
+      routerLink="/my-space/my-records"
+      routerLinkActive="btn-active"
+      #rlaMyRecords="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">post_add</mat-icon>
+      <span translate="">dashboard.records.myRecords</span>
+    </a>
+    <a
+      class="menu-item"
+      routerLink="/my-space/my-draft"
+      routerLinkActive="btn-active"
+      #rlaMyDraft="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">edit_note</mat-icon>
+      <span translate="">dashboard.records.myDraft</span>
+      <gn-ui-badge [style.--gn-ui-badge-rounded]="'100px'">{{
+        draftsCount$ | async
+      }}</gn-ui-badge>
+    </a>
+    <a
+      class="menu-item"
+      routerLink="/my-space/templates"
+      routerLinkActive="btn-active"
+      #rlaMyLibrary="routerLinkActive"
+    >
+      <mat-icon class="material-symbols-outlined">lightbulb</mat-icon>
+      <span translate="">dashboard.records.templates</span>
+    </a>
+  </div>
 </div>

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

@@ -4,6 +4,12 @@ import { ActivatedRoute } from '@angular/router'
 import { TranslateModule } from '@ngx-translate/core'
 import { of } from 'rxjs'
 import { DashboardMenuComponent } from './dashboard-menu.component'
+import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
+
+class RecordsRepositoryMock {
+  getAllDrafts = jest.fn().mockReturnValue(of(DATASET_RECORDS))
+}
 
 describe('DashboardMenuComponent', () => {
   let component: DashboardMenuComponent
@@ -17,6 +23,10 @@ describe('DashboardMenuComponent', () => {
           provide: ActivatedRoute,
           useValue: { params: of({ id: 1 }) },
         },
+        {
+          provide: RecordsRepositoryInterface,
+          useClass: RecordsRepositoryMock,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents()

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

@@ -3,13 +3,28 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { RouterModule } from '@angular/router'
 import { TranslateModule } from '@ngx-translate/core'
+import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
+import { map } from 'rxjs/operators'
+import { BadgeComponent } from '@geonetwork-ui/ui/inputs'
 
 @Component({
   selector: 'md-editor-dashboard-menu',
   templateUrl: './dashboard-menu.component.html',
   styleUrls: ['./dashboard-menu.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, RouterModule, MatIconModule, TranslateModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatIconModule,
+    TranslateModule,
+    BadgeComponent,
+  ],
 })
-export class DashboardMenuComponent {}
+export class DashboardMenuComponent {
+  draftsCount$ = this.recordsRepository
+    .getAllDrafts()
+    .pipe(map((drafts) => drafts.length))
+
+  constructor(private recordsRepository: RecordsRepositoryInterface) {}
+}

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

@@ -1,4 +1,4 @@
-<div class="flex flex-col pt-9 px-5 gap-12">
+<div class="flex flex-col pt-9 px-5 gap-12 bg-neutral-100 h-full">
   <div>
     <md-editor-dashboard-menu></md-editor-dashboard-menu>
   </div>

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

@@ -4,6 +4,12 @@ import { of } from 'rxjs'
 import { SidebarComponent } from './sidebar.component'
 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'
+
+class RecordsRepositoryMock {
+  getAllDrafts = jest.fn().mockReturnValue(of(DATASET_RECORDS))
+}
 
 describe('SidebarComponent', () => {
   let component: SidebarComponent
@@ -17,6 +23,10 @@ describe('SidebarComponent', () => {
           provide: ActivatedRoute,
           useValue: { params: of({ id: 1 }) },
         },
+        {
+          provide: RecordsRepositoryInterface,
+          useClass: RecordsRepositoryMock,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     })