mise ajour du 12/06/2024

angular.json

@@ -24,7 +24,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser-esbuild",
           "options": {
-            "outputPath": "dist/angular-beasy",
+            "outputPath": "dist/angular-beasy/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": ["zone.js"],
@@ -117,6 +117,72 @@
           "options": {
             "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/angular-beasy/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json",
+            "inlineStyleLanguage": "scss"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.ts"
+                }
+              ],
+              "optimization": false,
+              "sourceMap": true,
+              "extractLicenses": false
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve-ssr": {
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
+          "configurations": {
+            "development": {
+              "browserTarget": "angular-beasy:build:development",
+              "serverTarget": "angular-beasy:server:development"
+            },
+            "production": {
+              "browserTarget": "angular-beasy:build:production",
+              "serverTarget": "angular-beasy:server:production"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "prerender": {
+          "builder": "@angular-devkit/build-angular:prerender",
+          "options": {
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-beasy:build:production",
+              "serverTarget": "angular-beasy:server:production"
+            },
+            "development": {
+              "browserTarget": "angular-beasy:build:development",
+              "serverTarget": "angular-beasy:server:development"
+            }
+          },
+          "defaultConfiguration": "production"
         }
       }
     }

package.json

@@ -10,7 +10,11 @@
     "lint": "ng lint",
     "compodoc": "npx compodoc -p src/tsconfig.app.json",
     "compodoc:serve": "npx compodoc -p src/tsconfig.app.json -s",
-    "compodoc:serve:watch": "npx compodoc -p src/tsconfig.app.json -s -w"
+    "compodoc:serve:watch": "npx compodoc -p src/tsconfig.app.json -s -w",
+    "dev:ssr": "ng run angular-beasy:serve-ssr",
+    "serve:ssr": "node dist/angular-beasy/server/main.js",
+    "build:ssr": "ng build && ng run angular-beasy:server",
+    "prerender": "ng run angular-beasy:prerender"
   },
   "private": true,
   "dependencies": {
@@ -23,7 +27,9 @@
     "@angular/material": "^17.1.2",
     "@angular/platform-browser": "^17.1.3",
     "@angular/platform-browser-dynamic": "^17.1.3",
+    "@angular/platform-server": "^17.1.3",
     "@angular/router": "^17.1.3",
+    "@angular/ssr": "^17.1.3",
     "@fortawesome/angular-fontawesome": "^0.14.1",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -32,11 +38,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@ngneat/hot-toast": "^6.1.0",
     "@ngneat/overview": "^5.1.1",
+    "@nguniversal/express-engine": "^7.0.2",
     "@swimlane/ngx-datatable": "^20.1.0",
     "@types/w3c-web-usb": "^1.0.10",
     "apexcharts": "^3.45.2",
     "bootstrap": "^5.3.2",
     "chart.js": "^4.4.3",
+    "express": "^4.18.2",
     "internal-ip": "^8.0.0",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
@@ -68,10 +76,12 @@
     "@angular/cli": "~17.1.3",
     "@angular/compiler-cli": "^17.1.3",
     "@biomejs/biome": "^1.6.4",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "~4.3.5",
-    "@types/node": "^20.10.5",
+    "@types/node": "^18.18.0",
     "@typescript-eslint/eslint-plugin": "6.15.0",
     "@typescript-eslint/parser": "6.15.0",
+    "browser-sync": "^3.0.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",

src/app/app.config.ts

@@ -9,6 +9,7 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideEnvironmentNgxMask } from 'ngx-mask';
 import { HttpClientModule } from '@angular/common/http'; // Import de HttpClientModule
 import { provideNativeDateAdapter } from '@angular/material/core';
+import { provideClientHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -18,6 +19,6 @@ export const appConfig: ApplicationConfig = {
     provideNativeDateAdapter(),
     { provide: LOCALE_ID, useValue: 'fr-FR' },
     //HttpClientModule,
-    importProvidersFrom(HttpClientModule),
+    importProvidersFrom(HttpClientModule), provideClientHydration(),
   ],
 };

src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html

@@ -22,7 +22,7 @@
         <div class="card">
           <div class="card-title">
             <div class="card-body m-3">
-              <form>
+              <!-- <form>
                 <div class="row">
                   <div class="col-md-2">
                     <div class="form-group">
@@ -34,7 +34,7 @@
                         <option value="" disabled>
                           Choisissez un opérateur
                         </option>
-                        <!-- Suppression de "selected" -->
+
                         <option
                           *ngFor="let operateur of operateurs"
                           [ngValue]="operateur">
@@ -51,7 +51,7 @@
                         id="services"
                         [(ngModel)]="selectedService">
                         <option value="" disabled>Choisissez un service</option>
-                        <!-- Suppression de "selected" -->
+
                         <option
                           *ngFor="let service of services"
                           [ngValue]="service">
@@ -92,6 +92,77 @@
                     </button>
                   </div>
                 </div>
+              </form> -->
+              <form>
+                <div class="row">
+                  <div class="col-md-2">
+                    <div class="form-group">
+                      <label for="operateurs">Opérateurs</label>
+                      <select
+                        class="form-control filtre"
+                        id="operateurs"
+                        [(ngModel)]="selectedOperateur"
+                        name="selectedOperateur">
+                        <option value="">choisir un opérateur</option>
+                        <option
+                          *ngFor="let operateur of operateurs"
+                          [ngValue]="operateur">
+                          {{ operateur.code }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-md-2">
+                    <div class="form-group">
+                      <label for="services">Services</label>
+                      <select
+                        class="form-control filtre"
+                        id="services"
+                        [(ngModel)]="selectedService"
+                        name="selectedService">
+                        <option value="">choisir un service</option>
+                        <option
+                          *ngFor="let service of services"
+                          [ngValue]="service">
+                          {{ service.nom_service }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-md-3">
+                    <div class="form-group">
+                      <label for="debut">De</label>
+                      <input
+                        type="date"
+                        [(ngModel)]="startDate"
+                        required
+                        name="startDate"
+                        id="debut"
+                        class="form-control form-control-sm" />
+                    </div>
+                  </div>
+                  <div class="col-md-3">
+                    <div class="form-group">
+                      <label for="fin">À</label>
+                      <input
+                        type="date"
+                        [(ngModel)]="endDate"
+                        required
+                        name="endDate"
+                        id="fin"
+                        class="form-control form-control-sm" />
+                    </div>
+                  </div>
+                  <div class="col-md-2">
+                    <button
+                      style="border-radius: 15px"
+                      class="btn btn-primary btn-sm mt-4"
+                      (click)="onSearch()">
+                      Recherche <i class="fa fa-search m-1"></i>
+                    </button>
+                  </div>
+                </div>
               </form>
             </div>
           </div>

src/app/utilisateurs/view-user/view-user.component.html

@@ -179,13 +179,13 @@
           [routerLink]="['/utilisateurs/edit-user', user.id]"
           ><mat-icon style="color: green" title="Modifier">edit</mat-icon></a
         >
-        <a
+        <!-- <a
           href="#"
           class="m-2"
           (click)="onDelete(user.id)"
           [routerLink]="['/utilisateurs/view-user']">
           <mat-icon style="color: red" title="Supprimer">delete_sweep</mat-icon>
-        </a>
+        </a> -->
       </mat-cell>
     </ng-container>