Employeur pagination

angular.json

@@ -30,8 +30,7 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/bootstrap-notify/bootstrap-notify.js",
-              "node_modules/chartist/dist/chartist.js"
+              "node_modules/bootstrap-notify/bootstrap-notify.js"
             ]
           },
           "configurations": {

package.json

@@ -29,36 +29,38 @@
         "@types/googlemaps": "3.43.3",
         "animate.css": "4.1.1",
         "arrive": "2.4.1",
-        "bootstrap": "3.3.7",
+        "bootstrap": "^3.3.7",
         "bootstrap-notify": "3.1.3",
         "chartist": "0.11.4",
         "googleapis": "66.0.0",
         "jquery": "3.5.1",
+        "jwt-decode": "^4.0.0",
         "perfect-scrollbar": "1.5.0",
         "rxjs": "~7.5.0",
+        "sweetalert2": "^11.17.2",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "^14.2.3",
         "@angular/cli": "~14.2.3",
         "@angular/compiler-cli": "^14.2.0",
+        "@types/chartist": "0.11.0",
         "@types/jasmine": "~5.1.4",
+        "@types/jasminewd2": "~2.0.13",
+        "@types/jquery": "3.5.30",
+        "@types/node": "20.14.11",
+        "codelyzer": "6.0.2",
+        "cross-env": "^7.0.3",
         "jasmine-core": "~4.3.0",
+        "jasmine-spec-reporter": "~7.0.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.1.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
-        "typescript": "~4.7.2",
-        "@types/jasminewd2": "~2.0.13",
-        "@types/chartist": "0.11.0",
-        "@types/jquery": "3.5.30",
-        "@types/node": "20.14.11",
-        "codelyzer": "6.0.2",
-        "jasmine-spec-reporter": "~7.0.0",
         "protractor": "7.0.0",
         "ts-node": "~10.7.0",
-        "cross-env": "^7.0.3"
+        "typescript": "~4.7.2"
     }
 }

src/app/app.module.ts

@@ -3,6 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { AuthInterceptor } from './interceptors/auth.interceptor';
+
 
 import { AppRoutingModule } from './app.routing';
 import { NavbarModule } from './shared/navbar/navbar.module';
@@ -12,6 +16,14 @@ import { SidebarModule } from './sidebar/sidebar.module';
 import { AppComponent } from './app.component';
 
 import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
