-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
wfprev-219 fiscal info on project detail apge (#482)
- Loading branch information
Showing
21 changed files
with
716 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
...nts/edit-project/project-details/fiscal-year-projects/fiscal-year-projects.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| <div> | ||
| <mat-expansion-panel #panel="matExpansionPanel"> | ||
| <mat-expansion-panel-header class="expansion-panel-header"> | ||
| <mat-panel-title class="project-title"> | ||
| <div class="custom-indicator"> | ||
| <img | ||
| *ngIf="!panel.expanded" | ||
| src="/assets/collapsed-indicator.svg" | ||
| alt="Collapsed Icon" | ||
| class="indicator-icon" | ||
| /> | ||
| <img | ||
| *ngIf="panel.expanded" | ||
| src="/assets/expanded-indicator.svg" | ||
| alt="Expanded Icon" | ||
| class="indicator-icon" | ||
| /> | ||
| </div> | ||
| <span>Fiscal Years</span> | ||
| </mat-panel-title> | ||
| </mat-expansion-panel-header> | ||
| <div class="fiscals-content" *ngIf="projectFiscals?.length; else emptyContent"> | ||
| <div *ngFor="let fiscal of projectFiscals" class="fiscal-item"> | ||
| <div class="fiscal-title-row"> | ||
| <span class="section-1">{{fiscal.projectFiscalName}}</span> | ||
| <span class="section-2"> Fiscal Year: | ||
| <span class="fiscal-year">{{convertFiscalYear(fiscal.fiscalYear)}}</span> | ||
| </span> | ||
| <span class="section-3"> | ||
| <img | ||
| [src]="'/assets/' + getStatusIcon(fiscal.planFiscalStatusCode)" | ||
| [alt]="getPlanFiscalStatus(fiscal.planFiscalStatusCode)" | ||
| class="status-icon" | ||
| /> | ||
| {{getPlanFiscalStatus(fiscal.planFiscalStatusCode)}} | ||
| </span> | ||
| </div> | ||
| <div class="fiscal-data" *ngIf="fiscal.planFiscalStatusCode != 'COMPLETE'; else completeFiscal"> | ||
| <span class="data-title">Planned Ha: | ||
| <span class="data-value">{{ fiscal.fiscalPlannedProjectSizeHa | number }}</span> | ||
| </span> | ||
|
|
||
| <span class="data-title">Cost Estimate: | ||
| <span class="data-value">${{ fiscal.totalCostEstimateAmount | number }}</span> | ||
| </span> | ||
|
|
||
| <span class="data-title">Last Performance Update: | ||
| <span class="data-value">{{ fiscal.lastProgressUpdateTimestamp || 'N/A'}}</span> | ||
| </span> | ||
| </div> | ||
| <ng-template #completeFiscal> | ||
| <div class="fiscal-data"> | ||
| <span class="data-title">Complete Ha: | ||
| <span class="data-value">{{ fiscal.fiscalPlannedProjectSizeHa | number }}</span> | ||
| </span> | ||
|
|
||
| <span class="data-title">Reported Spend: | ||
| <span class="data-value">${{ fiscal.fiscalReportedSpendAmount | number }}</span> | ||
| </span> | ||
|
|
||
| <span class="data-title">Actual Spend(CFS): | ||
| <span class="data-value">${{ fiscal.fiscalActualAmount | number }}</span> | ||
| </span> | ||
| <div class="complete-fiscal-last-performance-update"> | ||
| <span class="data-title">Last Performance Update: | ||
| <span class="data-value">{{ fiscal.lastProgressUpdateTimestamp || 'N/A'}}</span> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <div class="activities-content"> | ||
| <div class="title">Activities</div> | ||
|
|
||
| <!-- Show Table 1 when status is COMPLETE --> | ||
| <table mat-table [dataSource]="activities" class="activities-table" *ngIf="fiscal.planFiscalStatusCode === 'COMPLETE'"> | ||
| <ng-container matColumnDef="name"> | ||
| <th mat-header-cell *matHeaderCellDef> Name </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.name }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="description"> | ||
| <th mat-header-cell *matHeaderCellDef> Description </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.description }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="endDate"> | ||
| <th mat-header-cell *matHeaderCellDef> End Date </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.endDate | date:'yyyy-MM-dd' }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="completedHectares"> | ||
| <th mat-header-cell *matHeaderCellDef> Completed Hectares </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.completedHectares | number }} </td> | ||
| </ng-container> | ||
|
|
||
| <tr mat-header-row *matHeaderRowDef="displayedColumnsComplete"></tr> | ||
| <tr mat-row *matRowDef="let row; columns: displayedColumnsComplete;"></tr> | ||
| </table> | ||
|
|
||
| <!-- Show Table 2 when status is NOT COMPLETE --> | ||
| <table mat-table [dataSource]="activities" class="activities-table" *ngIf="fiscal.planFiscalStatusCode !== 'COMPLETE'"> | ||
| <ng-container matColumnDef="name"> | ||
| <th mat-header-cell *matHeaderCellDef> Name </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.name }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="description"> | ||
| <th mat-header-cell *matHeaderCellDef> Description </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.description }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="startDate"> | ||
| <th mat-header-cell *matHeaderCellDef> Start Date </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.startDate | date:'yyyy-MM-dd' }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="endDate"> | ||
| <th mat-header-cell *matHeaderCellDef> End Date </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.endDate | date:'yyyy-MM-dd' }} </td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="plannedHectares"> | ||
| <th mat-header-cell *matHeaderCellDef> Planned Hectares </th> | ||
| <td mat-cell *matCellDef="let activity"> {{ activity.plannedHectares | number }} </td> | ||
| </ng-container> | ||
|
|
||
| <tr mat-header-row *matHeaderRowDef="displayedColumnsPlanned"></tr> | ||
| <tr mat-row *matRowDef="let row; columns: displayedColumnsPlanned;"></tr> | ||
| </table> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| <ng-template #emptyContent> | ||
| <div class="fiscal-empty-content"> | ||
| No Fiscal Years have been added. | ||
| </div> | ||
| </ng-template> | ||
| </mat-expansion-panel> | ||
| </div> |
152 changes: 152 additions & 0 deletions
152
...nts/edit-project/project-details/fiscal-year-projects/fiscal-year-projects.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| mat-expansion-panel { | ||
| border-bottom: 1px solid #C6C8CB; | ||
| margin: 0px !important; | ||
| background-color: #FFF; | ||
|
|
||
| ::ng-deep .mat-expansion-panel-body{ | ||
| padding: 0; | ||
| } | ||
|
|
||
| .project-title { | ||
| background-color: inherit; | ||
| font-weight: bold; | ||
| display: flex; | ||
| color: #000; | ||
| font-size: 20px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| gap:10px; | ||
| } | ||
| } | ||
| .fiscals-content{ | ||
| padding: 0 10px; | ||
| border-top: 1px solid #D9D9D9; | ||
| .fiscal-item{ | ||
| padding: 10px; | ||
| border-radius: 10px; | ||
| border: 1px solid #DFE0E2; | ||
| background: #FFF; | ||
| margin: 20px 0; | ||
| } | ||
| .fiscal-title-row{ | ||
| display: flex; | ||
| .section-1 { | ||
| flex: 0 0 65%; | ||
| display: flex; | ||
| flex-shrink: 0; | ||
| color: #000; | ||
| font-size: 20px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| } | ||
| .section-2{ | ||
| flex:1; | ||
| color: #000; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| .fiscal-year{ | ||
| font-size: 16px; | ||
| font-weight: 700; | ||
| } | ||
| } | ||
| .section-3 { | ||
| gap: 3px; | ||
| color: #474543; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| flex: 1; | ||
| .status-icon{ | ||
| width: 25px; | ||
| height: 25px; | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .fiscal-data{ | ||
| padding-top: 16px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex-wrap: wrap; | ||
| .data-title{ | ||
| color: #000; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| } | ||
| .data-value{ | ||
| color: #282828; | ||
| font-size: 16px; | ||
| font-weight: 700; | ||
| } | ||
| span:nth-child(1) { | ||
| flex: 3; // 30% of the row | ||
| } | ||
|
|
||
| span:nth-child(2) { | ||
| flex: 3; // 30% of the row | ||
| } | ||
|
|
||
| span:nth-child(3) { | ||
| flex: 4; // 40% of the row | ||
| } | ||
| .complete-fiscal-last-performance-update{ | ||
| flex: 1 1 100%; | ||
| padding-top: 10px; | ||
| } | ||
| } | ||
|
|
||
| .activities-content{ | ||
| padding-top: 10px; | ||
| .title{ | ||
| color: #000; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| } | ||
| .activities-table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
|
|
||
| th, td { | ||
| padding: 8px; | ||
| border-bottom: 1px solid #ddd; | ||
| } | ||
|
|
||
| th { | ||
| color: #000; | ||
| font-size: 12px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| background-color: var(--colour-white); | ||
| } | ||
|
|
||
| tr:nth-child(odd) { | ||
| border: 1px solid #D9D9D9; | ||
| background: var(--colour-light-grey); | ||
| } | ||
|
|
||
| tr:nth-child(even) { | ||
| border: 1px solid #D9D9D9; | ||
| background-color: var(--colour-white); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .fiscal-empty-content{ | ||
| color: #242424; | ||
| font-family: var(--wf-font-family-main); | ||
| font-size: 16px; | ||
| font-style: italic; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| padding: 20px; | ||
| } |
Oops, something went wrong.