Merge pull request #144 from sancsoft/project-search-filter

Project search filter

src/angular/hq/src/app/clients/client-details.service.ts

@@ -10,7 +10,7 @@ export enum ProjectStatus {
   WaitingForClient = 3,
   WaitingForStaff = 4,
   InProduction = 5,
-  Ongoing = 6,
+  OnGoing = 6,
   Completed = 7,
   Closed = 8,
   Lost = 9,

src/angular/hq/src/app/clients/client-details/client-details-search-filter/client-details-search-filter.component.html

@@ -40,10 +40,10 @@
           Waiting For Staff
         </option>
         <option [ngValue]="clientDetailService.ProjectStatus.InProduction">
-          InProduction
+          In Production
         </option>
-        <option [ngValue]="clientDetailService.ProjectStatus.Ongoing">
-          Ongoing
+        <option [ngValue]="clientDetailService.ProjectStatus.OnGoing">
+          On Going
         </option>
         <option [ngValue]="clientDetailService.ProjectStatus.Completed">
           Completed

src/angular/hq/src/app/models/projects/get-project-v1.ts

@@ -21,7 +21,22 @@ export enum SortColumn {
   EndDate = 4,
   ChargeCode = 5,
   ClientName = 6,
-  Status = 7,
+  ProjectStatus = 7,
+  BookingPeriod = 8,
+  BookingStartDate = 9,
+  BookingEndDate = 10,
+  TotalHours = 11,
+  TotalAvailableHours = 12,
+  ThisHours = 13,
+  ThisPendingHours = 14,
+  LastHours = 15,
+  BookingHours = 16,
+  BookingAvailableHours = 17,
+  TotalPercentComplete = 18,
+  BookingPercentComplete = 19,
+  SummaryHoursTotal = 20,
+  SummaryHoursAvailable = 21,
+  SummaryPercentComplete = 22,
 }
 
 export interface GetProjectRecordV1 {
@@ -40,9 +55,19 @@ export interface GetProjectRecordV1 {
   bookingPeriod: Period;
   startDate: Date;
   endDate: Date;
-  status: ProjectStatus;
+  projectStatus: ProjectStatus;
   billingEmail: string;
   officialName: string;
+  summaryHoursTotal: number;
+  summaryHoursAvailable: number;
+  summaryPercentComplete: number;
+  bookingStartDate: Date;
+  bookingEndDate: Date;
+  totalStartDate?: Date;
+  totalEndDate?: Date;
+  totalPercentComplete?: number;
+  bookingPercentComplete?: number;
+  totalHours: number;
 }
 
 export interface GetProjectRecordsV1 {

src/angular/hq/src/app/projects/project-list-search-filter/project-list-search-filter.component.html

@@ -82,7 +82,7 @@
         <option [ngValue]="projectSearchFilterService.ProjectStatus.Lost">
           Lost
         </option>
-        <option [ngValue]="projectSearchFilterService.ProjectStatus.Ongoing">
+        <option [ngValue]="projectSearchFilterService.ProjectStatus.OnGoing">
           On going
         </option>
         <option [ngValue]="projectSearchFilterService.ProjectStatus.Unknown">

src/angular/hq/src/app/projects/project-list/project-list.component.html

@@ -89,22 +89,29 @@ <h1 class="font-rajdhani font-semibold text-3xl">Projects</h1>
       <th
         scope="col"
         class="bg-blue-900 border-steel-blue-600 border-y py-3 cursor-pointer"
-        (click)="onSortClick(sortColumn.Status)"
+        (click)="onSortClick(sortColumn.ProjectStatus)"
       >
         Status
         <hq-sort-icon
-          [column]="sortColumn.Status"
+          [column]="sortColumn.ProjectStatus"
           [activeColumn]="sortOption$ | async"
           [activeSortDirection]="sortDirection$ | async"
         />
       </th>
       <th
-        scope="col"
-        class="bg-blue-900 border-steel-blue-600 border-y py-3 w-[350px] cursor-pointer"
         colspan="2"
+        scope="col"
+        class="bg-blue-900 border-steel-blue-600 border-y py-3 cursor-pointer"
+        (click)="onSortClick(sortColumn.SummaryPercentComplete)"
       >
-        Complete
+        Complete %
+        <hq-sort-icon
+          [column]="sortColumn.SummaryPercentComplete"
+          [activeColumn]="sortOption$ | async"
+          [activeSortDirection]="sortDirection$ | async"
+        />
       </th>
+
       <th
         scope="col"
         class="bg-blue-900 border-steel-blue-600 border-y py-3 text-right pr-5"
@@ -142,13 +149,87 @@ <h1 class="text-center py-4 font-bold">No matching records found</h1>
         <td class="border-b border-black py-2">{{ project.startDate }}</td>
         <td class="border-b border-black py-2">{{ project.endDate }}</td>
         <td class="border-b border-black py-2">
-          {{ getProjectSatusString(project.status) }}
+          {{ getProjectSatusString(project.projectStatus) }}
         </td>
-        <td class="border-b border-black py-2">
-          <div class="w-[350px] bg-gray-500 border border-white h-[10px]">
-            <!-- Todo: add percentage -->
-            <div class="bg-white h-[8px]" [style.width.%]="0 * 100"></div>
-          </div>
+        <td width="200" class="border-b border-black py-2 pe-2">
+          @if (project.projectStatus === ProjectStatus.OnGoing) {
+            @if (
+              project.bookingPercentComplete &&
+              project.bookingPercentComplete > 1
+            ) {
+              <div
+                class="w-full bg-gray-450 border border-red-950 h-[10px]"
+                title="{{ project.bookingStartDate }} - {{
+                  project.bookingEndDate
+                }}"
+              >
+                <div
+                  class="bg-red-950 h-[8px]"
+                  [style.width.%]="
+                    Math.min(project.bookingPercentComplete - 1, 1) * 100
+                  "
+                ></div>
+              </div>
+            } @else {
+              <div
+                class="w-full bg-gray-500 border border-white h-[10px]"
+                title="{{ project.bookingStartDate }} - {{
+                  project.bookingEndDate
+                }}"
+              >
+                <div
+                  class="bg-white h-[8px]"
+                  [style.width.%]="(project.bookingPercentComplete ?? 0) * 100"
+                ></div>
+              </div>
+            }
+            <div class="flex justify-between gap-2 text-xs text-gray-300">
+              <span class="lowercase"
+                >{{ project.bookingHours | number: "0.2-2" }} hrs this
+                {{ getPeriodName(project.bookingPeriod) }} to date</span
+              >
+              <span>{{ project.bookingPercentComplete | percent }}</span>
+            </div>
+          }
+          @if (project.projectStatus === ProjectStatus.InProduction) {
+            @if (
+              project.totalPercentComplete && project.totalPercentComplete > 1
+            ) {
+              <div
+                class="w-full bg-gray-450 border border-red-950 h-[10px]"
+                title="{{ project.totalStartDate ?? '-' }} - {{
+                  project.totalEndDate ?? '-'
+                }}"
+              >
+                <div
+                  class="bg-red-950 h-[8px]"
+                  [style.width.%]="
+                    Math.min(project.totalPercentComplete - 1, 1) * 100
+                  "
+                ></div>
+              </div>
+            } @else {
+              <div
+                class="w-full bg-gray-500 border border-white h-[10px]"
+                title="{{ project.totalStartDate ?? '-' }} - {{
+                  project.totalEndDate ?? '-'
+                }}"
+              >
+                <div
+                  class="bg-white h-[8px]"
+                  [style.width.%]="(project.totalPercentComplete ?? 0) * 100"
+                ></div>
+              </div>
+            }
+            <div class="flex justify-between gap-2 text-xs text-gray-300">
+              <span>{{ project.totalHours | number: "0.2-2" }} hrs total</span>
+              <span>{{
+                project.totalPercentComplete !== null
+                  ? (project.totalPercentComplete | percent)
+                  : "-"
+              }}</span>
+            </div>
+          }
         </td>
         <td></td>
         <td class="border-b border-black py-2 text-right pr-5">