+import { LoginComponent } from './login/login.component';
+import { UsersListComponent } from './users-list/users-list.component';
+import { FormateurListComponent } from './formateur-list/formateur-list.component';
+import { FormationListeComponent } from './formation-liste/formation-liste.component';
+import { ParticipantListComponent } from './participant-list/participant-list.component';
+import { SearchPaginationComponent } from './search-pagination/search-pagination.component';
+import { EmployeurListComponent } from './employeur-list/employeur-list.component';
+import { NotAuthorizedComponent } from './not-authorized/not-authorized.component';
 
 @NgModule({
   imports: [
@@ -22,13 +34,23 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
     NavbarModule,
     FooterModule,
     SidebarModule,
+    ReactiveFormsModule,
+
     AppRoutingModule
   ],
   declarations: [
     AppComponent,
-    AdminLayoutComponent
-  ],
-  providers: [],
+    AdminLayoutComponent,
+    LoginComponent,
+    UsersListComponent,
+    FormateurListComponent,
+    FormationListeComponent,
+    ParticipantListComponent,
+    SearchPaginationComponent,
+    EmployeurListComponent,
+    NotAuthorizedComponent,
+],
+  providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.routing.ts

@@ -3,24 +3,29 @@ import { CommonModule, } from '@angular/common';
 import { BrowserModule  } from '@angular/platform-browser';
 import { Routes, RouterModule } from '@angular/router';
 
+import { LoginComponent } from './login/login.component';
 import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
 
 const routes: Routes =[
+  {
+    path: 'login',
+    component: LoginComponent,
+  },
   {
     path: '',
-    redirectTo: 'dashboard',
+    redirectTo: 'login',
     pathMatch: 'full',
   }, {
     path: '',
     component: AdminLayoutComponent,
-    children: [
+    children: [   
         {
       path: '',
       loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(x => x.AdminLayoutModule)
   }]},
   {
     path: '**',
-    redirectTo: 'dashboard'
+    redirectTo: 'login'
   }
 ];
 

src/app/employeur-list.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EmployeurListService } from './employeur-list.service';
+
+describe('EmployeurListService', () => {
+  let service: EmployeurListService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EmployeurListService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/employeur-list.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmployeurListService {
+
+  constructor() { }
+}

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

@@ -0,0 +1,56 @@
+/* Amélioration de l'apparence des boutons */
+.btn {
+    border-radius: 4px;
+    font-weight: 500;
+    padding: 0.375rem 0.75rem;
+    transition: all 0.2s ease-in-out;
+    margin-right: 8px;
+}
+
+.btn-sm {
+    font-size: 1.3rem;
+    padding: 0.25rem 0.5rem;
+}
+
+.btn-info {
+    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
+}
+
+.btn-danger {
+    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
+}
+
+.btn-primary {
+    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.btn i {
+    margin-right: 5px;
+}
+
+/* Amélioration de l'espacement dans le tableau */
+.table td, .table th {
+    padding: 12px 15px;
+    vertical-align: middle;
+}
+
+/* Amélioration pour le bouton Ajouter */
+.header .btn-primary {
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+}
+
+.header .btn-primary i {
+    margin-right: 8px;
+}
+
+.modal-body {
+    max-height: 400px; /* Taille maximale du contenu */
+    overflow-y: auto; /* Permet de faire défiler le contenu */
+}

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

@@ -0,0 +1,112 @@
+<div class="main-content">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="card">
+                    <div class="header">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div>
+                                <h4 class="title">Liste des employeurs</h4>
+                                <p class="category">Gérer les employeurs</p>
+                            </div>
+                            <button class="btn btn-primary" (click)="openAddModal()">
+                                <i class="fa fa-plus"></i> Ajouter un employeur
+                            </button>
+                        </div>
+                    </div>
+                    <div class="content">
+                        <app-search-pagination
+                          [totalItems]="filteredEmployeurs.length"
+                          [pageSize]="pageSize"
+                          [currentPage]="currentPage"
+                          (searchChange)="onSearchChange($event)"
+                          (pageChange)="onPageChange($event)">
+                        </app-search-pagination>
+                    </div>
+
+                    <div class="content table-responsive table-full-width">
+                        <table class="table table-hover table-striped">
+                            <thead>
+                                <tr>
+                                    <th *ngFor="let cell of tableData1.headerRow">{{ cell }}</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let employeur of paginatedEmployeurs(); let i = index">
+                                    <td>{{ employeur.id }}</td>
+                                    <td>{{ employeur.nomEmployeur }}</td>
+                                    <td>
+                                        <div class="d-flex justify-content-start gap-2">
+                                            <button type="button" class="btn btn-sm btn-info mr-2" (click)="openEditModal(i + (this.currentPage-1)*this.pageSize)">
+                                                <i class="fa fa-edit mr-1"></i> Modifier
+                                            </button>
+                                            <button type="button" class="btn btn-sm btn-danger" (click)="deleteEmployeur(i + (this.currentPage-1)*this.pageSize)">
+                                                <i class="fa fa-trash mr-1"></i> Supprimer
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal pour ajouter/modifier un employeur -->
+<div class="modal" [class.show]="showEmployeurModal" [style.display]="showEmployeurModal ? 'block' : 'none'" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ isEditMode ? 'Modifier' : 'Ajouter' }} un employeur</h5>
+                <button type="button" class="close" (click)="closeEmployeurModal()" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form [formGroup]="employeurForm">
+                    <div class="form-group">
+                        <label for="employeurNom">Nom</label>
+                        <input type="text" class="form-control" id="employeurNom" formControlName="nomEmployeur">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="closeEmployeurModal()">Annuler</button>
+                <button type="button" class="btn btn-primary" [disabled]="employeurForm.invalid" (click)="saveEmployeur()">
+                    {{ isEditMode ? 'Modifier' : 'Ajouter' }}
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-backdrop fade show" *ngIf="showEmployeurModal"></div>
+
+<!-- Modal de confirmation pour la suppression -->
+<div class="modal" [class.show]="showDeleteModal" [style.display]="showDeleteModal ? 'block' : 'none'" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Confirmation de suppression</h5>
+                <button type="button" class="close" (click)="closeDeleteModal()" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer cet employeur?</p>
+                <p *ngIf="selectedEmployeur">
+                    <strong>Nom:</strong> {{ selectedEmployeur[1] }}<br>
+                    <strong>ID:</strong> {{ selectedEmployeur[0] }}
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="closeDeleteModal()">Annuler</button>
+                <button type="button" class="btn btn-danger" (click)="confirmDelete()">Supprimer</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-backdrop fade show" *ngIf="showDeleteModal"></div>

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

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