wip new shop

src/app/pages/shop/components/shop-categories/shop-categories.component.html

@@ -2,12 +2,18 @@
   <h3>Catégories</h3>
 
   <div *ngFor="let category of categoriesList">
-    <input type="radio"
-           id="check-{{ category.name }}"
-           name="{{ category.name }}"
-           value="{{ category.name }}"
-           class="category-checkbox">
-
-    <label class="category-name" for="check-{{ category.name }}">{{ category.name }}</label>
+      <div *ngIf="category.id && categorySelected && category.id === categorySelected.id else notSelected">
+          <div class="category-selected">
+              <h4>{{ category.name }}</h4>
+              <p>{{ category.description }}</p>
+          </div>
+      </div>
+      <ng-template #notSelected>
+          <div class="category" (click)="selectCategory(category)">
+              <h4>{{ category.name }}</h4>
+              <p>{{ category.description }}</p>
+          </div>
+      </ng-template>
+      <hr>
   </div>
 </div>

src/app/pages/shop/components/shop-categories/shop-categories.component.ts

@@ -1,20 +1,51 @@
-import {Component} from '@angular/core';
-import {PacifistaShopCategoryDTO} from "@funixproductions/funixproductions-requests";
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {
+  PacifistaShopCategoryDTO,
+  PacifistaShopCategoryService,
+  PageOption,
+  QueryBuilder
+} from "@funixproductions/funixproductions-requests";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../../../environments/environment";
+import NotificationService from "../../../../services/notifications/services/NotificationService";
 
 @Component({
   selector: 'app-shop-categories',
   templateUrl: './shop-categories.component.html',
   styleUrls: ['./shop-categories.component.scss']
 })
-export class ShopCategoriesComponent {
+export class ShopCategoriesComponent implements OnInit {
+
+  private categoriesService: PacifistaShopCategoryService;
+  @Output() onCategorySelected = new EventEmitter<PacifistaShopCategoryDTO>();
 
   categoriesList: PacifistaShopCategoryDTO[] = [];
+  categorySelected?: PacifistaShopCategoryDTO;
+
+  constructor(httpClient: HttpClient,
+              private notificationService: NotificationService) {
+    this.categoriesService = new PacifistaShopCategoryService(httpClient, environment.production);
+  }
 
-  constructor() {
-    const gradesCategory = new PacifistaShopCategoryDTO();
-    gradesCategory.name = "Grades";
+  ngOnInit(): void {
+    const pageOption: PageOption = new PageOption();
+    pageOption.elemsPerPage = 100;
+    pageOption.page = 0;
+    pageOption.sort = 'name:asc';
+
+    this.categoriesService.find(pageOption, new QueryBuilder()).subscribe({
+      next: (categories) => {
+        this.categoriesList = categories.content;
+      },
+      error: err => {
+        this.notificationService.onErrorRequest(err);
+      }
+    });
+  }
 
-    this.categoriesList.push(gradesCategory);
+  selectCategory(category: PacifistaShopCategoryDTO): void {
+    this.categorySelected = category;
+    this.onCategorySelected.emit(category);
   }
 
 }

src/app/pages/shop/shop.component.html

@@ -1,28 +1,31 @@
 <div class="shop-container">
   <div class="container">
     <h1>Boutique</h1>
-    <p>La boutique officielle de Pacifista.</p>
+    <p>La boutique officielle de Pacifista pour acheter des avantages uniques et soutenir le serveur Minecraft et son équipe.</p>
 
     <div class="row justify-content-center">
       <div class="col col-md-3">
 
         <div class="container bg-dark rounded-4 shadow md-3">
           <div class="container-fluid">
-            <app-shop-categories></app-shop-categories>
+            <app-shop-categories
+            ></app-shop-categories>
           </div>
         </div>
 
         <div class="container bg-dark rounded-4 shadow">
           <div class="container-fluid">
-            <app-shop-basket-little></app-shop-basket-little>
+            <app-shop-basket-little
+            ></app-shop-basket-little>
           </div>
         </div>
       </div>
 
       <div class="col col-md-9">
         <div class="container">
           <div class="container-fluid">
-            <app-shop-articles></app-shop-articles>
+            <app-shop-articles
+            ></app-shop-articles>
           </div>
         </div>
       </div>

src/app/pages/shop/shop.module.ts

@@ -10,6 +10,7 @@ import {ShopArticleComponent} from './components/shop-articles/shop-article/shop
 import {ShopArticleModalComponent} from './components/shop-articles/shop-article-modal/shop-article-modal.component';
 import {ShopCheckoutComponent} from './shop-checkout/shop-checkout.component';
 import {ShopBasketLittleComponent} from './components/shop-basket-little/shop-basket-little.component';
+import {HttpClientModule} from "@angular/common/http";
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import {ShopBasketLittleComponent} from './components/shop-basket-little/shop-ba
   ],
   imports: [
     CommonModule,
+    HttpClientModule,
     ShopRoutingModule,
     FontAwesomeModule
   ]