Merge pull request #995 from geonetwork/ME/disable-buttons

[Editor]: Disable non-implemented buttons
geonetwork · Sep 19, 2024 · 66a3379 · 66a3379
2 parents 4992149 + 0512152
commit 66a3379
Show file tree

Hide file tree

Showing 18 changed files with 81 additions and 24 deletions.
diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html b/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
@@ -11,37 +11,41 @@
       <span translate="">dashboard.catalog.allRecords</span>
     </a>
     <a
-      class="menu-item"
-      routerLink="/catalog/discussion"
+      class="menu-item btn-inactive"
+      [routerLink]="activeLink ? '/catalog/discussion' : null"
       routerLinkActive="btn-active"
       #rlaDiscussion="routerLinkActive"
+      [title]="'editor.temporary.disabled' | translate"
     >
       <mat-icon class="material-symbols-outlined">chat_bubble</mat-icon>
       <span translate="">dashboard.catalog.discussion</span>
     </a>
     <a
-      class="menu-item"
-      routerLink="/catalog/calendar"
+      class="menu-item btn-inactive"
+      [routerLink]="activeLink ? '/catalog/calendar' : null"
       routerLinkActive="btn-active"
       #rlaCalendar="routerLinkActive"
+      [title]="'editor.temporary.disabled' | translate"
     >
       <mat-icon class="material-symbols-outlined">calendar_today</mat-icon>
       <span translate="">dashboard.catalog.calendar</span>
     </a>
     <a
-      class="menu-item"
-      routerLink="/catalog/contacts"
+      class="menu-item btn-inactive"
+      [routerLink]="activeLink ? '/catalog/contacts' : null"
       routerLinkActive="btn-active"
       #rlaContacts="routerLinkActive"
+      [title]="'editor.temporary.disabled' | translate"
     >
       <mat-icon class="material-symbols-outlined">person</mat-icon>
       <span translate="">dashboard.catalog.contacts</span>
     </a>
     <a
-      class="menu-item"
-      routerLink="/catalog/thesaurus"
+      class="menu-item btn-inactive"
+      [routerLink]="activeLink ? '/catalog/thesaurus' : null"
       routerLinkActive="btn-active"
       #rlaThesaurus="routerLinkActive"
+      [title]="'editor.temporary.disabled' | translate"
     >
       <mat-icon class="material-symbols-outlined">label</mat-icon>
       <span translate="">dashboard.catalog.thesaurus</span>
@@ -74,10 +78,11 @@
       >
     </a>
     <a
-      class="menu-item"
-      routerLink="/my-space/templates"
+      class="menu-item btn-inactive"
+      [routerLink]="activeLink ? '/my-space/templates' : null"
       routerLinkActive="btn-active"
       #rlaMyLibrary="routerLinkActive"
+      [title]="'editor.temporary.disabled' | translate"
     >
       <mat-icon class="material-symbols-outlined">lightbulb</mat-icon>
       <span translate="">dashboard.records.templates</span>

diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.ts b/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.ts
@@ -27,6 +27,7 @@ export class DashboardMenuComponent {
     switchMap(() => this.recordsRepository.getAllDrafts()),
     map((drafts) => drafts.length)
   )
+  activeLink = false
 
   constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }
diff --git a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html
@@ -3,18 +3,26 @@
     <gn-ui-fuzzy-search></gn-ui-fuzzy-search>
   </div>
   <div class="flex gap-5 items-center">
-    <button>
-      <mat-icon class="icon-btn material-symbols-outlined"
+    <button [title]="'editor.temporary.disabled' | translate" disabled>
+      <mat-icon
+        [ngClass]="activeBtn ? 'icon-btn' : 'text-slate-400'"
+        class="material-symbols-outlined"
         >notifications</mat-icon
       >
     </button>
-    <button>
-      <mat-icon class="icon-btn material-symbols-outlined"
+    <button [title]="'editor.temporary.disabled' | translate" disabled>
+      <mat-icon
+        [ngClass]="activeBtn ? 'icon-btn' : 'text-slate-400'"
+        class="material-symbols-outlined"
         >speaker_notes</mat-icon
       >
     </button>
