Skip to content

PSManagementUI
PSManagementUI
Commit f1f7ae3d authored by hasan khaddour's avatar hasan khaddour
Browse files
Options

change tracks strucutre

parent 0b80a28c
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 125 deletions
src/app/shared/sharedLayout/sidebar/sidebar.component.html
View file @ f1f7ae3d
......@@ -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
View file @ f1f7ae3d
<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
View file @ f1f7ae3d
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
View file @ f1f7ae3d
......@@ -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>
</div>
<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
View file @ f1f7ae3d
......@@ -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;
// let request : Gettraks
// this.trackService
// .ge
// .getTrackByProjectId(request)
// .subscribe({
}
,
error:(err)=>{
// next : (data)=>{
this.toastr.error("لقد حدث خطاء ما")
// 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 = 'حذف عنصر';
onFilter() {
throw new Error('Method not implemented.');
}
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-uncomplete/tracks-uncomplete.component.html
View file @ f1f7ae3d
<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
View file @ f1f7ae3d
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
View file @ f1f7ae3d
......@@ -18,7 +18,7 @@ import { EmployeeTrack } from '../models/responses/employeeTrack';
providedIn: 'root'
})
export class TrackService {
constructor(private http : HttpClient,private config : ConfigurationService) { }
// this method retreive the track by its id
......@@ -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
View file @ f1f7ae3d
......@@ -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}
];
......
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

HIAST - GitLab