dynamic tasks

src/app/app.component.scss

@@ -29,7 +29,7 @@
 
     &-scenario {
         &-chronologie {
-            margin-bottom: 400px;
+            margin-bottom: 450px;
             position: relative;
             left: 800px;
 
@@ -63,7 +63,26 @@
                     flex-direction: column;
                     margin-bottom: 100px;
                     position: relative;
-                    top: -734px;
+                    top: -784px;
+
+                    &-buttonAdd {
+                        display: flex;
+                        width: 400px;
+                        justify-content: center;
+                        align-items: center;
+
+                        button {
+                            border-radius: 10px;
+                            background-color: #f7f7f7;
+                            border: solid black 1px;
+                            width: 75px;
+                            height: 75px;
+
+                            mat-icon {
+                                transform: scale(1.5);
+                            }
+                        }
+                    }
 
                     &-missionPieces {
                         display: flex;
@@ -74,7 +93,7 @@
                         display: flex;
                         flex-direction: column;
                         position: relative;
-                        top: -359px;
+                        top: -409px;
 
                         &-role {
                             display: flex;
@@ -82,7 +101,7 @@
                             margin-bottom: 50px;
 
                             &-chronologie {
-                                margin-bottom: 25px;
+                                margin-bottom: 75px;
                                 margin-left: 400px;
                     
                                 &-title {
@@ -106,6 +125,15 @@
                                     display: flex;
                                     flex-direction: row;
                                 }
+
+                                &-menuButton {
+                                    border-radius: 10px;
+                                    margin-bottom: 5px;
+                                }
+
+                                &-menuButton:hover {
+                                    opacity: 0.75;
+                                }
                             }
                         }
                     }

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { Mission } from './class/mission/mission';
 import { Scenario } from './class/scenario/scenario';
+import { Step } from './class/step/step';
+import { Task } from './class/task/task';
+import { Role } from './class/role/role';
 
 @Component({
   selector: 'app-root',
@@ -13,10 +17,14 @@ export class AppComponent {
 
   constructor() {
     this.scenario = new Scenario();
+
+    this.scenario.missions.forEach(mission => {
+      mission.equalizeLengths();   
+    });
   }
 
-  test() {
-    console.log(this.scenario);
+  test(): void {
+
   }
 
   downloadFile(): void {
@@ -30,7 +38,7 @@ export class AppComponent {
     URL.revokeObjectURL(url);
   }
   
-  onFileSelected(event: any) {
+  onFileSelected(event: any): void {
     const file: File = event.target.files[0];
     if (file) {
       const reader: FileReader = new FileReader();
@@ -42,4 +50,23 @@ export class AppComponent {
       };
     }
   }
+
+  addMissionStep(mission: Mission, index: number): void {
+    mission.addChronologieStep(index);
+    mission.equalizeLengths();
+  }
+
+  addRoleStep(mission: Mission, role: Role, index: number): void {
+    role.addChronologieStep(index);
+    mission.equalizeLengths();
+  }
+
+  addTask(mission: Mission, role: Role, i: number, j: number, type: string) {
+    role.addTask(i, j, type);
+    mission.equalizeLengths();
+  }
+
+  dontContainFinalOrRepeatTask(tasks: (Task|null)[]): boolean {
+    return !(tasks.some(task => task?.type == 'final') || tasks.some(task => task?.type == 'repeat'));
+  }
 }
\ No newline at end of file

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { AppComponent } from './app.component';
 import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
@@ -65,7 +66,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
     FormsModule,
     BrowserAnimationsModule,
     MatIconModule,
-    MatButtonModule
+    MatButtonModule,
+    MatMenuModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/class/mission/mission.ts

@@ -2,11 +2,210 @@ import { EducationnalObjective } from "../educationnal-objective/educationnal-ob
 import { MissionContext } from "../mission-context/mission-context";
 import { Role } from "../role/role";
 import { Step } from "../step/step";
+import { Task } from "../task/task";
 
 export class Mission {
 
     educationnalObjective: EducationnalObjective = new EducationnalObjective();
     context: MissionContext = new MissionContext();
     roles: Role[] = [new Role(), new Role()];
-    chronologie: Step[] = [new Step()];
+    chronologie: (Step | null)[] = [new Step()];
+
+    public addChronologieStep(index: number) {
+        this.chronologie[index] = new Step();
+    }
+
+    public removeChronologieStep(index: number) {
+        if (this.chronologie.length-1 == index) {
+            this.chronologie.splice(index, 1);
+        } else {
+            this.chronologie[index] = null;
+        }
+    }
+
+    public calcMaxLineLength(): number {
+        let length: number = 0;
+        let cpt: number = 0;
+
+        // Pour chaque étape de mission
+        for (let j = 0; j < this.chronologie.length; j++) {
+            let step: Step | null = this.chronologie[j];
+            if (step != null && step.durationUnit == 'UT') {
+                if (step.duration > 0) {
+                    if (step.duration <= 10) {
+                        cpt = cpt + step.duration;
+                    } else {
+                        cpt = cpt + 10;
+                    }
+                } else {
+                    cpt = cpt + 1;
+                }
+            } else {
+                cpt = cpt + 1;
+            }
+        }
+        if (cpt > length) {
+            length = cpt;
+        }
+        cpt = 0;
+
+        // Pour chaque role
+        for (let k = 0; k < this.roles.length; k++) {
+            let role: Role = this.roles[k];
+
+            // Pour chaque étape du role
+            for (let l = 0; l < role.chronologie.length; l++) {
+                let step: Step | null = role.chronologie[l];
+                if (step != null && step.durationUnit == 'UT') {
+                    if (step.duration > 0) {
+                        if (step.duration <= 10) {
+                            cpt = cpt + step.duration;
+                        } else {
+                            cpt = cpt + 10;
+                        }
+                    } else {
+                        cpt = cpt + 1;
+                    }
+                } else {
+                    cpt = cpt + 1;
+                }
+            }
+            if (cpt > length) {
+                length = cpt;
+            }
+            cpt = 0;
+
+            // Pour chaque ligne de tâche
+            for (let m = 0; m < role.tasks.length; m++) {
+                let inlineTasks: (Task | null)[] = role.tasks[m];
+                // Pour chaque tâche
+                for (let n = 0; n < inlineTasks.length; n++) {
+                    let task: Task | null = inlineTasks[n];
+                    if (task != null && task.durationUnit == 'UT') {
+                        if (task.duration > 0) {
+                            if (task.duration <= 10) {
+                                cpt = cpt + task.duration;
+                            } else {
+                                cpt = cpt + 10;
+                            }
+                        } else {
+                            cpt = cpt + 1;
+                        }
+                    } else {
+                        cpt = cpt + 1;
+                    }
+                }
+                if (cpt > length) {
+                    length = cpt;
+                }
+                cpt = 0;
+            }
+        }
+        return length;
+    }
+    
+    public equalizeLengths(): void {
+        //Pour la chronologie
+        if (this.chronologie.some(element => element instanceof Step)) {
+            let lastIndexStep = this.chronologie.length-1;
+            while (!(this.chronologie[lastIndexStep] instanceof Step)) {
+                lastIndexStep--;
+            }
+            this.chronologie.splice(lastIndexStep+1, this.chronologie.length);
+        } else {
+            this.chronologie = [];
+        }
+
+        // Pour chaque role
+        this.roles.forEach(role => {
+            // Pour la chronologie du role
+            if (role.chronologie.some(element => element instanceof Step)) {
+                let lastIndexStep = role.chronologie.length-1;
+                while (!(role.chronologie[lastIndexStep] instanceof Step)) {
+                    lastIndexStep--;
+                }
+                role.chronologie.splice(lastIndexStep+1, role.chronologie.length);
+            } else {
+                role.chronologie = [];
+            }
+            
+            // Pour les taches
+            role.tasks.forEach(inlineTasks => {
+                if (inlineTasks.some(element => element instanceof Task)) {
+                    let lastIndexTask = inlineTasks.length-1;
+                    while (!(inlineTasks[lastIndexTask] instanceof Task)) {
+                        lastIndexTask--;
+                    }
+                    inlineTasks.splice(lastIndexTask+1, inlineTasks.length);
+                } else {
+                    inlineTasks = [];
+                }
+            });
+        });
+
+        //---------
+
+        let maxLineLength: number = this.calcMaxLineLength()-1;
+        if (!(this.chronologie[maxLineLength] instanceof Step)) {
+            this.chronologie[maxLineLength] = null;
+        }
+
+        this.roles.forEach(role => {
+            if (!(role.chronologie[maxLineLength] instanceof Step)) {
+                role.chronologie[maxLineLength] = null;
+            }
+
+            role.tasks.forEach(inlineTasks => {
+                if (!(inlineTasks.some(task => task?.type == 'final') || inlineTasks.some(task => task?.type == 'repeat'))) {
+                    if (!(inlineTasks[maxLineLength] instanceof Task)) {
+                        inlineTasks[maxLineLength] = null;
+                    }
+                }
+            });
+        });
+
+        // DurationChange
+        /* 
+        let maxLineLength: number = this.calcMaxLineLength()-1;
+        if (!(this.chronologie[maxLineLength] instanceof Step)) {
+            this.chronologie[maxLineLength - this.sumUT(this.chronologie)] = null;
+        }
+
+        this.roles.forEach(role => {
+            if (!(role.chronologie[maxLineLength] instanceof Step)) {
+                role.chronologie[maxLineLength - this.sumUT(role.chronologie)] = null;
+            }
+
+            role.tasks.forEach(inlineTasks => {
+                if (!(inlineTasks[maxLineLength] instanceof Task)) {
+                    inlineTasks[maxLineLength - this.sumUT(inlineTasks)] = null;
+                }
+            });
+        });
+        */
+    }
+
+    // DurationChange
+    /*
+    sumUT(list: ((Step|null)|(Task|null))[]): number {
+        let sum = 0;
+
+        list.forEach(element => {
+            if (element?.durationUnit == 'UT') {
+                console.log('UT OK');
+                if (element.duration > 1) {
+                    console.log('Duration < 1 OK');
+                    if (element.duration>=10) {
+                        sum = sum + 10;
+                    } else {
+                        sum = sum + element.duration;
+                        console.log('addition : '+sum);
+                    }
+                }
+            }
+        });
+        console.log(sum);
+        return sum;
+    }
+    */
 }

src/app/class/role/role.ts

@@ -17,10 +17,49 @@ export class Role {
     ressources: Ressource[] = [];
     supplementaryRoles: SupplementaryRole[] = [];
     comments: Comment[] = [];
-    occurences: RoleOccurrence[] = [new RoleOccurrence()]
-    tasks: Task[][] = [
-        [new Task('normal')]
-    ]
-    chronologie: Step[] = [];
+    occurences: RoleOccurrence[] = [new RoleOccurrence()];
+    tasks: (Task | null)[][] = [[new Task('normal')], []];
+    chronologie: (Step | null)[] = [];
 
+    public addChronologieStep(index: number) {
+        this.chronologie[index] = new Step();
+    }
+
+    public removeChronologieStep(index: number) {
+        if (this.chronologie.length-1 == index) {
+            this.chronologie.splice(index, 1);
+        } else {
+            this.chronologie[index] = null;
+        }
+    }
+
+    public addTask(i: number, j: number, type: string) {
+        this.tasks[i][j] = new Task(type);
+        if (this.tasks[i+1] == null) {
+            this.tasks[i+1] = [];
+        }
+    }
+
+    public removeTask(i: number, j: number) {
+        if (this.tasks[i].length-1 == j) {
+            this.tasks[i].splice(j, 1);
+        } else {
+            this.tasks[i][j] = null;
+        }
+        if (!this.tasks[i].some(element => element instanceof Task)) {
+            this.tasks.splice(i,1);
+        }
+    }
+
+    public moveTask(i: number, j: number, direction: string): void {
+        let tmp: Task|null = this.tasks[i][j];
+        
+        if (direction == 'left') {
+            this.tasks[i][j] = this.tasks[i][j-1];
+            this.tasks[i][j-1] = tmp;
+        } else if (direction == 'right' && (this.tasks[i][j+1]?.type != 'final' && this.tasks[i][j+1]?.type != 'repeat')) {
+            this.tasks[i][j] = this.tasks[i][j+1];
+            this.tasks[i][j+1] = tmp;
+        }   
+    }
 }

src/app/class/task/task.ts

@@ -6,13 +6,13 @@ import { Symbol } from "../symbol/symbol";
 
 export class Task {
 
-    type: string;   //peut être : normal / annexe / event / optionnal / final / repeater
+    type: string;   //peut être : normal / annexe / event / optionnal / final / repeat
     identifier: string = '';
     symbol: Symbol = new Symbol();
     objective: string = '';
     antecedents: Task[] = [];
     duration: number = 1;
-    durationUnite: string = 'UT';
+    durationUnit: string = 'UT';
     comments: Comment[] = [];
     character!: Character;
     repeat: Repeat = new Repeat();
@@ -24,4 +24,13 @@ export class Task {
         this.type = type;
     }
 
+    public changeType(type: string) {
+        if (type == 'annexe') {
+            this.type = type;
+            this.symbol.color = '';
+            this.symbol.symbol = '';
+        } else {
+            this.type = type;
+        }
+    }
 }

src/app/pieces/role/role.component.html

@@ -12,7 +12,7 @@
 
     <div class="piece-form">
         <div class="piece-form-title">Rôle 1</div>
-        <img src="../../../assets/background-images/role.png"/>
+        <img src="../../../assets/background-images/role_opacity0.png"/>
         <div class="piece-form-intitule">
             <label for="intitule">Intitulé</label>
             <input name="intitule" type="text" [(ngModel)]="role.intitule" placeholder="Développeur/euse web"/>   

src/app/pieces/step/step.component.html

@@ -13,7 +13,7 @@
         <textarea [(ngModel)]="step.description"></textarea>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>
-            <input name="duration" type="text" [(ngModel)]="step.duration" (input)="durationChange()"/>
+            <input name="duration" type="number" [(ngModel)]="step.duration" (input)="durationChange()"/>
             <select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange()">
                 <option value="UT">UT</option>
                 <option value="min">min</option>

src/app/pieces/step/step.component.scss

@@ -113,7 +113,7 @@
                 width: 50px;
                 border-top-left-radius: 10px;
                 border-bottom-left-radius: 10px;
-                text-align: right;
+                text-align: center;
             }
 
             select {

src/app/pieces/step/step.component.ts

 import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
 import { Step } from 'src/app/class/step/step';
 
 @Component({
@@ -9,6 +11,9 @@ import { Step } from 'src/app/class/step/step';
 export class StepComponent implements OnInit {
 
   @Input() step: Step = new Step;
+  @Input() parent!: Mission | Role;
+  @Input() index!: number;
+  @Input() mission!: Mission;
 
   displayMenu: string = 'hide';
   pieceWidth = '400px';
@@ -24,14 +29,22 @@ export class StepComponent implements OnInit {
   }
 
   onClickErase(): void {
-    
+    this.step.description = '';
+    this.step.durationUnit = 'UT';
+    this.step.duration = 1;
   }
 
   onClickDelete(): void {
-    
+    if (this.parent instanceof Mission) {
+      this.parent.removeChronologieStep(this.index);
+    } else if (this.parent instanceof Role) {
+      this.parent.removeChronologieStep(this.index);
+    }
+    this.mission.equalizeLengths();
   }
 
   durationChange(): void {
+    /*
     if(this.step.durationUnit === 'UT') {
       if(this.step.duration >= 1 && this.step.duration <= 10) {
         this.pieceWidth = (this.step.duration*400)+'px';
@@ -43,6 +56,7 @@ export class StepComponent implements OnInit {
     } else {
       this.pieceWidth = '400px';
     }
+    */
   }
 
 }

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <div>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-menu #menuChange="matMenu">
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer Tâche optionnelle</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
+            </mat-menu>
+        </div>
         <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
         <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
     </div>
 
     <div class="piece-prerequires" [class]="displayPrequires">
@@ -64,18 +73,18 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Tâche annexe</div> 
         </div>
-        <textarea class="piece-form-content" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" 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
             </button>
             <div class="piece-form-bottom-duration">
-                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
-                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
-                    <option selected value="UT">UT</option>
+                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
+                    <option value="UT">UT</option>
                     <option value="min">min</option>
                     <option value="tours">tours</option> 
                 </select>

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

@@ -9,7 +9,7 @@
 
     &-menu {
         position: absolute;
-        width: 150px;
+        width: 200px;
         height: 50px;
         background-color: #f7f7f7;
         z-index: -1;
@@ -32,6 +32,15 @@
         mat-icon:hover {
             opacity: 0.75;
         }
+
+        &-changeMenuButton {
+            border-radius: 10px;
+            margin-bottom: 5px;
+        }
+
+        &-changeMenuButton:hover {
+            opacity: 0.75;
+        }
     }
 
     &-menu.show {
@@ -48,13 +57,13 @@
         height: 150px;
         background-color: #f7f7f7;
         z-index: -1;
-        bottom: 0;
-        left: 25px;
+        bottom: 10px;
+        left: 50px;
         border: solid black 1px;
-        border-bottom-left-radius: 10px;
+        border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         transition: transform 0.5s ease;
-        border-top: none;
+        border-left: none;
         display: flex;
         flex-direction: row;
 
@@ -137,7 +146,7 @@
     }
 
     &-prerequires.show {
-        transform: translateY(100%);
+        transform: translateX(100%);
     }
 
     &-attach {
@@ -254,7 +263,7 @@
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
-                    width: 20px;
+                    width: 50px;
                     text-align: center;
                     z-index: 2;
                 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-annexe-task',
@@ -7,23 +10,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AnnexeTaskComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
   displayMenu: string = 'hide';
+  displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  durationUnit: string = 'UT';
-  duration: number = 1;
   pieceWidth: string = '400px';
+
+  @Input() task: Task = new Task('normal');
+  @Input() mission!: Mission;
+  @Input() role!: Role;
+  @Input() i!: number;
+  @Input() j!: number;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.durationChange();
+  }
   
   durationChange(): void {
-    if(this.durationUnit === 'UT') {
-      if(this.duration >= 1  && this.duration <= 10) {
-        this.pieceWidth = (this.duration*400)+'px';
-      } else if(this.duration > 10) {
+    /*
+    if(this.task.durationUnit === 'UT') {
+      if(this.task.duration >= 1 && this.task.duration <= 10) {
+        this.pieceWidth = (this.task.duration*400)+'px';
+      } else if(this.task.duration > 10) {
         this.pieceWidth = '4000px';
       } else {
         this.pieceWidth = '400px';
@@ -31,10 +41,14 @@ export class AnnexeTaskComponent implements OnInit {
     } else {
       this.pieceWidth = '400px';
     }
+    */
   }
 
   onClickErase(): void {
-    
+    this.task.duration = 1;
+    this.task.durationUnit = 'UT';
+    this.task.identifier = '';
+    this.task.objective = '';
   } 
 
   onClickDots(): void {
@@ -42,11 +56,12 @@ export class AnnexeTaskComponent implements OnInit {
   }
 
   onClickDelete(): void {
-
+    this.role.removeTask(this.i, this.j);
+    this.mission.equalizeLengths();
   }
 
-  onClickChange(): void {
-    
+  onClickChange(type: string): void {
+    this.task.changeType(type);
   }
 
   changeDisplayPrerequires(): void {
@@ -57,4 +72,41 @@ export class AnnexeTaskComponent implements OnInit {
     }
   }
 
+  canChangeInFinalTask(): boolean {
+    let res: boolean = true;
+    let lastTaskIndex: number = -1;
+    for (let i = this.role.tasks[this.i].length - 1; i >= 0; i--) {
+      if (this.role.tasks[this.i][i] instanceof Task) {
+        lastTaskIndex = i;
+        break;
+      }
+    }
+    if (this.j < lastTaskIndex || this.role.tasks[this.i].some(task => task?.type == 'final') || this.role.tasks[this.i].some(task => task?.type == 'repeat')) {
+      res = false;
+    }
+    return res;
+  }
+
+  moveTask(direction: string): void {
+    this.role.moveTask(this.i, this.j, direction);
+    this.displayMenu = 'hide';
+    this.displayPrequires = 'hide';
+    this.displaySymbolChoice = 'hide';
+    this.mission.equalizeLengths();
+  }
+
+  canMoveTo(direction: string): boolean {
+    let res: boolean = true;
+    if (direction == 'left') {
+      if (this.j == 0) {
+        res = false;
+      }
+    } else if (direction == 'right') {
+      if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
+        res = false;
+      }
+    }
+    return res;
+  }
+
 }

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <div>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-menu #menuChange="matMenu">
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer Tâche annexe</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer une Tâche optionnelle</button>
+            </mat-menu>
+        </div>
         <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
         <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">
@@ -92,21 +101,21 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Tâche finale</div>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
-                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" 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
             </button>
             <div class="piece-form-bottom-duration">
-                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
-                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
-                    <option selected value="UT">UT</option>
+                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
+                    <option value="UT">UT</option>
                     <option value="min">min</option>
                     <option value="tours">tours</option> 
                 </select>

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

@@ -9,7 +9,7 @@
 
     &-menu {
         position: absolute;
-        width: 150px;
+        width: 200px;
         height: 50px;
         background-color: #f7f7f7;
         z-index: -1;
@@ -32,6 +32,15 @@
         mat-icon:hover {
             opacity: 0.75;
         }
+
+        &-changeMenuButton {
+            border-radius: 10px;
+            margin-bottom: 5px;
+        }
+
+        &-changeMenuButton:hover {
+            opacity: 0.75;
+        }
     }
 
     &-menu.show {
@@ -94,13 +103,13 @@
         height: 150px;
         background-color: #f7f7f7;
         z-index: -1;
-        bottom: 0;
-        left: 25px;
+        bottom: 10px;
+        left: 50px;
         border: solid black 1px;
-        border-bottom-left-radius: 10px;
+        border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         transition: transform 0.5s ease;
-        border-top: none;
+        border-left: none;
         display: flex;
         flex-direction: row;
 
@@ -183,7 +192,7 @@
     }
 
     &-prerequires.show {
-        transform: translateY(100%);
+        transform: translateX(100%);
     }
 
     &-attach {
@@ -291,7 +300,7 @@
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
-                    width: 20px;
+                    width: 50px;
                     text-align: center;
                     z-index: 2;
                 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-final-task',
@@ -11,23 +14,26 @@ export class FinalTaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  durationUnit: string = 'UT';
-  duration: number = 1;
   pieceWidth: string = '400px';
 
-  symbol: string = ''; // A changer quand implémentation des données
-  symbolColor: string = ''; //A changer quand implémentation des données
+  @Input() task: Task = new Task('normal');
+  @Input() mission!: Mission;
+  @Input() role!: Role;
+  @Input() i!: number;
+  @Input() j!: number;
 
   constructor() { }
 
   ngOnInit(): void {
+    this.durationChange();
   }
-
+  
   durationChange(): void {
-    if(this.durationUnit === 'UT') {
-      if(this.duration >= 1 && this.duration <= 10) {
-        this.pieceWidth = (this.duration*400)+'px';
-      } else if(this.duration > 10) {
+    /*
+    if(this.task.durationUnit === 'UT') {
+      if(this.task.duration >= 1 && this.task.duration <= 10) {
+        this.pieceWidth = (this.task.duration*400)+'px';
+      } else if(this.task.duration > 10) {
         this.pieceWidth = '4000px';
       } else {
         this.pieceWidth = '400px';
@@ -35,22 +41,34 @@ export class FinalTaskComponent implements OnInit {
     } else {
       this.pieceWidth = '400px';
     }
+    */
   }
 
   onClickErase(): void {
-    
+    this.task.duration = 1;
+    this.task.durationUnit = 'UT';
+    this.task.identifier = '';
+    this.task.objective = '';
+    this.task.symbol.color = '';
+    this.task.symbol.symbol = '';
   } 
 
   onClickDots(): void {
     
   }
 
-  onClickChange(): void {
-
+  onClickChange(type: string): void {
+    if (type == 'annexe') {
+      this.task.symbol.color = '';
+      this.task.symbol.symbol = '';
+    }
+    this.task.changeType(type);
+    this.mission.equalizeLengths();
   }
 
   onClickDelete(): void {
-    
+    this.role.removeTask(this.i, this.j);
+    this.mission.equalizeLengths();
   }
 
   changeDisplaySymbolChoice(): void {
@@ -62,8 +80,8 @@ export class FinalTaskComponent implements OnInit {
   }
 
   setSymbol(symbol: string, symbolColor: string): void {
-    this.symbol = symbol;
-    this.symbolColor = symbolColor;
+    this.task.symbol.symbol = symbol;
+    this.task.symbol.color = symbolColor;
     this.displaySymbolChoice = 'hide';
   }
 
@@ -75,4 +93,22 @@ export class FinalTaskComponent implements OnInit {
     }
   }
 
+  moveTask(direction: string): void {
+    this.role.moveTask(this.i, this.j, direction);
+    this.displayMenu = 'hide';
+    this.displayPrequires = 'hide';
+    this.displaySymbolChoice = 'hide';
+    this.mission.equalizeLengths();
+  }
+
+  canMoveTo(direction: string): boolean {
+    let res: boolean = true;
+    if (direction == 'left') {
+      if (this.role.tasks[this.i][this.j-1] instanceof Task || this.j == 0) {
+        res = false;
+      }
+    }
+    return res;
+  }
+
 }

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <div>    
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-menu #menuChange="matMenu">
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer Tâche annexe</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
+            </mat-menu>
+        </div>
         <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
         <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">
@@ -93,21 +102,21 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Tâche<br>optionnelle</div>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
-                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" 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
             </button>
             <div class="piece-form-bottom-duration">
-                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
-                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
-                    <option selected value="UT">UT</option>
+                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
+                    <option value="UT">UT</option>
                     <option value="min">min</option>
                     <option value="tours">tours</option> 
                 </select>

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

@@ -9,7 +9,7 @@
 
     &-menu {
         position: absolute;
-        width: 150px;
+        width: 200px;
         height: 50px;
         background-color: #f7f7f7;
         z-index: -1;
@@ -32,6 +32,15 @@
         mat-icon:hover {
             opacity: 0.75;
         }
+
+        &-changeMenuButton {
+            border-radius: 10px;
+            margin-bottom: 5px;
+        }
+
+        &-changeMenuButton:hover {
+            opacity: 0.75;
+        }
     }
 
     &-menu.show {
@@ -94,13 +103,13 @@
         height: 150px;
         background-color: #f7f7f7;
         z-index: -1;
-        bottom: 0;
-        left: 25px;
+        bottom: 10px;
+        left: 50px;
         border: solid black 1px;
-        border-bottom-left-radius: 10px;
+        border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         transition: transform 0.5s ease;
-        border-top: none;
+        border-left: none;
         display: flex;
         flex-direction: row;
 
@@ -183,7 +192,7 @@
     }
 
     &-prerequires.show {
-        transform: translateY(100%);
+        transform: translateX(100%);
     }
 
     &-attach {
@@ -299,7 +308,7 @@
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
-                    width: 20px;
+                    width: 50px;
                     text-align: center;
                     z-index: 2;
                 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-optionnal-task',
@@ -11,24 +14,26 @@ export class OptionnalTaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  durationUnit: string = 'UT';
-  duration: number = 1;
   pieceWidth: string = '400px';
 
-  symbol: string = ''; // A changer quand implémentation des données
-  symbolColor: string = ''; //A changer quand implémentation des données
+  @Input() task: Task = new Task('normal');
+  @Input() mission!: Mission;
+  @Input() role!: Role;
+  @Input() i!: number;
+  @Input() j!: number;
 
   constructor() { }
 
   ngOnInit(): void {
+    this.durationChange();
   }
-
   
   durationChange(): void {
-    if(this.durationUnit === 'UT') {
-      if(this.duration >= 1 && this.duration <= 10) {
-        this.pieceWidth = (this.duration*400)+'px';
-      } else if(this.duration > 10) {
+    /*
+    if(this.task.durationUnit === 'UT') {
+      if(this.task.duration >= 1 && this.task.duration <= 10) {
+        this.pieceWidth = (this.task.duration*400)+'px';
+      } else if(this.task.duration > 10) {
         this.pieceWidth = '4000px';
       } else {
         this.pieceWidth = '400px';
@@ -36,22 +41,33 @@ export class OptionnalTaskComponent implements OnInit {
     } else {
       this.pieceWidth = '400px';
     }
+    */
   }
 
   onClickErase(): void {
-    
+    this.task.duration = 1;
+    this.task.durationUnit = 'UT';
+    this.task.identifier = '';
+    this.task.objective = '';
+    this.task.symbol.color = '';
+    this.task.symbol.symbol = '';
   } 
 
   onClickDots(): void {
     
   }
 
-  onClickChange(): void {
-
+  onClickChange(type: string): void {
+    if (type == 'annexe') {
+      this.task.symbol.color = '';
+      this.task.symbol.symbol = '';
+    }
+    this.task.changeType(type);
   }
 
   onClickDelete(): void {
-    
+    this.role.removeTask(this.i, this.j);
+    this.mission.equalizeLengths();
   }
 
   changeDisplaySymbolChoice(): void {
@@ -63,8 +79,8 @@ export class OptionnalTaskComponent implements OnInit {
   }
 
   setSymbol(symbol: string, symbolColor: string): void {
-    this.symbol = symbol;
-    this.symbolColor = symbolColor;
+    this.task.symbol.symbol = symbol;
+    this.task.symbol.color = symbolColor;
     this.displaySymbolChoice = 'hide';
   }
 
@@ -76,4 +92,41 @@ export class OptionnalTaskComponent implements OnInit {
     }
   }
 
+  canChangeInFinalTask(): boolean {
+    let res: boolean = true;
+    let lastTaskIndex: number = -1;
+    for (let i = this.role.tasks[this.i].length - 1; i >= 0; i--) {
+      if (this.role.tasks[this.i][i] instanceof Task) {
+        lastTaskIndex = i;
+        break;
+      }
+    }
+    if (this.j < lastTaskIndex || this.role.tasks[this.i].some(task => task?.type == 'final') || this.role.tasks[this.i].some(task => task?.type == 'repeat')) {
+      res = false;
+    }
+    return res;
+  }
+
+  moveTask(direction: string): void {
+    this.role.moveTask(this.i, this.j, direction);
+    this.displayMenu = 'hide';
+    this.displayPrequires = 'hide';
+    this.displaySymbolChoice = 'hide';
+    this.mission.equalizeLengths();
+  }
+
+  canMoveTo(direction: string): boolean {
+    let res: boolean = true;
+    if (direction == 'left') {
+      if (this.j == 0) {
+        res = false;
+      }
+    } else if (direction == 'right') {
+      if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
+        res = false;
+      }
+    }
+    return res;
+  }
+
 }

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right"></div>
 
     <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
         <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
         <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">
@@ -92,21 +94,21 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Événement<br>aléatoire</div>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
-                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Le client modifie sa demande"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 Prérequis
             </button>
             <div class="piece-form-bottom-duration">
-                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
-                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
-                    <option selected value="UT">UT</option>
+                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
+                    <option value="UT">UT</option>
                     <option value="min">min</option>
                     <option value="tours">tours</option> 
                 </select>

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

@@ -9,7 +9,7 @@
 
     &-menu {
         position: absolute;
-        width: 150px;
+        width: 200px;
         height: 50px;
         background-color: #f7f7f7;
         z-index: -1;
@@ -94,13 +94,13 @@
         height: 150px;
         background-color: #f7f7f7;
         z-index: -1;
-        bottom: 0;
-        left: 25px;
+        bottom: 10px;
+        left: 50px;
         border: solid black 1px;
-        border-bottom-left-radius: 10px;
+        border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         transition: transform 0.5s ease;
-        border-top: none;
+        border-left: none;
         display: flex;
         flex-direction: row;
 
@@ -183,7 +183,7 @@
     }
 
     &-prerequires.show {
-        transform: translateY(100%);
+        transform: translateX(100%);
     }
 
     &-attach {
@@ -303,7 +303,7 @@
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
-                    width: 20px;
+                    width: 50px;
                     text-align: center;
                     z-index: 2;
                 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-random-event',
@@ -7,27 +10,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RandomEventComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
   displayMenu: string = 'hide';
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  durationUnit: string = 'UT';
-  duration: number = 1;
   pieceWidth: string = '400px';
 
-  symbol: string = ''; // A changer quand implémentation des données
-  symbolColor: string = ''; //A changer quand implémentation des données
+  @Input() task: Task = new Task('normal');
+  @Input() mission!: Mission;
+  @Input() role!: Role;
+  @Input() i!: number;
+  @Input() j!: number;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.durationChange();
+  }
   
   durationChange(): void {
-    if(this.durationUnit === 'UT') {
-      if(this.duration >= 1  && this.duration <= 10) {
-        this.pieceWidth = (this.duration*400)+'px';
-      } else if(this.duration > 10) {
+    /*
+    if(this.task.durationUnit === 'UT') {
+      if(this.task.duration >= 1 && this.task.duration <= 10) {
+        this.pieceWidth = (this.task.duration*400)+'px';
+      } else if(this.task.duration > 10) {
         this.pieceWidth = '4000px';
       } else {
         this.pieceWidth = '400px';
@@ -35,10 +41,16 @@ export class RandomEventComponent implements OnInit {
     } else {
       this.pieceWidth = '400px';
     }
+    */
   }
 
   onClickErase(): void {
-    
+    this.task.duration = 1;
+    this.task.durationUnit = 'UT';
+    this.task.identifier = '';
+    this.task.objective = '';
+    this.task.symbol.color = '';
+    this.task.symbol.symbol = '';
   } 
 
   onClickDots(): void {
@@ -46,7 +58,8 @@ export class RandomEventComponent implements OnInit {
   }
 
   onClickDelete(): void {
-    
+    this.role.removeTask(this.i, this.j);
+    this.mission.equalizeLengths();
   }
 
   changeDisplaySymbolChoice(): void {
@@ -58,8 +71,8 @@ export class RandomEventComponent implements OnInit {
   }
 
   setSymbol(symbol: string, symbolColor: string): void {
-    this.symbol = symbol;
-    this.symbolColor = symbolColor;
+    this.task.symbol.symbol = symbol;
+    this.task.symbol.color = symbolColor;
     this.displaySymbolChoice = 'hide';
   }
 
@@ -71,4 +84,25 @@ export class RandomEventComponent implements OnInit {
     }
   }
 
+  moveTask(direction: string): void {
+    this.role.moveTask(this.i, this.j, direction);
+    this.displayMenu = 'hide';
+    this.displayPrequires = 'hide';
+    this.displaySymbolChoice = 'hide';
+    this.mission.equalizeLengths();
+  }
+
+  canMoveTo(direction: string): boolean {
+    let res: boolean = true;
+    if (direction == 'left') {
+      if (this.j == 0) {
+        res = false;
+      }
+    } else if (direction == 'right') {
+      if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
+        res = false;
+      }
+    }
+    return res;
+  }
 }

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

@@ -2,13 +2,15 @@
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
         <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
         <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
     </div>
 
     <div class="piece-form">
         <label>Recommencer<br>le tour jusqu'à ce que :</label>
-        <textarea></textarea>
+        <textarea [(ngModel)]="task.objective" placeholder="Faire valider au commanditaire"></textarea>
     </div>
 </div>

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

@@ -11,12 +11,12 @@
 
     &-menu {
         position: absolute;
-        width: 150px;
+        width: 200px;
         height: 50px;
         background-color: #f7f7f7;
         z-index: -1;
         top: -50px;
-        left: 30%;
+        left: 35%;
         transform: translateX(-50%);
         transition: transform 0.5s ease;
         border-top-left-radius: 10px;
@@ -70,12 +70,12 @@
         z-index: 2;
 
         label {
-            margin-top: 15%;
+            margin-top: 10%;
             font-family: 'Glacial Indifference Bold';
             margin-bottom: 10px;
             text-align: center;
             width: 70%;
-            font-size: 17px;
+            font-size: 23px;
         }
 
         textarea {

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-repeat-task',
@@ -9,13 +12,19 @@ export class RepeatTaskComponent implements OnInit {
 
   displayMenu: string = 'hide';
 
+  @Input() task: Task = new Task('normal');
+  @Input() mission!: Mission;
+  @Input() role!: Role;
+  @Input() i!: number;
+  @Input() j!: number;
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
   onClickErase(): void {
-    
+    this.task.objective = '';
   } 
 
   onClickDots(): void {
@@ -23,6 +32,23 @@ export class RepeatTaskComponent implements OnInit {
   }
 
   onClickDelete(): void {
-    
+    this.role.removeTask(this.i, this.j);
+    this.mission.equalizeLengths();
+  }
+
+  moveTask(direction: string): void {
+    this.role.moveTask(this.i, this.j, direction);
+    this.displayMenu = 'hide';
+    this.mission.equalizeLengths();
+  }
+
+  canMoveTo(direction: string): boolean {
+    let res: boolean = true;
+    if (direction == 'left') {
+      if (this.role.tasks[this.i][this.j-1] instanceof Task || this.j == 0) {
+        res = false;
+      }
+    }
+    return res;
   }
 }

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right"></div>
 
     <div class="piece-menu" [class]="displayMenu">
-        <mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
+        <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
+        <div>
+            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></mat-icon>
+            <mat-menu #menuChange="matMenu">
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer en Tâche annexe</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer Tâche optionnelle</button>
+                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
+            </mat-menu>
+        </div>
         <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
         <mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+        <mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">
@@ -93,21 +102,21 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Tâche</div>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
-                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
         </div>
-        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <textarea class="piece-form-content" [(ngModel)]="task.objective" 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
             </button>
             <div class="piece-form-bottom-duration">
-                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
-                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
-                    <option selected value="UT">UT</option>
+                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
+                    <option value="UT">UT</option>
                     <option value="min">min</option>
                     <option value="tours">tours</option> 
                 </select>

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

@@ -9,7 +9,7 @@
 
     &-menu {
         position: absolute;
-        width: 150px;
+        width: 200px;
         height: 50px;
         background-color: #f7f7f7;
         z-index: -1;
@@ -32,6 +32,15 @@
         mat-icon:hover {
             opacity: 0.75;
         }
+
+        &-changeMenuButton {
+            border-radius: 10px;
+            margin-bottom: 5px;
+        }
+
+        &-changeMenuButton:hover {
+            opacity: 0.75;
+        }
     }
 
     &-menu.show {
@@ -94,13 +103,13 @@
         height: 150px;
         background-color: #f7f7f7;
         z-index: -1;
-        bottom: 0;
-        left: 25px;
+        bottom: 10px;
+        left: 50px;
         border: solid black 1px;
-        border-bottom-left-radius: 10px;
+        border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         transition: transform 0.5s ease;
-        border-top: none;
+        border-left: none;
         display: flex;
         flex-direction: row;
 
@@ -183,7 +192,7 @@
     }
 
     &-prerequires.show {
-        transform: translateY(100%);
+        transform: translateX(100%);
     }
 
     &-attach {
@@ -303,7 +312,7 @@
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
-                    width: 20px;
+                    width: 50px;
                     text-align: center;
                     z-index: 2;
                 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-task',
@@ -11,24 +14,26 @@ export class TaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  durationUnit: string = 'UT';
-  duration: number = 1;
   pieceWidth: string = '400px';
 
-  symbol: string = ''; // A changer quand implémentation des données
-  symbolColor: string = ''; //A changer quand implémentation des données
+  @Input() task: Task = new Task('normal');
+  @Input() mission: Mission = new Mission();
+  @Input() role!: Role;
+  @Input() i!: number;
+  @Input() j!: number;
 
   constructor() { }
 
   ngOnInit(): void {
+    this.durationChange();
   }
-
   
   durationChange(): void {
-    if(this.durationUnit === 'UT') {
-      if(this.duration >= 1 && this.duration <= 10) {
-        this.pieceWidth = (this.duration*400)+'px';
-      } else if(this.duration > 10) {
+    /*
+    if(this.task.durationUnit === 'UT') {
+      if(this.task.duration >= 1 && this.task.duration <= 10) {
+        this.pieceWidth = (this.task.duration*400)+'px';
+      } else if(this.task.duration > 10) {
         this.pieceWidth = '4000px';
       } else {
         this.pieceWidth = '400px';
@@ -36,22 +41,33 @@ export class TaskComponent implements OnInit {
     } else {
       this.pieceWidth = '400px';
     }
+    */
   }
 
   onClickErase(): void {
-    
+    this.task.duration = 1;
+    this.task.durationUnit = 'UT';
+    this.task.identifier = '';
+    this.task.objective = '';
+    this.task.symbol.color = '';
+    this.task.symbol.symbol = '';
   } 
 
   onClickDots(): void {
     
   }
 
-  onClickChange(): void {
-
+  onClickChange(type: string): void {
+    if (type == 'annexe') {
+      this.task.symbol.color = '';
+      this.task.symbol.symbol = '';
+    }
+    this.task.changeType(type);
   }
 
   onClickDelete(): void {
-    
+    this.role.removeTask(this.i, this.j);
+    this.mission.equalizeLengths();
   }
 
   changeDisplaySymbolChoice(): void {
@@ -63,8 +79,8 @@ export class TaskComponent implements OnInit {
   }
 
   setSymbol(symbol: string, symbolColor: string): void {
-    this.symbol = symbol;
-    this.symbolColor = symbolColor;
+    this.task.symbol.symbol = symbol;
+    this.task.symbol.color = symbolColor;
     this.displaySymbolChoice = 'hide';
   }
 
@@ -76,6 +92,42 @@ export class TaskComponent implements OnInit {
     }
   }
 
+  canChangeInFinalTask(): boolean {
+    let res: boolean = true;
+    let lastTaskIndex: number = -1;
+    for (let i = this.role.tasks[this.i].length - 1; i >= 0; i--) {
+      if (this.role.tasks[this.i][i] instanceof Task) {
+        lastTaskIndex = i;
+        break;
+      }
+    }
+    if (this.j < lastTaskIndex || this.role.tasks[this.i].some(task => task?.type == 'final') || this.role.tasks[this.i].some(task => task?.type == 'repeat')) {
+      res = false;
+    }
+    return res;
+  }
+
+  moveTask(direction: string): void {
+    this.role.moveTask(this.i, this.j, direction);
+    this.displayMenu = 'hide';
+    this.displayPrequires = 'hide';
+    this.displaySymbolChoice = 'hide';
+    this.mission.equalizeLengths();
+  }
+
+  canMoveTo(direction: string): boolean {
+    let res: boolean = true;
+    if (direction == 'left') {
+      if (this.j == 0) {
+        res = false;
+      }
+    } else if (direction == 'right') {
+      if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
+        res = false;
+      }
+    }
+    return res;
+  }
 }