Commit f1f7ae3d authored by hasan khaddour's avatar hasan khaddour

change tracks strucutre

parent 0b80a28c
...@@ -11,18 +11,13 @@ ...@@ -11,18 +11,13 @@
<li class="nav-heading">المتابعة</li> <li class="nav-heading">المتابعة</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#"> <a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" >
<i class="fe fe-menu"></i><span>إدارة المتابعة</span><i class="bi bi-chevron-down ms-auto"></i> <i class="fe fe-menu"></i><span>إدارة المتابعة</span><i class="bi bi-chevron-down ms-auto"></i>
</a> </a>
<ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav"> <ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<li> <li>
<a href="components-alerts.html"> <a [routerLink]="['/tracks/uncompleted']">
<i class="fe fe-circle"></i><span>متابعة مشروع</span> <i class="fe fe-circle"></i><span>المتابعات غير المكتملة</span>
</a>
</li>
<li>
<a href="components-alerts.html">
<i class="fe fe-circle"></i><span>اتمام عملية متابعة</span>
</a> </a>
</li> </li>
...@@ -31,10 +26,11 @@ ...@@ -31,10 +26,11 @@
</li><!-- End Components Nav --> </li><!-- End Components Nav -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link collapsed " href="components-alerts.html"> <a class="nav-link collapsed " [routerLink]="['/tracks']">
<i class="fe fe-flag"></i><span> عمليات المتابعة</span> <i class="fe fe-flag"></i><span> عمليات المتابعة</span>
</a> </a>
</li> </li>
<li class="nav-heading">أنواع المشاريع</li> <li class="nav-heading">أنواع المشاريع</li>
<li class="nav-item"> <li class="nav-item">
<a [routerLink]="['/types']" class="nav-link collapsed "> <a [routerLink]="['/types']" class="nav-link collapsed ">
......
<p>project-track-history works!</p> <section *ngIf="tracks" class="row">
<div class="row justify-content-center">
<div class="col-12">
<div class="row align-items-center my-4">
<div class="col">
<h2 class="h3 mb-0 page-title"> قائمة عمليات المتابعة </h2>
</div>
<div class="col-auto">
<button type="button" (click)="openAddModal()" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة متابعة </button>
</div>
</div>
<hr>
<track-item class=" offset-2"
*ngFor="let track of tracks"
[track]="track"
(delete)="openModal('delete', track)"
></track-item>
<div *ngIf="tracks.length==0">
للأسف هذا المروع لايحوي على أية مراحل
</div>
</div>
</div>
</section>
<div class="modal fade" id="trackModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="modal-title" id="modalLabel">{{ modalTitle }}</h5>
</div>
<div class="modal-body">
<!-- Delete Confirmation -->
<div *ngIf="modalMode === 'delete'">
<p>هل أنت متأكد من أنك تريد حذف متابعة {{ selectedItem.projectInfo.name }} التي حدثت بتاريخ {{selectedItem.trackInfo.trackDate | date}}?</p>
<button type="button" class="btn m-4 btn-danger" (click)="deleteTrack()">Delete</button>
<button type="button" class="btn m-4 btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Modal } from 'bootstrap';
import { ToastrService } from 'ngx-toastr';
import { AddTrackModalComponent } from '../../components/modals/add-track-modal/add-track-modal.component';
import { GetTracksByProjectRequest } from '../../models/requests/GetTracksByProjectRequest';
import { RemoveTrackRequest } from '../../models/requests/RemoveTrackRequest';
import { Track } from '../../models/responses/track';
import { TrackService } from '../../services/track.service';
@Component({ @Component({
selector: 'project-track-history', selector: 'project-track-history',
...@@ -7,4 +16,121 @@ import { Component } from '@angular/core'; ...@@ -7,4 +16,121 @@ import { Component } from '@angular/core';
}) })
export class ProjectTrackHistoryComponent { export class ProjectTrackHistoryComponent {
projectId : number
tracks : Track[]
selectedItem : Track
modalMode: 'edit' | 'delete' = 'edit';
modalTitle: string = '';
constructor(
private route :ActivatedRoute ,
private router :Router,
private trackService : TrackService,
private toastr : ToastrService,
private modalService : NgbModal
){
}
ngOnInit(): void {
this.projectId=Number(this.route.snapshot.paramMap.get('id'));
this.loadTracks();
}
loadTracks(){
let request : GetTracksByProjectRequest = {
projectId: this.projectId ,
pageNumber:null,
pageSize:null
}
this.trackService
.getTrackByProjectId(request)
.subscribe({
next : (data)=>{
this.toastr.success("تم تحميل عمليات المتابعة بنجاح");
this.tracks= data;
}
,
error:(err)=>{
this.toastr.error("لقد حدث خطاء ما")
}
});
}
openAddModal(): void {
const modalRef = this.modalService.open(AddTrackModalComponent);
modalRef.componentInstance.projectId = this.projectId;
modalRef.result.then((result) => {
if (result) {
this.tracks.push(result);
this.toastr.success("تمت الإضافة بنجاح")
}
}, (reason) => {
});
}
openModal(mode: 'edit' | 'delete', item: Track): void {
this.modalMode = mode;
this.selectedItem = { ...item }; // Clone project to prevent direct mutation
console.log(this.selectedItem)
if (mode === 'edit') {
this.modalTitle = 'تعديل عنصر ';
} else if (mode === 'delete') {
this.modalTitle = 'حذف عنصر';
}
const modalElement = document.getElementById('trackModal');
if (modalElement) {
new Modal(modalElement).show(); // Open the modal
}
}
deleteTrack(): void {
let request : RemoveTrackRequest= {
trackId: this.projectId ,
}
this.trackService.removeTrack(request).subscribe({
next :()=>{
this.tracks = this.tracks.filter(p => p.id !== this.selectedItem.id);
this.toastr.success("تم الحذف بنجاح")
this.closeModal();
}
,
error:(err)=>{
this.toastr.error("لقد حدث خطاء ما ")
this.closeModal();
}
}
);
}
closeModal(): void {
const modalElement = document.getElementById('trackModal');
if (modalElement) {
new Modal(modalElement).hide(); // Close the modal
}
}
} }
...@@ -6,18 +6,19 @@ ...@@ -6,18 +6,19 @@
<h2 class="h3 mb-0 page-title"> قائمة عمليات المتابعة </h2> <h2 class="h3 mb-0 page-title"> قائمة عمليات المتابعة </h2>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button type="button" (click)="openAddModal()" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة متابعة </button> <input type="date" [(ngModel)]="month" placeholder="اختر شهر" />
<button class="btn btn-primary" (click)="onFilter()">حسب الشهر </button>
</div> </div>
</div> </div>
<hr> <hr>
<track-item class=" offset-2" <!-- <track-item class=" offset-2"
*ngFor="let track of tracks" *ngFor="let track of tracks"
[track]="track" [track]="track"
(delete)="openModal('delete', track)" (delete)="openModal('delete', track)"
></track-item> ></track-item> -->
<div *ngIf="tracks.length==0"> <div *ngIf="tracks.length==0">
للأسف هذا المروع لايحوي على أية مراحل للأسف هذا المروع لايحوي على أية مراحل
...@@ -26,23 +27,3 @@ ...@@ -26,23 +27,3 @@
</div> </div>
</section> </section>
<div class="modal fade" id="trackModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="modal-title" id="modalLabel">{{ modalTitle }}</h5>
</div>
<div class="modal-body">
<!-- Delete Confirmation -->
<div *ngIf="modalMode === 'delete'">
<p>هل أنت متأكد من أنك تريد حذف متابعة {{ selectedItem.projectInfo.name }} التي حدثت بتاريخ {{selectedItem.trackInfo.trackDate | date}}?</p>
<button type="button" class="btn m-4 btn-danger" (click)="deleteTrack()">Delete</button>
<button type="button" class="btn m-4 btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
...@@ -15,12 +15,9 @@ import { RemoveTrackRequest } from '../../models/requests/RemoveTrackRequest'; ...@@ -15,12 +15,9 @@ import { RemoveTrackRequest } from '../../models/requests/RemoveTrackRequest';
styleUrl: './tracks-list.component.css' styleUrl: './tracks-list.component.css'
}) })
export class TracksListComponent implements OnInit{ export class TracksListComponent implements OnInit{
month: Date;
projectId : number
tracks : Track[] tracks : Track[]
selectedItem : Track
modalMode: 'edit' | 'delete' = 'edit';
modalTitle: string = '';
constructor( constructor(
...@@ -35,102 +32,37 @@ export class TracksListComponent implements OnInit{ ...@@ -35,102 +32,37 @@ export class TracksListComponent implements OnInit{
} }
ngOnInit(): void { ngOnInit(): void {
this.projectId=Number(this.route.snapshot.paramMap.get('id'));
this.loadTracks(); this.loadTracks();
} }
loadTracks(){ loadTracks(){
let request : GetTracksByProjectRequest = { // let request : Gettraks
projectId: this.projectId , // this.trackService
pageNumber:null, // .ge
pageSize:null // .getTrackByProjectId(request)
} // .subscribe({
this.trackService
.getTrackByProjectId(request)
.subscribe({
next : (data)=>{
this.toastr.success("تم تحميل عمليات المتابعة بنجاح");
this.tracks= data;
}
,
error:(err)=>{
this.toastr.error("لقد حدث خطاء ما")
} // next : (data)=>{
}); // this.toastr.success("تم تحميل عمليات المتابعة بنجاح");
// this.tracks= data;
// }
// ,
// error:(err)=>{
} // this.toastr.error("لقد حدث خطاء ما")
openAddModal(): void { // }
const modalRef = this.modalService.open(AddTrackModalComponent);
modalRef.componentInstance.projectId = this.projectId;
modalRef.result.then((result) => { // });
if (result) {
this.tracks.push(result);
this.toastr.success("تمت الإضافة بنجاح")
}
}, (reason) => {
});
}
openModal(mode: 'edit' | 'delete', item: Track): void {
this.modalMode = mode;
this.selectedItem = { ...item }; // Clone project to prevent direct mutation
console.log(this.selectedItem)
if (mode === 'edit') {
this.modalTitle = 'تعديل عنصر ';
} else if (mode === 'delete') {
this.modalTitle = 'حذف عنصر';
}
const modalElement = document.getElementById('trackModal');
if (modalElement) {
new Modal(modalElement).show(); // Open the modal
}
}
deleteTrack(): void {
let request : RemoveTrackRequest= {
trackId: this.projectId ,
}
this.trackService.removeTrack(request).subscribe({
next :()=>{
this.tracks = this.tracks.filter(p => p.id !== this.selectedItem.id);
this.toastr.success("تم الحذف بنجاح")
this.closeModal();
}
,
error:(err)=>{
this.toastr.error("لقد حدث خطاء ما ")
this.closeModal();
}
}
);
}
closeModal(): void {
const modalElement = document.getElementById('trackModal');
if (modalElement) {
new Modal(modalElement).hide(); // Close the modal
} }
onFilter() {
throw new Error('Method not implemented.');
} }
} }
<p>tracks-uncomplete works!</p> <section *ngIf="tracks" class="row">
<div class="row justify-content-center">
<div class="col-12">
<div class="row align-items-center my-4">
<div class="col">
<h2 class="h3 mb-0 page-title">قائمة عمليات المتابعة غير المكتملة</h2>
</div>
<div class="col-auto"></div>
</div>
<hr />
<div class="card shadow mb-4 col-8 offset-2" *ngFor="let track of tracks">
<div class="card-header py-3">
<div class="row align-items-center">
<div class="col-auto">
<a href="profile-posts.html" class="avatar avatar-md">
<img
src="./assets/images/users/4.jpg"
alt="..."
class="avatar-img rounded-circle"
/>
</a>
</div>
<div class="col ml-n2">
<strong class="mb-1">متابعة {{ track.projectInfo.name }}</strong
><span class="ml-1"></span>
<p class="small text-muted mb-1">
الوضع الراهن {{ track.trackInfo.statusDescription }}
</p>
</div>
<div class="col-auto"></div>
</div>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<div class="small mb-2 d-flex">
<span class="text-muted flex-fill"
>الملاحظات {{ track.notes }}</span
>
<span class="text-muted"
>تاريخ المتابعة {{ track.trackInfo.trackDate | date }}</span
>
</div>
</div>
<div class="col-8">
<div class="small mb-2 d-flex">
<span class="text-muted badge flex-fill"
>{{ track.trackInfo.isCompleted ? "مكتملة" : "غير مكتملة" }}
</span>
</div>
<div class="col-auto">
<button
type="button"
[routerLink]="['/tracks/detail/', track.id]"
class="btn m-2 btn-sm btn-secondary"
>
تفاصيل المتابعة
</button>
</div>
</div>
</div>
</div>
<!-- / .card-body -->
</div>
<div *ngIf="tracks.length == 0">لا يوجد أي عمليات متابعة غير مكتملة</div>
</div>
</div>
</section>
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { TrackService } from '../../services/track.service';
import { Track } from '../../models/responses/track';
import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'tracks-uncomplete', selector: 'tracks-uncomplete',
templateUrl: './tracks-uncomplete.component.html', templateUrl: './tracks-uncomplete.component.html',
styleUrl: './tracks-uncomplete.component.css' styleUrl: './tracks-uncomplete.component.css'
}) })
export class TracksUncompleteComponent { export class TracksUncompleteComponent implements OnInit {
projectId : number
tracks : Track[]
constructor(
private route : ActivatedRoute,
private toastrService : ToastrService ,
private trackService : TrackService
){}
ngOnInit(): void {
this.projectId= Number(this.route.snapshot.paramMap.get('id'))
this.loadUncompletedTracks();
}
loadUncompletedTracks() {
this
.trackService
.getUnCompletedTrack()
}
} }
...@@ -31,6 +31,17 @@ export class TrackService { ...@@ -31,6 +31,17 @@ export class TrackService {
); );
} }
getUnCompletedTrack() : Observable<Track[]> {
return this
.http
.get<Track[]>
(`${this.config.getServerUrl()}/UnCompleted`);
}
// this method retreive the steps track by track id // this method retreive the steps track by track id
// //
public getStepsTrackById(trackId : number ):Observable<StepTrack[]>{ public getStepsTrackById(trackId : number ):Observable<StepTrack[]>{
......
...@@ -4,13 +4,17 @@ import { TracksListComponent } from './pages/tracks-list/tracks-list.component'; ...@@ -4,13 +4,17 @@ import { TracksListComponent } from './pages/tracks-list/tracks-list.component';
import { TrackDetailsComponent } from './pages/track-details/track-details.component'; import { TrackDetailsComponent } from './pages/track-details/track-details.component';
import { StepTrackHistoryComponent } from './pages/step-track-history/step-track-history.component'; import { StepTrackHistoryComponent } from './pages/step-track-history/step-track-history.component';
import { EmployeeTrackHistoryComponent } from './pages/employee-track-history/employee-track-history.component'; import { EmployeeTrackHistoryComponent } from './pages/employee-track-history/employee-track-history.component';
import { TracksUncompleteComponent } from './pages/tracks-uncomplete/tracks-uncomplete.component';
import { ProjectTrackHistoryComponent } from './pages/project-track-history/project-track-history.component';
const routes: Routes = [ const routes: Routes = [
{path:'project/:id',component:TracksListComponent}, {path:'project/:id',component:ProjectTrackHistoryComponent},
{path:'detail/:id',component:TrackDetailsComponent}, {path:'detail/:id',component:TrackDetailsComponent},
{path:'history/step/:id',component:StepTrackHistoryComponent} , {path:'history/step/:id',component:StepTrackHistoryComponent} ,
{path:'project/:projectId/employee/:employeeId',component:EmployeeTrackHistoryComponent} {path:'project/:projectId/employee/:employeeId',component:EmployeeTrackHistoryComponent},
{path:'uncompleted/',component:TracksUncompleteComponent} ,
{path:'',component:TracksListComponent}
]; ];
......
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