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

wip: fix linter errors

style(): adjust input width

style: adjust input color and padding

Author: SebastienDechand

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

@@ -0,0 +1,4 @@
+<p-floatlabel [variant]="variant">
+  <input pInputText [id]="'input_' + (label | lowercase)" [(ngModel)]="value" [type]="type" [disabled]="disabled" autocomplete="off" />
+  <label [for]="'input_' + (label | lowercase)">{{ label }}</label>
+</p-floatlabel>

public/LogoALAsso.png

@@ -0,0 +1,26 @@
+p-floatlabel {
+  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,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputFieldComponent } from './input-field.component';
+
+describe('InputFieldComponent', () => {
+  let component: InputFieldComponent;
+  let fixture: ComponentFixture<InputFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputFieldComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+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';
+
+@Component({
+  selector: 'app-input-field',
+  standalone: true,
+  imports: [CommonModule, InputTextModule, FloatLabelModule, 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.spec.ts

@@ -1,13 +1,23 @@
 <div class="activities-home">
-  <div class="search-activities">
-    <!--TODO: rajouter ici composant qui regroupe les input de recherche pour la page activities-->
+  <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>
 
-  <div class="cards-and-map">
-    <div class="cards-activities" [ngClass]="chosenNavigation !== 'Liste' ? 'hidden' : ''">
-      @for (activity of activities$ | async; track activity.id) {
+  <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) {
         <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-->

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

@@ -51,4 +51,34 @@
       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.html

@@ -5,10 +5,11 @@ 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';
 
 @Component({
   selector: 'app-activities-home',
-  imports: [ActivityCardComponent, AsyncPipe, ToggleMenuComponent, NgClass],
+  imports: [ActivityCardComponent, AsyncPipe, ToggleMenuComponent, NgClass, InputFieldComponent],
   templateUrl: './activities-home.component.html',
   styleUrl: './activities-home.component.scss',
   standalone: true,