style stpes list

angular.json

@@ -50,16 +50,19 @@
             "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/dhtmlx-gantt/codebase/dhtmlxgantt.css"
+            "./node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css",
+            "./node_modules/primeng/resources/themes/saga-blue/theme.css",  
+            "./node_modules/primeng/resources/primeng.min.css",
+            "./node_modules/primeicons/primeicons.css",
+            "./node_modules/primeflex/primeflex.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/dhtmlx-gantt/codebase/dhtmlxgantt.js"
-          
+          "./node_modules/feather-icons/dist/feather.min.js",
+          "./node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.js"
           ]
           },
           "configurations": {
@@ -88,6 +91,11 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+
+          "options": {
+            "host": "psm.hiast.edu.sy",
+            "port": 80
+          },
           "configurations": {
             "production": {
               "buildTarget": "PSManagementUI:build:production"

package.json

@@ -42,6 +42,9 @@
     "ngx-gantt": "^0.3.5",
     "ngx-pagination": "^6.0.3",
     "ngx-toastr": "^19.0.0",
+    "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.9",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/projects/components/project-controll/info-controll/info-controll.component.html

@@ -13,6 +13,7 @@
             <div class="circle circle-md bg-secondary">
               <span class="fe fe-credit-card fe-16 text-white"></span>
             </div>
+            
             <div class="flex-fill ml-4 fname">
               <strong>  المراحل</strong><br />
             </div>

src/app/projects/components/step-modals/edit-step-modal/edit-step-modal.component.html

@@ -73,7 +73,7 @@
         [disabled]="projectForm.invalid"
         class="col-5 m-4 btn btn-primary"
       >
-        إضافة
+        تعديل
       </button>
       <div class="col-5 m-4 btn btn-secondary" (click)="onClose()">إغلاق</div>
     </div>

src/app/projects/components/step-modals/edit-step-modal/edit-step-modal.component.ts

@@ -46,7 +46,7 @@ export class EditStepModalComponent {
 
       next: (data)=>{
       
-        this.activeModal.close(this.stepInfo); // Close modal and pass data
+        this.activeModal.close(this.request); // Close modal and pass data
   
       },
       error: (err )=> this.toastr.error("لقد حدث خطاء ما")

src/app/projects/pages/project-details/project-details.component.html

@@ -65,7 +65,7 @@
             
           </div>
           
-          <hr>
+          <hr            *ngIf="project.currentState.toLocaleLowerCase()=='inplan'">
 
           <plan-controll 
            *ngIf="project.currentState.toLocaleLowerCase()=='inplan'"
@@ -75,7 +75,9 @@
 
           </plan-controll>
        
-          <hr>
+          <hr
+          *ngIf="project.currentState.toLocaleLowerCase()=='inprogress'"
+          >
 
           <track-controll
           *ngIf="project.currentState.toLocaleLowerCase()=='inprogress'"

src/app/projects/pages/step-list/step-list.component.css

+.prime{
+    color: seagreen;
+}
\ No newline at end of file

src/app/projects/pages/step-list/step-list.component.html

@@ -6,12 +6,24 @@
                 <h2 class="h3 mb-0 page-title">  قائمة مراحل المشروع </h2>
                 </div>
             <div class="col-auto">
-            <button type="button" *ngIf="canSee()" (click)="openAddModal()" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مرحلة </button>
+
+                <div class="circle circle-md "
+                    [class.bg-secondary]="isToggled"
+                    [class.bg-primary]="!isToggled"
+                    
+                >
+                    <span class="fe fe-credit-card fe-16 text-white"
+                     (click)="toggle()"></span>
+                  </div>
+                  
+            <button type="button" *ngIf="canSee()" (click)="openAddModal()" class="btn m-4 btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مرحلة </button>
         </div>
    </div>
 <hr>
 
 
+<div 
+*ngIf="isToggled">
     <step-row-item 
     class=" offset-2" 
     *ngFor="let step of steps" 
@@ -21,6 +33,36 @@
     (changeWeight)="openChangeWeightModal(step)"
     (edit)="openEditModal(step)"
     ></step-row-item>
+</div>
+
+
+
+      <p-timeline *ngIf="!isToggled" [value]="steps" align="alternate" styleClass="customized-timeline">
+          <ng-template pTemplate="marker" let-event>
+              <span 
+                  class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" 
+                  [style]="{ 'background-color' :'#9C27B0' }">
+                      <i [class]="'fe fe-clipboard'"></i>
+              </span>
+          </ng-template>
+          <ng-template pTemplate="content" let-event>
+              <p-card [header]="event.stepInfo.stepName" [subheader]="(event.stepInfo.startDate | date) ??'' ">
+                
+                  <p class="">
+                    
+                    {{event.stepInfo.description}} 
+                        </p>
+                  <p>
+
+                    <strong class="mb-4">الثقل
+                        {{event.weight}}
+                    </strong>
+
+                    <p-progressBar [value]="event.currentCompletionRatio" />
+                   </p>
+              </p-card>
+          </ng-template>
+      </p-timeline>
 
     <div *ngIf="steps.length==0">
       <p class="tect-center">
@@ -35,3 +77,33 @@
     </div>
     </div>
 </section>
+
+<div class="card shadow mb-4 col-8 offset-2" *ngIf="!steps">
+    <div class="card-header py-3">
+        <div class="row align-items-center">
+          <div class="col-auto">
+          <p-skeleton shape="circle" size="4rem" styleClass="mr-2" />
+          </div>
+          <div class="col ml-n2">
+            <p-skeleton width="20%" styleClass="mb-2" />
+            <p-skeleton width="30%" styleClass="mb-2" />
+          </div>
+        </div>
+      </div>
+      <div class="card-body ">
+        <div class="row align-items-center">
+          <div class="col-8 ">
+
+                <p-skeleton width="80%" styleClass="mb-2" />
+                <p-skeleton width="50%" styleClass="mb-2" />
+                <p-skeleton width="70%" styleClass="mb-2" />
+            
+          </div>
+          <div  class="col-8 ">
+         
+                <p-skeleton width="70%" styleClass="mb-2" />  
+
+          </div>
+        </div>
+    </div>
+</div>

src/app/projects/pages/step-list/step-list.component.ts

@@ -18,6 +18,8 @@ import { Project } from '../../models/responses/project';
   styleUrl: './step-list.component.css'
 })
 export class StepListComponent {
+
+  isToggled=true
   steps : Step[]
   project : Project
   modalMode: 'edit' | 'delete' = 'edit';
@@ -99,10 +101,9 @@ export class StepListComponent {
     modalRef.componentInstance.stepInfo = step.stepInfo;
     modalRef.componentInstance.stepId = step.id;
 
-    modalRef.result.then((result) => {
+    modalRef.result.then((result : ChangeStepInfoRequest) => {
       if (result) {
         // Add the new project to the list
-        
         step.stepInfo={...result.stepInfo};
 
       }
@@ -166,5 +167,8 @@ closeModal(): void {
 canSee(){
   return this.project.currentState.toLocaleLowerCase()=='inplan'
 }
+toggle() {
+  this.isToggled=!this.isToggled
+}
   
 }

src/app/projects/projects.module.ts

 import {  NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TimelineModule } from 'primeng/timeline';
 import { ProjectItemComponent } from './components/project-item/project-item.component';
 import { ProjectListComponent } from './pages/project-list/project-list.component';
 import { ProjectDetailsComponent } from './pages/project-details/project-details.component';
@@ -13,6 +14,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { ProjectService } from './services/project.service';
+import { SkeletonModule } from 'primeng/skeleton';
 import {MatSelectModule} from '@angular/material/select';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {provideNativeDateAdapter} from '@angular/material/core';
@@ -50,7 +52,9 @@ import { FilterModalComponent } from './components/filter-modal/filter-modal.com
 import { CancelProjectComponent } from './components/cancel-project/cancel-project.component';
 import { EditFinancialModalComponent } from './components/edit-financial-modal/edit-financial-modal.component';
 import { RemoveFinancialModalComponent } from './components/remove-financial-modal/remove-financial-modal.component';
-
+import { CardModule } from 'primeng/card';
+import { ButtonModule } from 'primeng/button';
+import { ProgressBarModule } from 'primeng/progressbar';
 @NgModule({
   declarations: [
     ProjectItemComponent,
@@ -101,18 +105,23 @@ import { RemoveFinancialModalComponent } from './components/remove-financial-mod
   ],
   imports: [
     CommonModule,
+    CardModule,
+    ButtonModule,
     NgbModule,
     FormsModule,
     MatFormFieldModule,
     MatCommonModule,
+    ProgressBarModule,
     MatSelectModule,
     MatOptionModule,
     MatAutocompleteModule,
     MatDatepickerModule,
     RouterModule ,
     MatInputModule,
+    TimelineModule,
     ReactiveFormsModule ,
     SharedModule,
+    SkeletonModule,
     NgbTypeaheadModule
   ]
 })

src/app/shared/componenets/card-skeleton/card-skeleton.component.html

+<div class="card shadow mb-4 col-8 offset-2" *ngIf="!steps">
+    <div class="card-header py-3">
+        <div class="row align-items-center">
+          <div class="col-auto">
+          <p-skeleton shape="circle" size="4rem" styleClass="mr-2" />
+          </div>
+          <div class="col ml-n2">
+            <p-skeleton width="20%" styleClass="mb-2" />
+            <p-skeleton width="30%" styleClass="mb-2" />
+          </div>
+        </div>
+      </div>
+      <div class="card-body ">
+        <div class="row align-items-center">
+          <div class="col-8 ">
+
+                <p-skeleton width="80%" styleClass="mb-2" />
+                <p-skeleton width="50%" styleClass="mb-2" />
+                <p-skeleton width="70%" styleClass="mb-2" />
+            
+          </div>
+          <div  class="col-8 ">
+         
+                <p-skeleton width="70%" styleClass="mb-2" />  
+
+          </div>
+        </div>
+    </div>
+</div>

src/app/shared/componenets/card-skeleton/card-skeleton.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'card-skeleton',
+  templateUrl: './card-skeleton.component.html',
+  styleUrl: './card-skeleton.component.css'
+})
+export class CardSkeletonComponent {
+
+}

src/app/shared/shared.module.ts

@@ -11,6 +11,11 @@ import { LoadingSpinnerComponent } from './componenets/loading-spinner/loading-s
 import { FullnamePipe } from './pipes/fullName/fullname.pipe';
 import { CardItemComponent } from './componenets/card-item/card-item.component';
 import { StateTranslatePipe } from './pipes/stateTranslate/state-translate.pipe';
+import { CardSkeletonComponent } from './componenets/card-skeleton/card-skeleton.component';
+import { KnobModule } from 'primeng/knob';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { SkeletonModule } from 'primeng/skeleton';
+
 
 
 @NgModule({
@@ -24,7 +29,8 @@ import { StateTranslatePipe } from './pipes/stateTranslate/state-translate.pipe'
     LoadingSpinnerComponent,
     FullnamePipe,
     StateTranslatePipe,
-    CardItemComponent
+    CardItemComponent,
+    CardSkeletonComponent
   
   ],
   imports: [
@@ -39,6 +45,8 @@ import { StateTranslatePipe } from './pipes/stateTranslate/state-translate.pipe'
     FullnamePipe,
     StateTranslatePipe,
     CardItemComponent,
+    SkeletonModule,
+    ProgressBarModule,
     LoadingSpinnerComponent
   ],schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

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

@@ -49,7 +49,8 @@
           </div>
           
         <div class="col-auto">
-          <button type="button" [routerLink]="['/tracks/detail/',track.id]" class="btn m-2 btn-sm btn-secondary">تفاصيل المتابعة</button>
+          <button [routerLink]="['/reports/employees-tracks',track.projectId,'track',track.id]" class="btn  m-4 btn-primary col-3 offset-1">تقرير انشغالية عاملين </button>
+          <button  [routerLink]="['/reports/steps-tracks',track.projectId,'track',track.id]" class="btn m-4 btn-primary col-3 offset-1">تقرير متابعة مراحل  </button>
    
         </div>
         </div>