Merge pull request #185 from gctools-outilsgc/list-imp

list component

package.json

@@ -16,16 +16,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.1",
+    "@angular/animations": "^16.2.0",
     "@angular/cdk": "^16.0.0",
-    "@angular/common": "^16.0.1",
-    "@angular/compiler": "^16.0.1",
-    "@angular/core": "^16.0.1",
-    "@angular/forms": "^16.0.1",
+    "@angular/common": "^16.2.0",
+    "@angular/compiler": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "@angular/forms": "^16.2.0",
     "@angular/material": "^16.0.0",
-    "@angular/platform-browser": "^16.0.1",
-    "@angular/platform-browser-dynamic": "^16.0.1",
-    "@angular/router": "^16.0.1",
+    "@angular/platform-browser": "^16.2.0",
+    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/router": "^16.2.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "angular-auth-oidc-client": "^14.1.5",
@@ -39,9 +39,9 @@
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0",
-    "@angular/cli": "~16.0.0",
-    "@angular/compiler-cli": "^16.0.1",
+    "@angular-devkit/build-angular": "^16.2.0",
+    "@angular/cli": "~16.2.0",
+    "@angular/compiler-cli": "^16.2.0",
     "@types/jasmine": "~4.0.0",
     "dependency-cruiser": "^12.10.1",
     "jasmine-core": "~4.3.0",
@@ -52,4 +52,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.9.3"
   }
-}
+}

src/app/core/interfaces/list-service.interface.ts

@@ -0,0 +1,8 @@
+import { Observable } from "rxjs";
+
+export interface IListService {
+    get(id: string, delay: number): Observable<any>;
+    getMany(count: number, delay: number): Observable<any[]>;
+    dataType: any;
+    cardComponent: any;
+}

src/app/core/services/event.service.ts

@@ -6,11 +6,13 @@ import { PeopleService } from './people.service';
 
 import { LoremIpsum } from 'lorem-ipsum';
 import { GroupService } from './group.service';
+import { IListService } from '../interfaces/list-service.interface';
+import { EventCardComponent } from 'src/app/features/events/components/event-card/event-card.component';
 
 @Injectable({
   providedIn: 'root'
 })
