#25: add catalogs list page

src/app/core/services/private-catalogs.service.ts

@@ -895,4 +895,44 @@ export class PrivateCatalogsService {
       }),
     );
   }
+
+  loadCatalogs(pageNumber: number, totalCatalogsElements: number) {
+    const request = {
+      request_body: {
+        fieldToDirectionMap: {
+          created: 'ASC',
+        },
+        page: pageNumber,
+        size: totalCatalogsElements,
+      },
+    };
+    const url = apiConfig.apiBackendURL + apiConfig.urlAllCatalogsList;
+
+    return this._httpSharedService.post(url, undefined, request).pipe(
+      //map((res) => res.response_body.content),
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
+
+  loadTotalCatalog(): Observable<number> {
+    const request = {
+      request_body: {
+        fieldToDirectionMap: {
+          created: 'ASC',
+        },
+        page: 0,
+        size: 1,
+      },
+    };
+    const url = apiConfig.apiBackendURL + apiConfig.urlAllCatalogsList;
+
+    return this._httpSharedService.post(url, undefined, request).pipe(
+      map((res) => res.response_body.totalElements),
+      catchError((error) => {
+        throw error;
+      }),
+    );
+  }
 }

src/app/features/dashboard/catalogs/catalogs.component.html

-<p>catalogs works!</p>
+<div class="catalogs-container">
+  <section class="pageheadsection mob-pageheadsection1">
+    <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
+      <div>
+        <gp-headline [headlineTitle]="'Catalogs'"></gp-headline>
+      </div>
+      <gp-breadcrumb-navigation
+        [firstNavigationLabel]="{ label: 'Home' }"
+        [secondNavigationLabel]="{ label: 'Catalogs', disabled: true }"
+        (firstNavigationClicked)="onHomeClick()"
+      ></gp-breadcrumb-navigation>
+    </div>
+  </section>
+  <div class="add-catalog">
+    <button mat-raised-button color="primary">Add new catalog</button>
+  </div>
+  <div class="filter">
+    <span>Filter</span>
+  </div>
+  <div class="table-container">
+    <table mat-table [dataSource]="catalogs">
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>Catalog name</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.name }}
+        </td>
+      </ng-container>
+
+      <!-- Type Column -->
+      <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef>Catalog type</th>
+        <td mat-cell *matCellDef="let element" class="font-weight500">
+          {{ element.type }}
+        </td>
+      </ng-container>
+
+      <!-- Published Column -->
+      <ng-container matColumnDef="publisher">
+        <th mat-header-cell *matHeaderCellDef>Publisher name</th>
+        <td mat-cell *matCellDef="let element" class="font-weight500">
+          {{ element.publisher }}
+        </td>
+      </ng-container>
+
+      <!-- Self Pub Column -->
+      <ng-container matColumnDef="selfPublish">
+        <th mat-header-cell *matHeaderCellDef>Self-PUB</th>
+        <td mat-cell *matCellDef="let element" class="font-weight500">
+          {{ element.selfPublish ? "Yes" : "No" }}
+        </td>
+      </ng-container>
+
+      <!-- Access type Column -->
+      <ng-container matColumnDef="accessTypeCode">
+        <th mat-header-cell *matHeaderCellDef>Access type</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.accessTypeCode === "PB" ? "Public" : "Restricted" }}
+        </td>
+      </ng-container>
+
+      <!-- Total models Column -->
+      <ng-container matColumnDef="solutionCount">
+        <th mat-header-cell *matHeaderCellDef>Total models</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.solutionCount }}
+        </td>
+      </ng-container>
+
+      <!-- Created date Column -->
+      <ng-container matColumnDef="created">
+        <th mat-header-cell *matHeaderCellDef>Created date</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.created | date: "dd/MM/yyyy" }}
+        </td>
+      </ng-container>
+
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <th mat-header-cell *matHeaderCellDef>Action</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.action }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
+  <div class="pagination-container">
+    <div class="total-items-container">
+      @if (totalItems > 0) {
+        <div class="total-items-text-container">
+          <span class="showing-text"
+            >Showing -
+            <span class="total-items-text">
+              {{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
+              {{ totalItems }} Models</span
+            ></span
+          >
+        </div>
+      }
+    </div>
+    <div class="pagination-text">
+      <mat-paginator
+        [length]="totalItems"
+        [pageSize]="pageSize"
+        [pageSizeOptions]="pageSizeOptions"
+        (page)="onPageChange($event)"
+        aria-label="Select page"
+        aria-label="Select page"
+      >
+      </mat-paginator>
+    </div>
+  </div>
+</div>

src/app/features/dashboard/catalogs/catalogs.component.scss

+.content {
+  padding: 24px;
+}
+
+.page-wrap {
+  display: flex !important;
+  flex-direction: column !important;
+  min-height: 100vh !important;
+}
+
+.content-router-outlet {
+  flex: 1;
+}
+
+// content height
+::ng-deep.mat-drawer-content {
+  height: 89.1% !important;
+}
+
+mat-sidenav-container {
+  overflow: hidden;
+}
+
+mat-sidenav {
+  width: 300px;
+  background: #f1f1f1;
+  height: 100%;
+  overflow: hidden;
+}
+
+:host ::ng-deep .mat-drawer-inner-container {
+  overflow: hidden !important;
+  padding: 20px 0 20px 0;
+}
+
+mat-sidenav-content {
+  overflow: hidden;
+}
+
+.md-intro-container {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-content: center;
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+
+.spacebetween {
+  justify-content: space-between !important;
+}
+
+.md-intro-container h6 {
+  margin-right: 30px;
+  margin-top: 30px !important;
+}
+
+.sectiontitle9 {
+  color: #671c9d;
+  margin-bottom: 0;
+  border-bottom: none;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 30px;
+  padding: 0;
+}
+
+.mat-mdc-header-cell {
+  color: #671c9d;
+  background: #e8e5ec !important;
+}
+
+.btn-grid-action {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: #0366d6;
+  padding: 0;
+  min-width: 10px;
+}
+.btn-grid-action i {
+  font-size: 14px !important;
+}
+.btn-grid-action:hover {
+  background: none;
+  color: #0366d6;
+}
+
+.mdl-button.mdl-js-button[disabled] {
+  color: #b3b3b3;
+  border-color: #d3d1d1;
+  cursor: not-allowed;
+  background: #efefef;
+}
+
+.font-weight500 {
+  font-weight: 500;
+}
+
+.pagination-container {
+  display: flex;
+  align-items: center;
+}
+
+.pagination-text {
+  flex: 1;
+}
+
+.catalogs-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+  gap: 30px;
+  margin: 20px;
+}
+
+.mat-mdc-paginator {
+  background-color: transparent !important;
+}
+
+.table-container {
+  flex-grow: 2 !important;
+}
+
+.add-catalog {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filter {
+  display: flex;
+  justify-content: flex-end;
+}

src/app/features/dashboard/catalogs/catalogs.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
+import { map, Observable } from 'rxjs';
+import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
+import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
+import { Router } from '@angular/router';
+import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTableModule } from '@angular/material/table';
+import {
+  MatPaginator,
+  MatPaginatorIntl,
+  MatPaginatorModule,
+  PageEvent,
+} from '@angular/material/paginator';
+import { Catalog } from 'src/app/shared/models';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'gp-catalogs',
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    BreadcrumbNavigationComponent,
+    HeadlineComponent,
+    MatTableModule,
+    MatPaginatorModule,
+    MatButtonModule,
+  ],
   templateUrl: './catalogs.component.html',
-  styleUrl: './catalogs.component.scss'
+  styleUrl: './catalogs.component.scss',
 })
