#22: implement model list component

src/app/shared/components/model-list/model-list.component.html

+<div style="display: flex; flex-direction: column">
+  <div
+    style="display: flex; flex-direction: row; gap: 10px; align-items: center"
+  >
+    <div>
+      <gp-headline [headlineTitle]="headlineTitle"></gp-headline>
+    </div>
+    <div style="flex: 1">
+      <div style="margin: 24px; font-size: 14px; font-weight: normal">
+        <span style="color: #2e2f2f"
+          >Showing -
+          <span style="color: #8f8f8f">
+            {{ calculateStartIndex }} to
+            {{ calculateEndIndex }}
+            of {{ totalItems }} Models</span
+          ></span
+        >
+      </div>
+    </div>
+
+    <div *ngIf="showEntirePage" style="align-self: flex-end; margin-left: auto">
+      <button
+        style="cursor: pointer"
+        aria-label="Example icon button with a menu icon"
+        (click)="onClickSeeBackEvent()"
+      >
+        <div style="display: flex; align-items: center">
+          <mat-icon>arrow_back_ios</mat-icon>
+          <span style="font-size: 16px">Back</span>
+        </div>
+      </button>
+    </div>
+  </div>
+  <ng-container *ngIf="solutions; else isLoading">
+    <ng-container *ngIf="solutions.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]="solutions"
+            [isMarketPlacePage]="true"
+            *ngFor="let item of solutions"
+          ></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 solutions">
+              <div class="cards-container">
+                <gp-card-item
+                  [isPublishedSolution]="false"
+                  [item]="item"
+                  [items]="solutions"
+                  [isMarketPlacePage]="true"
+                  [isFavoriteSolution]="favoriteSolutionsMap[item.solutionId]"
+                  (favoriteClicked)="onUpdateFavoriteEvent(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 #isLoading>
+    <div class="loading-data">
+      <p>Loading {{ modelType }} models ...</p>
+    </div>
+  </ng-template>
+  @if (showEntirePage) {
+    <mat-paginator
+      [length]="totalItems"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizeOptions"
+      (page)="onPageEvent($event)"
+      aria-label="Select page"
+      aria-label="Select page"
+    >
+    </mat-paginator>
+  }
+</div>

src/app/shared/components/model-list/model-list.component.scss

+.material-icons {
+  font-size: 20px;
+}

src/app/shared/components/model-list/model-list.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelListComponent } from './model-list.component';
+
+describe('ModelListComponent', () => {
+  let component: ModelListComponent;
+  let fixture: ComponentFixture<ModelListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModelListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ModelListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/model-list/model-list.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PublicSolution } from '../../models';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { CardItemComponent } from '../card-item/card-item.component';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { ListItemComponent } from '../list-item/list-item.component';
+import { MatButtonModule } from '@angular/material/button';
+import { HeadlineComponent } from '../headline/headline.component';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'gp-model-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CardItemComponent,
+    MatPaginatorModule,
+    MatGridListModule,
+    ListItemComponent,
+    MatButtonModule,
+    HeadlineComponent,
+    MatIconModule,
+  ],
+  templateUrl: './model-list.component.html',
+  styleUrl: './model-list.component.scss',
+})
+export class ModelListComponent implements OnInit {
+  @Input() solutions: PublicSolution[] = [];
+  @Input() totalItems: number = 0;
+  @Input() isLoading: boolean = false;
+  @Input() showEntirePage!: boolean;
+  @Input() headlineTitle!: string;
+  @Input() viewTile: boolean = true;
+  @Input() calculateStartIndex!: number;
+  @Input() calculateEndIndex!: number;
+  @Input() pageSize!: number;
+  @Input() pageIndex!: number;
+  @Input() pageSizeOptions!: number[];
+  @Input() modelType!: 'published' | 'unpublished' | 'both';
+  @Input() favoriteSolutionsMap: { [key: string]: boolean } = {};
+
+  @Output() pageChange = new EventEmitter<PageEvent>();
+  @Output() updateFavorite = new EventEmitter<string>();
+  @Output() backEvent = new EventEmitter();
+
+  constructor() {}
+  ngOnInit(): void {}
+
+  onPageEvent(event: PageEvent): void {
+    this.pageChange.emit(event);
+  }
+
+  onUpdateFavoriteEvent(solutionId: string) {
+    this.updateFavorite.emit(solutionId);
+  }
+
+  onClickSeeBackEvent() {
+    this.backEvent.emit();
+  }
+}