warning on identifier duplicate

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialogModule } from '@angular/material/dialog';
+import {MatSnackBarModule} from '@angular/material/snack-bar'; 
 
 import { AppComponent } from './app.component';
 import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
@@ -38,6 +39,7 @@ import { CleanDialogComponent } from './components/dialogs/clean-dialog/clean-di
 import { CreateDialogComponent } from './components/dialogs/create-dialog/create-dialog.component';
 import { GameCharactersComponent } from './pieces/game-characters/game-characters.component';
 import { SaveDialogComponent } from './components/dialogs/save-dialog/save-dialog.component';
+import { IdentifierSnackbarComponent } from './components/snackbars/identifier-snackbar/identifier-snackbar.component';
 
 @NgModule({
   declarations: [
@@ -68,7 +70,8 @@ import { SaveDialogComponent } from './components/dialogs/save-dialog/save-dialo
     CleanDialogComponent,
     CreateDialogComponent,
     GameCharactersComponent,
-    SaveDialogComponent
+    SaveDialogComponent,
+    IdentifierSnackbarComponent
   ],
   imports: [
     BrowserModule,
@@ -79,7 +82,8 @@ import { SaveDialogComponent } from './components/dialogs/save-dialog/save-dialo
     MatButtonModule,
     MatMenuModule,
     MatTooltipModule,
-    MatDialogModule
+    MatDialogModule,
+    MatSnackBarModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/class/role/role.ts

@@ -27,7 +27,7 @@ export class Role {
     }
 
     public removeChronologieStep(index: number) {
-        if (this.chronologie.length-1 == index) {
+        if (this.chronologie.length - 1 == index) {
             this.chronologie.splice(index, 1);
         } else {
             this.chronologie[index] = null;
@@ -36,92 +36,92 @@ export class Role {
 
     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] = [];
+        if (this.tasks[i + 1] == null) {
+            this.tasks[i + 1] = [];
         }
     }
 
     public removeTask(i: number, j: number) {
-        if (this.tasks[i].length-1 == j) {
+        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);
+            this.tasks.splice(i, 1);
         }
     }
 
     public moveTask(i: number, j: number, direction: string): void {
-        let tmp: Task|null = this.tasks[i][j];
-        
+        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;
+            this.tasks[i][j] = this.tasks[i][j - 1];
+            this.tasks[i][j - 1] = tmp;
         } else if (direction == 'right') {
-            this.tasks[i][j] = this.tasks[i][j+1];
-            this.tasks[i][j+1] = tmp;
+            this.tasks[i][j] = this.tasks[i][j + 1];
+            this.tasks[i][j + 1] = tmp;
         } else if (direction == 'top') {
-            if (!(this.tasks[i-1].some(element => element instanceof Task))) {
-                this.tasks[i-1][j] = tmp;
+            if (!(this.tasks[i - 1].some(element => element instanceof Task))) {
+                this.tasks[i - 1][j] = tmp;
                 this.tasks[i][j] = null;
-            } else if (this.tasks[i-1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
+            } else if (this.tasks[i - 1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
                 if (this.tasks[i][j]?.type == 'final' || this.tasks[i][j]?.type == 'repeat') {
-                    this.tasks[i][j] = this.tasks[i-1][this.getLastTaskIndex(i-1)];
-                    this.tasks[i-1][this.getLastTaskIndex(i-1)] = tmp;
+                    this.tasks[i][j] = this.tasks[i - 1][this.getLastTaskIndex(i - 1)];
+                    this.tasks[i - 1][this.getLastTaskIndex(i - 1)] = tmp;
                 } else {
-                    let deplace = this.tasks[i-1][this.getLastTaskIndex(i-1)];
-                    this.tasks[i-1][this.getLastTaskIndex(i-1)] = tmp;
-                    this.tasks[i-1][this.getLastTaskIndex(i-1)+1] = deplace;
+                    let deplace = this.tasks[i - 1][this.getLastTaskIndex(i - 1)];
+                    this.tasks[i - 1][this.getLastTaskIndex(i - 1)] = tmp;
+                    this.tasks[i - 1][this.getLastTaskIndex(i - 1) + 1] = deplace;
                     this.tasks[i][j] = null;
                 }
             } else {
-                this.tasks[i-1][this.getLastTaskIndex(i-1)+1] = tmp;
+                this.tasks[i - 1][this.getLastTaskIndex(i - 1) + 1] = tmp;
                 this.tasks[i][j] = null;
-                
+
             }
             if (!this.tasks[i].some(element => element instanceof Task)) {
-                this.tasks.splice(i,1);
+                this.tasks.splice(i, 1);
             }
         } else if (direction == 'bottom') {
-            if (this.tasks[i+2] == null) {
-                this.tasks[i+2] = [];
+            if (this.tasks[i + 2] == null) {
+                this.tasks[i + 2] = [];
             }
-            if (!(this.tasks[i+1].some(element => element instanceof Task))) {
-                this.tasks[i+1][j] = tmp;
+            if (!(this.tasks[i + 1].some(element => element instanceof Task))) {
+                this.tasks[i + 1][j] = tmp;
                 this.tasks[i][j] = null;
-            } else if (this.tasks[i+1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
+            } else if (this.tasks[i + 1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
                 if (this.tasks[i][j]?.type == 'final' || this.tasks[i][j]?.type == 'repeat') {
-                    this.tasks[i][j] = this.tasks[i+1][this.getLastTaskIndex(i+1)];
-                    this.tasks[i+1][this.getLastTaskIndex(i+1)] = tmp;
+                    this.tasks[i][j] = this.tasks[i + 1][this.getLastTaskIndex(i + 1)];
+                    this.tasks[i + 1][this.getLastTaskIndex(i + 1)] = tmp;
                 } else {
-                    let deplace = this.tasks[i+1][this.getLastTaskIndex(i+1)];
-                    this.tasks[i+1][this.getLastTaskIndex(i+1)] = tmp;
-                    this.tasks[i+1][this.getLastTaskIndex(i+1)+1] = deplace;
+                    let deplace = this.tasks[i + 1][this.getLastTaskIndex(i + 1)];
+                    this.tasks[i + 1][this.getLastTaskIndex(i + 1)] = tmp;
+                    this.tasks[i + 1][this.getLastTaskIndex(i + 1) + 1] = deplace;
                     this.tasks[i][j] = null;
                 }
             } else {
-                this.tasks[i+1][this.getLastTaskIndex(i+1)+1] = tmp;
+                this.tasks[i + 1][this.getLastTaskIndex(i + 1) + 1] = tmp;
                 this.tasks[i][j] = null;
             }
         }
     }
 
     public moveStep(i: number, direction: string): void {
-        let tmp: Step|null = this.chronologie[i];
+        let tmp: Step | null = this.chronologie[i];
         if (direction == 'left') {
-            this.chronologie[i] = this.chronologie[i-1];
-            this.chronologie[i-1] = tmp;
+            this.chronologie[i] = this.chronologie[i - 1];
+            this.chronologie[i - 1] = tmp;
         } else if (direction == 'right') {
-            this.chronologie[i] = this.chronologie[i+1];
-            this.chronologie[i+1] = tmp;
+            this.chronologie[i] = this.chronologie[i + 1];
+            this.chronologie[i + 1] = tmp;
         }
     }
 
     public getLastTaskIndex(i: number): number {
         let index: number;
         if (this.tasks[i].some(element => element instanceof Task)) {
-            index = this.tasks[i].length-1 ;
+            index = this.tasks[i].length - 1;
             while (!(this.tasks[i][index] instanceof Task)) {
                 index--;
             }
@@ -130,4 +130,20 @@ export class Role {
         }
         return index;
     }
+
+    public isAlreadyUsedIdentifier(identifier: string): boolean {
+        let res: boolean = false;
+        let cpt: number = 0;
+        this.tasks.forEach(inlineTask => {
+            inlineTask.forEach(task => {
+                if (task?.identifier == identifier) {
+                    cpt++;
+                }
+            });
+        });
+        if (cpt > 1) {
+            res = true;
+        }
+        return res;
+    }
 }

src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component.html

+<span matSnackBarLabel>Attention, cet identifiant est déjà utilisé dans ce Rôle</span>

src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component.scss

+::ng-deep .mat-snack-bar-container {
+    background-color: #f8aa14;
+    color: black;
+    box-shadow: 0px 0px 15px 5px #f8aa14;
+    //font-family: 'Glacial Indifference Bold';
+    justify-content: space-between;
+}
\ No newline at end of file

src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component.spec.ts

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

src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component.ts

+import { Component, OnInit, inject } from '@angular/core';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-identifier-snackbar',
+  templateUrl: './identifier-snackbar.component.html',
+  styleUrls: ['./identifier-snackbar.component.scss']
+})
+export class IdentifierSnackbarComponent implements OnInit {
+
+  snackBarRef = inject(MatSnackBarRef);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -114,7 +114,7 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
             matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche annexe</div> 

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

@@ -11,6 +11,8 @@ import { PieceDetailsService } from 'src/app/services/piece-details/piece-detail
 import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dialog/suppress-dialog.component';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 
 @Component({
   selector: 'app-annexe-task',
@@ -35,7 +37,8 @@ export class AnnexeTaskComponent implements OnInit {
   urlIcon: string = 'url("../../../../assets/background-images/annexe.png")';
   antecedent: boolean = false;
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
+    private _snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
@@ -235,6 +238,9 @@ export class AnnexeTaskComponent implements OnInit {
       }); 
     }
     this.task.identifier = value;
+    if (this.role.isAlreadyUsedIdentifier(this.task.identifier)) {
+      this._snackBar.openFromComponent(IdentifierSnackbarComponent, { duration: 5000 });      
+    }
   }
 
   checkboxChangedTask(event: any, task:(Task|null)): void {

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

@@ -142,7 +142,7 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
             matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche finale</div>

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

@@ -11,6 +11,8 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dialog/suppress-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 
 @Component({
   selector: 'app-final-task',
@@ -35,7 +37,8 @@ export class FinalTaskComponent implements OnInit {
   urlIcon: string = 'url("../../../../assets/background-images/final.png")';
   antecedent: boolean = false;
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
+    private _snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
@@ -237,6 +240,9 @@ export class FinalTaskComponent implements OnInit {
       }); 
     }
     this.task.identifier = value;
+    if (this.role.isAlreadyUsedIdentifier(this.task.identifier)) {
+      this._snackBar.openFromComponent(IdentifierSnackbarComponent, { duration: 5000 });      
+    }
   }
 
   checkboxChangedTask(event: any, task:(Task|null)): void {

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

@@ -143,7 +143,7 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
             matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche<br>optionnelle</div>

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

@@ -11,6 +11,8 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dialog/suppress-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 
 @Component({
   selector: 'app-optionnal-task',
@@ -35,7 +37,8 @@ export class OptionnalTaskComponent implements OnInit {
   urlIcon: string = 'url("../../../../assets/background-images/optionnal.png")';
   antecedent: boolean = false;
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
+    private _snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
@@ -254,6 +257,9 @@ export class OptionnalTaskComponent implements OnInit {
       }); 
     }
     this.task.identifier = value;
+    if (this.role.isAlreadyUsedIdentifier(this.task.identifier)) {
+      this._snackBar.openFromComponent(IdentifierSnackbarComponent, { duration: 5000 });      
+    }
   }
 
   checkboxChangedTask(event: any, task:(Task|null)): void {

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

@@ -131,7 +131,7 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
             matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Événement<br>aléatoire</div>

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

@@ -11,6 +11,8 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dialog/suppress-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 
 @Component({
   selector: 'app-random-event',
@@ -35,7 +37,8 @@ export class RandomEventComponent implements OnInit {
   urlIcon: string = 'url("../../../../assets/background-images/event.png")';
   antecedent: boolean = false;
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
+    private _snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
@@ -232,6 +235,9 @@ export class RandomEventComponent implements OnInit {
       }); 
     }
     this.task.identifier = value;
+    if (this.role.isAlreadyUsedIdentifier(this.task.identifier)) {
+      this._snackBar.openFromComponent(IdentifierSnackbarComponent, { duration: 5000 });      
+    }
   }
 
   checkboxChangedTask(event: any, task:(Task|null)): void {

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

@@ -11,6 +11,8 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dialog/suppress-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 
 @Component({
   selector: 'app-task',
@@ -35,7 +37,8 @@ export class TaskComponent implements OnInit {
   urlIcon: string = 'url("../../../../assets/background-images/tache.png")';
   antecedent: boolean = false;
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
+    private _snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
@@ -265,6 +268,9 @@ export class TaskComponent implements OnInit {
       }); 
     }
     this.task.identifier = value;
+    if (this.role.isAlreadyUsedIdentifier(this.task.identifier)) {
+      this._snackBar.openFromComponent(IdentifierSnackbarComponent, { duration: 5000 });      
+    }
   }
 
   checkboxChangedTask(event: any, task:(Task|null)): void {