wip: ajout d'une page démo

Author: SebastienDechand

src/app/app.routes.ts

@@ -1,9 +1,14 @@
 import { Routes } from '@angular/router';
 import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
+import { DemoComponent } from './features/activity/pages/demo/demo.component';
 
 export const routes: Routes = [
   {
     path: '',
     component: ActivitiesHomeComponent,
   },
+  {
+    path: 'demo',
+    component: DemoComponent,
+  },
 ];

src/app/common/components/input-field/input-field.component.html

@@ -1,4 +1,9 @@
 <p-floatlabel [variant]="variant">
-  <input pInputText [id]="'input_' + (label | lowercase)" [(ngModel)]="value" [type]="type" [disabled]="disabled" autocomplete="off" />
+  @if (type === 'date') {
+    <p-calendar [inputId]="'input_' + (label | lowercase)" [(ngModel)]="value" [disabled]="disabled" dateFormat="dd.mm.yy"> </p-calendar>
+  } @else {
+    <input pInputText [id]="'input_' + (label | lowercase)" [(ngModel)]="value" [type]="type" [disabled]="disabled" autocomplete="off" />
+  }
+
   <label [for]="'input_' + (label | lowercase)">{{ label }}</label>
 </p-floatlabel>

src/app/common/components/input-field/input-field.component.scss

@@ -1,5 +1,6 @@
 p-floatlabel {
-  input {
+  input,
+  ::ng-deep p-calendar span input {
     width: 100%;
     font-size: 16px;
     background-color: var(--background-color-light);

src/app/common/components/input-field/input-field.component.spec.ts

@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { InputTextModule } from 'primeng/inputtext';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { FormsModule } from '@angular/forms';
+import { CalendarModule } from 'primeng/calendar';
 
 @Component({
   selector: 'app-input-field',
   standalone: true,
-  imports: [CommonModule, InputTextModule, FloatLabelModule, FormsModule],
+  imports: [CommonModule, InputTextModule, FloatLabelModule, CalendarModule, FormsModule],
   templateUrl: './input-field.component.html',
   styleUrls: ['./input-field.component.scss'],
 })

src/app/common/components/input-field/input-field.component.ts

@@ -1,28 +1,18 @@
 <div class="activities-home">
-  <div class="activities-home__header">
-    <h3>Demo Input Single</h3>
-    <div class="activities-home__header__inputs">
-      <app-input-field label="Nom"></app-input-field>
-      <app-input-field label="Prénom"></app-input-field>
-    </div>
+  <div class="search-activities">
+    <!--TODO: rajouter ici composant qui regroupe les input de recherche pour la page activities-->
   </div>
 
-  <div class="activities-home__list">
-    <div class="search-activities">
-      <!--TODO: rajouter ici composant qui regroupe les input de recherche pour la page activities-->
-    </div>
-
-    <div class="cards-and-map">
-      <div class="cards-activities" [ngClass]="chosenNavigation !== 'Liste' ? 'hidden' : ''">
-        @for (activity of activities$ | async; track activity.id) {
+  <div class="cards-and-map">
+    <div class="cards-activities" [ngClass]="chosenNavigation !== 'Liste' ? 'hidden' : ''">
+      @for (activity of activities$ | async; track activity.id) {
         <app-activity-card [activity]="activity"></app-activity-card>
-        }
-      </div>
-    </div>
-    <div class="map-activities" [ngClass]="chosenNavigation !== 'Carte' ? 'hidden' : ''">
-      <!--TODO: rajouter ici composant map pour la page activities-->
+      }
     </div>
   </div>
+  <div class="map-activities" [ngClass]="chosenNavigation !== 'Carte' ? 'hidden' : ''">
+    <!--TODO: rajouter ici composant map pour la page activities-->
+  </div>
 
   <div class="switch-map">
     <app-toggle-menu [tabs]="navigationItems" (chosenTab)="handleNavigation($event)"></app-toggle-menu>

src/app/features/activity/pages/activities-home/activities-home.component.html

@@ -51,34 +51,4 @@
       transform: translateX(-50%);
     }
   }
-
-  &__header {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    margin-bottom: 50px;
-    h3 {
-      font-size: 1.5rem;
-      color: var(--primary-light-color);
-    }
-
-    &__inputs {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 1rem;
-
-      .input-field {
-        width: 200px;
-      }
-    }
-  }
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    gap: 1rem;
-    padding: 1rem;
-  }
 }

src/app/features/activity/pages/activities-home/activities-home.component.scss

@@ -1,15 +1,14 @@
+import { AsyncPipe, NgClass } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
-import { ActivityCardComponent } from '../../components/activity-card/activity-card.component';
-import { ActivityFacadeService } from '../../services/activity-facade.service';
-import { Activity } from '../../models/activity.model';
 import { Observable } from 'rxjs';
-import { AsyncPipe, NgClass } from '@angular/common';
 import { ToggleMenuComponent } from '../../../../common/components/toggle-menu/toggle-menu.component';
-import { InputFieldComponent } from '../../../../common/components/input-field/input-field.component';
+import { ActivityCardComponent } from '../../components/activity-card/activity-card.component';
+import { Activity } from '../../models/activity.model';
+import { ActivityFacadeService } from '../../services/activity-facade.service';
 
 @Component({
   selector: 'app-activities-home',
-  imports: [ActivityCardComponent, AsyncPipe, ToggleMenuComponent, NgClass, InputFieldComponent],
+  imports: [ActivityCardComponent, AsyncPipe, ToggleMenuComponent, NgClass],
   templateUrl: './activities-home.component.html',
   styleUrl: './activities-home.component.scss',
   standalone: true,

src/app/features/activity/pages/activities-home/activities-home.component.ts

@@ -0,0 +1,7 @@
+<div class="input-demo">
+  <h3>Single Input Demo</h3>
+  <app-input-field label="Nom" type="text"></app-input-field>
+  <app-input-field label="Email" type="email"></app-input-field>
+  <app-input-field label="Mot de passe" type="password"></app-input-field>
+  <app-input-field label="Date de naissance" type="date"></app-input-field>
+</div>

src/app/features/activity/pages/demo/demo.component.html

@@ -0,0 +1,12 @@
+.input-demo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 50px 0;
+
+  h3 {
+    color: var(--primary-light-color);
+  }
+}