texarea icons in tasks only in the first task of the role

src/app/pieces/tasks/annexe-task/annexe-task.component.html

@@ -81,7 +81,8 @@
             <mat-icon class="piece-form-top-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
             <mat-icon class="piece-form-top-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>
         </div>
-        <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('annexe')[0] && j == findFirstIndexOfTaskType('annexe')[1]) ? urlIcon : ''"
+            placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 Prérequis

src/app/pieces/tasks/annexe-task/annexe-task.component.scss

@@ -57,7 +57,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 50px;
+        left: 45px;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
@@ -199,7 +199,6 @@
             resize: none;
             flex-grow: 1;
             font-size: 15px;
-            background-image: url("../../../../assets/background-images/annexe.png");
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/annexe-task/annexe-task.component.ts

@@ -23,6 +23,8 @@ export class AnnexeTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
+  urlIcon: string = 'url("../../../../assets/background-images/annexe.png")';
+
   constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
@@ -111,4 +113,14 @@ export class AnnexeTaskComponent implements OnInit {
     return res;
   }
 
+  findFirstIndexOfTaskType(type: string): number[] {
+    for(let i = 0; i < this.role.tasks.length; i++) {
+      for(let j = 0; j < this.role.tasks[i].length; j++) {
+        if (this.role.tasks[i][j] instanceof Task && this.role.tasks[i][j]?.type == type) {
+          return [i, j];
+        }
+      }
+    }
+    return [0, 0];
+  } 
 }

src/app/pieces/tasks/final-task/final-task.component.html

@@ -112,7 +112,8 @@
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Mettre le site web en ligne"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('final')[0] && j == findFirstIndexOfTaskType('final')[1]) ? urlIcon : ''"
+            placeholder="Mettre le site web en ligne"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 Prérequis

src/app/pieces/tasks/final-task/final-task.component.scss

@@ -103,7 +103,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 50px;
+        left: 45px;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
@@ -202,6 +202,7 @@
             border-right: solid black 1px;
             width: 40px;
             height: 40px;
+            background-color: var(--background-color);
             transform: translateY(-50%) rotate(45deg);
             position: absolute;
             left: -20px;
@@ -233,7 +234,6 @@
             resize: none;
             flex-grow: 1;
             font-size: 15px;
-            background-image: url("../../../../assets/background-images/final.png");
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/final-task/final-task.component.ts

@@ -23,6 +23,8 @@ export class FinalTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
+  urlIcon: string = 'url("../../../../assets/background-images/final.png")';
+
   constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
@@ -113,4 +115,14 @@ export class FinalTaskComponent implements OnInit {
     return res;
   }
 
+  findFirstIndexOfTaskType(type: string): number[] {
+    for(let i = 0; i < this.role.tasks.length; i++) {
+      for(let j = 0; j < this.role.tasks[i].length; j++) {
+        if (this.role.tasks[i][j] instanceof Task && this.role.tasks[i][j]?.type == type) {
+          return [i, j];
+        }
+      }
+    }
+    return [0, 0];
+  } 
 }

src/app/pieces/tasks/optionnal-task/optionnal-task.component.html

@@ -113,7 +113,8 @@
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Partir d'un template / Partir de zéro"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('optionnal')[0] && j == findFirstIndexOfTaskType('optionnal')[1]) ? urlIcon : ''"
+            placeholder="Partir d'un template / Partir de zéro"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 Prérequis

src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss

@@ -103,7 +103,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 50px;
+        left: 45px;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;

src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts

@@ -23,6 +23,8 @@ export class OptionnalTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
+  urlIcon: string = '';
+
   constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
@@ -131,4 +133,14 @@ export class OptionnalTaskComponent implements OnInit {
     return res;
   }
 
+  findFirstIndexOfTaskType(type: string): number[] {
+    for(let i = 0; i < this.role.tasks.length; i++) {
+      for(let j = 0; j < this.role.tasks[i].length; j++) {
+        if (this.role.tasks[i][j] instanceof Task && this.role.tasks[i][j]?.type == type) {
+          return [i, j];
+        }
+      }
+    }
+    return [0, 0];
+  } 
 }

src/app/pieces/tasks/random-event/random-event.component.html

@@ -105,7 +105,8 @@
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Le client modifie sa demande"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('event')[0] && j == findFirstIndexOfTaskType('event')[1]) ? urlIcon : ''"
+            placeholder="Le client modifie sa demande"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 Prérequis

src/app/pieces/tasks/random-event/random-event.component.scss

@@ -94,7 +94,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 50px;
+        left: 45px;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
@@ -236,7 +236,6 @@
             resize: none;
             flex-grow: 1;
             font-size: 15px;
-            background-image: url("../../../../assets/background-images/event.png");
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/random-event/random-event.component.ts

@@ -23,6 +23,8 @@ export class RandomEventComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
+  urlIcon: string = 'url("../../../../assets/background-images/event.png")';
+
   constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
@@ -107,4 +109,15 @@ export class RandomEventComponent implements OnInit {
     }
     return res;
   }
+
+  findFirstIndexOfTaskType(type: string): number[] {
+    for(let i = 0; i < this.role.tasks.length; i++) {
+      for(let j = 0; j < this.role.tasks[i].length; j++) {
+        if (this.role.tasks[i][j] instanceof Task && this.role.tasks[i][j]?.type == type) {
+          return [i, j];
+        }
+      }
+    }
+    return [0, 0];
+  } 
 }

src/app/pieces/tasks/task/task.component.html

@@ -113,7 +113,8 @@
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('normal')[0] && j == findFirstIndexOfTaskType('normal')[1]) ? urlIcon : ''"
+            placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 Prérequis

src/app/pieces/tasks/task/task.component.scss

@@ -103,7 +103,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 50px;
+        left: 45px;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
@@ -245,7 +245,6 @@
             resize: none;
             flex-grow: 1;
             font-size: 15px;
-            background-image: url("../../../../assets/background-images/tache.png");
             background-position: center;
             background-repeat: no-repeat;
             background-size: 100px;

src/app/pieces/tasks/task/task.component.ts

@@ -23,6 +23,8 @@ export class TaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
+  urlIcon: string = 'url("../../../../assets/background-images/tache.png")';
+
   constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
@@ -130,6 +132,17 @@ export class TaskComponent implements OnInit {
     }
     return res;
   }
+
+  findFirstIndexOfTaskType(type: string): number[] {
+    for(let i = 0; i < this.role.tasks.length; i++) {
+      for(let j = 0; j < this.role.tasks[i].length; j++) {
+        if (this.role.tasks[i][j] instanceof Task && this.role.tasks[i][j]?.type == type) {
+          return [i, j];
+        }
+      }
+    }
+    return [0, 0];
+  } 
 }