-    <button>
-      <mat-icon class="icon-btn material-symbols-outlined">settings</mat-icon>
+    <button [title]="'editor.temporary.disabled' | translate" disabled>
+      <mat-icon
+        [ngClass]="activeBtn ? 'icon-btn' : 'text-slate-400'"
+        class="material-symbols-outlined"
+        >settings</mat-icon
+      >
     </button>
     <ng-container *ngrxLet="platformService.getMe() as user">
       <gn-ui-user-preview

diff --git a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.spec.ts b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.spec.ts
@@ -31,7 +31,7 @@ describe('SearchHeaderComponent', () => {
         SearchHeaderComponent,
         EffectsModule.forRoot(),
         StoreModule.forRoot({}),
-        TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),
+        TranslateModule.forRoot(),
       ],
       providers: [
         {
@@ -47,14 +47,15 @@ describe('SearchHeaderComponent', () => {
       .overrideComponent(SearchHeaderComponent, {
         set: {
           changeDetection: ChangeDetectionStrategy.Default,
-          imports: [],
+          imports: [TranslateModule],
           schemas: [CUSTOM_ELEMENTS_SCHEMA],
         },
       })
       .compileComponents()
 
     fixture = TestBed.createComponent(SearchHeaderComponent)
     component = fixture.componentInstance
+    component.activeBtn = true
     fixture.detectChanges()
   })
 

diff --git a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.ts b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.ts
@@ -6,6 +6,7 @@ import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { AvatarServiceInterface } from '@geonetwork-ui/api/repository'
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'md-editor-search-header',
@@ -19,10 +20,12 @@ import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.
     CommonModule,
     LetDirective,
     UiElementsModule,
+    TranslateModule,
   ],
 })
 export class SearchHeaderComponent {
   public placeholder$ = this.avatarService.getPlaceholder()
+  activeBtn = false
 
   constructor(
     public platformService: PlatformServiceInterface,

diff --git a/apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html b/apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html
@@ -1,11 +1,23 @@
 <div class="flex flex-row items-center w-full border-b-[1px]">
-  <gn-ui-button type="light">
+  <gn-ui-button
+    type="light"
+    disabled="true"
+    [title]="'editor.temporary.disabled' | translate"
+  >
     <mat-icon class="material-symbols-outlined">side_navigation</mat-icon>
   </gn-ui-button>
-  <gn-ui-button type="light">
+  <gn-ui-button
+    type="light"
+    disabled="true"
+    [title]="'editor.temporary.disabled' | translate"
+  >
     <mat-icon class="material-symbols-outlined">lightbulb</mat-icon>
   </gn-ui-button>
-  <gn-ui-button type="light">
+  <gn-ui-button
+    type="light"
+    disabled="true"
+    [title]="'editor.temporary.disabled' | translate"
+  >
     <mat-icon class="material-symbols-outlined">download</mat-icon>
   </gn-ui-button>
   <ng-container *ngrxLet="saveStatus$ as saveStatus">
@@ -53,10 +65,18 @@
       <span translate>editor.record.saveStatus.draftWithChangesPending</span>
     </ng-container>
   </div>
-  <gn-ui-button type="light">
+  <gn-ui-button
+    type="light"
+    disabled="true"
+    [title]="'editor.temporary.disabled' | translate"
+  >
     <mat-icon class="material-symbols-outlined">help</mat-icon>
   </gn-ui-button>
-  <gn-ui-button type="light">
+  <gn-ui-button
+    type="light"
+    disabled="true"
+    [title]="'editor.temporary.disabled' | translate"
+  >
     <mat-icon class="material-symbols-outlined">verified</mat-icon>
   </gn-ui-button>
   <md-editor-publish-button></md-editor-publish-button>

diff --git a/apps/metadata-editor/src/styles.css b/apps/metadata-editor/src/styles.css
@@ -18,6 +18,9 @@ body {
 .btn-active {
   @apply bg-neutral-200 text-blue-600 font-bold;
 }
+.btn-inactive {
+  @apply text-slate-400 cursor-default;
+}
 .menu-title {
   @apply text-2xl px-9 py-3;
 }

diff --git a/libs/feature/editor/src/lib/components/import-record/import-record.component.html b/libs/feature/editor/src/lib/components/import-record/import-record.component.html
@@ -11,6 +11,10 @@
             type="light"
             extraClass="flex flex-row items-center gap-2 w-full justify-start"
             (buttonClick)="menuItem.action()"
+            [disabled]="menuItem.disabled"
+            [title]="
+              (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate
+            "
             ><mat-icon class="material-symbols-outlined">
               {{ menuItem.icon }} </mat-icon
             ><span>{{ menuItem.label }}</span></gn-ui-button

diff --git a/libs/feature/editor/src/lib/components/import-record/import-record.component.spec.ts b/libs/feature/editor/src/lib/components/import-record/import-record.component.spec.ts
@@ -39,6 +39,7 @@ describe('ImportRecordComponent', () => {
       .overrideComponent(ImportRecordComponent, {
         set: {
           changeDetection: ChangeDetectionStrategy.Default,
+          imports: [TranslateModule],
         },
       })
       .compileComponents()

diff --git a/libs/feature/editor/src/lib/components/import-record/import-record.component.ts b/libs/feature/editor/src/lib/components/import-record/import-record.component.ts
@@ -9,7 +9,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, UrlInputComponent } from '@geonetwork-ui/ui/inputs'
 import { ThumbnailComponent } from '@geonetwork-ui/ui/elements'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { NotificationsService } from '@geonetwork-ui/feature/notifications'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
 import { Router } from '@angular/router'
@@ -19,6 +19,7 @@ interface ImportMenuItems {
   icon: string
   action: () => any
   dataTest: string
+  disabled?: boolean
 }
 
 type ImportMenuPage = 'mainMenu' | 'importExternalFile'
@@ -35,6 +36,7 @@ type ImportMenuPage = 'mainMenu' | 'importExternalFile'
     ButtonComponent,
     ThumbnailComponent,
     UrlInputComponent,
+    TranslateModule,
   ],
 })
 export class ImportRecordComponent {
@@ -46,6 +48,7 @@ export class ImportRecordComponent {
       icon: 'highlight',
       action: () => null,
       dataTest: 'useAModelButton',
+      disabled: true,
     },
     {
       label: this.translateService.instant(

diff --git a/translations/de.json b/translations/de.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "",
   "editor.record.upToDate": "Dieser Datensatz ist auf dem neuesten Stand",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "",
   "externalviewer.dataset.unnamed": "Datensatz aus dem Datahub",
   "facets.block.title.OrgForResource": "Organisation",
   "facets.block.title.availableInServices": "Verfügbar für",

diff --git a/translations/en.json b/translations/en.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "Clicking this button will cancel the pending changes on this record.",
   "editor.record.upToDate": "This record is up to date",
   "editor.sidebar.menu.editor": "Editor",
+  "editor.temporary.disabled": "Not implemented yet",
   "externalviewer.dataset.unnamed": "Datahub layer",
   "facets.block.title.OrgForResource": "Organisation",
   "facets.block.title.availableInServices": "Available for",

diff --git a/translations/es.json b/translations/es.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "",
   "editor.record.upToDate": "",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "",
   "facets.block.title.availableInServices": "",

diff --git a/translations/fr.json b/translations/fr.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "Cliquer sur ce bouton pour annuler les modifications apportées à cette fiche",
   "editor.record.upToDate": "",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "Pas encore implémenté",
   "externalviewer.dataset.unnamed": "Couche du datahub",
   "facets.block.title.OrgForResource": "Organisation",
   "facets.block.title.availableInServices": "Disponible pour",

diff --git a/translations/it.json b/translations/it.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "",
   "editor.record.upToDate": "",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "",
   "externalviewer.dataset.unnamed": "Layer del datahub",
   "facets.block.title.OrgForResource": "Organizzazione",
   "facets.block.title.availableInServices": "Disponibile per",

diff --git a/translations/nl.json b/translations/nl.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "",
   "editor.record.upToDate": "",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "",
   "facets.block.title.availableInServices": "",

diff --git a/translations/pt.json b/translations/pt.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "",
   "editor.record.upToDate": "",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "",
   "facets.block.title.availableInServices": "",

diff --git a/translations/sk.json b/translations/sk.json
@@ -286,6 +286,7 @@
   "editor.record.undo.tooltip.enabled": "",
   "editor.record.upToDate": "",
   "editor.sidebar.menu.editor": "",
+  "editor.temporary.disabled": "",
   "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "Organizácia",
   "facets.block.title.availableInServices": "Dostupné pre",