add time line

angular.json

@@ -49,14 +49,16 @@
             "src/styles.css",
             "src/assets/css/app-light.css",
             "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
-            "./node_modules/bootstrap/dist/css/bootstrap.min.css"
+            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+            "node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css"
           ],
           "scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
             "./node_modules/jquery-sparkline/jquery.sparkline.min.js",
           "./node_modules/@popperjs/core/dist/umd/popper.min.js",
-          "node_modules/feather-icons/dist/feather.min.js"
+          "node_modules/feather-icons/dist/feather.min.js",
+          "node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.js"
           
           ]
           },

package-lock.json

@@ -24,6 +24,7 @@
         "@ngx-translate/http-loader": "^8.0.0",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
+        "dhtmlx-gantt": "^8.0.10",
         "dom-to-image": "^2.6.0",
         "feather-icons": "^4.29.2",
         "html2canvas": "^1.4.1",
@@ -6418,6 +6419,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/dhtmlx-gantt": {
+      "version": "8.0.10",
+      "resolved": "https://registry.npmjs.org/dhtmlx-gantt/-/dhtmlx-gantt-8.0.10.tgz",
+      "integrity": "sha512-DNfxZw4ctR8zj/N7jHQHtrfsb4i2CRcTBmshFILbpwvui3VyQZqWavWB+CwLxVXjKiO/443yrdqB7K9DOs903Q=="
+    },
     "node_modules/di": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
+    "dhtmlx-gantt": "^8.0.10",
     "dom-to-image": "^2.6.0",
     "feather-icons": "^4.29.2",
     "html2canvas": "^1.4.1",

src/app/projects/components/project-item/project-item.component.html

@@ -22,8 +22,12 @@
         <div class="col">
           <div class="file-action d-flex justify-content-around">
             <a type="button" [routerLink]="['/projects/detail',project.id]" class="btn btn-primary m-1">لوحة التحكم</a>
+          </div>
+          </div>
+          <div class="col">
+          <div  class="file-action d-flex justify-content-around">
             <a type="button" [routerLink]="['/reports/definition',project.id]"  class="btn btn-primary m-1">بطاقة المشروع</a>
-            <!-- [routerLink]="['/projects/detail',project.id]" -->
+          
           </div>
         </div>
       </div>

src/app/projects/pages/project-list/project-list.component.html

@@ -12,7 +12,7 @@
     <hr>
     <div *ngIf="projects">
     <div  class="row" *ngIf="projects.length > 0">
-        <project-item class="col-4"  (click)="this.router.navigate(['projects/detail',project.id])"   *ngFor="let project of projects" [project]="project"></project-item>
+        <project-item class="col-4"     *ngFor="let project of projects" [project]="project"></project-item>
     </div>
     <div  class="row" *ngIf="projects.length == 0">
             لا يوجد أي مشروع 

src/app/reports/componenets/gantt-chart/gantt-chart.component.css

+#gantt_here {
+    width: 100%;
+    height: 600px; /* Adjust height as needed */
+  }
+  
\ No newline at end of file

src/app/reports/componenets/gantt-chart/gantt-chart.component.html

+<div id="gantt_here" style="width: 100%; height: 100%;"></div>
+   
\ No newline at end of file

src/app/reports/componenets/gantt-chart/gantt-chart.component.ts

+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { Step } from '../../../projects/models/responses/Step';
+import { ActivatedRoute } from '@angular/router';
+import { PdfDownloaderService } from '../../../core/services/pdfDownloader/pdf-downloader.service';
+import { ReportsService } from '../../services/reports.service';
+
+@Component({
+  selector: 'gantt-chart',
+  templateUrl: './gantt-chart.component.html',
+  styleUrl: './gantt-chart.component.css'
+})
+export class GanttChartComponent implements OnInit ,AfterViewInit {
+  @Input() steps :Step[]
+  constructor(
+
+  ){}
+  ngOnInit(): void {
+    
+  }
+
+
+  ngAfterViewInit(): void {
+    this.initGanttChart();
+  }
+
+
+  initGanttChart(): void {
+    const gantt = (window as any).gantt;
+
+    gantt.config.date_format = "%Y-%m-%d";
+    gantt.config.column_width = 50;
+    gantt.config.scale_height = 50;
+    gantt.config.subscales = [
+      { unit: "day", step: 1, date: "%d %M" }
+    ];
+    gantt.config.scale_unit = "month";
+    gantt.config.date_scale = "%F, %Y";
+    gantt.config.sort = true;
+
+    const ganttContainer = document.getElementById('gantt_here');
+    if (ganttContainer) {
+      gantt.init(ganttContainer);  // Pass the actual element
+      gantt.parse(this.formatDataForGantt(this.steps));
+    } else {
+      console.error("Gantt container element not found.");
+    }
+
+  }
+
+  formatDataForGantt(steps: Step[]): any {
+    debugger 
+    return {
+
+      data: steps.map(step => ({
+        id: step.id,
+        text: step.stepInfo.stepName,
+        start_date: step.stepInfo.startDate,
+        duration: step.stepInfo.duration,
+        progress: step.currentCompletionRatio
+      })),
+      links: []
+    };
+  }
+
+}