-export class EventService {
+export class EventService implements IListService {
 
   private id: number = 0;
   private delay: number = 5000;
@@ -42,11 +44,14 @@ export class EventService {
     this.generateRandomEventItem()
   ];
 
+  public dataType = Event;
+  public cardComponent = EventCardComponent;
+
   constructor() {
 
   }
 
-  mockGetEvent(id: string | null, delay: number = this.delay): Observable<Event> {
+  get(id: string | null, delay: number = this.delay): Observable<Event> {
     let response: Event;
 
     for(let i = 0; i < this.events.length; i++) {
@@ -66,7 +71,7 @@ export class EventService {
     return observable;
   }
 
-  mockGetEvents(count: number = 10, delay: number = this.delay): Observable<Event[]> {
+  getMany(count: number = 10, delay: number = this.delay): Observable<Event[]> {
 
     let observable: Observable<Event[]> = new Observable((subscriber) => {
       setTimeout(() => {

src/app/core/services/group.service.ts

@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Group, GroupStatus } from 'src/app/features/groups/models/group';
+import { IListService } from '../interfaces/list-service.interface';
+import { GroupCardComponent } from 'src/app/features/groups/components/group-card/group-card.component';
 
 @Injectable({
     providedIn: 'root'
   })
-  export class GroupService {
+  export class GroupService implements IListService {
 
     private id: number = 0;
     private delay: number = 5000;
@@ -23,9 +25,12 @@ import { Group, GroupStatus } from 'src/app/features/groups/models/group';
       this.generateRandomGroupItem()
     ];
 
+    public dataType = Group;
+    public cardComponent = GroupCardComponent;
+
     constructor() { }
 
-    mockGetGroup(id: string | null, delay: number = this.delay): Observable<Group> {
+    get(id: string | null, delay: number = this.delay): Observable<Group> {
       let response: Group;
 
       for(let i = 0; i < this.groups.length; i++) {
@@ -45,7 +50,7 @@ import { Group, GroupStatus } from 'src/app/features/groups/models/group';
       return observable;
     }
 
-    mockGetGroups(count: number = 10, delay: number = this.delay): Observable<Group[]> {
+    getMany(count: number = 10, delay: number = this.delay): Observable<Group[]> {
       let observable: Observable<Group[]> = new Observable((subscriber) => {
         setTimeout(() => {
           subscriber.next(this.groups.slice(0, count > this.groups.length ? this.groups.length : count));

src/app/core/services/news.service.ts

@@ -1,4 +1,3 @@
-//import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { INewsItem } from 'src/app/features/news-feed/models/INewsItem';
@@ -8,11 +7,13 @@ import { Poll } from '../models/poll.model';
 import { PeopleService } from './people.service';
 
 import { LoremIpsum } from 'lorem-ipsum';
+import { IListService } from '../interfaces/list-service.interface';
+import { NewsCardComponent } from 'src/app/features/news-feed/components/news-card/news-card.component';
 
 @Injectable({
   providedIn: 'root'
 })
-export class NewsService {
+export class NewsService implements IListService {
 
   private id: number = 0;
   private delay: number = 3000;
@@ -42,10 +43,13 @@ export class NewsService {
     this.generateRandomNewsItem()
   ];
 
+  public dataType = Post;
+  public cardComponent = NewsCardComponent;
+
   constructor() {
   }
 
-  mockGetNewsItem(id: string | null, delay: number = this.delay): Observable<INewsItem> {
+  get(id: string | null, delay: number = this.delay): Observable<INewsItem> {
     let response: INewsItem;
 
     for(let i = 0; i < this.newsItems.length; i++) {
@@ -65,7 +69,7 @@ export class NewsService {
     return observable;
   }
 
-  mockGetNewsItems(count: number = 10, delay: number = 5000): Observable<INewsItem[]> {
+  getMany(count: number = 10, delay: number = 5000): Observable<INewsItem[]> {
     let observable: Observable<INewsItem[]> = new Observable((subscriber) => {
       setTimeout(() => {
         subscriber.next(this.newsItems.slice(0, count > this.newsItems.length ? this.newsItems.length : count));

src/app/core/services/people.service.ts

@@ -2,11 +2,13 @@ import { Injectable } from '@angular/core';
 import { Person } from '../models/person.model';
 import { Observable } from 'rxjs';
 import { Location } from '../models/location.model';
+import { IListService } from '../interfaces/list-service.interface';
+import { ProfileCardComponent } from 'src/app/features/profile/components/profile-card/profile-card.component';
 
 @Injectable({
   providedIn: 'root'
 })
-export class PeopleService {
+export class PeopleService implements IListService {
 
   private id: number = 0;
   private delay: number = 3000;
@@ -24,9 +26,12 @@ export class PeopleService {
     this.generateRandomPerson()
   ];
 
+  public dataType = Person;
+  public cardComponent = ProfileCardComponent;
+
   constructor() { }
 
-  mockGetPerson(id: string | null, delay: number = this.delay): Observable<Person> {
+  get(id: string | null, delay: number = this.delay): Observable<Person> {
     let response: Person;
 
     for(let i = 0; i < this.people.length; i++) {
@@ -46,7 +51,7 @@ export class PeopleService {
     return observable;
   }
 
-  mockGetPeople(count: number = 10, delay: number = this.delay): Observable<Person[]> {
+  getMany(count: number = 10, delay: number = this.delay): Observable<Person[]> {
 
     let observable: Observable<Person[]> = new Observable((subscriber) => {
       setTimeout(() => {

src/app/features/events/components/event/event.component.ts

@@ -64,7 +64,7 @@ export class EventComponent implements OnInit {
 
   ngOnInit(): void {
     if (!this.model) {
-      this.eventService.mockGetEvent(this.route.snapshot.paramMap.get('id'), 3000)
+      this.eventService.get(this.route.snapshot.paramMap.get('id'), 3000)
       .subscribe(event => {
         this.model = event;
         this.banner = this.createBanner(this.model);

src/app/features/home/home.component.ts

@@ -42,30 +42,30 @@ export class HomeComponent implements OnInit {
   loadingGroups: boolean = true;
 
   constructor(public translations: Translations, 
-              private newsService: NewsService, 
-              private eventService: EventService, 
-              private peopleService: PeopleService,
-              private groupService: GroupService) {
+              public newsService: NewsService, 
+              public eventService: EventService, 
+              public peopleService: PeopleService,
+              public groupService: GroupService) {
 
   }
 
   ngOnInit(): void {
-    this.newsService.mockGetNewsItems(10, 5000).subscribe((newsItems: INewsItem[]) => {
+    this.newsService.getMany(10, 5000).subscribe((newsItems: INewsItem[]) => {
       this.newsItems = newsItems;
       this.loadingNews = false;
     });
 
-    this.eventService.mockGetEvents(3, 5000).subscribe((events: Event[]) => {
+    this.eventService.getMany(3, 5000).subscribe((events: Event[]) => {
       this.events = events;
       this.loadingEvents = false;
     });
 
-    this.peopleService.mockGetPeople(3, 5000).subscribe((people: Person[]) => {
+    this.peopleService.getMany(3, 5000).subscribe((people: Person[]) => {
       this.people = people;
       this.loadingPeople = false;
     });
 
-    this.groupService.mockGetGroups(3, 5000).subscribe((groups: Group[]) => {
+    this.groupService.getMany(3, 5000).subscribe((groups: Group[]) => {
       this.groups = groups;
       this.loadingGroups = false;
     });
@@ -74,7 +74,7 @@ export class HomeComponent implements OnInit {
   onNewsScroll(): void {
     this.loadingNews = true;
 
-    this.newsService.mockGetNewsItems(10, 3000).subscribe((newsItems: INewsItem[]) => {
+    this.newsService.getMany(10, 3000).subscribe((newsItems: INewsItem[]) => {
       this.newsItems.push(...newsItems);
       this.loadingNews = false;
     });

src/app/shared/components/header/header.component.ts

@@ -27,7 +27,7 @@ export class HeaderComponent {
               peopleService: PeopleService) 
   {
     // TODO: Get user from service
-    peopleService.mockGetPerson('0', 0).subscribe((person: Person) => {
+    peopleService.get('0', 0).subscribe((person: Person) => {
       this.user = person;
       this.loadingProfile = false;
     });

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

@@ -0,0 +1,8 @@
+<div class="gcc-list-container" 
+     [ngStyle]="{'flex-direction': orientation === Orientations.Vertical ? 'column' : 'row', 'gap': gap + 'px'}">
+    <div *ngFor="let item of items" class="gcc-list-item">
+        <ng-container *ngComponentOutlet="service.cardComponent;
+                                          inputs: {model: item, loading: loading};">
+        </ng-container>
+    </div>
+</div>

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

@@ -0,0 +1,6 @@
+:host {
+    .gcc-list-container {
+        display: flex;
+        overflow: visible;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListComponent]
+    });
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { IListService } from 'src/app/core/interfaces/list-service.interface';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent implements OnInit {
+
+  @Input({required:true}) service!: IListService;
+  @Input() items: typeof this.service.dataType[] = [];
+  @Input() cardSize: CardSize | string = CardSize.Small; // TODO: Card size on all card components. Make a base component or interface that gets implemented.
+  @Input() orientation: Orientation | string = Orientation.Vertical;
+  @Input() loadItems: number = 3;
+  @Input() gap: number = 40;
+
+  loading: boolean = true;
+  Orientations = Orientation;
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void { 
+    if (this.items.length === 0) {
+      this.service?.getMany(10, 5000).subscribe((items: typeof this.service.dataType[]) => {
+        this.items = items;
+        this.loading = false;
+      });
+    }
+  }
+}
+
+export enum Orientation {
+  Vertical = "vertical",
+  Horizontal = "horizontal"
+}
+
+export enum CardSize {
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  Dynamic = "dynamic"
+}