responsive + game list filter

angular.json

@@ -31,7 +31,9 @@
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss"
             ],
-            "scripts": [],
+            "scripts": [
+              "node_modules/chart.js/dist/chart.js"
+            ],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -73,8 +75,7 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-          },
+          "options": {},
           "configurations": {
             "production": {
               "browserTarget": "vgmq:build:production"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vgmq",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -19,16 +19,19 @@
     "@angular/platform-browser": "~13.2.4",
     "@angular/platform-browser-dynamic": "~13.2.4",
     "@angular/router": "~13.2.4",
-    "@fortawesome/fontawesome-free": "^5.15.3",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "bootstrap": "^5.1.1",
+    "chart.js": "^3.1.1",
     "jwt-decode": "^2.2.0",
     "luxon": "^2.0.2",
+    "mdb-angular-ui-kit": "^2.0.0",
     "ng-recaptcha": "^9.0.0",
     "ngx-cookie-service": "^13.1.2",
+    "ngx-infinite-scroll": "^13.0.1",
     "ngx-socket-io": "^4.2.0",
     "rxjs": "~7.5.4",
     "tslib": "^2.0.0",

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { SocketIoModule } from 'ngx-socket-io'
 import { RecaptchaModule } from 'ng-recaptcha'
 import { CustomSocket } from './core/socket/custom.socket'
+import {MdbCollapseModule} from "mdb-angular-ui-kit/collapse";
 
 @NgModule({
   declarations: [AppComponent, HeaderComponent, HomeThemeComponent],
@@ -20,6 +21,7 @@ import { CustomSocket } from './core/socket/custom.socket'
     BrowserAnimationsModule,
     SocketIoModule,
     RecaptchaModule,
+    MdbCollapseModule,
   ],
   providers: [
     {

src/app/core/header/header.component.html

@@ -3,28 +3,26 @@
   <button
     class="navbar-toggler"
     type="button"
-    data-toggle="collapse"
-    data-target="#navbarSupportedContent"
-    aria-controls="navbarSupportedContent"
+    (click)="basicNav.toggle()"
     aria-expanded="false"
     aria-label="Toggle navigation"
   >
-    <span class="navbar-toggler-icon"></span>
+    <i class="fas fa-bars"></i>
   </button>
 
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+  <div class="collapse navbar-collapse" mdbCollapse #basicNav="mdbCollapse">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-        <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
+        <a class="nav-link" routerLink="/" (click)="basicNav.hide()">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-        <a class="nav-link" routerLink="/games">Games</a>
+        <a class="nav-link" routerLink="/games" (click)="basicNav.hide()">Games</a>
       </li>
       <li class="nav-item" *ngIf="showAdminNav" routerLinkActive="active">
-        <a class="nav-link" routerLink="/admin">Admin</a>
+        <a class="nav-link" routerLink="/admin" (click)="basicNav.hide()">Admin</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link logout" (click)="logout()">Logout</a>
+        <a class="nav-link logout" (click)="logout()" (click)="basicNav.hide()">Logout</a>
       </li>
     </ul>
   </div>

src/app/core/http/admin-game-http.service.ts

@@ -17,12 +17,17 @@ export class AdminGameHttpService {
 
   constructor(private http: HttpClient) {}
 
-  search(query: string, showDisabled: boolean, page?: number, limit?: number): Observable<GameApiResponse> {
-    return this.http.get<GameApiResponse>(`${this.apiEndpoint}/admin/games`, {
+  search(
+    form: { query: string; showDisabled: boolean; onlyShowWithoutMusics: boolean },
+    skip?: number,
+    limit?: number
+  ): Observable<GameApiResponse<number>> {
+    return this.http.get<GameApiResponse<number>>(`${this.apiEndpoint}/admin/games`, {
       params: {
-        query: query,
-        ...(showDisabled && { showDisabled: 'true' }),
-        ...(page && { page }),
+        query: form.query,
+        ...(form.showDisabled && { showDisabled: 'true' }),
+        ...(form.onlyShowWithoutMusics && { onlyShowWithoutMusics: 'true' }),
+        ...(skip && { skip }),
         ...(limit && { limit }),
       },
     })

src/app/core/http/game-http.service.ts

@@ -12,12 +12,16 @@ export class GameHttpService {
 
   constructor(private http: HttpClient) {}
 
-  search(query: string, myGames: boolean, page?: number, limit?: number): Observable<GameApiResponse> {
-    return this.http.get<GameApiResponse>(`${this.apiEndpoint}/games`, {
+  search(
+    form: { query: string; myGames: boolean },
+    skip?: number,
+    limit?: number
+  ): Observable<GameApiResponse<number>> {
+    return this.http.get<GameApiResponse<number>>(`${this.apiEndpoint}/games`, {
       params: {
-        query: query,
-        ...(myGames && { filterByUser: 'true' }),
-        ...(page && { page }),
+        query: form.query,
+        ...(form.myGames && { filterByUser: 'true' }),
+        ...(skip && { skip }),
         ...(limit && { limit }),
       },
     })

src/app/modules/admin/modules/games/components/game-search/game-search.component.html

@@ -1,31 +1,32 @@
 <div class="row justify-content-between">
   <div class="col">
     <h1 *ngIf="gamesCount">{{ gamesCount }} games</h1>
-    <div class="form-group">
-      <label>Show disabled game</label>
-      <mat-slide-toggle
-        color="primary"
-        [(ngModel)]="showDisabled"
-        (click)="loading || toggleShowDisabled()"
-        [disabled]="loading"
-      >
-      </mat-slide-toggle>
-    </div>
   </div>
   <div class="col text-end">
-    <button class="btn btn-primary" (click)="openImportDialog()">Import game from IGDB</button>
+    <button class="btn btn-outline-primary" (click)="openImportDialog()">Import game from IGDB</button>
   </div>
 </div>
-<div class="form-group">
-  <input
-    type="text"
-    class="form-control"
-    id="exampleFormControlInput1"
-    placeholder="game..."
-    [(ngModel)]="query"
-    (keyup)="search()"
-  />
-</div>
+<form *ngIf="form" [formGroup]="form">
+  <div class="row justify-content-between align-items-center">
+    <div class="col-md-3">
+      <div class="form-group">
+        <input
+          type="text"
+          class="form-control"
+          id="exampleFormControlInput1"
+          placeholder="game..."
+          formControlName="query"
+        />
+      </div>
+    </div>
+    <div class="col">
+      <mat-checkbox color="primary" formControlName="onlyShowWithoutMusics">Only Show Without Music</mat-checkbox>
+    </div>
+    <div class="col">
+      <mat-checkbox color="primary" formControlName="showDisabled">Disabled </mat-checkbox>
+    </div>
+  </div>
+</form>
 <ng-container *ngIf="loading; else cardColumns">
   <div class="d-flex justify-content-center">
     <div class="spinner-border orange" role="status">
@@ -34,19 +35,7 @@ <h1 *ngIf="gamesCount">{{ gamesCount }} games</h1>
   </div>
 </ng-container>
 <ng-template #cardColumns>
-  <div class="mt-4 row">
-    <div class="col-2" *ngFor="let game of games">
-      <a [routerLink]="['/admin/games/', game.slug]">
-        <img
-          *ngIf="game.cover?.imageId"
-          src="https://images.igdb.com/igdb/image/upload/t_720p/{{ game.cover.imageId }}.jpg"
-          class="card-img-top"
-          [alt]="game.name"
-        />
-        <div>
-          <h3 class="card-title orange">{{ game.name }}</h3>
-        </div>
-      </a>
-    </div>
+  <div class="mt-4 row" infinite-scroll (scrolled)="onScrollDown()">
+    <app-game-item *ngFor="let game of games" [game]="game" class="col-6 col-md-2"></app-game-item>
   </div>
 </ng-template>

src/app/modules/admin/modules/games/components/game-search/game-search.component.ts

@@ -1,52 +1,86 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, forwardRef, OnInit } from '@angular/core'
 import { Game } from '../../../../../../shared/models/game'
-import { Subscription } from 'rxjs'
-import { finalize } from 'rxjs/operators'
+import { debounceTime, Subscription } from 'rxjs'
 import { ImportGameDialogComponent } from './import-game-dialog/import-game-dialog.component'
 import { MatDialog } from '@angular/material/dialog'
-import {AdminGameHttpService} from "../../../../../../core/http/admin-game-http.service";
+import { AdminGameHttpService } from '../../../../../../core/http/admin-game-http.service'
+import { FormControl, FormGroup, Validators } from '@angular/forms'
+import { finalize } from 'rxjs/operators'
+import { ParentComponent } from '../../../../../../shared/interfaces/parent.interface'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 
 @Component({
   selector: 'app-game-search',
   templateUrl: './game-search.component.html',
+  providers: [{ provide: ParentComponent, useExisting: forwardRef(() => GameSearchComponent) }],
 })
-export class GameSearchComponent implements OnInit {
-  games: Game[] = []
+export class GameSearchComponent implements OnInit, ParentComponent {
+  name = 'xd'
+  games: Game<number>[] = []
   gamesCount: number
   query = ''
   showDisabled = false
+  onlyShowWithoutMusics = false
   http: Subscription
   loading = false
+  form: FormGroup
 
-  constructor(private adminGameHttpService: AdminGameHttpService, public dialog: MatDialog) {}
+  constructor(
+    private adminGameHttpService: AdminGameHttpService,
+    public dialog: MatDialog,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {}
 
   ngOnInit(): void {
-    this.search()
+    this.activatedRoute.queryParamMap
+      .subscribe((params) => {
+        this.form = new FormGroup({
+          query: new FormControl(params.get('query') ?? '', Validators.required.bind(this)),
+          showDisabled: new FormControl(params.get('showDisabled') === 'true'),
+          onlyShowWithoutMusics: new FormControl(params.get('onlyShowWithoutMusics') === 'true'),
+        })
+        this.search()
+      })
+      .unsubscribe()
+    this.form.valueChanges.pipe(debounceTime(250)).subscribe(() => {
+      this.search()
+      const queryParams: Params = this.form.value
+
+      void this.router.navigate([], {
+        relativeTo: this.activatedRoute,
+        queryParams: queryParams,
+        replaceUrl: true,
+      })
+    })
   }
 
   search(): void {
-    if (this.http) {
-      this.http.unsubscribe()
-    }
+    console.log('??')
+    console.log(this.form.value)
     this.loading = true
     this.http = this.adminGameHttpService
-      .search(this.query, this.showDisabled)
+      .search(this.form.value, 0, 24)
       .pipe(finalize(() => (this.loading = false)))
       .subscribe((res) => {
         this.gamesCount = res.count
         this.games = res.data
       })
   }
 
+  onScrollDown() {
+    this.http = this.adminGameHttpService
+      .search(this.form.value, this.games.length, 24)
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe((res) => {
+        this.games = [...this.games, ...res.data]
+      })
+  }
+
   openImportDialog(): void {
     const dialogRef = this.dialog.open(ImportGameDialogComponent)
     dialogRef.afterClosed().subscribe(() => {
       this.search()
     })
   }
-
-  toggleShowDisabled(): void {
-    this.showDisabled = !this.showDisabled
-    this.search()
-  }
 }

src/app/modules/admin/modules/games/components/game-search/import-game-dialog/import-game-dialog.component.html

@@ -26,7 +26,7 @@ <h2>Import a game</h2>
 <div mat-dialog-actions class="row justify-content-end">
   <div class="col">
     <button
-      class="btn btn-primary"
+      class="btn btn-outline-primary"
       [disabled]="form.invalid || loading"
       [ngClass]="{ disabled: form.invalid || loading }"
       (click)="form.invalid || loading || submit()"

src/app/modules/admin/modules/games/components/game-show/components/music-row/music-row.component.html

@@ -27,7 +27,7 @@
   </ng-container>
   <ng-template #musicRowButtons>
     <ng-container *ngIf="!edit; else editMusicButtons">
-      <button class="btn btn-sm btn-primary" (click)="createFormGroup()">edit</button>
+      <button class="btn btn-sm btn-outline-primary" (click)="createFormGroup()">edit</button>
       <button class="btn btn-sm btn-danger" (click)="delete()">delete</button>
     </ng-container>
     <ng-template #editMusicButtons>

src/app/modules/admin/modules/games/components/game-show/game-show.component.html

@@ -1,4 +1,3 @@
-<a routerLink="admin/games" class="btn btn-info">back to list</a>
 <ng-container *ngIf="loading; else gameShow">
   <div class="d-flex justify-content-center">
     <div class="spinner-border orange" role="status">
@@ -44,7 +43,7 @@ <h2>Musics</h2>
           {{ musics.errors.apiError }}
         </div>
         <button
-          class="btn btn-primary"
+          class="btn btn-outline-primary"
           [disabled]="uploadLoading || musicFiles.length === 0"
           (click)="uploadLoading || musicFiles.length === 0 || uploadMusic()"
         >

src/app/modules/admin/modules/games/game.module.ts

@@ -8,6 +8,8 @@ import { MusicRowComponent } from './components/game-show/components/music-row/m
 import { AlternativeNameRowComponent } from './components/game-show/components/alternate-name-row/alternative-name-row.component'
 import { ImportGameDialogComponent } from './components/game-search/import-game-dialog/import-game-dialog.component'
 import { MatProgressBarModule } from '@angular/material/progress-bar'
+import {InfiniteScrollModule} from "ngx-infinite-scroll";
+import {ScrollingModule} from "@angular/cdk/scrolling";
 
 const routes: Routes = [
   {
@@ -27,6 +29,6 @@ const routes: Routes = [
     AlternativeNameRowComponent,
     ImportGameDialogComponent,
   ],
-  imports: [CommonModule, RouterModule.forChild(routes), SharedModule, MatProgressBarModule],
+  imports: [CommonModule, RouterModule.forChild(routes), SharedModule, MatProgressBarModule, InfiniteScrollModule, ScrollingModule],
 })
 export class GameModule {}