dev en cours

src/app/app.component.html

@@ -1,19 +1,3 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <ul class = "nav">
-    <li class = "nav-item">
-      <a href="/variable-list" class="nav-link" >Actualiser</a>
-    </li>
-    <li class = "nav-item">
-      <a href="/variable-create" class="nav-link" >Créer</a>
-    </li>
-  </ul>
-</nav>
-
 <div class = "container">
     <router-outlet></router-outlet>
 </div>
-<footer class = "footer">
-    <div class = "container">
-        <span> </span>
-    </div>
-</footer>

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, FormsModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.config.ts

@@ -2,7 +2,6 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
 
 export const appConfig: ApplicationConfig = {
   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]

src/app/variable-create/variable-create.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.field-separate { margin-bottom: 2px; }

src/app/variable-create/variable-create.component.html

@@ -1,33 +1,42 @@
-<br/>
-<div class="row">
-    <div class="card col-md-6 offset-md-3 offset-md-3">
-            <div class="card-body">
-                <form (ngSubmit)="onSubmit()">
+<br />
+<form (ngSubmit)="onSubmit()">
+	<div class="card">
+		<div class="card-header">
+			<button (click)="goToListVariable()" class="btn btn-primary btn-sm">Retour</button>
+		</div>
+		<div class="card-body">
 
-                    <div class="form-group">
-                        <label>Type</label>
-                        <input type="text" class="form-control" id="type" [(ngModel)]="variable.type" name="type">
-                    </div>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Type</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="type" [(ngModel)]="variable.type" name="type">
+				</div>
+			</div>
 
-                    <div class="form-group">
-                        <label>Code</label>
-                        <input type="text" class="form-control" id="code" [(ngModel)]="variable.code" name="code">
-                    </div>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="code" [(ngModel)]="variable.code" name="code">
+				</div>
+			</div>
 
-                    <div class="form-group">
-                        <label>Valeur</label>
-                        <input type="text" class="form-control" id="valeur" [(ngModel)]="variable.valeur" name="valeur">
-                    </div>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Valeur</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="valeur" [(ngModel)]="variable.valeur" name="valeur">
+				</div>
+			</div>
 
-                    <div class="form-group">
-                        <label>Notes</label>
- 												<textarea class="form-control" id="notes" name="notes">{{variable.notes}}</textarea>
-                    </div>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Notes</label>
+				<div class="col-sm-10">
+					<textarea class="form-control form-control-sm field-separate" id="notes" [(ngModel)]="variable.notes" name="notes"></textarea>
+				</div>
+			</div>
 
-                    <br />
-                    <button class="btn btn-success" type="submit">Créer</button>
-
-                </form>
-        </div>
-    </div>
-</div>
+		</div>
+		<div class="card-footer">
+			<button type="button" class="btn btn-success btn-sm text-left" type="submit">Créer</button>
+		</div>
+	</div>
+</form>

src/app/variable-create/variable-create.component.ts

@@ -15,7 +15,11 @@ export class VariableCreateComponent implements OnInit
 
   ngOnInit(): void { }
 
-  saveVariable() { this.variableService.createVariable(this.variable).subscribe( data => { console.log(data); this.goToListVariable(); }, error => console.log(error)); }
+  saveVariable() { this.variableService.createVariable(this.variable).subscribe({
+        next: (params) => { console.log('params', params); this.goToListVariable(); },
+        error: (err: any) => { console.log(err); },
+        complete: () => { }
+      }); }
 
   goToListVariable() {this.router.navigate(['/variable-list']); }
   

src/app/variable-details/variable-details.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.field-separate { margin-bottom: 2px; }

src/app/variable-details/variable-details.component.html

