fix: improve sensitive area detail

Author: bastyen

src/app/components/sensitive-area/sensitive-area.component.html

@@ -26,9 +26,12 @@
     </div>
     <div class="sensitive-area-practices">
       <div
-        *ngFor="let practice of sensitiveArea.properties.practices"
+        *ngFor="
+          let practice of sensitiveArea.properties.practices;
+          let i = index
+        "
         class="sensitive-area-practice"
-        [innerHTML]="getSensitiveAreaPracticeName(practice)"
+        [innerHTML]="getSensitiveAreaPracticeName(practice, i)"
       ></div>
     </div>
   </div>

src/app/components/sensitive-area/sensitive-area.component.scss

@@ -38,6 +38,10 @@
   }
 }
 
+.sensitive-area-period {
+  text-transform: capitalize;
+}
+
 .sensitive-area-period-container,
 .sensitive-area-practice-container,
 .sensitive-area-contact-container,

src/app/components/sensitive-area/sensitive-area.component.ts

@@ -11,14 +11,16 @@ export class SensitiveAreaComponent {
   @Input() public sensitiveArea!: SensitiveArea | any;
   @Input() public sensitiveAreaPractices!: DataSetting | undefined;
 
-  getSensitiveAreaPracticeName(id: number): string {
-    return this.sensitiveAreaPractices!.values.find(
-      (sensitiveAreaPractice) => sensitiveAreaPractice.id === id
-    )!.name;
+  getSensitiveAreaPracticeName(id: number, index: number): string {
+    return `${
+      this.sensitiveAreaPractices!.values.find(
+        (sensitiveAreaPractice) => sensitiveAreaPractice.id === id
+      )!.name
+    }${!(index + 1 === this.sensitiveArea.properties.practices.length) ? ' - ' : ''}`;
   }
 
   getSensitiveAreaPeriod(index: number): string {
-    return `${new Date(0, index + 1, 0).toLocaleDateString('fr', { month: 'long' }).toUpperCase()}${
+    return `${new Date(0, index + 1, 0).toLocaleDateString('fr', { month: 'long' })}${
       this.sensitiveArea.properties.period
         .slice(index + 1)
         .find((month: boolean) => month)