Commit 5aeb0c8b authored by hasan khaddour's avatar hasan khaddour

add time line

parent badb52e4
...@@ -49,14 +49,16 @@ ...@@ -49,14 +49,16 @@
"src/styles.css", "src/styles.css",
"src/assets/css/app-light.css", "src/assets/css/app-light.css",
"./node_modules/@fortawesome/fontawesome-free/css/all.min.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": [ "scripts": [
"node_modules/@popperjs/core/dist/umd/popper.min.js", "node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/jquery-sparkline/jquery.sparkline.min.js", "./node_modules/jquery-sparkline/jquery.sparkline.min.js",
"./node_modules/@popperjs/core/dist/umd/popper.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"
] ]
}, },
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"@ngx-translate/http-loader": "^8.0.0", "@ngx-translate/http-loader": "^8.0.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"dhtmlx-gantt": "^8.0.10",
"dom-to-image": "^2.6.0", "dom-to-image": "^2.6.0",
"feather-icons": "^4.29.2", "feather-icons": "^4.29.2",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
...@@ -6418,6 +6419,11 @@ ...@@ -6418,6 +6419,11 @@
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
"dev": true "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": { "node_modules/di": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz", "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
......
...@@ -22,8 +22,12 @@ ...@@ -22,8 +22,12 @@
<div class="col"> <div class="col">
<div class="file-action d-flex justify-content-around"> <div class="file-action d-flex justify-content-around">
<a type="button" [routerLink]="['/projects/detail',project.id]" class="btn btn-primary m-1">لوحة التحكم</a> <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> <a type="button" [routerLink]="['/reports/definition',project.id]" class="btn btn-primary m-1">بطاقة المشروع</a>
<!-- [routerLink]="['/projects/detail',project.id]" -->
</div> </div>
</div> </div>
</div> </div>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<hr> <hr>
<div *ngIf="projects"> <div *ngIf="projects">
<div class="row" *ngIf="projects.length > 0"> <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>
<div class="row" *ngIf="projects.length == 0"> <div class="row" *ngIf="projects.length == 0">
لا يوجد أي مشروع لا يوجد أي مشروع
......
#gantt_here {
width: 100%;
height: 600px; /* Adjust height as needed */
}
\ No newline at end of file
<div id="gantt_here" style="width: 100%; height: 100%;"></div>
\ No newline at end of file
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: []
};
}
}
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<button type="button" (click)="downloadAsPdf()" class="btn mr-1 btn-secondary m-1">طباعة</button> <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" 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>
</div> </div>
......
.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
<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
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({ @Component({
selector: 'project-time-line', selector: 'project-time-line',
templateUrl: './project-time-line.component.html', templateUrl: './project-time-line.component.html',
styleUrl: './project-time-line.component.css' 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');
}
} }
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { ProjectDefinitionComponent } from './pages/project-definition/project-definition.component'; import { ProjectDefinitionComponent } from './pages/project-definition/project-definition.component';
import { ProjectTimeLineComponent } from './pages/project-time-line/project-time-line.component';
const routes: Routes = [ const routes: Routes = [
{path: 'definition/:id',component:ProjectDefinitionComponent} {path: 'definition/:id',component:ProjectDefinitionComponent},
{path: 'timeline/:id',component:ProjectTimeLineComponent},
]; ];
@NgModule({ @NgModule({
......
...@@ -14,6 +14,7 @@ import { ParticipantsTableComponent } from './componenets/participants-table/par ...@@ -14,6 +14,7 @@ import { ParticipantsTableComponent } from './componenets/participants-table/par
import { ProjectFooterComponent } from './componenets/project-footer/project-footer.component'; import { ProjectFooterComponent } from './componenets/project-footer/project-footer.component';
import { StepTableComponent } from './componenets/step-table/step-table.component'; import { StepTableComponent } from './componenets/step-table/step-table.component';
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { GanttChartComponent } from './componenets/gantt-chart/gantt-chart.component';
@NgModule({ @NgModule({
...@@ -28,7 +29,8 @@ import { SharedModule } from '../shared/shared.module'; ...@@ -28,7 +29,8 @@ import { SharedModule } from '../shared/shared.module';
FinancialSpendTableComponent, FinancialSpendTableComponent,
ProjectFooterComponent, ProjectFooterComponent,
ProjectHeaderComponent, ProjectHeaderComponent,
ProjectTimeLineComponent ProjectTimeLineComponent,
GanttChartComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment