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

add time line

parent badb52e4
......@@ -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"
]
},
......
......@@ -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",
......
......@@ -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>
......
......@@ -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">
لا يوجد أي مشروع
......
#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 @@
<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>
......
.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({
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');
}
}
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({
......
......@@ -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,
......
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