+
-
+ @if ((projectService.project$ | async)?.type !== "training") {
+
+ }
+
-
+
+ @if ((projectService.project$ | async)?.type === "training") {
+
+ } @else {
+
+ }
+
@if (projectUserService.verifyRole("manager")) {
diff --git a/frontend/src/app/projects/project-detail/project-details.component.ts b/frontend/src/app/projects/project-detail/project-details.component.ts
index e2c74ac5a6..cc9b6aa0f9 100644
--- a/frontend/src/app/projects/project-detail/project-details.component.ts
+++ b/frontend/src/app/projects/project-detail/project-details.component.ts
@@ -2,9 +2,14 @@
* SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
* SPDX-License-Identifier: Apache-2.0
*/
-import { Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ProjectToolsWrapperService } from 'src/app/projects/project-detail/project-tools/project-tools-wrapper.service';
+import { ProjectToolsComponent } from 'src/app/projects/project-detail/project-tools/project-tools.component';
import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
-import { CreateReadonlySessionComponent } from '../../sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component';
+import { TrainingDetailsComponent } from 'src/app/projects/project-detail/training-details/training-details.component';
+import { CreateReadonlySessionComponent } from '../../sessions/user-sessions-wrapper/create-readonly-session/create-readonly-session.component';
+import { CreateProvisionedSessionComponent } from '../../sessions/user-sessions-wrapper/create-sessions/create-provisioned-session/create-provisioned-session.component';
import { ProjectWrapperService } from '../service/project.service';
import { ModelOverviewComponent } from './model-overview/model-overview.component';
import { ProjectMetadataComponent } from './project-metadata/project-metadata.component';
@@ -19,11 +24,20 @@ import { ProjectUserSettingsComponent } from './project-users/project-user-setti
CreateReadonlySessionComponent,
ModelOverviewComponent,
ProjectUserSettingsComponent,
+ AsyncPipe,
+ CreateProvisionedSessionComponent,
+ TrainingDetailsComponent,
+ ProjectToolsComponent,
],
})
-export class ProjectDetailsComponent {
+export class ProjectDetailsComponent implements OnInit {
constructor(
public projectService: ProjectWrapperService,
public projectUserService: ProjectUserService,
+ private projectToolsWrapperService: ProjectToolsWrapperService,
) {}
+
+ ngOnInit(): void {
+ this.projectToolsWrapperService.loadProjectTools();
+ }
}
diff --git a/frontend/src/app/projects/project-detail/project-details.stories.ts b/frontend/src/app/projects/project-detail/project-details.stories.ts
index 06a7189cea..a86cbcebda 100644
--- a/frontend/src/app/projects/project-detail/project-details.stories.ts
+++ b/frontend/src/app/projects/project-detail/project-details.stories.ts
@@ -3,6 +3,11 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ProjectWrapperService } from 'src/app/projects/service/project.service';
+import {
+ mockProject,
+ mockProjectWrapperServiceProvider,
+} from 'src/storybook/project';
import { mockProjectUserServiceProvider } from 'src/storybook/project-users';
import { ProjectDetailsComponent } from './project-details.component';
@@ -26,3 +31,26 @@ export const LoadingAsProjectLead: Story = {
}),
],
};
+
+export const ProjectLoaded: Story = {
+ args: {},
+ decorators: [
+ moduleMetadata({
+ providers: [mockProjectWrapperServiceProvider(mockProject, undefined)],
+ }),
+ ],
+};
+
+export const TrainingLoaded: Story = {
+ args: {},
+ decorators: [
+ moduleMetadata({
+ providers: [
+ mockProjectWrapperServiceProvider(
+ { ...mockProject, type: 'training' },
+ undefined,
+ ),
+ ],
+ }),
+ ],
+};
diff --git a/frontend/src/app/projects/project-detail/project-tools/project-tools-wrapper.service.ts b/frontend/src/app/projects/project-detail/project-tools/project-tools-wrapper.service.ts
new file mode 100644
index 0000000000..99ec77cb3d
--- /dev/null
+++ b/frontend/src/app/projects/project-detail/project-tools/project-tools-wrapper.service.ts
@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Injectable } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { BehaviorSubject, filter, switchMap, take, tap } from 'rxjs';
+import { ProjectsToolsService, ProjectTool } from 'src/app/openapi';
+import { ProjectWrapperService } from 'src/app/projects/service/project.service';
+
+@UntilDestroy()
+@Injectable({
+ providedIn: 'root',
+})
+export class ProjectToolsWrapperService {
+ constructor(
+ public projectWrapperService: ProjectWrapperService,
+ private projectToolService: ProjectsToolsService,
+ ) {}
+
+ private readonly _projectTools = new BehaviorSubject<
+ ProjectTool[] | undefined
+ >(undefined);
+ readonly projectTools$ = this._projectTools.asObservable();
+
+ loadProjectTools(): void {
+ this._projectTools.next(undefined);
+ this.projectWrapperService.project$
+ .pipe(
+ filter(Boolean),
+ switchMap((project) => {
+ return this.projectToolService.getProjectTools(project.slug);
+ }),
+ untilDestroyed(this),
+ take(1),
+ tap((tools) => {
+ this._projectTools.next(tools);
+ }),
+ )
+ .subscribe();
+ }
+}
diff --git a/frontend/src/app/projects/project-detail/project-tools/project-tools.component.html b/frontend/src/app/projects/project-detail/project-tools/project-tools.component.html
new file mode 100644
index 0000000000..44f0b1fbeb
--- /dev/null
+++ b/frontend/src/app/projects/project-detail/project-tools/project-tools.component.html
@@ -0,0 +1,104 @@
+
+
+
+
Used Tools
+ @if (projectUserService.verifyRole("manager")) {
+
help
+
+ }
+
+
+
+ @if ((projectToolsWrapperService.projectTools$ | async) === undefined) {
+
+ @for (card of [0, 1]; track card) {
+
+ }
+
+ } @else {
+
+ @for (
+ tool of projectToolsWrapperService.projectTools$ | async;
+ track tool.id
+ ) {
+
+ |
+
+ check
+
+ |
+
+ {{ tool.tool.name }} {{ tool.tool_version.name }}
+ |
+
+
+ @if (tool.used_by.length) {
+ info
+ } @else if (projectUserService.verifyRole("manager") && tool.id) {
+
+ }
+
+ |
+
+ } @empty {
+ The project doesn't use any tools yet.
+ }
+
+ }
+
diff --git a/frontend/src/app/projects/project-detail/project-tools/project-tools.component.ts b/frontend/src/app/projects/project-detail/project-tools/project-tools.component.ts
new file mode 100644
index 0000000000..39219fd5c2
--- /dev/null
+++ b/frontend/src/app/projects/project-detail/project-tools/project-tools.component.ts
@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { filter, switchMap, take, tap } from 'rxjs';
+import { ToastService } from 'src/app/helpers/toast/toast.service';
+import { ProjectsToolsService, ProjectTool } from 'src/app/openapi';
+import { ProjectToolsWrapperService } from 'src/app/projects/project-detail/project-tools/project-tools-wrapper.service';
+import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
+import { ProjectWrapperService } from 'src/app/projects/service/project.service';
+
+@UntilDestroy()
+@Component({
+ selector: 'app-project-tools',
+ standalone: true,
+ imports: [
+ CommonModule,
+ RouterLink,
+ MatTooltipModule,
+ MatButtonModule,
+ MatIconModule,
+ NgxSkeletonLoaderModule,
+ ],
+ templateUrl: './project-tools.component.html',
+ styles: `
+ :host {
+ display: block;
+ }
+ `,
+})
+export class ProjectToolsComponent {
+ constructor(
+ public projectUserService: ProjectUserService,
+ public projectWrapperService: ProjectWrapperService,
+ public projectToolsWrapperService: ProjectToolsWrapperService,
+ private projectToolService: ProjectsToolsService,
+ private toastService: ToastService,
+ ) {}
+
+ unlinkTool(tool: ProjectTool): void {
+ const tool_id = tool.id;
+ if (!tool_id) return;
+
+ this.projectWrapperService.project$
+ .pipe(
+ filter(Boolean),
+ take(1),
+ switchMap((project) =>
+ this.projectToolService.deleteToolFromProject(project.slug, tool_id),
+ ),
+ tap(() => {
+ this.projectToolsWrapperService.loadProjectTools();
+ this.toastService.showSuccess(
+ 'Tool unlinked from project',
+ `The tool ${tool.tool.name} ${tool.tool_version.name} was successfully unlinked from the project.`,
+ );
+ }),
+ )
+ .subscribe();
+ }
+}
diff --git a/frontend/src/app/projects/project-detail/project-tools/project-tools.stories.ts b/frontend/src/app/projects/project-detail/project-tools/project-tools.stories.ts
new file mode 100644
index 0000000000..c51b1cd5ec
--- /dev/null
+++ b/frontend/src/app/projects/project-detail/project-tools/project-tools.stories.ts
@@ -0,0 +1,99 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
+import { ProjectWrapperService } from 'src/app/projects/service/project.service';
+import { mockProject, MockProjectWrapperService } from 'src/storybook/project';
+import {
+ mockProjectTool,
+ projectToolServiceProvider,
+} from 'src/storybook/project-tools';
+import { MockProjectUserService } from 'src/storybook/project-users';
+import { mockCapellaTool, mockCapellaToolVersion } from 'src/storybook/tool';
+import { ProjectToolsComponent } from './project-tools.component';
+
+const meta: Meta
= {
+ title: 'Project Components/Used Tools',
+ component: ProjectToolsComponent,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Loading: Story = {
+ args: {},
+};
+
+export const LoadingAsProjectLead: Story = {
+ decorators: [
+ moduleMetadata({
+ providers: [
+ {
+ provide: ProjectUserService,
+ useValue: new MockProjectUserService('manager', undefined, undefined),
+ },
+ ],
+ }),
+ ],
+};
+
+export const ArchivedProject: Story = {
+ args: {},
+ decorators: [
+ moduleMetadata({
+ providers: [
+ {
+ provide: ProjectWrapperService,
+ useValue: new MockProjectWrapperService(
+ { ...mockProject, is_archived: true },
+ undefined,
+ ),
+ },
+ {
+ provide: ProjectUserService,
+ useValue: new MockProjectUserService('manager', undefined, undefined),
+ },
+ ],
+ }),
+ ],
+};
+
+const projectTools = [
+ mockProjectTool,
+ {
+ id: 1,
+ tool: { ...mockCapellaTool, name: 'Example Tool' },
+ tool_version: { ...mockCapellaToolVersion, name: '1.0.0' },
+ used_by: [],
+ },
+ {
+ id: null,
+ tool: { ...mockCapellaTool, name: 'Tool 3' },
+ tool_version: { ...mockCapellaToolVersion, name: 'Latest' },
+ used_by: [],
+ },
+];
+
+export const Loaded: Story = {
+ decorators: [
+ moduleMetadata({
+ providers: [projectToolServiceProvider(projectTools)],
+ }),
+ ],
+};
+
+export const LoadedAsProjectLead: Story = {
+ decorators: [
+ moduleMetadata({
+ providers: [
+ projectToolServiceProvider(projectTools),
+ {
+ provide: ProjectUserService,
+ useValue: new MockProjectUserService('manager', undefined, undefined),
+ },
+ ],
+ }),
+ ],
+};
diff --git a/frontend/src/app/projects/project-detail/training-details/training-details.component.html b/frontend/src/app/projects/project-detail/training-details/training-details.component.html
new file mode 100644
index 0000000000..b6ffbbaa66
--- /dev/null
+++ b/frontend/src/app/projects/project-detail/training-details/training-details.component.html
@@ -0,0 +1,119 @@
+
+
+
+
+
Training Details
+ @if (
+ projectUserService.verifyRole("manager") &&
+ (modelService.models$ | async)?.length === 0
+ ) {
+
+ add
+
+
+ }
+
+
+ @if ((modelService.models$ | async) === undefined) {
+
+ } @else {
+ @for (model of modelService.models$ | async; track model.id) {
+
+
+
+ {{ model.tool.name }} ({{ model.version?.name }})
+
+ @if (getPrimaryGitModel(model); as gitModel) {
+
+ Revision {{ gitModel.revision }}
+
+ }
+
+
+
+
+ } @empty {
+
+ The training is not configured yet.
+
+ }
+ }
+
+
Projects
- Trainings
+
+
+ schoolTrainings
+
+
- Internal
- Private
+
+
+ lock_openInternal
+
+
+
+
+ lockPrivate
+
+
@@ -56,9 +68,14 @@
matRipple
class="mat-card-overview collab-card !m-0"
>
-