dev en cours

angular.json

@@ -27,9 +27,12 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -16,6 +16,9 @@
         "@angular/platform-browser": "^19.1.0",
         "@angular/platform-browser-dynamic": "^19.1.0",
         "@angular/router": "^19.1.0",
+        "bootstrap": "^5.3.3",
+        "jquery": "^3.7.1",
+        "ngx-bootstrap": "^19.0.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -4396,6 +4399,17 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.30.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.30.1.tgz",
@@ -5787,6 +5801,25 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8900,6 +8933,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10398,6 +10437,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ngx-bootstrap": {
+      "version": "19.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-19.0.2.tgz",
+      "integrity": "sha512-DR5sA5e9k1bwtVeo8lQW4Yr8IgU7ba2pco5rlznnr7k91BJ3SNgrUSq+BQfigwARHGmgKCcw9lexu8ZWvefEXg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^19.0.1",
+        "@angular/common": "^19.0.1",
+        "@angular/core": "^19.0.1",
+        "@angular/forms": "^19.0.1",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",

package.json

@@ -18,6 +18,9 @@
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
+    "bootstrap": "^5.3.3",
+    "jquery": "^3.7.1",
+    "ngx-bootstrap": "^19.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

src/app/app.component.spec.ts

@@ -14,16 +14,4 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'demovote-frontend' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('demovote-frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demovote-frontend');
-  });
 });

src/app/app.component.ts

@@ -8,5 +8,5 @@ import { RouterOutlet } from '@angular/router';
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  title = 'demovote-frontend';
+  title = 'demovote';
 }

src/app/app.config.ts

@@ -1,8 +1,9 @@
 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)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
 };

src/app/app.routes.ts

@@ -1,3 +1,21 @@
-import { Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { VariableListComponent } from './variable-list/variable-list.component';
+import { VariableCreateComponent } from './variable-create/variable-create.component';
+import { VariableUpdateComponent } from './variable-update/variable-update.component';
+import { VariableDetailsComponent } from './variable-details/variable-details.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [  
+  {path: 'variable-list', component: VariableListComponent},
+  {path: 'variable-create', component: VariableCreateComponent},
+  {path: '', redirectTo: 'variable-list', pathMatch: 'full'},
+  {path: 'variable-update/:numeroVariable', component: VariableUpdateComponent},
+  {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],                                                                                                                                                                                                                                                                                                          
+  exports: [RouterModule]
+})
+
+export class AppRoutingModule { }

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

@@ -0,0 +1,33 @@
+<br/>
+<div class="row">
+    <div class="card col-md-6 offset-md-3 offset-md-3">
+            <div class="card-body">
+                <form (ngSubmit)="onSubmit()">
+
+                    <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">
+                        <label>Code</label>
+                        <input type="text" class="form-control" id="code" [(ngModel)]="variable.code" name="code">
+                    </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">
+                        <label>Notes</label>
+ 												<textarea class="form-control" id="notes" name="notes">{{variable.notes}}</textarea>
+                    </div>
+
+                    <br />
+                    <button class="btn btn-success" type="submit">Créer</button>
+
+                </form>
+        </div>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Variable } from '../variable';
+import { VariableService } from '../variable.service';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-variable-create', imports: [FormsModule], templateUrl: './variable-create.component.html', styleUrl: './variable-create.component.css' })
+
+export class VariableCreateComponent implements OnInit
+{
+
+  variable: Variable = new Variable();
+  
+  constructor(private variableService: VariableService, private router: Router) { }
+
+  ngOnInit(): void { }
+
+  saveVariable() { this.variableService.createVariable(this.variable).subscribe( data => { console.log(data); this.goToListVariable(); }, error => console.log(error)); }
+
+  goToListVariable() {this.router.navigate(['/variable-list']); }
+  
+  onSubmit(){ console.log(this.variable); this.saveVariable(); }
+
+}

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

