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

#22: Display 'My Model' page after clicking 'Preview Model' button.

parent 22d80533
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
+ 335
− 1
View file @ bb5df9a8
<p>my-models works!</p> <section class="pageheadsection mob-pageheadsection1">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<div>
<gp-headline [headlineTitle]="'My Models'"></gp-headline>
</div>
<div style="display: flex; flex-direction: row; gap: 6px">
<a class="link-home" (click)="onHomeClick()">Home</a>
<span class="link-marketplace">/</span>
<a class="link-marketplace">My Models</a>
</div>
</div>
</section>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<gp-filters
[tags]="tags"
[categories]="categories"
(selectedTagsChange)="handleSelectedTagsChange($event)"
(selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
(searchValueChanged)="onSearchValueChanged($event)"
></gp-filters>
</mat-sidenav>
<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"
>
<gp-sort-by
[sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by>
</div>
<div
class="gp-card-list-view"
*ngIf="!isPublishedSolutionsLoading && !isUnpublishedSolutionsLoading"
>
<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 }}
<button
matChipRemove
[attr.aria-label]="'remove ' + selectedPage"
(click)="onRemoveSelectedPage(selectedPage)"
>
<mat-icon>cancel</mat-icon>
</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
"
>
@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>
}
</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"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)"
aria-label="Select page"
aria-label="Select page"
>
</mat-paginator>
}
</div>
</div>
<!--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 > 3 &&
isPublishedSolutionsSelected &&
isUnpublishedSolutionsSelected
) {
<div style="align-self: flex-end; margin-left: auto">
<button
style="cursor: pointer"
aria-label="Example icon button with a menu icon"
(click)="onClickSeeAllPublishedModels()"
>
<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>
<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>
}
</div> </mat-sidenav-content
></mat-sidenav-container>
src/app/features/dashboard/my-models/my-models.component.scss
+ 132
− 0
View file @ bb5df9a8
.content {
padding: 24px;
}
mat-sidenav-container {
height: calc(100% - 64px);
overflow: auto;
}
.cards-container {
width: 100%;
height: 100%;
}
.mat-mdc-paginator {
background-color: transparent !important;
}
::ng-deep .mdc-notched-outline > * {
border-color: #d5d5d5 !important;
border-radius: 0px;
}
mat-sidenav {
width: 300px;
background: #f1f1f1;
height: 100%;
overflow-y: auto;
}
.mat-grid-tile {
border: 1px solid #f1f1f1;
}
:host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important;
}
mat-sidenav-content {
height: 77vh;
overflow: auto;
.loading-data {
height: 75vh;
width: 100%;
overflow: hidden !important;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0;
}
}
}
.pageheadsection {
background: #fff;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
padding: 10px 15px 10px 20px;
}
.mob-pageheadsection1 {
position: static;
}
.mob-pageheadsection1 .mob-add-button {
position: fixed;
bottom: 20px;
right: 15px;
z-index: 5000;
}
.mdl-grid {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
align-items: stretch;
flex-direction: column;
}
.mdl-grid.mdl-grid--no-spacing {
padding: 0;
}
@media (min-width: 840px) {
.mdl-grid {
padding: 8px;
}
}
.headline {
font-size: 20px;
height: 30px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.02em;
margin: 3px 0;
padding: 0;
color: #671c9d;
text-overflow: ellipsis;
float: left;
overflow: hidden;
white-space: nowrap;
}
.link-home {
color: #2e2f2f;
text-decoration: none;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
.link-marketplace {
font-weight: normal;
color: #8f8f8f;
font-size: 13px;
}
.grid-list {
padding: 20px;
}
.favorite-button {
border-radius: 1px !important;
height: 30px;
font-weight: 600;
font-family: "Open Sans", sans-serif;
font-size: 14px;
padding: 0 16px;
}
src/app/features/dashboard/my-models/my-models.component.ts
+ 481
− 4
View file @ bb5df9a8
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
import { Router, RouterModule } from '@angular/router';
import { FiltersComponent } from 'src/app/shared/components/filters/filters.component';
import { CardItemComponent } from 'src/app/shared/components/card-item/card-item.component';
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
import { MatGridListModule } from '@angular/material/grid-list';
import { ListItemComponent } from 'src/app/shared/components/list-item/list-item.component';
import { MatButtonModule } from '@angular/material/button';
import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
import { SolutionsToggleViewComponent } from 'src/app/shared/components/card-list-view/solutions-toggle-view.component';
import { SortByComponent } from 'src/app/shared/components/sort-by/sort-by.component';
import { map, Observable, Subscription } from 'rxjs';
import {
Catalog,
CatalogFilter,
CategoryCode,
categoryCodeMap,
FieldToDirectionMap,
Filter,
PublicSolution,
PublicSolutionsRequestPayload,
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';
@Component({ @Component({
selector: 'gp-my-models', selector: 'gp-my-models',
standalone: true, standalone: true,
imports: [CommonModule], imports: [
CommonModule,
MatSidenavModule,
RouterModule,
FiltersComponent,
CardItemComponent,
MatPaginatorModule,
MatGridListModule,
SortByComponent,
SolutionsToggleViewComponent,
ListItemComponent,
MatButtonModule,
HeadlineComponent,
MatChipsModule,
MatIconModule,
],
templateUrl: './my-models.component.html', templateUrl: './my-models.component.html',
styleUrl: './my-models.component.scss' styleUrl: './my-models.component.scss',
}) })
export class MyModelsComponent { export class MyModelsComponent implements OnInit {
userId$: Observable<string | undefined>;
private destroy$: Subscription = new Subscription();
loginUserId!: string;
publicSolutions!: PublicSolution[];
favoriteSolutions!: PublicSolution[];
pageSizeOptions = [25, 50, 100];
pageSize = 25;
pageIndex = 0;
unpublishedTotalItems = 0;
publishedTotalItems = 0;
tags: Filter[] = [];
categories: Filter[] = [];
solutionPictureUrl = '';
catalogIds: string[] = [];
selectedTags: string[] = [];
selectedCategories: string[] = [];
searchKeyWord: string[] = [];
sortByOptions: SortOption[] = [
{ name: 'Most Liked', value: 'ML' },
{ name: 'Fewest Liked', value: 'FL' },
{ name: 'Most Downloaded', value: 'MD' },
{ name: 'Fewest Downloaded', value: 'FD' },
{ name: 'Highest Reach', value: 'HR' },
{ name: 'Lowest Reach', value: 'LR' },
{ name: 'Most Recent', value: 'MR' },
{ name: 'Older', value: 'OLD' },
{ name: 'Name', value: 'name' },
{ name: 'Created Date', value: 'created' },
];
sortByFilter: string = '';
fieldToDirectionMap: FieldToDirectionMap = { viewCount: 'DESC' };
viewTile: boolean = true;
private isFirstLoad = true;
favoriteSolutionsMap: { [key: string]: boolean } = {};
isUnpublishedSolutionsLoading: boolean = false;
isPublishedSolutionsLoading: boolean = false;
isOnMyFavoriteSelected = false;
selectedPublishedSolutions!: PublicSolution[];
allPublishedSolutions!: PublicSolution[];
selectedUnpublishedSolutions!: PublicSolution[];
allUnpublishedSolutions!: PublicSolution[];
pageSelection: string[] = [];
isUnpublishedSolutionsSelected = true;
isPublishedSolutionsSelected = true;
constructor(
private publicSolutionsService: PublicSolutionsService,
private privateCatalogsService: PrivateCatalogsService,
private filtersService: FiltersService,
private router: Router,
private browserStorageService: BrowserStorageService,
) {
this.userId$ = this.browserStorageService
.getUserDetails()
.pipe(map((details) => details?.userId));
}
loadPublicSolutions() {
if (this.isUnpublishedSolutionsSelected) {
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.privateCatalogsService
.fetchPublishedAndUnpublishedSolutions(unpublishedRequestPayload)
.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;
}
if (this.isFirstLoad)
this.tags = this.extractTagsFromPublicSolutions(
this.selectedPublishedSolutions,
);
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,
},
};
this.privateCatalogsService
.fetchPublishedAndUnpublishedSolutions(publishedRequestPayload)
.subscribe((publicSolutions) => {
this.allPublishedSolutions = publicSolutions.publicSolutions ?? [];
this.publishedTotalItems = publicSolutions?.totalElements ?? 0;
if (
this.isUnpublishedSolutionsSelected &&
this.isPublishedSolutionsSelected
) {
this.publishedTotalItems > 3
? (this.selectedPublishedSolutions =
this.allPublishedSolutions.slice(0, 3))
: (this.selectedPublishedSolutions = this.allPublishedSolutions);
}
if (
!this.isUnpublishedSolutionsSelected &&
this.isPublishedSolutionsSelected
) {
this.selectedPublishedSolutions = this.allPublishedSolutions;
}
if (this.isFirstLoad)
this.tags = [
...this.tags,
...this.extractTagsFromPublicSolutions(
this.selectedPublishedSolutions,
),
];
this.isPublishedSolutionsLoading = false;
});
}
}
updateFavorite(solutionId: string): void {
const dataObj = {
request_body: {
solutionId: solutionId,
userId: this.loginUserId,
},
request_from: 'string',
request_id: 'string',
};
if (!this.favoriteSolutionsMap[solutionId]) {
this.privateCatalogsService.createFavorite(dataObj).subscribe(
(response) => {
this.favoriteSolutionsMap[solutionId] =
!this.favoriteSolutionsMap[solutionId];
console.log({ response });
// Handle response if needed
},
(error) => {
// Handle error if needed
},
);
} else {
this.privateCatalogsService.deleteFavorite(dataObj).subscribe(
(response) => {
// Handle response if needed
console.log({ response });
this.favoriteSolutionsMap[solutionId] =
!this.favoriteSolutionsMap[solutionId];
},
(error) => {
// Handle error if needed
},
);
}
}
ngOnInit(): void {
this.destroy$.add(
this.browserStorageService.getUserDetails().subscribe((details) => {
this.loginUserId = details?.userId ?? '';
}),
);
this.sortByFilter = environment.ui_system_config.marketplace_sort_by;
this.loadPublicSolutions();
this.subscribeToUserId();
this.filtersService.getModelTypes().subscribe(
(res: CatalogFilter[]) => {
this.categories = res.map((catalog: CatalogFilter) => ({
name: catalog.name,
selected: false,
}));
},
(err: any) => {},
);
}
onPageChange(event: PageEvent): void {
this.pageSize = event.pageSize;
this.pageIndex = event.pageIndex;
this.loadPublicSolutions();
}
calculateStartIndex(pageIndex: number, pageSize: number): number {
return pageIndex * pageSize + 1;
}
calculateEndIndex(
totalItems: number,
pageIndex: number,
pageSize: number,
): number {
const endIndex = (pageIndex + 1) * pageSize;
return endIndex > totalItems ? totalItems : endIndex;
}
private extractTagsFromPublicSolutions(
solutions: PublicSolution[],
): Filter[] {
let tags: Filter[] = [];
solutions.forEach((solution) => {
if (solution.solutionTagList && solution.solutionTagList.length > 0) {
solution.solutionTagList.forEach((tagObj: Tag) => {
if (tagObj.tag) {
const tag: Filter = {
name: tagObj.tag.toLowerCase(),
selected: false,
};
tags.push(tag);
}
});
}
});
// Remove duplicates by name
const uniqueTags: Filter[] = Array.from(
new Map(tags.map((tag) => [tag.name, tag])).values(),
);
// Sort tags alphabetically by name
uniqueTags.sort((a, b) => a.name.localeCompare(b.name));
return uniqueTags;
}
handleSelectedTagsChange(selectedTags: string[]): void {
this.isFirstLoad = false;
this.selectedTags = selectedTags;
this.loadPublicSolutions();
console.log({ selectedTags });
}
handleSelectedCategoriesChange(selectedCategories: string[]): void {
this.isFirstLoad = false;
// Convert selected categories to their codes
const selectedCategoryCodes: CategoryCode[] =
this.convertCategoriesToCodes(selectedCategories);
// Update the selectedCategories property
this.selectedCategories = selectedCategoryCodes;
this.loadPublicSolutions();
}
convertCategoriesToCodes(selectedCategories: string[]): CategoryCode[] {
return selectedCategories.map(
(categoryName) => categoryCodeMap[categoryName] as CategoryCode,
);
}
onSearchValueChanged(searchValue: string): void {
this.isFirstLoad = false;
this.searchKeyWord.push(searchValue);
this.loadPublicSolutions();
}
getFieldToDirectionMap(sortBy: string): FieldToDirectionMap {
switch (sortBy) {
case 'FD':
return { downloadCount: 'ASC' };
case 'MD':
return { downloadCount: 'DESC' };
case 'FL':
return { ratingAverageTenths: 'ASC' };
case 'ML':
return { ratingAverageTenths: 'DESC' };
case 'HR':
return { viewCount: 'DESC' };
case 'LR':
return { viewCount: 'ASC' };
case 'MR':
return { modified: 'DESC' };
case 'OLD':
return { modified: 'ASC' };
case 'name':
return { name: 'ASC' };
case 'created':
return { created: 'DESC' };
default:
throw new Error(`Invalid sortBy value: ${sortBy}`);
}
}
updateFieldToDirectionMap(sortByFilter: string): void {
this.fieldToDirectionMap = this.getFieldToDirectionMap(sortByFilter);
this.isFirstLoad = false;
this.loadPublicSolutions();
}
onViewTileChange(value: boolean): void {
this.viewTile = value;
}
onHomeClick() {
this.userId$.subscribe((userId) => {
if (userId) {
this.router.navigate(['/dashboard/home']);
} else {
this.router.navigate(['/home']);
}
});
}
loadFavoriteCatalogs(userId: string) {
this.privateCatalogsService.getFavoriteSolutions(userId).subscribe(
(solutions) => {
this.favoriteSolutions = solutions;
this.favoriteSolutionsMap = {};
solutions.forEach((solution) => {
this.favoriteSolutionsMap[solution.solutionId] = true;
});
// Handle your solutions here
},
(error) => console.error('Error loading favorite solutions:', error),
);
}
subscribeToUserId() {
this.userId$.subscribe((userId) => {
if (userId) {
this.loadFavoriteCatalogs(userId);
}
});
}
isFavoriteSolution(solutionId: string): boolean {
return !!this.favoriteSolutionsMap[solutionId];
}
onAllCatalogsClick() {
this.isOnMyFavoriteSelected = false;
this.loadPublicSolutions();
}
onMyFavoriteCatalogsClick() {
this.isOnMyFavoriteSelected = true;
this.isPublishedSolutionsLoading = true;
this.isUnpublishedSolutionsLoading = true;
this.privateCatalogsService
.getFavoriteSolutions(this.loginUserId)
.subscribe(
(solutions) => {
this.favoriteSolutions = solutions;
this.publicSolutions = solutions;
// Update the favorite solutions map for quick lookup
this.favoriteSolutionsMap = {};
solutions.forEach((solution) => {
this.favoriteSolutionsMap[solution.solutionId] = true;
});
// Handle your solutions here
this.isUnpublishedSolutionsLoading = false;
this.isPublishedSolutionsLoading;
},
(error) => console.error('Error loading favorite solutions:', error),
);
}
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 > 3
? (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'];
this.isPublishedSolutionsSelected = false;
this.selectedUnpublishedSolutions = this.allUnpublishedSolutions;
this.tags = [
...this.extractTagsFromPublicSolutions(this.selectedUnpublishedSolutions),
];
}
onClickSeeAllPublishedModels() {
this.pageSelection = ['My published models'];
this.isUnpublishedSolutionsSelected = false;
this.selectedPublishedSolutions = this.allPublishedSolutions;
this.tags = [
...this.extractTagsFromPublicSolutions(this.selectedPublishedSolutions),
];
}
} }
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