fix: add tooltip on non accessible list

apps/dsp-app/src/app/project/data-models/data-models.component.html

@@ -10,50 +10,37 @@
     </mat-icon>
   </div>
   <div *ngIf="isAdmin$ | async" class="action-buttons">
-    <button color="primary" mat-raised-button class="create" (click)="open('add-ontology')">
+    <a color="primary" mat-raised-button class="create" [routerLink]="['..', RouteConstants.addOntology]">
       <mat-icon class="v-align-middle">add_circle</mat-icon>
       <span class="v-align-middle">Create New</span>
-    </button>
-    <button color="primary" mat-stroked-button class="docs" (click)="open('docs')">
+    </a>
+    <a
+      color="primary"
+      mat-stroked-button
+      class="docs"
+      href="https://docs.dasch.swiss/latest/DSP-APP/user-guide/project/#data-model"
+      target="_blank">
       Read Documentation About How To Create Data Models
       <mat-icon>chevron_right</mat-icon>
-    </button>
+    </a>
   </div>
   <div *ngIf="ontologiesMetadata$ | async" class="projectOntos">
     <div class="list" [class.top-padding]="isAdmin$ | async">
-      <ng-container *ngIf="(isLoggedIn$ | async) === true">
-        <div
-          class="list-item ontos"
-          *ngFor="let onto of ontologiesMetadata$ | async; trackBy: trackByOntologyMetaFn"
-          (click)="open('ontology', onto.id)">
-          <mat-icon class="icon-prefix">bubble_chart</mat-icon>
-          <p
-            class="label"
-            matTooltip="You must be logged in to view data models"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="true">
-            {{onto.label}}
-          </p>
-          <span class="fill-remaining-space"></span>
-          <mat-icon class="icon-suffix">chevron_right</mat-icon>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="(isLoggedIn$ | async) === false">
-        <div
-          class="list-item ontos no-click"
-          *ngFor="let onto of ontologiesMetadata$ | async; trackBy: trackByOntologyMetaFn">
-          <mat-icon class="icon-prefix">bubble_chart</mat-icon>
-          <p
-            class="label"
-            matTooltip="You must be logged in to view data models"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="false">
-            {{onto.label}}
-          </p>
-          <span class="fill-remaining-space"></span>
-          <mat-icon class="icon-suffix">chevron_right</mat-icon>
-        </div>
-      </ng-container>
+      <div
+        class="list-item ontos"
+        *ngFor="let onto of ontologiesMetadata$ | async; trackBy: trackByOntologyMetaFn"
+        (click)="navigateToOntology(onto.id)">
+        <mat-icon class="icon-prefix">bubble_chart</mat-icon>
+        <p
+          class="label"
+          matTooltip="You must be logged in to view data models"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="(isLoggedIn$ | async)">
+          {{onto.label}}
+        </p>
+        <span class="fill-remaining-space"></span>
+        <mat-icon class="icon-suffix">chevron_right</mat-icon>
+      </div>
     </div>
   </div>
   <div class="header">
@@ -67,19 +54,25 @@
     </mat-icon>
   </div>
   <div *ngIf="isAdmin$ | async" class="action-buttons">
-    <button color="primary" mat-raised-button class="create" (click)="open('add-list')">
+    <a color="primary" mat-raised-button class="create" [routerLink]="['..', RouteConstants.addList]">
       <mat-icon class="v-align-middle">add_circle</mat-icon>
       <span class="v-align-middle">Create New</span>
-    </button>
+    </a>
   </div>
   <div *ngIf="(listsInProject$ | async)?.length > 0" class="projectLists">
     <div class="list" [class.top-padding]="isAdmin$ | async">
       <div
         class="list-item"
         *ngFor="let list of (listsInProject$ | async); trackBy: trackByFn"
-        (click)="open('list', list.id)">
+        (click)="navigateToList(list.id)">
         <mat-icon class="icon-prefix">list</mat-icon>
-        <p class="label">{{list.labels | appStringifyStringLiteral}}</p>
+        <p
+          class="label"
+          matTooltip="You must be logged in to view data models"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="(isLoggedIn$ | async)">
+          {{list.labels | appStringifyStringLiteral}}
+        </p>
         <span class="fill-remaining-space"></span>
         <mat-icon class="icon-suffix">chevron_right</mat-icon>
       </div>

apps/dsp-app/src/app/project/data-models/data-models.component.ts

@@ -10,21 +10,14 @@
 import { map } from 'rxjs/operators';
 import { ProjectBase } from '../project-base';
 
-// the routes available for navigation
-type DataModelRoute =
-  | typeof RouteConstants.ontology
-  | typeof RouteConstants.addOntology
-  | typeof RouteConstants.list
-  | typeof RouteConstants.addList
-  | 'docs';
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-data-models',
   templateUrl: './data-models.component.html',
   styleUrls: ['./data-models.component.scss'],
 })
 export class DataModelsComponent extends ProjectBase implements OnInit {
+  RouteConstants = RouteConstants;
   get ontologiesMetadata$(): Observable<OntologyMetadata[]> {
     const uuid = this._route.parent.snapshot.params.uuid;
     const iri = `${this._appInit.dspAppConfig.iriBase}/projects/${uuid}`;
@@ -68,32 +61,30 @@
 
   trackByOntologyMetaFn = (index: number, item: OntologyMetadata) => `${index}-${item.id}`;
 
-  /**
-   * handles routing to the correct path
-   * @param route path to route to
-   * @param id optional ontology id or list id
-   */
-  open(route: DataModelRoute, id?: string) {
-    if (route === RouteConstants.ontology && id) {
-      // get name of ontology
-      const ontoName = OntologyService.getOntologyName(id);
-      this._router.navigate([route, encodeURIComponent(ontoName), RouteConstants.editor, RouteConstants.classes], {
-        relativeTo: this._route.parent,
-      });
+  navigateToList(id: string) {
+    if (!this._store.selectSnapshot(UserSelectors.isLoggedIn)) {
       return;
     }
-    if (route === RouteConstants.list && id) {
-      const listName = id.split('/').pop();
-      // route to the list editor
-      this._router.navigate([route, encodeURIComponent(listName)], {
-        relativeTo: this._route.parent,
-      });
-    } else if (route === 'docs') {
-      // route to the external docs
-      window.open('https://docs.dasch.swiss/latest/DSP-APP/user-guide/project/#data-model', '_blank');
-    } else {
-      // default routing
-      this._router.navigate([route], { relativeTo: this._route.parent });
+
+    const listName = id.split('/').pop();
+    this._router.navigate([RouteConstants.list, encodeURIComponent(listName)], {
+      relativeTo: this._route.parent,
+    });
+  }
+
+  navigateToOntology(id: string) {
+    if (!this._store.selectSnapshot(UserSelectors.isLoggedIn)) {
+      return;
     }
+
+    const ontoName = OntologyService.getOntologyName(id);
+    this._router.navigate(
+      [RouteConstants.ontology, encodeURIComponent(ontoName), RouteConstants.editor, RouteConstants.classes],
+      {
+        relativeTo: this._route.parent,
+      }
+    );
   }
+
+  protected readonly RouteConstants = RouteConstants;
 }