@@ -0,0 +1,41 @@
+<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>
+			</div>
+
+			<div class="form-group">
+				<label>Modifié le</label> 
+				<input type="text" class="form-control" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
+			</div>
+
+			<div class="form-group">
+				<label>Type</label> 
+				<input type="text" class="form-control" id="type" [(ngModel)]="variable.type" name="type" disabled>
+			</div>
+
+			<div class="form-group">
+				<label>Code</label> 
+				<input type="text" class="form-control" id="code" [(ngModel)]="variable.code" name="code" disabled>
+			</div>
+
+			<div class="form-group">
+				<label>Valeur</label> 
+				<input type="text" class="form-control" id="valeur" [(ngModel)]="variable.valeur" name="valeur" disabled>
+			</div>
+
+			<div class="form-group">
+				<label>Notes</label>
+				<textarea class="form-control" id="notes" name="notes" disabled>{{variable.notes}}</textarea>
+			</div>
+
+			<br />
+			<button class="btn btn-success" type="submit">Submit</button>
+
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VariableDetailsComponent } from './variable-details.component';
+
+describe('VariableDetailsComponent', () => {
+  let component: VariableDetailsComponent;
+  let fixture: ComponentFixture<VariableDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VariableDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VariableDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Variable } from '../variable';
+import { VariableService } from '../variable.service';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-variable-details', imports: [FormsModule], templateUrl: './variable-details.component.html', styleUrl: './variable-details.component.css' })
+
+export class VariableDetailsComponent implements OnInit 
+{
+
+  numeroVariable: number = 0;
+
+  variable: Variable = new Variable();
+  
+  constructor(private route: ActivatedRoute, private variableService: VariableService) { }
+
+  ngOnInit(): void 
+  {
+    this.numeroVariable = this.route.snapshot.params['numeroVariable'];
+    this.variable = new Variable();
+    this.variableService.getByIdVariable(this.numeroVariable).subscribe( data => { this.variable = data; });
+  }
+  
+}

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

@@ -0,0 +1,33 @@
+<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>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VariableListComponent } from './variable-list.component';
+
+describe('VariableListComponent', () => {
+  let component: VariableListComponent;
+  let fixture: ComponentFixture<VariableListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VariableListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VariableListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Variable } from '../variable';
+import { VariableService } from '../variable.service';
+
+@Component({ selector: 'app-variable-list', imports: [], templateUrl: './variable-list.component.html', styleUrl: './variable-list.component.css' })
+
+export class VariableListComponent implements OnInit
+{
+
+  variables: Variable[] = [];
+
+  constructor(private variableService: VariableService, private router: Router) { }
+
+  ngOnInit(): void { this.retreiveDatas(); }
+
+  private retreiveDatas() { this.variableService.getListVariable().subscribe(data => { this.variables = data; }); }
+
+  formVariable(id: number) { this.router.navigate(['variable-details', id]); }
+ 
+  updateVariable(id: number) { this.router.navigate(['variable-update', id]); }
+
+  deleteVariable(id: number) { this.variableService.deleteVariable(id).subscribe( data => { console.log(data); this.retreiveDatas(); }) }
+
+}

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

@@ -0,0 +1,43 @@
+<br/>
+<div class="row">
+	<div class="card col-md-6 offset-md-3 offset-md-3">
+		<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>
+
+				<div class="form-group">
+					<label>Modifié le</label>
+					<input type="text" class="form-control" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
+				</div>
+
+				<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">
+					<label>Code</label>
+					<input type="text" class="form-control" id="code" [(ngModel)]="variable.code" name="code">
+				</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">
+					<label>Notes</label>
+					<textarea class="form-control" id="notes" name="notes">{{variable.notes}}</textarea>
+				</div>
+
+				<br />
+				<button class="btn btn-success" type="submit">Actualiser</button>
+
+			</form>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VariableUpdateComponent } from './variable-update.component';
+
+describe('VariableUpdateComponent', () => {
+  let component: VariableUpdateComponent;
+  let fixture: ComponentFixture<VariableUpdateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VariableUpdateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VariableUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Variable } from '../variable';
+import { VariableService } from '../variable.service';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-variable-update', imports: [FormsModule], templateUrl: './variable-update.component.html', styleUrl: './variable-update.component.css' })
+
+export class VariableUpdateComponent implements OnInit
+{
+  
+  numeroVariable: number = 0;
+  
+  variable: Variable = new Variable();
+  
+  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit(): void 
+  {
+    this.numeroVariable = this.route.snapshot.params['numeroVariable'];
+    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)); }
+
+  goToListVariable(){ this.router.navigate(['/variable-list']); }
+
+}

src/app/variable.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { Variable } from './variable';
+
+@Injectable({ providedIn: 'root' })
+
+export class VariableService 
+{
+
+  private baseURL = "http://localhost:8080/demovote-api/v1/variable";
+
+  constructor(private httpClient: HttpClient) { }
+  
+  getListVariable(): Observable<Variable[]>{ return this.httpClient.get<Variable[]>(`${this.baseURL}/list`); }
+
+  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}`); }
+
+  updateVariable(id: number, variable: Variable): Observable<Object>{ return this.httpClient.put(`${this.baseURL}/update/${id}`, variable); }
+
+  deleteVariable(id: number): Observable<Object>{ return this.httpClient.delete(`${this.baseURL}/delete/${id}`); }
+  
+}

src/app/variable.ts

@@ -0,0 +1,10 @@
+export class Variable 
+{
+  dateCreation: string = "";
+  dateModification: string = "";
+  numeroVariable: number = 0;
+  type: string = "";
+  code: string = "";
+  valeur: string = "";
+  notes: string = "";
+}

src/app/variable/variable.component.html

@@ -0,0 +1 @@
+<br/>

src/app/variable/variable.component.spec.ts

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

src/app/variable/variable.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-variable',
+  standalone: false,
+  templateUrl: './variable.component.html',
+  styleUrl: './variable.component.css'
+})
+export class VariableComponent {
+
+}