change tracks strucutre

src/app/shared/sharedLayout/sidebar/sidebar.component.html

@@ -11,18 +11,13 @@
       <li class="nav-heading">المتابعة</li>
 
       <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>
         </a>
         <ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
           <li>
-            <a href="components-alerts.html">
-              <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 [routerLink]="['/tracks/uncompleted']">
+              <i class="fe fe-circle"></i><span>المتابعات غير المكتملة</span>
             </a>
 
           </li>
@@ -31,10 +26,11 @@
 
       </li><!-- End Components Nav -->
       <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>
         </a>
       </li>
+
       <li class="nav-heading">أنواع المشاريع</li>
       <li class="nav-item">
         <a  [routerLink]="['/types']" class="nav-link collapsed ">

src/app/tracks/pages/project-track-history/project-track-history.component.html

-<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

src/app/tracks/pages/project-track-history/project-track-history.component.ts

 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({
   selector: 'project-track-history',
@@ -7,4 +16,121 @@ import { Component } from '@angular/core';
 })
 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
+    }
+  }
+
 }

src/app/tracks/pages/tracks-list/tracks-list.component.html

@@ -6,18 +6,19 @@
                 <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>
+              <input  type="date" [(ngModel)]="month" placeholder="اختر شهر" /> 
+              <button class="btn btn-primary" (click)="onFilter()">حسب الشهر </button>
            </div>
    </div>
 <hr>
 
 
-    <track-item class=" offset-2" 
+    <!-- <track-item class=" offset-2" 
       *ngFor="let track of tracks" 
       [track]="track"
       (delete)="openModal('delete', track)"
       
-    ></track-item>
+    ></track-item> -->
 
     <div *ngIf="tracks.length==0">
         للأسف هذا المروع لايحوي على أية مراحل
@@ -26,23 +27,3 @@
     </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

src/app/tracks/pages/tracks-list/tracks-list.component.ts

@@ -15,12 +15,9 @@ import { RemoveTrackRequest } from '../../models/requests/RemoveTrackRequest';
   styleUrl: './tracks-list.component.css'
 })
 export class TracksListComponent implements OnInit{
+  month: Date;
 
-  projectId : number 
   tracks : Track[]
-  selectedItem : Track
-  modalMode: 'edit' | 'delete' = 'edit';
-  modalTitle: string = '';
 
 
   constructor(
@@ -35,102 +32,37 @@ export class TracksListComponent implements OnInit{
   }
 
   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("لقد حدث خطاء ما")
+    // let request : Gettraks
+    // this.trackService
+    // .ge
+    // .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
   }
+  onFilter() {
+    throw new Error('Method not implemented.');
     }
 
 }

src/app/tracks/pages/tracks-uncomplete/tracks-uncomplete.component.html

-<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>

src/app/tracks/pages/tracks-uncomplete/tracks-uncomplete.component.ts

-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({
   selector: 'tracks-uncomplete',
   templateUrl: './tracks-uncomplete.component.html',
   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()
+  }
 }

src/app/tracks/services/track.service.ts

@@ -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  
   //
   public getStepsTrackById(trackId : number ):Observable<StepTrack[]>{

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

@@ -4,13 +4,17 @@ import { TracksListComponent } from './pages/tracks-list/tracks-list.component';
 import { TrackDetailsComponent } from './pages/track-details/track-details.component';
 import { StepTrackHistoryComponent } from './pages/step-track-history/step-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 = [
 
-  {path:'project/:id',component:TracksListComponent},
+  {path:'project/:id',component:ProjectTrackHistoryComponent},
   {path:'detail/:id',component:TrackDetailsComponent},
   {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} 
 
 
 ];