Skip to content
Snippets Groups Projects
Commit 12561ec4 authored by Kawtar Laariche's avatar Kawtar Laariche
Browse files

#22: :recycle: refactor my models component

parent f523b44c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/features/dashboard/my-models/my-models.component.html
+ 113
− 269
View file @ 12561ec4
...@@ -24,229 +24,119 @@ ...@@ -24,229 +24,119 @@
<mat-sidenav-content> <mat-sidenav-content>
<div style="display: flex; flex-direction: column; padding: 20px"> <div style="display: flex; flex-direction: column; padding: 20px">
<div style="display: flex; flex-direction: row; align-self: end"> <div style="display: flex; flex-direction: row; align-self: end">
<div <div class="gp-sort-by">
class="gp-sort-by"
*ngIf="!isPublishedSolutionsLoading && !isUnpublishedSolutionsLoading"
>
<gp-sort-by <gp-sort-by
[sortByOptions]="sortByOptions" [sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter" [selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)" (sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by> ></gp-sort-by>
</div> </div>
<div <div class="gp-card-list-view">
class="gp-card-list-view"
*ngIf="!isPublishedSolutionsLoading && !isUnpublishedSolutionsLoading"
>
<gp-solutions-toggle-view <gp-solutions-toggle-view
[viewTile]="viewTile" [viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)" (viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view> ></gp-solutions-toggle-view>
</div> </div>
</div> </div>
<mat-chip-set #chipGrid *ngIf="pageSelection.length >= 1"> <!--Unpublished models section-->
@for (selectedPage of pageSelection; track selectedPage) { @if (modelType === "both") {
<mat-chip-row> <div style="display: flex; flex-direction: column">
{{ selectedPage }} <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 <button
matChipRemove style="cursor: pointer"
[attr.aria-label]="'remove ' + selectedPage" aria-label="Example icon button with a menu icon"
(click)="onRemoveSelectedPage(selectedPage)" (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> </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>
<div </div>
style="flex: 1" }
*ngIf="
!isUnpublishedSolutionsLoading && isUnpublishedSolutionsSelected @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)
" "
> (pageChange)="onPageChange($event)"
@if (unpublishedTotalItems > 0 && isUnpublishedSolutionsSelected) { (updateFavorite)="updateFavorite($event)"
<div style="margin: 24px; font-size: 14px; font-weight: normal"> (backEvent)="onClickBack('both')"
<span style="color: #2e2f2f" ></gp-model-list>
>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>
}
</div> </div>
<ng-container }
*ngIf="
selectedUnpublishedSolutions && <!--published solutions -->
isUnpublishedSolutionsSelected &&
!isUnpublishedSolutionsLoading; @if (modelType === "both") {
else loadingUnpublishedModelsState <div style="display: flex; flex-direction: column">
" <gp-model-list
> [solutions]="selectedPublishedSolutions"
<ng-container [totalItems]="publishedTotalItems"
*ngIf="selectedUnpublishedSolutions.length > 0; else noCatalogs" [isLoading]="isPublishedSolutionsLoading"
> [headlineTitle]="'MY PUBLISHED MODELS'"
<div *ngIf="!viewTile; else gridView"> [showEntirePage]="false"
<!-- Horizontal list view content --> [viewTile]="viewTile"
<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"
[pageSize]="pageSize" [pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions" [pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)" [modelType]="'published'"
aria-label="Select page" [favoriteSolutionsMap]="favoriteSolutionsMap"
aria-label="Select page" [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
> [calculateEndIndex]="
</mat-paginator> calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
} "
</div> (pageChange)="onPageChange($event)"
</div> (updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
<!--published solutions --> <div style="display: flex; margin-left: auto">
<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">
<button <button
style="cursor: pointer" style="cursor: pointer"
aria-label="Example icon button with a menu icon" aria-label="Example icon button with a menu icon"
(click)="onClickSeeAllPublishedModels()" (click)="onClickSeeAll('published')"
> >
<div <div
style=" style="
...@@ -259,77 +149,31 @@ ...@@ -259,77 +149,31 @@
</div> </div>
</button> </button>
</div> </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> </div>
</ng-template> }
@if ( @if (modelType === "published") {
publishedTotalItems > 0 && <div style="display: flex; flex-direction: column">
isPublishedSolutionsSelected && <gp-model-list
!isUnpublishedSolutionsSelected [solutions]="selectedPublishedSolutions"
) { [totalItems]="publishedTotalItems"
<mat-paginator [isLoading]="isPublishedSolutionsLoading"
[length]="publishedTotalItems" [headlineTitle]="'MY PUBLISHED MODELS'"
[pageSize]="pageSize" [showEntirePage]="true"
[pageSizeOptions]="pageSizeOptions" [viewTile]="viewTile"
(page)="onPageChange($event)" [pageSize]="pageSize"
aria-label="Select page" [pageIndex]="pageIndex"
aria-label="Select page" [pageSizeOptions]="pageSizeOptions"
> [modelType]="'published'"
</mat-paginator> [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 </div> </mat-sidenav-content
></mat-sidenav-container> ></mat-sidenav-container>
src/app/features/dashboard/my-models/my-models.component.ts
+ 86
− 109
View file @ 12561ec4
...@@ -13,7 +13,6 @@ import { SolutionsToggleViewComponent } from 'src/app/shared/components/card-lis ...@@ -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 { SortByComponent } from 'src/app/shared/components/sort-by/sort-by.component';
import { map, Observable, Subscription } from 'rxjs'; import { map, Observable, Subscription } from 'rxjs';
import { import {
Catalog,
CatalogFilter, CatalogFilter,
CategoryCode, CategoryCode,
categoryCodeMap, categoryCodeMap,
...@@ -24,13 +23,15 @@ import { ...@@ -24,13 +23,15 @@ import {
SortOption, SortOption,
Tag, Tag,
} from 'src/app/shared/models'; } 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 { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
import { FiltersService } from 'src/app/core/services/filters.service'; import { FiltersService } from 'src/app/core/services/filters.service';
import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service'; import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { MatChipsModule } from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon'; 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({ @Component({
selector: 'gp-my-models', selector: 'gp-my-models',
...@@ -50,6 +51,7 @@ import { MatIconModule } from '@angular/material/icon'; ...@@ -50,6 +51,7 @@ import { MatIconModule } from '@angular/material/icon';
HeadlineComponent, HeadlineComponent,
MatChipsModule, MatChipsModule,
MatIconModule, MatIconModule,
ModelListComponent,
], ],
templateUrl: './my-models.component.html', templateUrl: './my-models.component.html',
styleUrl: './my-models.component.scss', styleUrl: './my-models.component.scss',
...@@ -87,6 +89,7 @@ export class MyModelsComponent implements OnInit { ...@@ -87,6 +89,7 @@ export class MyModelsComponent implements OnInit {
sortByFilter: string = ''; sortByFilter: string = '';
fieldToDirectionMap: FieldToDirectionMap = { viewCount: 'DESC' }; fieldToDirectionMap: FieldToDirectionMap = { viewCount: 'DESC' };
viewTile: boolean = true; viewTile: boolean = true;
modelType: ModelType = 'both';
private isFirstLoad = true; private isFirstLoad = true;
favoriteSolutionsMap: { [key: string]: boolean } = {}; favoriteSolutionsMap: { [key: string]: boolean } = {};
...@@ -98,11 +101,9 @@ export class MyModelsComponent implements OnInit { ...@@ -98,11 +101,9 @@ export class MyModelsComponent implements OnInit {
selectedUnpublishedSolutions!: PublicSolution[]; selectedUnpublishedSolutions!: PublicSolution[];
allUnpublishedSolutions!: PublicSolution[]; allUnpublishedSolutions!: PublicSolution[];
pageSelection: string[] = []; pageSelection: string[] = [];
isUnpublishedSolutionsSelected = true; showEntirePage = false;
isPublishedSolutionsSelected = true;
constructor( constructor(
private publicSolutionsService: PublicSolutionsService,
private privateCatalogsService: PrivateCatalogsService, private privateCatalogsService: PrivateCatalogsService,
private filtersService: FiltersService, private filtersService: FiltersService,
private router: Router, private router: Router,
...@@ -114,44 +115,38 @@ export class MyModelsComponent implements OnInit { ...@@ -114,44 +115,38 @@ export class MyModelsComponent implements OnInit {
} }
loadPublicSolutions() { 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; this.isUnpublishedSolutionsLoading = true;
const unpublishedRequestPayload: PublicSolutionsRequestPayload = { this.isPublishedSolutionsLoading = true;
userId: this.loginUserId,
published: false, requestPayload.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.privateCatalogsService this.privateCatalogsService
.fetchPublishedAndUnpublishedSolutions(unpublishedRequestPayload) .fetchPublishedAndUnpublishedSolutions(requestPayload)
.subscribe((publicSolutions) => { .subscribe((publicSolutions) => {
this.allUnpublishedSolutions = publicSolutions.publicSolutions ?? []; this.allUnpublishedSolutions = publicSolutions.publicSolutions ?? [];
this.unpublishedTotalItems = publicSolutions?.totalElements ?? 0; 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.unpublishedTotalItems > 4
this.isUnpublishedSolutionsSelected && ? (this.selectedUnpublishedSolutions = this.slicedModels(
!this.isPublishedSolutionsSelected 4,
) { this.allUnpublishedSolutions,
this.selectedUnpublishedSolutions = this.allUnpublishedSolutions; ))
} : (this.selectedUnpublishedSolutions =
this.allUnpublishedSolutions);
if (this.isFirstLoad) if (this.isFirstLoad)
this.tags = this.extractTagsFromPublicSolutions( this.tags = this.extractTagsFromPublicSolutions(
...@@ -159,44 +154,19 @@ export class MyModelsComponent implements OnInit { ...@@ -159,44 +154,19 @@ export class MyModelsComponent implements OnInit {
); );
this.isUnpublishedSolutionsLoading = false; this.isUnpublishedSolutionsLoading = false;
}); });
} requestPayload.published = true;
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,
},
};
this.privateCatalogsService this.privateCatalogsService
.fetchPublishedAndUnpublishedSolutions(publishedRequestPayload) .fetchPublishedAndUnpublishedSolutions(requestPayload)
.subscribe((publicSolutions) => { .subscribe((publicSolutions) => {
this.allPublishedSolutions = publicSolutions.publicSolutions ?? []; this.allPublishedSolutions = publicSolutions.publicSolutions ?? [];
this.publishedTotalItems = publicSolutions?.totalElements ?? 0; this.publishedTotalItems = publicSolutions?.totalElements ?? 0;
if (
this.isUnpublishedSolutionsSelected && this.publishedTotalItems > 4
this.isPublishedSolutionsSelected ? (this.selectedPublishedSolutions = this.slicedModels(
) { 4,
this.publishedTotalItems > 4 this.allPublishedSolutions,
? (this.selectedPublishedSolutions = ))
this.allPublishedSolutions.slice(0, 3)) : (this.selectedPublishedSolutions = this.allPublishedSolutions);
: (this.selectedPublishedSolutions = this.allPublishedSolutions);
}
if (
!this.isUnpublishedSolutionsSelected &&
this.isPublishedSolutionsSelected
) {
this.selectedPublishedSolutions = this.allPublishedSolutions;
}
if (this.isFirstLoad) if (this.isFirstLoad)
this.tags = [ this.tags = [
...@@ -207,6 +177,41 @@ export class MyModelsComponent implements OnInit { ...@@ -207,6 +177,41 @@ export class MyModelsComponent implements OnInit {
]; ];
this.isPublishedSolutionsLoading = false; 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 { ...@@ -445,46 +450,18 @@ export class MyModelsComponent implements OnInit {
); );
} }
onRemoveSelectedPage(selectedPage: string) { slicedModels(val: number, models: PublicSolution[]): PublicSolution[] {
this.pageSelection = []; return models.slice(0, val);
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),
];
} }
onClickSeeAllUnpublishedModels() {
this.pageSelection = ['My unpublished models']; onClickSeeAll(type: ModelType) {
this.isPublishedSolutionsSelected = false; this.modelType = type;
this.selectedUnpublishedSolutions = this.allUnpublishedSolutions; this.showEntirePage = true;
this.tags = [ this.loadPublicSolutions();
...this.extractTagsFromPublicSolutions(this.selectedUnpublishedSolutions),
];
} }
onClickSeeAllPublishedModels() { onClickBack(type: ModelType) {
this.pageSelection = ['My published models']; this.modelType = type;
this.isUnpublishedSolutionsSelected = false; this.showEntirePage = false;
this.selectedPublishedSolutions = this.allPublishedSolutions; this.loadPublicSolutions();
this.tags = [
...this.extractTagsFromPublicSolutions(this.selectedPublishedSolutions),
];
} }
} }
src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
+ 125
− 114
View file @ 12561ec4
...@@ -17,129 +17,140 @@ ...@@ -17,129 +17,140 @@
</div> </div>
<div style="display: flex; width: 100%"> <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--> <!-- onboarding model form-->
<form style="width: 100" [formGroup]="onboardingModelForm"> <form [formGroup]="onboardingModelForm">
<!--model name--> <div style="display: flex; flex-direction: column; gap: 30px">
<div style="display: flex; flex-direction: column"> <!--model name-->
<mat-label>Model name</mat-label> <div style="display: flex; flex-direction: column">
<mat-form-field> <mat-label>Model name</mat-label>
<input matInput formControlName="name" /> <mat-form-field>
@if ( <input matInput formControlName="name" />
onboardingModelForm.controls["name"].errors?.["pattern"] && @if (
onboardingModelForm.controls["name"].touched onboardingModelForm.controls["name"].errors?.["pattern"] &&
) { onboardingModelForm.controls["name"].touched
<mat-error class="modal-error" ) {
>Name must consist of lower case alphanumeric characters, '-' <mat-error class="modal-error"
or '.', and must start and end with an alphanumeric >Name must consist of lower case alphanumeric characters,
character</mat-error '-' or '.', and must start and end with an alphanumeric
> character</mat-error
} >
@if ( }
onboardingModelForm.controls["name"].errors?.["required"] && @if (
onboardingModelForm.controls["name"].touched onboardingModelForm.controls["name"].errors?.["required"] &&
) { onboardingModelForm.controls["name"].touched
<mat-error class="modal-error">Name is required</mat-error> ) {
} <mat-error class="modal-error">Name is required</mat-error>
@if ( }
onboardingModelForm.get("name")?.errors?.["nameTaken"] && @if (
onboardingModelForm.controls["name"].touched onboardingModelForm.get("name")?.errors?.["nameTaken"] &&
) { onboardingModelForm.controls["name"].touched
<mat-hint class="modal-note green" ) {
><strong>Name already exists:</strong> <mat-hint class="modal-note green"
an incremented version will be created within the existing ><strong>Name already exists:</strong>
model. an incremented version will be created within the existing
</mat-hint> model.
} </mat-hint>
</mat-form-field> }
</div> </mat-form-field>
<!--docker URI--> </div>
<div style="display: flex; flex-direction: column"> <!--docker URI-->
<mat-label>Docker URI </mat-label> <div style="display: flex; flex-direction: column">
<mat-hint class="modal-note green" <mat-label>Docker URI </mat-label>
><strong>Dockerhub image example:</strong> <mat-hint class="modal-note green"
docker.io/myimage:latest ><strong>Dockerhub image example:</strong>
</mat-hint> docker.io/myimage:latest
<mat-hint class="modal-note green" </mat-hint>
><strong>General public registry image example:</strong> <mat-hint class="modal-note green"
cicd.ai4eu-dev.eu:7444/myimage:v1 ><strong>General public registry image example:</strong>
</mat-hint> cicd.ai4eu-dev.eu:7444/myimage:v1
<mat-form-field> </mat-hint>
<input matInput formControlName="dockerURI" /> <mat-form-field>
@if ( <input matInput formControlName="dockerURI" />
onboardingModelForm.controls["dockerURI"].errors?.[ @if (
"required" onboardingModelForm.controls["dockerURI"].errors?.[
] && onboardingModelForm.controls["dockerURI"].touched "required"
) { ] && onboardingModelForm.controls["dockerURI"].touched
<mat-error class="modal-error" ) {
>Docker URI is required</mat-error <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"
/>
</mat-form-field> </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 <input
style="height: 48px" #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" color="primary"
mat-raised-button formControlName="addLicenseProfile"
(click)="onClickUploadProtoBufFile()" (change)="onClickUpload($event)"
>Add License Profile</mat-checkbox
> >
Upload file
</button>
</div> </div>
@if (message !== "") { @if (
<span class="modal-error">.proto file is required.</span> 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"> <div
<button mat-raised-button (click)="resetData()">Reset form</button> style="
<button display: flex;
mat-raised-button align-items: center;
color="primary" justify-content: space-between;
(click)="onClickBoardModel()" gap: 10px;
[disabled]="!enableSubmit" "
> >
On-board model <button mat-raised-button (click)="resetData()">
</button> Reset form
</button>
<button
mat-raised-button
color="primary"
(click)="onClickBoardModel()"
[disabled]="!enableSubmit"
>
On-board model
</button>
</div>
</div> </div>
</form> </form>
</div> </div>
......
src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts
+ 2
− 2
View file @ 12561ec4
...@@ -188,9 +188,9 @@ export class OnBoardingModelComponent implements OnInit { ...@@ -188,9 +188,9 @@ export class OnBoardingModelComponent implements OnInit {
complete: () => {}, complete: () => {},
}); });
} }
} else { } /* else {
this.fileName = 'No chosen file'; this.fileName = 'No chosen file';
} } */
} }
uploadFile() { uploadFile() {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent