+
+
+
+
\ No newline at end of file
diff --git a/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.scss b/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.scss
new file mode 100644
index 000000000..df04c8782
--- /dev/null
+++ b/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.scss
@@ -0,0 +1,258 @@
+.details-container {
+ margin: 19px;
+ border-radius: 6px;
+ border: 1px solid #C6C8CB;
+
+ .form-grid {
+ padding: 18px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: space-between;
+
+
+ .form-item {
+ flex: 1 1 calc(20% - 20px); // 5 items per row with a 20px gap
+ min-width: 200px;
+
+ label {
+ padding: 9px;
+ color: #282828;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ }
+
+ input,
+ select{
+ color: #282828;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 700;
+ width: 100%;
+ margin: 8px;
+ font-size: 14px;
+ border: none;
+ border-bottom: 1px solid #282828;
+ outline: none;
+ }
+
+ select{
+ -webkit-appearance: none;
+ background-image: url('/assets/dropdown-icon.svg');
+ background-repeat: no-repeat;
+ background-position: right 10px center;
+ background-size: 12px;
+ }
+ textarea {
+ width: 100%;
+ margin: 8px;
+ font-size: 14px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ }
+
+ textarea {
+ resize: vertical;
+ min-height: 80px;
+ }
+ }
+
+ .full-width {
+ flex: 1 1 100%; // Span the entire row
+ }
+
+ .form-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: flex-end;
+
+ button {
+ padding: 10px 20px;
+ font-size: 16px;
+ }
+ }
+
+ .secondary-rational{
+ flex: 1 1 40%; // Set the width to 50% of the row
+ }
+ }
+ }
+
+ @media (max-width: 1024px) {
+ .form-grid {
+ .form-item {
+ flex: 1 1 calc(33.33% - 20px); // 3 items per row on medium screens
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ .form-grid {
+ .form-item {
+ flex: 1 1 calc(50% - 20px); // 2 items per row on small screens
+ }
+ }
+ }
+
+ @media (max-width: 480px) {
+ .form-grid {
+ .form-item {
+ flex: 1 1 100%; // 1 item per row on very small screens
+ }
+ }
+ }
+
+ .footer{
+ border: 1px solid #C7C7C7;
+ background: #F2F2F2;
+ width: 100vw;
+ margin: -18px;
+ }
+
+ .button-row{
+ display: flex;
+ height: 43px;
+ padding: 14px 17px 14px 23px;
+ justify-content: flex-end;
+ align-items: flex-start;
+ gap: 14px;
+ button {
+ padding: 12px 32px;
+ border: none;
+ border-radius: 4px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+
+ button.primary {
+ background-color: var(--wf-primary-color);
+ color: #fff;
+ }
+
+ button.primary:disabled {
+ background-color: #c0c0c0;
+ cursor: not-allowed;
+ }
+
+ button.secondary {
+ border-radius: 4px;
+ border: 1px solid #234075;
+ background: #FFF;
+ color: #234075;
+ font-family: var(--wf-font-family-main);
+ font-style: normal;
+ }
+
+ button.secondary:hover {
+ background-color: #f1f1f1;
+ }
+ }
+
+ .description-map-section{
+ display: flex;
+ width: 100%;
+ height: auto;
+ gap: 19px;
+ }
+
+ .project-description-container{
+ flex:1;
+ padding-left: 19px;
+ background-color: var(--colour-white);
+ 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;
+ }
+ }
+
+ .project-description{
+ .editable-description{
+ padding:0 16px;
+ width: 100%;
+ font-size: 16px;
+ font-weight: 400;
+ border: none;
+ color: #242424;
+ }
+ }
+
+ .project-description-footer{
+ border: 1px solid #C7C7C7;
+ background: #F2F2F2;
+ }
+ }
+
+ .map-section{
+ padding-right: 19px;
+ flex: 1;
+ height: 600px; /* Fixed height for the map */
+ position: relative; /* Ensure positioning context for the map */
+ #map {
+ height: 100%;
+ }
+ }
+
+ .latlong-section {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ padding: 10px;
+ border-top: 1px solid #ccc;
+
+ form {
+ display: flex;
+ flex-direction: column; /* Stack label and input/button container */
+ align-items: flex-end;
+ gap: 5px;
+
+ label {
+ font-weight: bold;
+ margin-bottom: 5px; /* Add space below the label */
+ text-align: right; /* Align label text to the right */
+ }
+
+ .input-group {
+ display: flex; /* Align input and button side by side */
+ align-items: center; /* Vertically center-align the button */
+ gap: 10px; /* Add space between the input and button */
+
+ input {
+ padding: 5px;
+ font-size: 14px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ width: 300px; /* Adjust input width */
+ }
+
+ .save-button {
+ padding: 8px 18px;
+ background: #E9E9E9;
+ color: black;
+ border: 1px solid #B1B1B1;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 15px;
+ font-weight: 700;
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.spec.ts b/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.spec.ts
new file mode 100644
index 000000000..1df8a848f
--- /dev/null
+++ b/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.spec.ts
@@ -0,0 +1,97 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ProjectDetailsComponent } from './project-details.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as L from 'leaflet';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ProjectDetailsComponent', () => {
+ let component: ProjectDetailsComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+ 
+ 
+
+ Project Description
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
Details
-
+
Edit
diff --git a/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.spec.ts b/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.spec.ts
index 1717e40dc..c7c4af6aa 100644
--- a/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.spec.ts
+++ b/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.spec.ts
@@ -5,6 +5,7 @@ import { DebugElement } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { ActivatedRoute } from '@angular/router';
describe('ProjectsListComponent', () => {
let component: ProjectsListComponent;
@@ -14,6 +15,9 @@ describe('ProjectsListComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ProjectsListComponent, BrowserAnimationsModule, MatExpansionModule, MatSlideToggleModule], // Using standalone component
+ providers: [
+ { provide: ActivatedRoute, useValue: ActivatedRoute }, // Provide mock for ActivatedRoute
+ ],
}).compileComponents();
fixture = TestBed.createComponent(ProjectsListComponent);
diff --git a/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.ts b/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.ts
index 8aadc379a..259597d98 100644
--- a/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.ts
+++ b/client/wfprev-war/src/main/angular/src/app/components/list-panel/projects-list/projects-list.component.ts
@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatExpansionModule } from '@angular/material/expansion';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ResourcesRoutes } from 'src/app/utils';
@Component({
selector: 'app-projects-list',
@@ -11,6 +13,13 @@ import { MatExpansionModule } from '@angular/material/expansion';
styleUrls: ['./projects-list.component.scss'], // Corrected to 'styleUrls'
})
export class ProjectsListComponent {
+
+ constructor(
+ private router: Router,
+ private route: ActivatedRoute
+ ) {
+ }
+
sortOptions = [
{ label: 'Name (A-Z)', value: 'ascending' },
{ label: 'Name (Z-A)', value: 'descending' },
@@ -115,7 +124,7 @@ export class ProjectsListComponent {
},
];
- fiscalYearActivityTypes = ['Clearning','Burning','Pruning']
+ fiscalYearActivityTypes = ['Clearing','Burning','Pruning']
onSortChange(event:any): void {
@@ -127,5 +136,11 @@ export class ProjectsListComponent {
this.syncWithMap = event.checked;
console.log('Sync with map:', this.syncWithMap ? 'On' : 'Off');
}
+
+ editProject(project: any) {
+ this.router.navigate([ResourcesRoutes.EDIT_PROJECT], {
+ queryParams: { projectNumber: project.projectNumber, name: project.projectName}
+ });
+ }
}
diff --git a/client/wfprev-war/src/main/angular/src/app/components/map/map.component.spec.ts b/client/wfprev-war/src/main/angular/src/app/components/map/map.component.spec.ts
index 48377d6ea..b8cdc28b7 100644
--- a/client/wfprev-war/src/main/angular/src/app/components/map/map.component.spec.ts
+++ b/client/wfprev-war/src/main/angular/src/app/components/map/map.component.spec.ts
@@ -3,12 +3,20 @@ import { MapComponent } from './map.component';
import { By } from '@angular/platform-browser';
import * as L from 'leaflet';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
describe('MapComponent', () => {
let component: MapComponent;
let fixture: ComponentFixture;
let mapMock: Partial;
+ const mockActivatedRoute = {
+ queryParamMap: of({
+ get: (key: string) => null, // Mock behavior for query parameters
+ }),
+ };
+
beforeEach(async () => {
mapMock = {
fitBounds: jasmine.createSpy('fitBounds'),
@@ -19,7 +27,8 @@ describe('MapComponent', () => {
spyOn(L, 'map').and.returnValue(mapMock as L.Map);
await TestBed.configureTestingModule({
- imports: [MapComponent, BrowserAnimationsModule]
+ imports: [MapComponent, BrowserAnimationsModule],
+ providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }]
}).compileComponents();
fixture = TestBed.createComponent(MapComponent);
diff --git a/client/wfprev-war/src/main/angular/src/app/components/resizable-panel/resizable-panel.component.spec.ts b/client/wfprev-war/src/main/angular/src/app/components/resizable-panel/resizable-panel.component.spec.ts
index 44aebb789..89dcd77f0 100644
--- a/client/wfprev-war/src/main/angular/src/app/components/resizable-panel/resizable-panel.component.spec.ts
+++ b/client/wfprev-war/src/main/angular/src/app/components/resizable-panel/resizable-panel.component.spec.ts
@@ -1,6 +1,8 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResizablePanelComponent } from './resizable-panel.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
describe('ResizablePanelComponent', () => {
let component: ResizablePanelComponent;
@@ -9,6 +11,14 @@ describe('ResizablePanelComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ResizablePanelComponent, BrowserAnimationsModule], // Standalone component
+ providers: [
+ {
+ provide: ActivatedRoute,
+ useValue: {
+ queryParamMap: of({ get: () => null }), // Mock ActivatedRoute
+ },
+ },
+ ],
}).compileComponents();
fixture = TestBed.createComponent(ResizablePanelComponent);
diff --git a/client/wfprev-war/src/main/angular/src/app/components/shared-layout/app-header/app-header.component.ts b/client/wfprev-war/src/main/angular/src/app/components/shared-layout/app-header/app-header.component.ts
index 5abeded6d..992db0991 100644
--- a/client/wfprev-war/src/main/angular/src/app/components/shared-layout/app-header/app-header.component.ts
+++ b/client/wfprev-war/src/main/angular/src/app/components/shared-layout/app-header/app-header.component.ts
@@ -41,7 +41,7 @@ export class AppHeaderComponent {
onSupportLinkClick() {
//navigate to a support link page, upon decide which url would that be.
- const url = 'https://intranet.gov.bc.ca/bcws/provincial-programs/strategic-initiatives-and-innovation/wildfire-one/wildfire-one-training'
+ const url = 'https://intranet.gov.bc.ca/bcws/corporate-governance/strategic-initiatives-and-innovation/wildfire-one/wildfire-one-training'
window.open(url, '_blank', 'noopener');
}
}
diff --git a/client/wfprev-war/src/main/angular/src/app/utils/index.ts b/client/wfprev-war/src/main/angular/src/app/utils/index.ts
index d3cbad714..cf16a93ee 100644
--- a/client/wfprev-war/src/main/angular/src/app/utils/index.ts
+++ b/client/wfprev-war/src/main/angular/src/app/utils/index.ts
@@ -7,7 +7,8 @@ export enum ResourcesRoutes {
LANDING = '',
MAP = 'map',
LIST = 'list',
- ERROR_PAGE = 'error-page'
+ ERROR_PAGE = 'error-page',
+ EDIT_PROJECT = 'edit-project'
}
export function appInitializerFactory(injector: Injector) {
diff --git a/client/wfprev-war/src/main/angular/src/styles.scss b/client/wfprev-war/src/main/angular/src/styles.scss
index f992e2a7e..75577df8b 100644
--- a/client/wfprev-war/src/main/angular/src/styles.scss
+++ b/client/wfprev-war/src/main/angular/src/styles.scss
@@ -52,8 +52,14 @@ body {
.mat-button-wrapper {
color: white;
}
- }
+}
+
+html, body{
+ font-family: var(--wf-font-family-main);
+ height: 100%;
+ overflow: hidden; /* Prevent scrolling if not needed */
+}
.snackbar-error {
background-color: #FF0000;
color: var(--colour-white);
diff --git a/client/wfprev-war/src/styles.scss b/client/wfprev-war/src/styles.scss
deleted file mode 100644
index 90d4ee007..000000000
--- a/client/wfprev-war/src/styles.scss
+++ /dev/null
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
From 895876fd4892ef8d88a4a638d407549fb28b20cb Mon Sep 17 00:00:00 2001
From: Lucas Li <35748253+yzlucas@users.noreply.github.com>
Date: Tue, 10 Dec 2024 09:54:31 -0800
Subject: [PATCH 2/6] remove console log, update the latest UI that reflect the
figmas changes (#360)
---
.../project-details.component.html | 111 +++++++++---------
.../project-details.component.scss | 14 ++-
.../project-details.component.ts | 1 -
3 files changed, 69 insertions(+), 57 deletions(-)
diff --git a/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.html b/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.html
index 4823198a3..21c9656b9 100644
--- a/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.html
+++ b/client/wfprev-war/src/main/angular/src/app/components/edit-project/project-details/project-details.component.html
@@ -1,5 +1,33 @@
Edit