Skip to content

Commit

Permalink
Merge pull request #124 from bcgov/feature/deseng745
Browse files Browse the repository at this point in the history 
feature/deseng745: Added multi-select checkboxes for project type. Cleaned up form CSS.
  • Loading branch information
@jareth-whitney
jareth-whitney authored Nov 25, 2024
2 parents 62cb58f + e46d246 commit 22b2359
Show file tree
Hide file tree
Showing 7 changed files with 213 additions and 85 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
### 1.11.0 Nov 15, 2024
### 1.11.0 Nov 22, 2024
* Made agreements optional when creating or editing projects, adjusted project overview display. [DESENG-742](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-742)
* Fixed broken repository link for XLSX (Git has been disabled due to download traffic).
* Added the option to select a colour for a shapefile. [DESENG-743](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-743)
* Added multi-select checkboxes for project type. [DESENG-745](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-745)
* Cleaned up form CSS to keep all form inputs tidy amidst form changes.

## 1.10.0 May 6, 2024
* Fix bug preventing engagement leads from being selected in new projects [DESENG-601](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-601)
Expand Down
7 changes: 7 additions & 0 deletions src/app/models/project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export class Project {
provElecDist: String;
shortName: String;
projectPhase: String;
projectTypes: ProjectType[];
substitution: Boolean;
updatedBy: String;
isPublished: boolean;
Expand Down Expand Up @@ -111,6 +112,7 @@ export class Project {
this.provElecDist = obj && obj.provElecDist || undefined;
this.shortName = obj && obj.shortName || undefined;
this.projectPhase = obj && obj.projectPhase || undefined;
this.projectTypes = obj && obj.projectTypes || undefined;
this.substitution = obj && obj.substitution || undefined;
this.updatedBy = obj && obj.updatedBy || undefined;
this.read = obj && obj.read || undefined;
Expand Down Expand Up @@ -163,3 +165,8 @@ export interface ProjectLogo {
alt: string;
link: string;
}

export interface ProjectType {
name: string;
checked: boolean;
}
142 changes: 74 additions & 68 deletions src/app/projects/add-edit-project/add-edit-project.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,87 +28,89 @@
<div class="spinner-new rotating"></div>
</div>
<form [formGroup]="myForm" novalidate>
<div class="text-right">
<button class="btn btn-primary" type="cancel" (click)="onCancel()">Cancel</button>
<div class="text-right" class="save-cancel-buttons">
<button class="btn btn-primary z2001" type="cancel" (click)="onCancel()">Cancel</button>
&nbsp;
<button class="btn btn-primary" type="submit" (click)="onSubmit()">Save</button>
<button class="btn btn-primary z2001" type="submit" (click)="onSubmit()">Save</button>
</div>
<section>
<h2>Basic Information</h2>
<div class="flex-container">
<div class="label-pair">
<label for="name">Project Name* </label>
<input name="name" id="name" formControlName="name" type="text" class="form-control" />
</div>
<div class="label-pair">
<label for="partner">Partner First Nation(s)* </label>
<input name="partner" id="partner" formControlName="partner" type="text" class="form-control" />
</div>
<div *ngIf="formValueType(myForm.value.agreements) === 'string'" class="label-pair med">
<div class="flex-container-no-wrap form-container-65 flex-column">
<div class="mobile-wrap full-wide">
<div class="half-wide small-margin-right small-margin-bottom">
<label for="name">Project Name* </label>
<input name="name" id="name" formControlName="name" type="text" class="form-control" />
</div>
<div class="half-wide small-margin-bottom">
<label for="partner">Partner First Nation(s)* </label>
<input name="partner" id="partner" formControlName="partner" type="text" class="form-control" />
</div>
</div>
<div *ngIf="formValueType(myForm.value.agreements) === 'string'" class="flex-container form-container-65 small-margin-bottom">
<label for="agreements">Agreements* </label>
<input name="agreements" id="agreements" formControlName="agreements" type="text" class="form-control" />
<input name="agreements" id="agreements" formControlName="agreements" type="text" class="form-control full-wide" />
</div>
<div class="label-pair med">
<div class="flex-container small-margin-bottom">
<label for="description">Description* </label>
<textarea name="description" id="description" formControlName="description" class="form-control"></textarea>
<textarea name="description" id="description" formControlName="description" class="form-control full-wide"></textarea>
</div>
<div class="label-pair med">
<div class="flex-container small-margin-bottom">
<label for="details">Project Details </label>
<ckeditor name="details" id="details" formControlName="details" [editor]="Editor" [data]="project?.details" (ready)="editorOnReady($event)"></ckeditor>
<label class="additional-label" for="details">Appears on the Project Details tab under the map.</label>
</div>
<div class="label-pair med">
<div class="form-group mb-0">
<label for="shapeFile">Upload Project Banner Image</label>
<app-file-upload *ngIf="!bannerImageDocument" [maxFiles]="1" [maxSize]="300" [showInfo]="false" [showList]="false" [files]="projectFiles"
(filesChange)="updateBannerDocument($event); projectFiles = []"></app-file-upload>
<br>
<div class="doc-list mb-3" *ngIf="bannerImageDocument">
<span class="cell name" [title]="bannerImageDocument.displayName || ''">
<span class="cell__txt-content">{{bannerImageDocument.documentFileName}}</span>
</span>
<span class="cell actions">
<button class="btn btn-icon" type="button" title="Delete this document" (click)="deleteBannerDocument()">
<i class="material-icons">delete</i>
</button>
</span>
</div>
</div>
</div>
<div class="label-pair lrg">
<div class="form-group">
<div class="flex-container-no-wrap">
<div class="half-wide medium-margin-right no-margin-bottom">
<div class="form-group flex-container no-margin-bottom flex-column">
<label for="logos">Project Logos </label>
<ul class="project-logos">
<li *ngFor="let logo of logos.controls">
<div class="logo-name-container">
<ul class="project-logos" *ngIf="logos.controls.length > 0">
<li *ngFor="let logo of logos.controls" class="flex-column">
<div class="logo-name-container full-wide">
<label>File name</label>
<p>{{ logo.controls.name.value }}</p>
</div>
<div class="logo-link-container">
<div class="logo-link-container full-wide">
<label for="logo-link">Link</label>
<input type="text" id="logo-link" [formControl]="logo.controls.link">
<input type="text" id="logo-link" [formControl]="logo.controls.link" class="full-wide">
</div>
</li>
</ul>
<div class="logos-buttons">
<input type="button" id="logos" class="btn btn-primary" value="{{logos.length > 0 ? 'Reselect project logo(s)' : 'Select project logo(s)'}}" (click)="launchFilePicker()">
<input *ngIf="logos.controls.length > 0" type="button" class="btn btn-outline-primary" value="Clear selection" (click)="handleClearLogos()">
<div class="logos-buttons flex-container half-wide">
<input type="button" id="logos" class="btn btn-primary small-margin-bottom logos-button" value="{{logos.length > 0 ? 'Reselect project logo(s)' : 'Select project logo(s)'}}" (click)="launchFilePicker()">
<input *ngIf="logos.controls.length > 0" type="button" class="btn btn-outline-primary small-margin-bottom full-wide no-margin-right" value="Clear selection" (click)="handleClearLogos()">
</div>
</div>
</div>
<div class="form-group mb-0 half-wide">
<label for="shapeFile">Upload Project Banner Image</label>
<app-file-upload *ngIf="!bannerImageDocument" [maxFiles]="1" [maxSize]="300" [showInfo]="false" [showList]="false" [files]="projectFiles"
(filesChange)="updateBannerDocument($event); projectFiles = []"></app-file-upload>
<br>
<div class="doc-list mb-3" *ngIf="bannerImageDocument">
<span class="cell name" [title]="bannerImageDocument.displayName || ''">
<span class="cell__txt-content">{{bannerImageDocument.documentFileName}}</span>
</span>
<span class="cell actions">
<button class="btn btn-icon" type="button" title="Delete this document" (click)="deleteBannerDocument()">
<i class="material-icons">delete</i>
</button>
</span>
</div>
</div>
</div>
</div>
</section>
<section>
<h2>Agreements</h2>
<div *ngIf="formValueType(myForm.value.agreements) === 'object'" class="label-pair med">
<div *ngIf="formValueType(myForm.value.agreements) === 'object'" class="form-container-65">
<div *ngFor="let agreement of agreements.controls; let i=index" class="project-agreements">
<div class="flex-container" [formGroup]="agreement">
<div class="label-pair existing-land-use-plan">
<div class="flex-container mobile-wrap" [formGroup]="agreement">
<div class="label-pair existing-land-use-plan mobile-wrap flex-column">
<label for="name">Agreement Name*</label>
<input id="agreement-name" formControlName="agreementName"
type="text" class="form-control" />
</div>
<div class="label-pair existing-land-use-plan-url">
<div class="label-pair existing-land-use-plan-url mobile-wrap flex-column">
<label for="agreement">Agreement URL</label>
<input class="agreement-url" formControlName="agreementUrl" type="text" class="form-control" />
</div>
Expand Down Expand Up @@ -186,15 +188,15 @@ <h2>Location</h2>
<section formArrayName="existingLandUsePlans">
<h2>Supplementary Information</h2>
<div *ngFor="let existingPlan of existingLandUsePlans.controls; let i=index">
<div class="flex-container" [formGroupName]="i">
<div class="label-pair existing-land-use-plan">
<div class="flex-container mobile-wrap form-container-65 no-margin-right" [formGroupName]="i">
<div class="label-pair existing-land-use-plan mobile-wrap flex-column">
<label for="existingLandUsePlan">Existing Land Use Plan </label>
<input name="existingLandUsePlan" class="existingLandUsePlan" formControlName="existingLandUsePlan"
type="text" class="form-control" />
</div>
<div class="label-pair existing-land-use-plan-url">
<div class="label-pair existing-land-use-plan-url mobile-wrap flex-column">
<label for="existingLandUsePlanURL">Existing Land Use Plan URL</label>
<input name="existingLandUsePlanURL" class="existingLandUsePlanURL" formControlName="existingLandUsePlanURL" type="text" class="form-control" />
<input name="existingLandUsePlanURL" formControlName="existingLandUsePlanURL" type="text" class="form-control" />
</div>
<button class="btn existing-land-use-plan-delete" (click)="removeItemFromFormArray(existingLandUsePlans, i)"><span class="existing-land-use-plan-delete-text">Remove</span><i class="material-icons">delete</i></button>
</div>
Expand All @@ -204,34 +206,38 @@ <h2>Supplementary Information</h2>
</section>
<section>
<h2>Overall Project Status</h2>
<div class="flex-container">
<fieldset class="form-group">
<div class="label-pair">
<label for="projectPhase">Project Phase </label>
<select name="projectPhase" id="projectPhase" formControlName="projectPhase" class="form-control">
<option *ngFor="let projectPhase of PROJECT_PHASES" [ngValue]="projectPhase">{{projectPhase}}</option>
</select>
</div>
</fieldset>
<div class="flex-container-no-wrap form-container-65">
<div class="large-margin-right small-margin-bottom half-wide">
<label for="projectPhase">Project Phase </label>
<select name="projectPhase" id="projectPhase" formControlName="projectPhase" class="form-control">
<option *ngFor="let projectPhase of PROJECT_PHASES" [ngValue]="projectPhase">{{projectPhase}}</option>
</select>
</div>
<div class="half-wide flex-container flex-column">
<label for="projectTypes">Project Type(s) </label>
<div *ngFor="let projectType of myForm.value.projectTypes; let i = index">
<mat-checkbox id="{{projectType.value.name}}" [checked]="projectType.value.checked" (change)="handleProjectTypesChange($event, i)"> {{projectType.value.name}}</mat-checkbox>
</div>
</div>
</div>
</section>
<section>
<h2>Background Information</h2>
<div class="flex-container">
<div class="add-row med">
<div class="flex-container form-container-65">
<div class="add-row med full-wide">
<ckeditor name="backgroundInfo" id="backgroundInfo" formControlName="backgroundInfo" [editor]="Editor" [data]="project?.backgroundInfo" (ready)="editorOnReady($event)"></ckeditor>
</div>
</div>
</section>
<section>
<h2>Engagement Information</h2>
<div>
<div class="add-row med">
<div class="flex-container form-container-65 small-margin-bottom">
<label for="engagementLabel">Engagement Label* </label>
<input name="engagementLabel" id="engagementLabel" formControlName="engagementLabel" type="text" class="form-control" />
<label class="additional-label" for="engagementLabel">Appears in the header of the Comment Period and in the Comment Period box. e.g. "Public Comment Period".</label>
</div>
<div class="add-row med">
<div class="flex-container form-container-65 flex-column">
<label for="enagementInfo">Engagement Tab Information </label>
<ckeditor name="engagementInfo" id="engagementInfo" formControlName="engagementInfo" [editor]="Editor"
[data]="project?.engagementInfo" (ready)="editorOnReady($event)"></ckeditor>
Expand All @@ -241,8 +247,8 @@ <h2>Engagement Information</h2>
</section>
<section>
<h2>Document Information</h2>
<div class="flex-container">
<div class="add-row med">
<div class="flex-container form-container-65">
<div class="add-row med full-wide">
<p>Additional information for the Documents tab</p>
<ckeditor name="documentInfo" id="documentInfo" formControlName="documentInfo" [editor]="Editor"
[data]="project?.documentInfo" (ready)="editorOnReady($event)"></ckeditor>
Expand Down
68 changes: 65 additions & 3 deletions src/app/projects/add-edit-project/add-edit-project.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@ section.options {

@media screen and (min-width: 800px) {
.existing-land-use-plan-url {
width: 60%;
flex-basis: 60%;
}

.existing-land-use-plan-delete {
width: 5%;
flex-basis: 5%;
display: inline-block;
padding: 0;
}
Expand Down Expand Up @@ -124,18 +124,35 @@ section .form-container-65 {
width: 65%;
}

.flex-column {
flex-direction: column;
}

@media (max-width: 1200px) {
section .form-container-65 {
width: 100%;
flex-basis: 100%;
}
}

.small-margin-right {
margin-right: 1%;
}

.medium-margin-right {
margin-right: 1rem;
}

.large-margin-right {
margin-right: 2rem;
}

.no-margin-right {
margin-right: 0;
}

@media (max-width: 799px) {
.small-margin-right {
.small-margin-right, .medium-margin-right {
margin-right: 0;
}
}
Expand All @@ -144,6 +161,14 @@ section .form-container-65 {
margin-bottom: 1rem;
}

.no-margin-bottom {
margin-bottom: 0;
}

.full-wide {
width: 100%;
}

.half-wide {
flex-basis: 50%;
}
Expand All @@ -152,6 +177,21 @@ section .form-container-65 {
flex-basis: 25%;
}

.mobile-wrap {
display: flex;
flex-wrap: nowrap;
}

@media (max-width: 799px) {
.half-wide, .quarter-wide {
flex-basis: 100%;
}
.mobile-wrap {
flex-wrap: wrap;
flex-basis: 100%;
}
}

.shape-file-colour-input {
width: 100%;
cursor: pointer;
Expand All @@ -163,3 +203,25 @@ section .form-container-65 {
border-style: solid;
height: 63px;
}

.save-cancel-buttons {
position: fixed;
z-index: 2000;
right: 1rem;
margin-top: -1.75rem;
background-color:
rgba(255, 255, 255, 0.65);
padding: 1rem;
border-bottom-left-radius: 4px;
}

.logos-button {
width: 100%;
margin-right: 0;
margin-top: 10px;
height: 60px;
}

.z2001 {
z-index: 2001;
}
Loading

0 comments on commit 22b2359

Please sign in to comment.