Skip to content

Commit

Permalink
fix: Broken loading animation of model sources
Browse files Browse the repository at this point in the history
The model sources view which lists Git and T4C repositories had a broken
loading animation. Also, some UI elements were refreshed.

A new star indicates a primary Git repository (instead of text).
  • Loading branch information
MoritzWeber0 committed Sep 10, 2024
1 parent 83cf867 commit 2920891
Show file tree
Hide file tree
Showing 8 changed files with 249 additions and 107 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,18 @@
~ SPDX-License-Identifier: Apache-2.0
-->

@if (loading) {
@for (_ of _cardNumbersArray; track $index) {
<div class="h-[250px]">
<ngx-skeleton-loader
count="1"
appearance="circle"
[theme]="{
'border-radius': '5px',
height: '100%',
width: '400px',
border: '1px solid white',
margin: 0,
}"
></ngx-skeleton-loader>
</div>
}
@for (_ of _cardNumbersArray; track $index) {
<div class="h-[250px]">
<ngx-skeleton-loader
count="1"
appearance="circle"
[theme]="{
'border-radius': '5px',
height: '100%',
width: '400px',
border: '1px solid white',
margin: 0,
}"
></ngx-skeleton-loader>
</div>
}
<div></div>
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
imports: [NgxSkeletonLoaderModule],
})
export class MatCardOverviewSkeletonLoaderComponent implements OnInit {
@Input() loading = true;
@Input() reservedCards = 1;

@Input() rows: number | undefined = undefined;
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,63 @@
~ SPDX-License-Identifier: Apache-2.0
-->

<div
class="wrapper"
*ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
>
<h1 class="!m-separator">Git repositories</h1>
<div class="flex flex-wrap">
<a class="m-m-card" [routerLink]="['..', 'git-model', 'create']">
<h2 class="mb-2 text-xl font-medium">Git repositories</h2>
<div class="flex flex-wrap gap-2">
<a [routerLink]="['..', 'git-model', 'create']">
<div matRipple class="mat-card-overview new collab-card">
<div class="content">
Use existing repository <br />
<div class="icon">
<app-mat-icon size="70px">link</app-mat-icon>
</div>
</div>
</div>
</a>
@if ((gitModelService.gitModels$ | async) === undefined) {
<app-mat-card-overview-skeleton-loader
class="contents"
[rows]="1"
[reservedCards]="1"
></app-mat-card-overview-skeleton-loader>
} @else {
@for (gitModel of gitModelService.gitModels$ | async; track gitModel.id) {
<a [routerLink]="['..', 'git-model', gitModel.id]">
<div matRipple class="mat-card-overview collab-card">
<div class="header flex items-center justify-between">
Integration {{ gitModel.id }}
@if (gitModel.primary) {
<mat-icon>star</mat-icon>
}
</div>

<div class="content">
<span class="line-clamp-1 break-all"
><b>Path:</b> {{ gitModel.path }}</span
>
<span class="line-clamp-1 break-all"
><b>Revision:</b> {{ gitModel.revision }}</span
>
<span class="line-clamp-1 break-all"
><b>Entrypoint:</b> {{ gitModel.entrypoint }}</span
>
@if (gitModel.username) {
<span class="line-clamp-1 break-all">
<b>Username:</b> {{ gitModel.username }}
</span>
}
</div>
</div>
</a>
}
}
</div>
@if (
(modelService.model$ | async)?.tool?.integrations?.t4c &&
userService.user?.role === "administrator"
) {
<h2 class="mb-2 mt-5 text-xl font-medium">TeamForCapella repositories</h2>
<div class="flex flex-wrap gap-2">
<a [routerLink]="['..', 't4c-model', 'create-existing']">
<div matRipple class="mat-card-overview new collab-card">
<div class="content">
Use existing repository <br />
Expand All @@ -19,79 +69,42 @@ <h1 class="!m-separator">Git repositories</h1>
</div>
</div>
</a>

<app-mat-card-overview-skeleton-loader
[rows]="1"
[reservedCards]="2"
[loading]="(gitModelService.gitModels$ | async) === undefined"
></app-mat-card-overview-skeleton-loader>
<a
class="m-m-card"
*ngFor="let gitModel of gitModelService.gitModels$ | async"
[routerLink]="['..', 'git-model', gitModel.id]"
>
<div matRipple class="mat-card-overview collab-card">
<div class="header">Integration {{ gitModel.id }}</div>
<a [routerLink]="['..', 't4c-model', 'create-new']">
<div matRipple class="mat-card-overview new collab-card">
<div class="content">
<div>Path: {{ gitModel.path }}</div>
<div>Revision: {{ gitModel.revision }}</div>
<div>Entry point: {{ gitModel.entrypoint }}</div>
<div>Primary: {{ gitModel.primary ? "True" : "False" }}</div>
<div>Username: {{ gitModel.username }}</div>
<div>Password set: {{ gitModel.password ? "True" : "False" }}</div>
Create new repository <br />
<div class="icon">
<app-mat-icon size="70px">add_circle_outline</app-mat-icon>
</div>
</div>
</div>
</a>
</div>
<div
*ngIf="
(modelService.model$ | async)!.tool.integrations.t4c &&
userService.user?.role === 'administrator'
"
>
<h1 class="!m-separator">TeamForCapella repositories</h1>
<div class="flex flex-wrap">
<a class="m-m-card" [routerLink]="['..', 't4c-model', 'create-existing']">
<div matRipple class="mat-card-overview new collab-card">
<div class="content">
Use existing repository <br />
<div class="icon">
<app-mat-icon size="70px">link</app-mat-icon>
</div>
</div>
</div>
</a>

<a class="m-m-card" [routerLink]="['..', 't4c-model', 'create-new']">
<div matRipple class="mat-card-overview new collab-card">
<div class="content">
Create new repository <br />
<div class="icon">
<app-mat-icon size="70px">add_circle_outline</app-mat-icon>
</div>
</div>
</div>
</a>

@if ((t4cModelService.t4cModels$ | async) === undefined) {
<app-mat-card-overview-skeleton-loader
class="contents"
[rows]="1"
[reservedCards]="2"
></app-mat-card-overview-skeleton-loader>
} @else {
<a
class="m-m-card"
*ngFor="let t4cModel of t4cModelService.t4cModels$ | async"
[routerLink]="['..', 't4c-model', t4cModel.id]"
>
<div matRipple class="mat-card-overview collab-card">
<div class="header">Integration {{ t4cModel.id }}</div>
<div class="content">
<div>Instance: {{ t4cModel.repository.instance.name }}</div>
<div>Repository: {{ t4cModel.repository.name }}</div>
<div>T4C model name: {{ t4cModel.name }}</div>
<span class="line-clamp-1 break-all"
><b>Instance:</b> {{ t4cModel.repository.instance.name }}</span
>
<span class="line-clamp-1 break-all"
><b>Repository:</b> {{ t4cModel.repository.name }}</span
>
<span class="line-clamp-1 break-all"
><b>Project:</b> {{ t4cModel.name }}</span
>
</div>
</div>
</a>
<app-mat-card-overview-skeleton-loader
[rows]="1"
[reservedCards]="2"
[loading]="(t4cModelService.t4cModels$ | async) === undefined"
></app-mat-card-overview-skeleton-loader>
</div>
}
</div>
</div>
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import { NgIf, NgFor, AsyncPipe } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatRipple } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { RouterLink } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { combineLatest, filter } from 'rxjs';
Expand All @@ -20,7 +21,6 @@ import { ProjectWrapperService } from '../../service/project.service';
@Component({
selector: 'app-model-detail',
templateUrl: './model-detail.component.html',
styleUrls: ['./model-detail.component.css'],
standalone: true,
imports: [
NgIf,
Expand All @@ -30,6 +30,7 @@ import { ProjectWrapperService } from '../../service/project.service';
MatCardOverviewSkeletonLoaderComponent,
NgFor,
AsyncPipe,
MatIconModule,
],
})
export class ModelDetailComponent implements OnInit, OnDestroy {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
* SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
* SPDX-License-Identifier: Apache-2.0
*/
import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
import { ModelWrapperService } from 'src/app/projects/models/service/model.service';
import { GitModelService } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
import { UserWrapperService } from 'src/app/services/user/user.service';
import { MockGitModelService, mockPrimaryGitModel } from 'src/storybook/git';
import { mockModel, MockModelWrapperService } from 'src/storybook/model';
import { mockT4CModel, MockT4CModelService } from 'src/storybook/t4c';
import { mockUser, MockUserService } from 'src/storybook/user';
import { ModelDetailComponent } from './model-detail.component';

const meta: Meta<ModelDetailComponent> = {
title: 'Model Components / Model Sources / Overview',
component: ModelDetailComponent,
};

export default meta;
type Story = StoryObj<ModelDetailComponent>;

export const Loading: Story = {
args: {},
decorators: [
moduleMetadata({
providers: [
{
provide: ModelWrapperService,
useFactory: () => new MockModelWrapperService(mockModel, []),
},
],
}),
],
};

export const LoadingAsAdmin: Story = {
args: {},
decorators: [
moduleMetadata({
providers: [
{
provide: ModelWrapperService,
useFactory: () => new MockModelWrapperService(mockModel, []),
},
{
provide: UserWrapperService,
useFactory: () =>
new MockUserService({ ...mockUser, role: 'administrator' }),
},
],
}),
],
};

export const WithRepositoryAsAdmin: Story = {
args: {},
decorators: [
moduleMetadata({
providers: [
{
provide: ModelWrapperService,
useFactory: () => new MockModelWrapperService(mockModel, []),
},
{
provide: UserWrapperService,
useFactory: () =>
new MockUserService({ ...mockUser, role: 'administrator' }),
},
{
provide: GitModelService,
useFactory: () =>
new MockGitModelService(mockPrimaryGitModel, [
mockPrimaryGitModel,
{ ...mockPrimaryGitModel, id: 2, primary: false, username: '' },
]),
},
{
provide: GitModelService,
useFactory: () =>
new MockGitModelService(mockPrimaryGitModel, [
mockPrimaryGitModel,
{ ...mockPrimaryGitModel, id: 2, primary: false, username: '' },
]),
},
{
provide: T4CModelService,
useFactory: () =>
new MockT4CModelService(mockT4CModel, [mockT4CModel]),
},
],
}),
],
};
20 changes: 20 additions & 0 deletions frontend/src/storybook/git.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
* SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
* SPDX-License-Identifier: Apache-2.0
*/
import { BehaviorSubject, Subject } from 'rxjs';
import { GitModel } from 'src/app/openapi';
import {
GetGitModel,
GitModelService,
} from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';

export const mockPrimaryGitModel: Readonly<GitModel> = {
id: 1,
Expand All @@ -14,3 +19,18 @@ export const mockPrimaryGitModel: Readonly<GitModel> = {
password: false,
username: 'fakeUsername',
};

export class MockGitModelService implements Partial<GitModelService> {
private _gitModel = new Subject<GetGitModel | undefined>();
private _gitModels = new BehaviorSubject<GetGitModel[] | undefined>(
undefined,
);

public readonly gitModel$ = this._gitModel.asObservable();
public readonly gitModels$ = this._gitModels.asObservable();

constructor(gitModel: GetGitModel, gitModels: GetGitModel[]) {
this._gitModel.next(gitModel);
this._gitModels.next(gitModels);
}
}
Loading

0 comments on commit 2920891

Please sign in to comment.