src/app/reports/pages/project-definition/project-definition.component.html

@@ -9,7 +9,7 @@
           <button type="button" (click)="downloadAsPdf()" class="btn mr-1 btn-secondary m-1">طباعة</button>
           <button type="button" class="btn mr-1 btn-secondary m-1">تقرير متابعة المراحل</button>
           <button type="button" class="btn mr-1 btn-secondary m-1">تقرير انشغالية</button>
-          <button type="button" class="btn mr-1 btn-secondary m-1">تقرير خطة زمنية</button>
+          <button type="button" [routerLink]="['/reports/timeline/',project.id]" class="btn mr-1 btn-secondary m-1">تقرير خطة زمنية</button>
          
         </div>
       </div>

src/app/reports/pages/project-time-line/project-time-line.component.css

+.chart-container {
+    width: 794px; /* Adjust based on A4 size */
+    height: 1123px; /* Adjust based on A4 size */
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    page-break-inside: avoid;
+}
\ No newline at end of file

src/app/reports/pages/project-time-line/project-time-line.component.html

-<p>project-time-line works!</p>
+<div class="container-fluid" *ngIf="project">
+    <div class="row justify-content-center">
+    <div class="col-12 ">
+      <div class="row align-items-center mb-4">
+        <div class="col">
+          <h2 class="h5 page-title"><small class="text-muted text-uppercase">بطاقة خطة زمنية</small></h2>
+        </div>
+        <div class="col-auto">
+          <button type="button" (click)="downloadAsPdf()" class="btn mr-1 btn-secondary m-1">طباعة</button>
+          <button type="button" class="btn mr-1 btn-secondary m-1">تقرير متابعة المراحل</button>
+          <button type="button" class="btn mr-1 btn-secondary m-1">تقرير انشغالية</button>
+          <button type="button" class="btn mr-1 btn-secondary m-1">بطاقة مشروع</button>
+         
+        </div>
+      </div>
+      <div class="card shadow" id="pdfContent">
+        <div class="card-body p-5">
+
+          <project-header [projectInfo]="project.projectInfo"></project-header>
+   
+   
+          <div class="chart-container">
+            <gantt-chart [steps]="project.steps"></gantt-chart>
+          
+          </div>   
+          <project-footer [proposer]="project.proposer" 
+                          [executer]="project.executer"
+                          [projectManager]="project.projectManager"
+                          [teamLeader]="project.teamLeader"
+          >
+
+          </project-footer>
+        </div> <!-- /.card-body -->
+      </div> <!-- /.card -->
+    </div> <!-- /.col-12 -->
+
+</div>
+</div>
\ No newline at end of file

src/app/reports/pages/project-time-line/project-time-line.component.ts

-import { Component } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { PdfDownloaderService } from '../../../core/services/pdfDownloader/pdf-downloader.service';
+import { ActivatedRoute } from '@angular/router';
+import { Project } from '../../../projects/models/responses/project';
+import { ReportsService } from '../../services/reports.service';
+import { Step } from '../../../projects/models/responses/Step';
 
 @Component({
   selector: 'project-time-line',
   templateUrl: './project-time-line.component.html',
   styleUrl: './project-time-line.component.css'
 })
-export class ProjectTimeLineComponent {
+export class ProjectTimeLineComponent implements OnInit  {
+  project : Project
+
+  constructor(
+    private reportsService : ReportsService,
+    private route :ActivatedRoute,
+    private pdfDownloader : PdfDownloaderService
+
+  ){}
+  ngOnInit(): void {
+    
+    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.reportsService.getProjectById(id).subscribe({
+      next :(data) => {
+        
+          this.project = data;
+        
+    },
+    error : (err)=>{ console.log(err)}
+
+  });
+ 
+  }
+
+  public downloadAsPdf(): void {
+    this.pdfDownloader.downloadAsPdf('pdfContent');
+  }
+
 
 }

src/app/reports/reports-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ProjectDefinitionComponent } from './pages/project-definition/project-definition.component';
+import { ProjectTimeLineComponent } from './pages/project-time-line/project-time-line.component';
 
 const routes: Routes = [
-  {path: 'definition/:id',component:ProjectDefinitionComponent}
+  {path: 'definition/:id',component:ProjectDefinitionComponent},
+  {path: 'timeline/:id',component:ProjectTimeLineComponent},
+  
 ];
 
 @NgModule({

src/app/reports/reports.module.ts

@@ -14,6 +14,7 @@ import { ParticipantsTableComponent } from './componenets/participants-table/par
 import { ProjectFooterComponent } from './componenets/project-footer/project-footer.component';
 import { StepTableComponent } from './componenets/step-table/step-table.component';
 import { SharedModule } from '../shared/shared.module';
+import { GanttChartComponent } from './componenets/gantt-chart/gantt-chart.component';
 
 
 @NgModule({
@@ -28,7 +29,8 @@ import { SharedModule } from '../shared/shared.module';
     FinancialSpendTableComponent,
     ProjectFooterComponent,
     ProjectHeaderComponent,
-    ProjectTimeLineComponent
+    ProjectTimeLineComponent,
+    GanttChartComponent
   ],
   imports: [
     CommonModule,