@@ -1,41 +1,55 @@
-<br/>
-<div class="row">
-	<div class="card col-md-6 offset-md-3 offset-md-3">
-		<div class="card-body">
-
-			<div class="form-group">
-				<label>Créé le</label> 
-				<input type="text" class="form-control" id="dateCreation" [(ngModel)]="variable.dateCreation" name="dateCreation" disabled>
+<br />
+<div class="card">
+	<div class="card-header">
+		<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm">Retour</button>
+	</div>
+	<div class="card-body">
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" [(ngModel)]="variable.dateCreation" name="dateCreation" disabled>
 			</div>
+		</div>
 
-			<div class="form-group">
-				<label>Modifié le</label> 
-				<input type="text" class="form-control" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
 			</div>
+		</div>
 
-			<div class="form-group">
-				<label>Type</label> 
-				<input type="text" class="form-control" id="type" [(ngModel)]="variable.type" name="type" disabled>
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Type</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="type" [(ngModel)]="variable.type" name="type" disabled>
 			</div>
+		</div>
 
-			<div class="form-group">
-				<label>Code</label> 
-				<input type="text" class="form-control" id="code" [(ngModel)]="variable.code" name="code" disabled>
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="code" [(ngModel)]="variable.code" name="code" disabled>
 			</div>
+		</div>
 
-			<div class="form-group">
-				<label>Valeur</label> 
-				<input type="text" class="form-control" id="valeur" [(ngModel)]="variable.valeur" name="valeur" disabled>
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Valeur</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="valeur" [(ngModel)]="variable.valeur" name="valeur" disabled>
 			</div>
+		</div>
 
-			<div class="form-group">
-				<label>Notes</label>
-				<textarea class="form-control" id="notes" name="notes" disabled>{{variable.notes}}</textarea>
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Notes</label>
+			<div class="col-sm-10">
+				<textarea class="form-control form-control-sm field-separate" id="notes" name="notes" [(ngModel)]="variable.notes" disabled></textarea>
 			</div>
+		</div>
 
-			<br />
-			<button class="btn btn-success" type="submit">Submit</button>
 
-		</div>
 	</div>
-</div>
+	<div class="card-footer">
+		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm">Editer</button>
+	</div>
+</div>

src/app/variable-details/variable-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Variable } from '../variable';
 import { VariableService } from '../variable.service';
 import { FormsModule } from '@angular/forms'; 
@@ -13,7 +13,7 @@ export class VariableDetailsComponent implements OnInit
 
   variable: Variable = new Variable();
   
-  constructor(private route: ActivatedRoute, private variableService: VariableService) { }
+  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -21,5 +21,9 @@ export class VariableDetailsComponent implements OnInit
     this.variable = new Variable();
     this.variableService.getByIdVariable(this.numeroVariable).subscribe( data => { this.variable = data; });
   }
+ 
+  updateVariable(id: number) { this.router.navigate(['/variable-update', id]); }
   
+  goToListVariable(){ this.router.navigate(['/variable-list']); }
+
 }

src/app/variable-list/variable-list.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.pointeur-souris { cursor: pointer; }

src/app/variable-list/variable-list.component.html

@@ -1,33 +1,40 @@
 <br />