-export class CatalogsComponent {
+export class CatalogsComponent implements OnInit {
+  userId$: Observable<string | undefined>;
+  displayedColumns: string[] = [
+    'name',
+    'type',
+    'publisher',
+    'selfPublish',
+    'accessTypeCode',
+    'solutionCount',
+    'created',
+    'action',
+  ];
+  catalogs!: Catalog[];
+  pageSizeOptions = [10, 50, 100];
+  pageSize = 10;
+  pageIndex = 0;
+  totalItems = 0;
 
+  constructor(
+    private privateCatalogsService: PrivateCatalogsService,
+    private router: Router,
+    private browserStorageService: BrowserStorageService,
+    private paginator: MatPaginatorIntl,
+  ) {
+    this.userId$ = this.browserStorageService
+      .getUserDetails()
+      .pipe(map((details) => details?.userId));
+    paginator.itemsPerPageLabel = 'Showing';
+  }
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  onHomeClick() {
+    this.userId$.subscribe((userId) => {
+      if (userId) {
+        this.router.navigate(['/dashboard/home']);
+      } else {
+        this.router.navigate(['/home']);
+      }
+    });
+  }
+
+  loadData() {
+    this.privateCatalogsService.loadTotalCatalog().subscribe({
+      next: (res) => {
+        this.totalItems = res;
+        this.privateCatalogsService.loadCatalogs(0, this.totalItems).subscribe({
+          next: (res) => {
+            console.log({ res });
+            this.catalogs = res.response_body.content;
+            this.totalItems = res.response_body.totalElements;
+          },
+          error: (error) => {},
+        });
+      },
+      error: (error) => {},
+    });
+  }
+
+  onPageChange(event: PageEvent): void {
+    this.pageSize = event.pageSize;
+    this.pageIndex = event.pageIndex;
+    this.loadData();
+  }
+
+  calculateStartIndex(): number {
+    return this.pageIndex * this.pageSize + 1;
+  }
+
+  calculateEndIndex(): number {
+    const endIndex = (this.pageIndex + 1) * this.pageSize;
+    return endIndex > this.totalItems ? this.totalItems : endIndex;
+  }
 }

src/app/features/marketplace/marketplace.component.html

-<div class="flex-column">
+<div class="catalogs-container">
   <section class="pageheadsection mob-pageheadsection1">
     <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
       <div>

src/app/features/marketplace/marketplace.component.scss

@@ -39,7 +39,6 @@ mat-sidenav {
   width: 300px;
   background: #f1f1f1;
   height: 100%;
-  //overflow-y: auto;
   overflow: hidden;
 }
 

src/app/features/marketplace/marketplace.component.ts

@@ -356,6 +356,7 @@ export class MarketplaceComponent {
     this.isOnMyFavoriteSelected = false;
     this.loadPublicSolutions();
   }
+
   onMyFavoriteCatalogsClick() {
     this.isOnMyFavoriteSelected = true;
     this.isLoading = true;

src/app/shared/models/public-solution.model.ts

@@ -68,6 +68,7 @@ export interface Catalog {
   publisher: string;
   selfPublish: boolean;
   url: string;
+  solutionCount: number;
 }
 
 export interface Revision {