Page filters améliorations + Composant Avis-bar

src/app/filters/avis-bar/avis-bar.component.html

@@ -0,0 +1,10 @@
+<div (mouseleave)="onMouseLeave()">
+  <app-icon *ngFor="let star of starStates; let starIndex = index"
+  [iconName]="star.stateHoverUser ? 'star-fill' : 'star'"
+  [iconSize]="2.5"
+  [iconColor]="'#ffbf00'"
+  style="padding: 6px;"
+  (mouseover)="onMouseOver(starIndex)"
+  (click)="onClickStar(starIndex)"
+  ></app-icon>
+</div>

src/app/filters/avis-bar/avis-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvisBarComponent } from './avis-bar.component';
+
+describe('AvisBarComponent', () => {
+  let component: AvisBarComponent;
+  let fixture: ComponentFixture<AvisBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AvisBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AvisBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/filters/avis-bar/avis-bar.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-avis-bar',
+  templateUrl: './avis-bar.component.html',
+  styleUrls: ['./avis-bar.component.scss']
+})
+export class AvisBarComponent implements OnInit {
+
+  starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[];
+
+
+  constructor() {
+
+    this.starStates = [];
+
+    for (let index = 0; index < 5; index++) {
+      this.starStates.push(
+        {
+          stateSelectedUser : false,
+          stateHoverUser : false
+        }
+      );
+    }
+
+  }
+
+  ngOnInit(): void {
+  }
+
+  onMouseOver(index: number) {
+    console.log("star over", index);
+    for (let i = 0; i < this.starStates.length ; i++) {
+      if(i <= index) {
+        this.starStates[i].stateHoverUser = true;
+      } else {
+        this.starStates[i].stateHoverUser = false;
+      }
+    }
+  }
+
+  onMouseLeave() {
+    const tempTab = [];
+    for (let index = 0; index < this.starStates.length; index++) {
+      tempTab.push(
+        {
+          stateSelectedUser : this.starStates[index].stateSelectedUser,
+          stateHoverUser : this.starStates[index].stateSelectedUser
+        }
+      );
+    }
+    this.starStates = [...tempTab];
+  }
+
+  onClickStar(starIndex: number) {
+    for (let i = 0; i < this.starStates.length ; i++) {
+      if(i <= starIndex) {
+        this.starStates[i].stateSelectedUser = true;
+      } else {
+        this.starStates[i].stateSelectedUser = false;
+      }
+    }
+  }
+
+}

src/app/filters/icon/icon.component.html

@@ -0,0 +1,3 @@
+<i class="bi-{{iconName}}"
+[ngStyle]="{'font-size.rem': iconSize, 'color': iconColor}"></i>
+

src/app/filters/icon/icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/filters/icon/icon.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'app-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent implements OnInit {
+
+  @Input() iconName!: string;
+  @Input() iconSize!: number;
+  @Input() iconColor!: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+
+
+}