-<div class="card-body">
-	<table class="table table-sm">
-		<thead class="thead-dark">
-			<tr>
-				<th> Créé le</th>
-				<th> Modifié le </th>
-				<th> Type</th>
-				<th> Code </th>
-				<th> Valeur </th>
-				<th> </th>
-			</tr>
-		</thead>
-		<tbody>
-			@for (variable of variables; track variable.numeroVariable) {
-			<tr>
-				<td style="white-space: nowrap">{{ variable.dateCreation }}&nbsp;&nbsp;</td>
-				<td style="white-space: nowrap">{{ variable.dateModification }}&nbsp;&nbsp;</td>
-				<td style="white-space: nowrap">{{ variable.type }}&nbsp;&nbsp;</td>
-				<td style="white-space: nowrap">{{ variable.code }}&nbsp;&nbsp;</td>
-				<td>{{ variable.valeur }}&nbsp;&nbsp;</td>
-				<td style="white-space: nowrap">
-					<div class="btn-group btn-group-sm" role="toolbar">
-						<button (click)="formVariable(variable.numeroVariable)" class="btn btn-primary btn-sm">Détails</button>
-						<button (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm">Editer</button>
-						<button (click)="deleteVariable(variable.numeroVariable)" class="btn btn-danger btn-sm">Effacer</button>
-					</div>
-				</td>
-			</tr>
-			}
-		</tbody>
-	</table>
+<div class="card">
+	<div class="card-header">
+		<div class="row">
+			<div class="form-group col-sm-4">
+				<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;">Actualiser</button>
+				<button type="button" (click)="goToNewVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;">Créer</button>
+			</div>
+			<div class="form-group col-sm-8">
+				<select class="form-select form-select-sm">
+					<option selected> </option>
+          @for (type of types; track type) {
+					<option value="{{ type }}">{{ type }}</option>
+				  }
+				</select>
+			</div>
+		</div>
+	</div>
+	<div class="card-body">
+		<table class="table table-sm">
+			<thead class="thead-dark">
+				<tr>
+					<th>Type</th>
+					<th>Code</th>
+					<th>Valeur</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				@for (variable of variables; track variable.numeroVariable) {
+				<tr>
+					<td class="label-nobr">{{ variable.type }}&nbsp;&nbsp;</td>
+					<td class="label-nobr"><a (click)="formVariable(variable.numeroVariable)" class="link-primary pointeur-souris">{{ variable.code }}</a>&nbsp;&nbsp;</td>
+					<td>{{ variable.valeur }}&nbsp;&nbsp;</td>
+				</tr>
+				}
+			</tbody>
+		</table>
+	</div>
 </div>

src/app/variable-list/variable-list.component.ts

@@ -7,19 +7,28 @@ import { VariableService } from '../variable.service';
 
 export class VariableListComponent implements OnInit
 {
-
+  
+  types = new Set();
+  
   variables: Variable[] = [];
 
   constructor(private variableService: VariableService, private router: Router) { }
 
   ngOnInit(): void { this.retreiveDatas(); }
 
-  private retreiveDatas() { this.variableService.getListVariable().subscribe(data => { this.variables = data; }); }
+  private retreiveDatas() 
+  { 
+    this.variableService.getListVariable().subscribe(data => {
+      this.variables = data; 
+      
+      data.forEach((element: any) => { if (!this.types.has(element.type)) { this.types.add(element.type); } });
+    });
+  }
 
-  formVariable(id: number) { this.router.navigate(['variable-details', id]); }
+  formVariable(id: number) { this.router.navigate(['/variable-details', id]); }
  
-  updateVariable(id: number) { this.router.navigate(['variable-update', id]); }
+  goToListVariable(){ this.router.navigate(['/variable-list']); }
 
-  deleteVariable(id: number) { this.variableService.deleteVariable(id).subscribe( data => { console.log(data); this.retreiveDatas(); }) }
+  goToNewVariable(){ this.router.navigate(['/variable-create']); }
 
 }

src/app/variable-update/variable-update.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.field-separate { margin-bottom: 2px; }

src/app/variable-update/variable-update.component.html

@@ -1,43 +1,88 @@
-<br/>
-<div class="row">
-	<div class="card col-md-6 offset-md-3 offset-md-3">
+<br />
+<form id="formVariable">
+	<div class="card">
+		<div class="card-header">
+			<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm">Retour</button>
+		</div>
 		<div class="card-body">
-			<form (ngSubmit)="onSubmit()">
 
-				<div class="form-group">
-					<label>Créé le</label>
-					<input type="text" class="form-control" id="dateCreation" [(ngModel)]="variable.dateCreation" name="dateCreation" disabled>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" [(ngModel)]="variable.dateCreation" name="dateCreation" disabled>
 				</div>
+			</div>
 
-				<div class="form-group">
-					<label>Modifié le</label>
-					<input type="text" class="form-control" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
 				</div>
+			</div>
 
-				<div class="form-group">
-					<label>Type</label>
-					<input type="text" class="form-control" id="type" [(ngModel)]="variable.type" name="type">
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Type</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="type" [(ngModel)]="variable.type" name="type">
 				</div>
+			</div>
 
-				<div class="form-group">
-					<label>Code</label>
-					<input type="text" class="form-control" id="code" [(ngModel)]="variable.code" name="code">
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="code" [(ngModel)]="variable.code" name="code">
 				</div>
+			</div>
 
-				<div class="form-group">
-					<label>Valeur</label>
-					<input type="text" class="form-control" id="valeur" [(ngModel)]="variable.valeur" name="valeur">
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Valeur</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="valeur" [(ngModel)]="variable.valeur" name="valeur">
 				</div>
+			</div>
 
-				<div class="form-group">
-					<label>Notes</label>
-					<textarea class="form-control" id="notes" name="notes">{{variable.notes}}</textarea>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Notes</label>
+				<div class="col-sm-10">
+					<textarea class="form-control form-control-sm field-separate" id="notes" name="notes" [(ngModel)]="variable.notes"></textarea>
 				</div>
+			</div>
+
 
-				<br />
-				<button class="btn btn-success" type="submit">Actualiser</button>
+		</div>
+		<div class="card-footer">
+			<button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier">Modifier</button>
+			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;">Effacer</button>
+		</div>
+	</div>
+</form>
+
+<div class="modal fade" #domModalModifier id="modalModifier" tabindex="-1" aria-labelledby="modalModifierTitre" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="modalModifierTitre">Modification</h5>
+			</div>
+			<div class="modal-body">Actualiser cet enregistrement ?</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn btn-primary btn-sm" (click)="updateConfirmed(variable.numeroVariable)" data-bs-dismiss="modal">Confirmer</button>
+			</div>
+		</div>
+	</div>
+</div>
 
-			</form>
+<div class="modal fade" #domModalEffacer id="modalEffacer" tabindex="-1" aria-labelledby="modalEffacerTitre" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title text-danger" id="modalEffacerTitre">Suppression</h5>
+			</div>
+			<div class="modal-body">Effacer cet enregistrement ?</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed(variable.numeroVariable)" data-bs-dismiss="modal">Confirmer</button>
+			</div>
 		</div>
 	</div>
 </div>

src/app/variable-update/variable-update.component.ts

@@ -21,7 +21,9 @@ export class VariableUpdateComponent implements OnInit
     this.variableService.getByIdVariable(this.numeroVariable).subscribe(data => { this.variable = data; }, error => console.log(error));
   }
 
-  onSubmit() { this.variableService.updateVariable(this.numeroVariable, this.variable).subscribe(data => { this.goToListVariable(); }, error => console.log(error)); }
+  updateConfirmed(id: number) { this.variableService.updateVariable(this.numeroVariable, this.variable).subscribe(data => { this.goToListVariable(); }, error => console.log(error)); }
+
+  deleteConfirmed(id: number) { this.variableService.deleteVariable(id).subscribe(data => { console.log(data); }, error => console.log(error)); this.goToListVariable(); }
 
   goToListVariable(){ this.router.navigate(['/variable-list']); }
 

src/app/variable.service.ts

@@ -14,7 +14,7 @@ export class VariableService
   
   getListVariable(): Observable<Variable[]>{ return this.httpClient.get<Variable[]>(`${this.baseURL}/list`); }
 
-  createVariable(variable: Variable): Observable<Object>{return this.httpClient.post(`${this.baseURL}/create`, variable); }
+  createVariable(variable: Variable): Observable<Object>{ return this.httpClient.post(`${this.baseURL}/create`, variable); }
 
   getByIdVariable(id: number): Observable<Variable>{ return this.httpClient.get<Variable>(`${this.baseURL}/form/${id}`); }