Merge pull request #125 from bcgov/feature/deseng747

feature/deseng747: Added custom collection notice to project form. Simplified logic for project type checkboxes.

CHANGELOG.md

@@ -1,8 +1,9 @@
-### 1.11.0 Nov 22, 2024
+### 1.11.0 Nov 26, 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)
+* Added WYSIWYG editor to project create/edit project form for custom collection notice. [DESENG-747](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-747)
 * Cleaned up form CSS to keep all form inputs tidy amidst form changes.
 
 ## 1.10.0 May 6, 2024

src/app/models/project.ts

@@ -47,6 +47,7 @@ export class Project {
   substitution: Boolean;
   updatedBy: String;
   isPublished: boolean;
+  collectionNotice: string;
 
   eaDecision: any;
 
@@ -125,6 +126,7 @@ export class Project {
     this.activitiesAndUpdatesEnabled = obj && obj.activitiesAndUpdatesEnabled || undefined;
     this.contactFormEnabled = obj && obj.contactFormEnabled || undefined;
     this.contactFormEmails = obj && obj.contactFormEmails || undefined;
+    this.collectionNotice = obj && obj.collectionNotice || undefined;
 
     // copy pins
     if (obj && obj.pins) {

src/app/projects/add-edit-project/add-edit-project.component.html

@@ -54,7 +54,7 @@ <h2>Basic Information</h2>
           <label for="description">Description* </label>
           <textarea name="description" id="description" formControlName="description" class="form-control full-wide"></textarea>
         </div>
-        <div class="flex-container small-margin-bottom">
+        <div class="flex-container small-margin-bottom flex-column">
           <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>
@@ -177,7 +177,7 @@ <h2>Location</h2>
             class="shape-file-colour-input"
             formControlName="shapeFileColour"
             [colorPicker]="myForm.controls.shapeFileColour.value"
-			(colorPicker)="myForm.controls.shapeFileColour.setValue($event)"
+            (colorPicker)="myForm.controls.shapeFileColour.setValue($event)"
             [style.background]="myForm.controls.shapeFileColour.value"
             [style.color]="shapeFileTextColour"
             (colorPickerChange)="updateShapeFileColour($event)"
@@ -216,7 +216,7 @@ <h2>Overall Project Status</h2>
 				<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>
+						<mat-checkbox id="{{projectType.name}}" [checked]="projectType.checked" (change)="handleProjectTypesChange($event, i)"> {{projectType.name}}</mat-checkbox>
 					</div>
 				</div>
       </div>
@@ -305,6 +305,14 @@ <h2>Options</h2>
           </div>
         </div>
       </div>
+      <div class="flex-container form-container-65 medium-margin-bottom" style="margin-top: 1rem">
+        <div class="add-row med full-wide">
+          <label for="collectionNotice"><strong>Project Collection Notice</strong></label>
+          <p>Create a custom project collection notice or leave this field blank to display the default collection notice.</p>
+          <ckeditor name="collectionNotice" id="collectionNotice" formControlName="collectionNotice" [editor]="Editor"
+            [data]="project?.collectionNotice" (ready)="editorOnReady($event)"></ckeditor>
+        </div>
+      </div>
     </section>
   </form>
 </main>

src/app/projects/add-edit-project/add-edit-project.component.scss

@@ -157,6 +157,10 @@ section .form-container-65 {
 	  }
   }
 
+.medium-margin-bottom {
+	margin-bottom: 2rem;
+}
+
 .small-margin-bottom {
   margin-bottom: 1rem;
 }

src/app/projects/add-edit-project/add-edit-project.component.ts

@@ -270,13 +270,14 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
         'engagementInfo': new FormControl(),
         'documentInfo': new FormControl(),
         'projectPhase': new FormControl(),
-        'projectTypes': new FormControl(),
+        'projectTypes': new FormControl(this.projectTypes),
         'projectDirector': new FormControl(),
         'projectLead': new FormControl(),
         'projectAdmin': new FormControl(),
         'activitiesAndUpdatesEnabled': new FormControl(),
         'contactFormEnabled': new FormControl(),
-        'contactFormEmails': new FormArray([new FormControl()])
+        'contactFormEmails': new FormArray([new FormControl()]),
+        'collectionNotice': new FormControl(),
       });
       // set a default colour
       this.myForm.controls.shapeFileColour.setValue(this.shapeFileColour);