src/angular/hq/src/app/projects/project-list/project-list.component.ts

@@ -26,6 +26,7 @@ import { HQRole } from '../../enums/hqrole';
 import { InRolePipe } from '../../pipes/in-role.pipe';
 import { ProjectListSearchFilterComponent } from '../project-list-search-filter/project-list-search-filter.component';
 import { ProjectSearchFilterService } from '../services/ProjectSearchFilterService';
+import { Period } from '../../models/times/get-time-v1';
 
 @Component({
   selector: 'hq-project-list',
@@ -55,6 +56,8 @@ export class ProjectListComponent {
   sortColumn = SortColumn;
   sortDirection = SortDirection;
   HQRole = HQRole;
+  ProjectStatus = ProjectStatus;
+  Math = Math;
 
   constructor(
     private hqService: HQService,
@@ -149,6 +152,19 @@ export class ProjectListComponent {
     this.projectSearchFilterService.page.setValue(1);
   }
   getProjectSatusString(status: ProjectStatus): string {
-    return ProjectStatus[status];
+    return this.camelToFlat(ProjectStatus[status]);
+  }
+  camelToFlat = (camel: string) => {
+    const camelCase = camel.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
+
+    let flat = '';
+
+    camelCase.forEach((word) => {
+      flat = flat + word.charAt(0).toUpperCase() + word.slice(1) + ' ';
+    });
+    return flat;
+  };
+  getPeriodName(period: Period) {
+    return Period[period];
   }
 }

src/angular/hq/src/app/psr/psrlist/psrlist.component.html

@@ -201,7 +201,7 @@ <h1 class="text-center py-4 font-bold">No matching records found</h1>
           {{ getProjectSatusString(report.status) }}
         </td>
         <td width="200" class="border-b border-black py-2 pe-2">
-          @if (report.status === ProjectStatus.Ongoing) {
+          @if (report.status === ProjectStatus.OnGoing) {
             @if (
               report.bookingPercentComplete && report.bookingPercentComplete > 1
             ) {

src/dotnet/HQ.Abstractions/Projects/GetProjectsV1.cs

@@ -3,6 +3,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
+using System.Text.Json.Serialization;
 using System.Threading.Tasks;
 
 using HQ.Abstractions.Common;
@@ -31,7 +32,22 @@ public enum SortColumn
         EndDate = 4,
         ChargeCode = 5,
         ClientName = 6,
-        Status = 7
+        Status = 7,
+        BookingPeriod = 8,
+        BookingStartDate = 9,
+        BookingEndDate = 10,
+        TotalHours = 11,
+        TotalAvailableHours = 12,
+        ThisHours = 13,
+        ThisPendingHours = 14,
+        LastHours = 15,
+        BookingHours = 16,
+        BookingAvailableHours = 17,
+        TotalPercentComplete = 18,
+        BookingPercentComplete = 19,
+        SummaryHoursTotal = 20,
+        SummaryHoursAvailable = 21,
+        SummaryPercentComplete = 22,
     }
 
     public class Response : PagedResponseV1<Record>;
@@ -57,5 +73,41 @@ public class Record
         public string? BillingEmail { get; set; }
         public string? OfficialName { get; set; }
         public ProjectStatus? ProjectStatus { get; set; }
+
+        /// <summary>
+        /// Total hours across all time.
+        /// </summary>
+        public decimal TotalHours { get; set; }
+        /// <summary>
+        /// Total hours available across all time.
+        /// </summary>
+        public decimal? TotalAvailableHours { get; set; }
+        /// <summary>
+        /// Total hours from last week.
+        /// </summary>
+        public decimal ThisHours { get; set; }
+        /// <summary>
+        /// Hours not accepted during this period.
+        /// </summary>
+        public decimal ThisPendingHours { get; set; }
+        /// <summary>
+        /// Booking hours from project period.
+        /// </summary>
+        public DateOnly? BookingStartDate { get; set; }
+        /// <summary>
+        /// Booking available hours from project period.
+        /// </summary>
+        public decimal BookingAvailableHours { get; set; }
+        public DateOnly? BookingEndDate { get; set; }
+        public decimal? TotalPercentComplete { get; set; }
+        [JsonIgnore]
+        public decimal? TotalPercentCompleteSort { get; set; }
+        public decimal BookingPercentComplete { get; set; }
+        public DateOnly? TotalStartDate { get; set; }
+        public DateOnly? TotalEndDate { get; set; }
+        public decimal? SummaryHoursTotal { get; set; }
+        public decimal? SummaryHoursAvailable { get; set; }
+        public decimal? SummaryPercentComplete { get; set; }
+        public decimal? SummaryPercentCompleteSort { get; set; }
     }
 }