Merge pull request #12 from WildCodeSchool/feature/issue-23/create-single-input

feat: (issue-23) create reusable single input component

Author: EmmanuelleBonoli

package-lock.json

@@ -30,6 +30,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.1.5",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
     "@angular/core": "^19.0.0",
@@ -39,7 +40,8 @@
     "@angular/router": "^19.0.0",
     "@ngrx/store": "^19.0.1",
     "@primeng/themes": "^19.0.6",
-    "primeng": "^19.0.6",
+    "primeicons": "^7.0.0",
+    "primeng": "^19.0.8",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

package.json

@@ -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,
+  },
 ];

public/LogoALAsso.png

@@ -0,0 +1,9 @@
+<p-floatlabel [variant]="variant">
+  @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/app.routes.ts

@@ -0,0 +1,27 @@
+p-floatlabel {
+  input,
+  ::ng-deep p-calendar span input {
+    width: 100%;
+    font-size: 16px;
+    background-color: var(--background-color-light);
+    border: var(--grey-border);
+    border-radius: 8px;
+    transition: border-color 0.3s ease-in-out;
+    color: black;
+
+    &:focus,
+    &:hover,
+    &:active {
+      border-color: var(--primary-light-color) !important;
+      outline: none;
+      ~ label {
+        color: var(--primary-light-color);
+      }
+    }
+
+    label {
+      transition: all 0.3s ease-in-out;
+      color: var(--primary-light-color);
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+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, CalendarModule, FormsModule],
+  templateUrl: './input-field.component.html',
+  styleUrls: ['./input-field.component.scss'],
+})
+export class InputFieldComponent {
+  @Input() label: string = '';
+  @Input() type: string = 'text';
+  @Input() disabled: boolean = false;
+  @Input() variant: 'in' | 'on' = 'in';
+  value: string = '';
+}

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

@@ -9,9 +9,9 @@
         <app-activity-card [activity]="activity"></app-activity-card>
       }
     </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">

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

@@ -1,10 +1,10 @@
+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 { 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',

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

@@ -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>