@@ -519,27 +520,6 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
     return logosFormArray;
   }
 
-	/**
-   * Build an array of form controls to add as a form array to the main project form.
-   * 
-   *
-   * @param {Project} projectData The project data to build the project types form array with.
-   * @returns {FormGroup[]} The array of project type form controls.
-   */
-  buildProjectTypes(projectData: Project): FormControl[] {
-    let data = []
-    if (projectData.projectTypes) {
-      data = projectData.projectTypes.map(pt => {
-        return new FormControl(pt);
-      })
-    } else {
-      data = this.projectTypes.map(pt => {
-        return new FormControl(pt)
-      });
-    }
-    return data;
-  }
-
   /**
    * Take project data and build a form from it. Usually invoked when
    * a user is editing a project rather than creating a new one.
@@ -558,6 +538,10 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
       this.shapeFileTextColour = this.colourIsBright(this.shapeFileColour) ? '#000000' : '#ffffff';
     }
 
+    if (projectData.projectTypes) {
+      this.projectTypes = projectData.projectTypes;
+    }
+
     const contactformEmailControls = Array.isArray(projectData.contactFormEmails) ? projectData.contactFormEmails.map(email => new FormControl(email)) : [];
 
     return new FormGroup({
@@ -578,12 +562,13 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
       'engagementInfo': new FormControl(projectData.engagementInfo),
       'documentInfo': new FormControl(projectData.documentInfo),
       'projectPhase': new FormControl(projectData.projectPhase),
-      'projectTypes': new FormControl(this.buildProjectTypes(projectData)),
+      'projectTypes': new FormControl(projectData.projectTypes || this.projectTypes),
       'projectDirector': new FormControl(projectData.projectDirector),
       'projectLead': new FormControl(projectData.projectLead),
       'activitiesAndUpdatesEnabled': new FormControl(projectData.activitiesAndUpdatesEnabled),
       'contactFormEnabled': new FormControl(projectData.contactFormEnabled),
-      'contactFormEmails': new FormArray(contactformEmailControls)
+      'contactFormEmails': new FormArray(contactformEmailControls),
+      'collectionNotice': new FormControl(projectData.collectionNotice),
     });
   }
 
@@ -630,7 +615,8 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
       'projectLead': this.projectLeadId,
       'activitiesAndUpdatesEnabled': form.controls.activitiesAndUpdatesEnabled.value,
       'contactFormEnabled': form.controls.contactFormEnabled.value,
-      'contactFormEmails': this.getContactFormEmailsFormValues()
+      'contactFormEmails': this.getContactFormEmailsFormValues(),
+      'collectionNotice': form.controls.collectionNotice.value,
     });
   }
 
@@ -784,10 +770,12 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
    * @returns {Array} Array of project type strings.
    */
   private getTypesFormValues(): ProjectType[] {
-    return this.myForm.value.projectTypes.map((projectType: FormControl) => ({
-      name: projectType.value.name,
-      checked: projectType.value.checked,
-    }))
+    return this.myForm.value.projectTypes.map((projectType: ProjectType) => {
+      return {
+        name: projectType.name,
+        checked: projectType.checked,
+      }
+    })
   }
 
   /**
@@ -1257,10 +1245,7 @@ export class AddEditProjectComponent implements OnInit, AfterViewInit, OnDestroy
   }
 
   public handleProjectTypesChange(eventData, index) {
-    const currentFormProjectTypes = this.myForm.value.projectTypes;
-    if (currentFormProjectTypes[index]) {
-      currentFormProjectTypes[index].setValue({...currentFormProjectTypes[index].value, checked: eventData.checked});
-    }
+    this.myForm.value.projectTypes[index].checked = eventData.checked;
   }
 
   /**

src/app/services/api.ts

@@ -224,7 +224,8 @@ export class ApiService {
       'delete',
       'activitiesAndUpdatesEnabled',
       'contactFormEnabled',
-      'contactFormEmails'
+      'contactFormEmails',
+      'collectionNotice',
     ];
     let queryString = `project/${id}?populate=true`;
     if (cpStart !== null) { queryString += `&cpStart[since]=${cpStart}`; }