Skip to content

Commit

Permalink
fix: add tooltip on non accessible list (#1345)
Browse files Browse the repository at this point in the history 
Co-authored-by: Irmantas Kaukas <irmastnt@gmail.com>
  • Loading branch information
@derschnee68 @irmastnt
derschnee68 and irmastnt committed Jan 16, 2024
1 parent 41d3bb0 commit a96f40b
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 73 deletions.
75 changes: 34 additions & 41 deletions apps/dsp-app/src/app/project/data-models/data-models.component.html
View file
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
53 changes: 21 additions & 32 deletions apps/dsp-app/src/app/project/data-models/data-models.component.ts
View file
Expand Up @@ -10,21 +10,14 @@ import { Observable, of } from 'rxjs';
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 {
protected readonly RouteConstants = RouteConstants;
get ontologiesMetadata$(): Observable<OntologyMetadata[]> {
const uuid = this._route.parent.snapshot.params.uuid;
const iri = `${this._appInit.dspAppConfig.iriBase}/projects/${uuid}`;
Expand Down Expand Up @@ -68,32 +61,28 @@ export class DataModelsComponent extends ProjectBase implements OnInit {

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,
}
);
}
}

0 comments on commit a96f40b

Please sign in to comment.