From 12561ec45b90b7c25f3ae3a3e804b6d2026ed2bd Mon Sep 17 00:00:00 2001
From: kaw67872 <kawtar.laariche@iais.fraunhofer.de>
Date: Thu, 6 Jun 2024 11:39:40 +0200
Subject: [PATCH] #22: :recycle: refactor my models component
---
.../my-models/my-models.component.html | 382 ++++++------------
.../my-models/my-models.component.ts | 195 ++++-----
.../on-boarding-model.component.html | 239 +++++------
.../on-boarding-model.component.ts | 4 +-
4 files changed, 326 insertions(+), 494 deletions(-)
diff --git a/src/app/features/dashboard/my-models/my-models.component.html b/src/app/features/dashboard/my-models/my-models.component.html
index 513f824..e1fddb8 100644
--- a/src/app/features/dashboard/my-models/my-models.component.html
+++ b/src/app/features/dashboard/my-models/my-models.component.html
@@ -24,229 +24,119 @@
<mat-sidenav-content>
<div style="display: flex; flex-direction: column; padding: 20px">
<div style="display: flex; flex-direction: row; align-self: end">
- <div
- class="gp-sort-by"
- *ngIf="!isPublishedSolutionsLoading && !isUnpublishedSolutionsLoading"
- >
+ <div class="gp-sort-by">
<gp-sort-by
[sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by>
</div>
- <div
- class="gp-card-list-view"
- *ngIf="!isPublishedSolutionsLoading && !isUnpublishedSolutionsLoading"
- >
+ <div class="gp-card-list-view">
<gp-solutions-toggle-view
[viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view>
</div>
</div>
- <mat-chip-set #chipGrid *ngIf="pageSelection.length >= 1">
- @for (selectedPage of pageSelection; track selectedPage) {
- <mat-chip-row>
- {{ selectedPage }}
+ <!--Unpublished models section-->
+ @if (modelType === "both") {
+ <div style="display: flex; flex-direction: column">
+ <gp-model-list
+ [solutions]="selectedUnpublishedSolutions"
+ [totalItems]="unpublishedTotalItems"
+ [isLoading]="isUnpublishedSolutionsLoading"
+ [headlineTitle]="'MY UNPUBLISHED MODELS'"
+ [showEntirePage]="false"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'unpublished'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
+
+ <div style="display: flex; margin-left: auto">
<button
- matChipRemove
- [attr.aria-label]="'remove ' + selectedPage"
- (click)="onRemoveSelectedPage(selectedPage)"
+ style="cursor: pointer"
+ aria-label="Example icon button with a menu icon"
+ (click)="onClickSeeAll('unpublished')"
>
- <mat-icon>cancel</mat-icon>
+ <div
+ style="
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ "
+ >
+ <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
+ </div>
</button>
- </mat-chip-row>
- }
- </mat-chip-set>
- <!--Unpublished models section-->
- <div
- *ngIf="isUnpublishedSolutionsSelected"
- style="display: flex; flex-direction: column"
- >
- <div
- style="
- display: flex;
- flex-direction: row;
- gap: 10px;
- align-items: center;
- "
- >
- <div>
- <gp-headline
- *ngIf="
- isUnpublishedSolutionsSelected && isPublishedSolutionsSelected
- "
- [headlineTitle]="'MY UNPUBLISHED MODELS '"
- ></gp-headline>
</div>
- <div
- style="flex: 1"
- *ngIf="
- !isUnpublishedSolutionsLoading && isUnpublishedSolutionsSelected
+ </div>
+ }
+
+ @if (modelType === "unpublished") {
+ <div style="display: flex; flex-direction: column">
+ <gp-model-list
+ [solutions]="selectedUnpublishedSolutions"
+ [totalItems]="unpublishedTotalItems"
+ [isLoading]="isUnpublishedSolutionsLoading"
+ [headlineTitle]="'MY UNPUBLISHED MODELS'"
+ [showEntirePage]="true"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'unpublished'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
"
- >
- @if (unpublishedTotalItems > 0 && isUnpublishedSolutionsSelected) {
- <div style="margin: 24px; font-size: 14px; font-weight: normal">
- <span style="color: #2e2f2f"
- >Showing -
- <span style="color: #8f8f8f">
- {{ calculateStartIndex(pageIndex, pageSize) }} to
- {{
- calculateEndIndex(
- unpublishedTotalItems,
- pageIndex,
- pageSize
- )
- }}
- of {{ unpublishedTotalItems }} Models</span
- ></span
- >
- </div>
- }
- </div>
- @if (
- unpublishedTotalItems > 4 &&
- isUnpublishedSolutionsSelected &&
- isPublishedSolutionsSelected
- ) {
- <div style="align-self: flex-end; margin-left: auto">
- <button
- style="cursor: pointer"
- aria-label="Example icon button with a menu icon"
- (click)="onClickSeeAllUnpublishedModels()"
- >
- <div
- style="
- display: flex;
- justify-content: center;
- align-items: center;
- "
- >
- <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
- </div>
- </button>
- </div>
- }
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
</div>
- <ng-container
- *ngIf="
- selectedUnpublishedSolutions &&
- isUnpublishedSolutionsSelected &&
- !isUnpublishedSolutionsLoading;
- else loadingUnpublishedModelsState
- "
- >
- <ng-container
- *ngIf="selectedUnpublishedSolutions.length > 0; else noCatalogs"
- >
- <div *ngIf="!viewTile; else gridView">
- <!-- Horizontal list view content -->
- <div class="grid-list">
- <gp-list-item
- [isPublishedSolution]="false"
- [item]="item"
- [items]="selectedUnpublishedSolutions"
- [isMarketPlacePage]="true"
- *ngFor="let item of selectedUnpublishedSolutions"
- ></gp-list-item>
- </div>
- </div>
- <ng-template #gridView>
- <div class="grid-list">
- <mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
- <mat-grid-tile
- *ngFor="let item of selectedUnpublishedSolutions"
- >
- <div class="cards-container">
- <gp-card-item
- [isPublishedSolution]="false"
- [item]="item"
- [items]="selectedUnpublishedSolutions"
- [isMarketPlacePage]="true"
- [isFavoriteSolution]="
- favoriteSolutionsMap[item.solutionId]
- "
- (favoriteClicked)="updateFavorite(item.solutionId)"
- ></gp-card-item>
- </div>
- </mat-grid-tile>
- </mat-grid-list>
- </div>
- </ng-template>
- </ng-container>
- <ng-template #noCatalogs>
- <div class="loading-data">
- <p>No result found...</p>
- </div>
- </ng-template>
- </ng-container>
- <ng-template #loadingUnpublishedModelsState>
- <div class="loading-data">
- <p>Loading unpublished models ...</p>
- </div>
- </ng-template>
- @if (
- unpublishedTotalItems > 0 &&
- isUnpublishedSolutionsSelected &&
- !isPublishedSolutionsSelected
- ) {
- <mat-paginator
- [length]="unpublishedTotalItems"
+ }
+
+ <!--published solutions -->
+
+ @if (modelType === "both") {
+ <div style="display: flex; flex-direction: column">
+ <gp-model-list
+ [solutions]="selectedPublishedSolutions"
+ [totalItems]="publishedTotalItems"
+ [isLoading]="isPublishedSolutionsLoading"
+ [headlineTitle]="'MY PUBLISHED MODELS'"
+ [showEntirePage]="false"
+ [viewTile]="viewTile"
[pageSize]="pageSize"
+ [pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
- (page)="onPageChange($event)"
- aria-label="Select page"
- aria-label="Select page"
- >
- </mat-paginator>
- }
- </div>
- </div>
+ [modelType]="'published'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
- <!--published solutions -->
- <div
- *ngIf="isPublishedSolutionsSelected"
- style="display: flex; flex-direction: column"
- >
- <div
- style="
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 20px;
- "
- >
- <div
- *ngIf="isUnpublishedSolutionsSelected && isPublishedSolutionsSelected"
- >
- <gp-headline [headlineTitle]="'MY PUBLISHED MODELS '"></gp-headline>
- </div>
- <div style="flex: 1" *ngIf="!isPublishedSolutionsLoading">
- @if (publishedTotalItems > 0 && isPublishedSolutionsSelected) {
- <div style="margin: 24px; font-size: 14px; font-weight: normal">
- <span style="color: #2e2f2f"
- >Showing -
- <span style="color: #8f8f8f">
- {{ calculateStartIndex(pageIndex, pageSize) }} to
- {{
- calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
- }}
- of {{ publishedTotalItems }} Models</span
- ></span
- >
- </div>
- }
- </div>
- @if (
- publishedTotalItems > 4 &&
- isPublishedSolutionsSelected &&
- isUnpublishedSolutionsSelected
- ) {
- <div style="align-self: flex-end; margin-left: auto">
+ <div style="display: flex; margin-left: auto">
<button
style="cursor: pointer"
aria-label="Example icon button with a menu icon"
- (click)="onClickSeeAllPublishedModels()"
+ (click)="onClickSeeAll('published')"
>
<div
style="
@@ -259,77 +149,31 @@
</div>
</button>
</div>
- }
- </div>
- <ng-container
- *ngIf="
- selectedPublishedSolutions &&
- isPublishedSolutionsSelected &&
- !isPublishedSolutionsLoading;
- else loadingPublishedModelsState
- "
- >
- <ng-container
- *ngIf="selectedPublishedSolutions.length > 0; else noCatalogs"
- >
- <div *ngIf="!viewTile; else gridView">
- <!-- Horizontal list view content -->
- <div class="grid-list">
- <gp-list-item
- [isPublishedSolution]="true"
- [item]="item"
- [items]="selectedPublishedSolutions"
- [isMarketPlacePage]="true"
- *ngFor="let item of selectedPublishedSolutions"
- ></gp-list-item>
- </div>
- </div>
- <ng-template #gridView>
- <div class="grid-list">
- <mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
- <mat-grid-tile *ngFor="let item of selectedPublishedSolutions">
- <div class="cards-container">
- <gp-card-item
- [isPublishedSolution]="true"
- [item]="item"
- [items]="selectedPublishedSolutions"
- [isMarketPlacePage]="true"
- [isFavoriteSolution]="
- favoriteSolutionsMap[item.solutionId]
- "
- (favoriteClicked)="updateFavorite(item.solutionId)"
- ></gp-card-item>
- </div>
- </mat-grid-tile>
- </mat-grid-list>
- </div>
- </ng-template>
- </ng-container>
- <ng-template #noCatalogs>
- <div class="loading-data">
- <p>No result found...</p>
- </div>
- </ng-template>
- </ng-container>
- <ng-template #loadingPublishedModelsState>
- <div class="loading-data">
- <p>Loading Published models</p>
</div>
- </ng-template>
- @if (
- publishedTotalItems > 0 &&
- isPublishedSolutionsSelected &&
- !isUnpublishedSolutionsSelected
- ) {
- <mat-paginator
- [length]="publishedTotalItems"
- [pageSize]="pageSize"
- [pageSizeOptions]="pageSizeOptions"
- (page)="onPageChange($event)"
- aria-label="Select page"
- aria-label="Select page"
- >
- </mat-paginator>
+ }
+ @if (modelType === "published") {
+ <div style="display: flex; flex-direction: column">
+ <gp-model-list
+ [solutions]="selectedPublishedSolutions"
+ [totalItems]="publishedTotalItems"
+ [isLoading]="isPublishedSolutionsLoading"
+ [headlineTitle]="'MY PUBLISHED MODELS'"
+ [showEntirePage]="true"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'published'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
+ </div>
}
</div> </mat-sidenav-content
></mat-sidenav-container>
diff --git a/src/app/features/dashboard/my-models/my-models.component.ts b/src/app/features/dashboard/my-models/my-models.component.ts
index a04b0c0..e4e8c0c 100644
--- a/src/app/features/dashboard/my-models/my-models.component.ts
+++ b/src/app/features/dashboard/my-models/my-models.component.ts
@@ -13,7 +13,6 @@ import { SolutionsToggleViewComponent } from 'src/app/shared/components/card-lis
import { SortByComponent } from 'src/app/shared/components/sort-by/sort-by.component';
import { map, Observable, Subscription } from 'rxjs';
import {
- Catalog,
CatalogFilter,
CategoryCode,
categoryCodeMap,
@@ -24,13 +23,15 @@ import {
SortOption,
Tag,
} from 'src/app/shared/models';
-import { PublicSolutionsService } from 'src/app/core/services/public-solutions.service';
import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
import { FiltersService } from 'src/app/core/services/filters.service';
import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
import { environment } from 'src/environments/environment';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
+import { ModelListComponent } from 'src/app/shared/components/model-list/model-list.component';
+
+export type ModelType = 'published' | 'unpublished' | 'both';
@Component({
selector: 'gp-my-models',
@@ -50,6 +51,7 @@ import { MatIconModule } from '@angular/material/icon';
HeadlineComponent,
MatChipsModule,
MatIconModule,
+ ModelListComponent,
],
templateUrl: './my-models.component.html',
styleUrl: './my-models.component.scss',
@@ -87,6 +89,7 @@ export class MyModelsComponent implements OnInit {
sortByFilter: string = '';
fieldToDirectionMap: FieldToDirectionMap = { viewCount: 'DESC' };
viewTile: boolean = true;
+ modelType: ModelType = 'both';
private isFirstLoad = true;
favoriteSolutionsMap: { [key: string]: boolean } = {};
@@ -98,11 +101,9 @@ export class MyModelsComponent implements OnInit {
selectedUnpublishedSolutions!: PublicSolution[];
allUnpublishedSolutions!: PublicSolution[];
pageSelection: string[] = [];
- isUnpublishedSolutionsSelected = true;
- isPublishedSolutionsSelected = true;
+ showEntirePage = false;
constructor(
- private publicSolutionsService: PublicSolutionsService,
private privateCatalogsService: PrivateCatalogsService,
private filtersService: FiltersService,
private router: Router,
@@ -114,44 +115,38 @@ export class MyModelsComponent implements OnInit {
}
loadPublicSolutions() {
- if (this.isUnpublishedSolutionsSelected) {
+ let requestPayload: PublicSolutionsRequestPayload = {
+ userId: this.loginUserId,
+
+ modelTypeCodes: this.selectedCategories,
+ tags: this.selectedTags,
+ nameKeyword: this.searchKeyWord,
+ sortBy: this.sortByFilter,
+ pageRequest: {
+ fieldToDirectionMap: this.fieldToDirectionMap,
+ page: this.pageIndex,
+ size: this.pageSize,
+ },
+ };
+ if (this.modelType === 'both') {
this.isUnpublishedSolutionsLoading = true;
- const unpublishedRequestPayload: PublicSolutionsRequestPayload = {
- userId: this.loginUserId,
- published: false,
- modelTypeCodes: this.selectedCategories,
- tags: this.selectedTags,
- nameKeyword: this.searchKeyWord,
- sortBy: this.sortByFilter,
- pageRequest: {
- fieldToDirectionMap: this.fieldToDirectionMap,
- page: this.pageIndex,
- size: this.pageSize,
- },
- };
+ this.isPublishedSolutionsLoading = true;
+
+ requestPayload.published = false;
this.privateCatalogsService
- .fetchPublishedAndUnpublishedSolutions(unpublishedRequestPayload)
+ .fetchPublishedAndUnpublishedSolutions(requestPayload)
.subscribe((publicSolutions) => {
this.allUnpublishedSolutions = publicSolutions.publicSolutions ?? [];
this.unpublishedTotalItems = publicSolutions?.totalElements ?? 0;
- if (
- this.isUnpublishedSolutionsSelected &&
- this.isPublishedSolutionsSelected
- ) {
- this.unpublishedTotalItems > 4
- ? (this.selectedUnpublishedSolutions =
- this.allUnpublishedSolutions.slice(0, 4))
- : (this.selectedUnpublishedSolutions =
- this.allUnpublishedSolutions);
- }
- if (
- this.isUnpublishedSolutionsSelected &&
- !this.isPublishedSolutionsSelected
- ) {
- this.selectedUnpublishedSolutions = this.allUnpublishedSolutions;
- }
+ this.unpublishedTotalItems > 4
+ ? (this.selectedUnpublishedSolutions = this.slicedModels(
+ 4,
+ this.allUnpublishedSolutions,
+ ))
+ : (this.selectedUnpublishedSolutions =
+ this.allUnpublishedSolutions);
if (this.isFirstLoad)
this.tags = this.extractTagsFromPublicSolutions(
@@ -159,44 +154,19 @@ export class MyModelsComponent implements OnInit {
);
this.isUnpublishedSolutionsLoading = false;
});
- }
-
- if (this.isPublishedSolutionsSelected) {
- this.isPublishedSolutionsLoading = true;
-
- const publishedRequestPayload: PublicSolutionsRequestPayload = {
- userId: this.loginUserId,
- published: true,
- modelTypeCodes: this.selectedCategories,
- tags: this.selectedTags,
- nameKeyword: this.searchKeyWord,
- sortBy: this.sortByFilter,
- pageRequest: {
- fieldToDirectionMap: this.fieldToDirectionMap,
- page: this.pageIndex,
- size: this.pageSize,
- },
- };
+ requestPayload.published = true;
this.privateCatalogsService
- .fetchPublishedAndUnpublishedSolutions(publishedRequestPayload)
+ .fetchPublishedAndUnpublishedSolutions(requestPayload)
.subscribe((publicSolutions) => {
this.allPublishedSolutions = publicSolutions.publicSolutions ?? [];
this.publishedTotalItems = publicSolutions?.totalElements ?? 0;
- if (
- this.isUnpublishedSolutionsSelected &&
- this.isPublishedSolutionsSelected
- ) {
- this.publishedTotalItems > 4
- ? (this.selectedPublishedSolutions =
- this.allPublishedSolutions.slice(0, 3))
- : (this.selectedPublishedSolutions = this.allPublishedSolutions);
- }
- if (
- !this.isUnpublishedSolutionsSelected &&
- this.isPublishedSolutionsSelected
- ) {
- this.selectedPublishedSolutions = this.allPublishedSolutions;
- }
+
+ this.publishedTotalItems > 4
+ ? (this.selectedPublishedSolutions = this.slicedModels(
+ 4,
+ this.allPublishedSolutions,
+ ))
+ : (this.selectedPublishedSolutions = this.allPublishedSolutions);
if (this.isFirstLoad)
this.tags = [
@@ -207,6 +177,41 @@ export class MyModelsComponent implements OnInit {
];
this.isPublishedSolutionsLoading = false;
});
+ } else if (this.modelType === 'unpublished') {
+ this.isUnpublishedSolutionsLoading = true;
+ requestPayload.published = false;
+
+ this.privateCatalogsService
+ .fetchPublishedAndUnpublishedSolutions(requestPayload)
+ .subscribe((publicSolutions) => {
+ this.allUnpublishedSolutions = publicSolutions.publicSolutions ?? [];
+ this.unpublishedTotalItems = publicSolutions?.totalElements ?? 0;
+
+ this.selectedUnpublishedSolutions = this.allUnpublishedSolutions;
+
+ if (this.isFirstLoad)
+ this.tags = this.extractTagsFromPublicSolutions(
+ this.selectedUnpublishedSolutions,
+ );
+ this.isUnpublishedSolutionsLoading = false;
+ });
+ } else if (this.modelType === 'published') {
+ this.isPublishedSolutionsLoading = true;
+ requestPayload.published = true;
+ this.privateCatalogsService
+ .fetchPublishedAndUnpublishedSolutions(requestPayload)
+ .subscribe((publicSolutions) => {
+ this.allPublishedSolutions = publicSolutions.publicSolutions ?? [];
+ this.publishedTotalItems = publicSolutions?.totalElements ?? 0;
+
+ this.selectedPublishedSolutions = this.allPublishedSolutions;
+
+ if (this.isFirstLoad)
+ this.tags = this.extractTagsFromPublicSolutions(
+ this.selectedPublishedSolutions,
+ );
+ this.isPublishedSolutionsLoading = false;
+ });
}
}
@@ -445,46 +450,18 @@ export class MyModelsComponent implements OnInit {
);
}
- onRemoveSelectedPage(selectedPage: string) {
- this.pageSelection = [];
- this.isUnpublishedSolutionsSelected = true;
- this.isPublishedSolutionsSelected = true;
- this.unpublishedTotalItems > 4
- ? (this.selectedUnpublishedSolutions = this.allUnpublishedSolutions.slice(
- 0,
- 4,
- ))
- : (this.selectedUnpublishedSolutions = this.allUnpublishedSolutions);
- this.publishedTotalItems > 4
- ? (this.selectedPublishedSolutions = this.allPublishedSolutions.slice(
- 0,
- 3,
- ))
- : (this.selectedPublishedSolutions = this.allPublishedSolutions);
-
- this.tags = [
- ...this.extractTagsFromPublicSolutions(this.selectedPublishedSolutions),
- ];
-
- this.tags = [
- ...this.tags,
- ...this.extractTagsFromPublicSolutions(this.selectedUnpublishedSolutions),
- ];
+ slicedModels(val: number, models: PublicSolution[]): PublicSolution[] {
+ return models.slice(0, val);
}
- onClickSeeAllUnpublishedModels() {
- this.pageSelection = ['My unpublished models'];
- this.isPublishedSolutionsSelected = false;
- this.selectedUnpublishedSolutions = this.allUnpublishedSolutions;
- this.tags = [
- ...this.extractTagsFromPublicSolutions(this.selectedUnpublishedSolutions),
- ];
+
+ onClickSeeAll(type: ModelType) {
+ this.modelType = type;
+ this.showEntirePage = true;
+ this.loadPublicSolutions();
}
- onClickSeeAllPublishedModels() {
- this.pageSelection = ['My published models'];
- this.isUnpublishedSolutionsSelected = false;
- this.selectedPublishedSolutions = this.allPublishedSolutions;
- this.tags = [
- ...this.extractTagsFromPublicSolutions(this.selectedPublishedSolutions),
- ];
+ onClickBack(type: ModelType) {
+ this.modelType = type;
+ this.showEntirePage = false;
+ this.loadPublicSolutions();
}
}
diff --git a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
index 0536243..a9e1403 100644
--- a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
+++ b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
@@ -17,129 +17,140 @@
</div>
<div style="display: flex; width: 100%">
- <div style="display: flex; flex-direction: column; width: 100%">
+ <div style="display: flex; flex-direction: column; width: 50%">
<!-- onboarding model form-->
- <form style="width: 100" [formGroup]="onboardingModelForm">
- <!--model name-->
- <div style="display: flex; flex-direction: column">
- <mat-label>Model name</mat-label>
- <mat-form-field>
- <input matInput formControlName="name" />
- @if (
- onboardingModelForm.controls["name"].errors?.["pattern"] &&
- onboardingModelForm.controls["name"].touched
- ) {
- <mat-error class="modal-error"
- >Name must consist of lower case alphanumeric characters, '-'
- or '.', and must start and end with an alphanumeric
- character</mat-error
- >
- }
- @if (
- onboardingModelForm.controls["name"].errors?.["required"] &&
- onboardingModelForm.controls["name"].touched
- ) {
- <mat-error class="modal-error">Name is required</mat-error>
- }
- @if (
- onboardingModelForm.get("name")?.errors?.["nameTaken"] &&
- onboardingModelForm.controls["name"].touched
- ) {
- <mat-hint class="modal-note green"
- ><strong>Name already exists:</strong>
- an incremented version will be created within the existing
- model.
- </mat-hint>
- }
- </mat-form-field>
- </div>
- <!--docker URI-->
- <div style="display: flex; flex-direction: column">
- <mat-label>Docker URI </mat-label>
- <mat-hint class="modal-note green"
- ><strong>Dockerhub image example:</strong>
- docker.io/myimage:latest
- </mat-hint>
- <mat-hint class="modal-note green"
- ><strong>General public registry image example:</strong>
- cicd.ai4eu-dev.eu:7444/myimage:v1
- </mat-hint>
- <mat-form-field>
- <input matInput formControlName="dockerURI" />
- @if (
- onboardingModelForm.controls["dockerURI"].errors?.[
- "required"
- ] && onboardingModelForm.controls["dockerURI"].touched
- ) {
- <mat-error class="modal-error"
- >Docker URI is required</mat-error
- >
- }
- </mat-form-field>
- </div>
- <!--protobuf file-->
- <div style="display: flex; flex-direction: column; width: 100%">
- <mat-label>Upload Protobuf File </mat-label>
- <div style="display: flex; width: 100%; gap: 10px">
- <mat-form-field style="height: 70px">
- <input matInput [value]="fileName" />
- <mat-hint class="modal-note full-width no-padding">
- Supported files type: .proto</mat-hint
- >
-
- <input
- #fileDropRef
- type="file"
- id="fileInput"
- name="fileInput"
- (change)="selectFile($event)"
- hidden
- formControlName="protobufFile"
- />
+ <form [formGroup]="onboardingModelForm">
+ <div style="display: flex; flex-direction: column; gap: 30px">
+ <!--model name-->
+ <div style="display: flex; flex-direction: column">
+ <mat-label>Model name</mat-label>
+ <mat-form-field>
+ <input matInput formControlName="name" />
+ @if (
+ onboardingModelForm.controls["name"].errors?.["pattern"] &&
+ onboardingModelForm.controls["name"].touched
+ ) {
+ <mat-error class="modal-error"
+ >Name must consist of lower case alphanumeric characters,
+ '-' or '.', and must start and end with an alphanumeric
+ character</mat-error
+ >
+ }
+ @if (
+ onboardingModelForm.controls["name"].errors?.["required"] &&
+ onboardingModelForm.controls["name"].touched
+ ) {
+ <mat-error class="modal-error">Name is required</mat-error>
+ }
+ @if (
+ onboardingModelForm.get("name")?.errors?.["nameTaken"] &&
+ onboardingModelForm.controls["name"].touched
+ ) {
+ <mat-hint class="modal-note green"
+ ><strong>Name already exists:</strong>
+ an incremented version will be created within the existing
+ model.
+ </mat-hint>
+ }
+ </mat-form-field>
+ </div>
+ <!--docker URI-->
+ <div style="display: flex; flex-direction: column">
+ <mat-label>Docker URI </mat-label>
+ <mat-hint class="modal-note green"
+ ><strong>Dockerhub image example:</strong>
+ docker.io/myimage:latest
+ </mat-hint>
+ <mat-hint class="modal-note green"
+ ><strong>General public registry image example:</strong>
+ cicd.ai4eu-dev.eu:7444/myimage:v1
+ </mat-hint>
+ <mat-form-field>
+ <input matInput formControlName="dockerURI" />
+ @if (
+ onboardingModelForm.controls["dockerURI"].errors?.[
+ "required"
+ ] && onboardingModelForm.controls["dockerURI"].touched
+ ) {
+ <mat-error class="modal-error"
+ >Docker URI is required</mat-error
+ >
+ }
</mat-form-field>
+ </div>
+ <!--protobuf file-->
+ <div style="display: flex; flex-direction: column; width: 100%">
+ <mat-label>Upload Protobuf File </mat-label>
+ <div style="display: flex; width: 100%; gap: 10px">
+ <mat-form-field style="height: 70px">
+ <input matInput [value]="fileName" />
+ <mat-hint class="modal-note full-width no-padding">
+ Supported files type: .proto</mat-hint
+ >
- <button
- style="height: 48px"
+ <input
+ #fileDropRef
+ type="file"
+ id="fileInput"
+ name="fileInput"
+ (change)="selectFile($event)"
+ hidden
+ formControlName="protobufFile"
+ />
+ </mat-form-field>
+
+ <button
+ style="height: 48px"
+ color="primary"
+ mat-raised-button
+ (click)="onClickUploadProtoBufFile()"
+ >
+ Upload file
+ </button>
+ </div>
+ @if (message !== "") {
+ <span class="modal-error">.proto file is required.</span>
+ }
+ </div>
+ <!--license profile-->
+ <div style="display: flex; flex-direction: column">
+ <mat-checkbox
color="primary"
- mat-raised-button
- (click)="onClickUploadProtoBufFile()"
+ formControlName="addLicenseProfile"
+ (change)="onClickUpload($event)"
+ >Add License Profile</mat-checkbox
>
- Upload file
- </button>
</div>
- @if (message !== "") {
- <span class="modal-error">.proto file is required.</span>
+ @if (
+ onboardingModelForm.controls["addLicenseProfile"].value === true
+ ) {
+ <div style="display: flex; width: 100%">
+ <gp-model-details-license-profile
+ [isExistingLicenseProfile]="false"
+ ></gp-model-details-license-profile>
+ </div>
}
- </div>
- <!--license profile-->
- <div style="display: flex; flex-direction: column">
- <mat-checkbox
- color="primary"
- formControlName="addLicenseProfile"
- (change)="onClickUpload($event)"
- >Add License Profile</mat-checkbox
- >
- </div>
- @if (
- onboardingModelForm.controls["addLicenseProfile"].value === true
- ) {
- <div style="display: flex; width: 100%">
- <gp-model-details-license-profile
- [isExistingLicenseProfile]="false"
- ></gp-model-details-license-profile>
- </div>
- }
- <div style="display: flex; align-items: center; gap: 10px">
- <button mat-raised-button (click)="resetData()">Reset form</button>
- <button
- mat-raised-button
- color="primary"
- (click)="onClickBoardModel()"
- [disabled]="!enableSubmit"
+ <div
+ style="
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ "
>
- On-board model
- </button>
+ <button mat-raised-button (click)="resetData()">
+ Reset form
+ </button>
+ <button
+ mat-raised-button
+ color="primary"
+ (click)="onClickBoardModel()"
+ [disabled]="!enableSubmit"
+ >
+ On-board model
+ </button>
+ </div>
</div>
</form>
</div>
diff --git a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts
index 3b7df50..7aba16c 100644
--- a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts
+++ b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts
@@ -188,9 +188,9 @@ export class OnBoardingModelComponent implements OnInit {
complete: () => {},
});
}
- } else {
+ } /* else {
this.fileName = 'No chosen file';
- }
+ } */
}
uploadFile() {
--
GitLab