Add structures to soil apps

alcs-frontend/src/app/features/application/applicant-info/application-details/pfrs-details/pfrs-details.component.html

@@ -1,4 +1,12 @@
 <div *ngIf="_applicationSubmission" class="review-table">
+  <div class="subheading2 grid-1">Are you removing soil and placing fill in order to build a structure?</div>
+  <div class="grid-double">
+    <span *ngIf="_applicationSubmission.soilIsNewStructure !== null">
+      {{ _applicationSubmission.soilIsNewStructure ? 'Yes' : 'No' }}
+    </span>
+    <app-no-data *ngIf="_applicationSubmission.soilIsNewStructure === null"></app-no-data>
+  </div>
+
   <div class="subheading2 grid-1">
     Has the ALC previously received an application or Notice of Intent for this proposal?
   </div>
@@ -120,13 +128,6 @@
     </div>
   </div>
 
-  <div class="subheading2 grid-1">
-    What alternative measures have you considered or attempted before proposing to place fill?
-  </div>
-  <div class="grid-double">
-    <span>{{ _applicationSubmission.soilAlternativeMeasures }}</span>
-  </div>
-
   <div class="subheading2 grid-1">Describe the type, origin and quality of fill proposed to be placed.</div>
   <div class="grid-double">
     <span>{{ _applicationSubmission.soilFillTypeToPlace }}</span>
@@ -136,52 +137,150 @@
   <div class="grid-double">
     <span>{{ _applicationSubmission.soilTypeRemoved }}</span>
   </div>
-  <div class="subheading2 grid-1">What steps will be taken to reduce impacts to surrounding agricultural land?</div>
-  <div class="grid-double">
-    <span>{{ _applicationSubmission.soilReduceNegativeImpacts }}</span>
-  </div>
+
+  <ng-container *ngIf="_applicationSubmission.soilIsNewStructure === true">
+    <div class="full-width subheading2">The total floor area (m<sup>2</sup>) for each of the proposed structure(s)</div>
+    <div class="full-width structure-table">
+      <div class="grid-1 subheading2">#</div>
+      <div class="grid-2 subheading2">Type</div>
+      <div class="grid-3 subheading2">Area</div>
+      <ng-container *ngFor="let structure of _applicationSubmission.soilProposedStructures; let i = index">
+        <div class="grid-1">
+          {{ i + 1 }}
+        </div>
+        <div class="grid-2">
+          {{ mapStructureTypeValueToLabel(structure.type) }}
+          <app-no-data *ngIf="!structure.type"></app-no-data>
+        </div>
+        <div class="grid-3">
+          {{ structure.area }} <span *ngIf="structure.area">m<sup>2</sup></span>
+          <app-no-data *ngIf="!structure.area"></app-no-data>
+        </div>
+      </ng-container>
+    </div>
+    <div *ngIf="_applicationSubmission.soilProposedStructures.length === 0" class="full-width">
+      <app-no-data></app-no-data>
+    </div>
+
+    <ng-container *ngIf="isSoilStructureFarmUseReasonVisible">
+      <div class="subheading2 grid-1">Describe how the structure is necessary for farm use</div>
+      <div class="grid-double">
+        {{ _applicationSubmission.soilStructureFarmUseReason }}
+        <app-no-data *ngIf="!_applicationSubmission.soilStructureFarmUseReason"></app-no-data>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="isSoilStructureResidentialUseReasonVisible">
+      <div class="subheading2 grid-1">
+        Describe why placing fill/removing soil is required for the residential structure(s)
+      </div>
+      <div class="grid-double">
+        {{ _applicationSubmission.soilStructureResidentialUseReason }}
+        <app-no-data *ngIf="!_applicationSubmission.soilStructureResidentialUseReason"></app-no-data>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="isSoilAgriParcelActivityVisible">
+      <div class="subheading2 grid-1">Describe the current or proposed agricultural activity on the parcel(s)</div>
+      <div class="grid-double">
+        {{ _applicationSubmission.soilAgriParcelActivity }}
+        <app-no-data *ngIf="!_applicationSubmission.soilAgriParcelActivity"></app-no-data>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="isSoilStructureResidentialAccessoryUseReasonVisible">
+      <div class="subheading2 grid-1">
+        Describe the intended use of the residential accessory structure(s) and why placing fill/removing soil is
+        required
+      </div>
+      <div class="grid-double">
+        {{ _applicationSubmission.soilStructureResidentialAccessoryUseReason }}
+        <app-no-data *ngIf="!_applicationSubmission.soilStructureResidentialAccessoryUseReason"></app-no-data>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="isSoilOtherStructureVisible">
+      <div class="subheading2 grid-1">
+        Describe the intended use of the 'Other' structure(s) and why placing fill/removing soil is required
+      </div>
+      <div class="grid-double">
+        {{ _applicationSubmission.soilStructureOtherUseReason }}
+        <app-no-data *ngIf="!_applicationSubmission.soilStructureOtherUseReason"></app-no-data>
+      </div>
+    </ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="_applicationSubmission.soilIsNewStructure === false">
+    <div class="subheading2 grid-1">
+      What alternative measures have you considered or attempted before proposing to place fill?
+    </div>
+    <div class="grid-double">
+      <span>{{ _applicationSubmission.soilAlternativeMeasures }}</span>
+    </div>
+
+    <div class="subheading2 grid-1">What steps will be taken to reduce impacts to surrounding agricultural land?</div>
+    <div class="grid-double">
+      <span>{{ _applicationSubmission.soilReduceNegativeImpacts }}</span>
+    </div>
+  </ng-container>
 
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
     <a *ngFor="let file of proposalMap" (click)="openFile(file)">
       {{ file.fileName }}
     </a>
   </div>
-  <div class="subheading2 grid-1">Cross Sections</div>
-  <div class="grid-double multiple-documents">
-    <div>
-      <a *ngFor="let file of crossSections" (click)="openFile(file)">
+
+  <ng-container *ngIf="_applicationSubmission.soilIsNewStructure === false">
+    <div class="subheading2 grid-1">Cross Sections</div>
+    <div class="grid-double multiple-documents">
+      <div>
+        <a *ngFor="let file of crossSections" (click)="openFile(file)">
+          {{ file.fileName }}
+        </a>
+      </div>
+    </div>
+
+    <div class="subheading2 grid-1">Reclamation Plan</div>
+    <div class="grid-double multiple-documents">
+      <a *ngFor="let file of reclamationPlans" (click)="openFile(file)">
         {{ file.fileName }}
       </a>
     </div>
-  </div>
-  <div class="subheading2 grid-1">Reclamation Plan</div>
-  <div class="grid-double multiple-documents">
-    <a *ngFor="let file of reclamationPlans" (click)="openFile(file)">
-      {{ file.fileName }}
-    </a>
-  </div>
+  </ng-container>
 
-  <div class="subheading2 grid-1">Is your proposal for aggregate extraction or placer mining?</div>
-  <div class="grid-double">
-    <span *ngIf="_applicationSubmission.soilIsExtractionOrMining !== null">
-      {{ _applicationSubmission.soilIsExtractionOrMining ? 'Yes' : 'No' }}
-    </span>
-  </div>
+  <ng-container *ngIf="_applicationSubmission.soilIsNewStructure === true">
+    <div class="subheading2 grid-1">Detailed Building Plan(s)</div>
+    <div class="grid-double multiple-documents">
+      <a *ngFor="let file of buildingPlans" (click)="openFile(file)">
+        {{ file.fileName }}
+      </a>
+      <app-no-data *ngIf="buildingPlans.length === 0"></app-no-data>
+    </div>
+  </ng-container>
 
-  <div *ngIf="_applicationSubmission.soilIsExtractionOrMining" class="subheading2 grid-1">
-    Have you submitted a Notice of Work to the Ministry of Energy, Mines and Low Carbon Innovation (EMLI)?
-  </div>
-  <div *ngIf="_applicationSubmission.soilIsExtractionOrMining" class="grid-double">
-    <span *ngIf="_applicationSubmission.soilHasSubmittedNotice !== null">
-      {{ _applicationSubmission.soilHasSubmittedNotice ? 'Yes' : 'No' }}
-    </span>
-  </div>
+  <ng-container *ngIf="_applicationSubmission.soilIsNewStructure === false">
+    <div class="subheading2 grid-1">Is your proposal for aggregate extraction or placer mining?</div>
+    <div class="grid-double">
+      <span *ngIf="_applicationSubmission.soilIsExtractionOrMining !== null">
+        {{ _applicationSubmission.soilIsExtractionOrMining ? 'Yes' : 'No' }}
+      </span>
+    </div>
 
-  <div *ngIf="_applicationSubmission.soilHasSubmittedNotice" class="subheading2 grid-1">Notice of Work</div>
-  <div *ngIf="_applicationSubmission.soilHasSubmittedNotice" class="grid-double multiple-documents">
-    <a *ngFor="let file of noticeOfWork" (click)="openFile(file)">
-      {{ file.fileName }}
-    </a>
-  </div>
+    <div *ngIf="_applicationSubmission.soilIsExtractionOrMining" class="subheading2 grid-1">
+      Have you submitted a Notice of Work to the Ministry of Energy, Mines and Low Carbon Innovation (EMLI)?
+    </div>
+    <div *ngIf="_applicationSubmission.soilIsExtractionOrMining" class="grid-double">
+      <span *ngIf="_applicationSubmission.soilHasSubmittedNotice !== null">
+        {{ _applicationSubmission.soilHasSubmittedNotice ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <div *ngIf="_applicationSubmission.soilHasSubmittedNotice" class="subheading2 grid-1">Notice of Work</div>
+    <div *ngIf="_applicationSubmission.soilHasSubmittedNotice" class="grid-double multiple-documents">
+      <a *ngFor="let file of noticeOfWork" (click)="openFile(file)">
+        {{ file.fileName }}
+      </a>
+    </div>
+  </ng-container>
 </div>

alcs-frontend/src/app/features/application/applicant-info/application-details/pfrs-details/pfrs-details.component.scss

@@ -9,3 +9,11 @@
     height: 16px;
   }
 }
+
+.structure-table {
+  display: grid;
+  grid-template-columns: max-content max-content max-content;
+  overflow-x: auto;
+  grid-column-gap: 36px;
+  grid-row-gap: 12px;
+}

alcs-frontend/src/app/features/application/applicant-info/application-details/pfrs-details/pfrs-details.component.ts

@@ -4,17 +4,44 @@ import { ApplicationDocumentDto } from '../../../../../services/application/appl
 import { ApplicationDocumentService } from '../../../../../services/application/application-document/application-document.service';
 import { ApplicationSubmissionDto } from '../../../../../services/application/application.dto';
 import { DOCUMENT_TYPE } from '../../../../../shared/document/document.dto';
+import { STRUCTURE_TYPES } from '../../../../../services/notice-of-intent/notice-of-intent.dto';
+import { STRUCTURE_TYPE_LABEL_MAP } from '../../../../notice-of-intent/applicant-info/notice-of-intent-details/additional-information/additional-information.component';
 
 @Component({
   selector: 'app-pfrs-details[applicationSubmission]',
   templateUrl: './pfrs-details.component.html',
   styleUrls: ['./pfrs-details.component.scss'],
 })
 export class PfrsDetailsComponent {
+  isSoilStructureFarmUseReasonVisible = false;
+  isSoilStructureResidentialUseReasonVisible = false;
+  isSoilAgriParcelActivityVisible = false;
+  isSoilStructureResidentialAccessoryUseReasonVisible = false;
+  isSoilOtherStructureVisible = false;
+
   _applicationSubmission: ApplicationSubmissionDto | undefined;
   @Input() set applicationSubmission(application: ApplicationSubmissionDto | undefined) {
     if (application) {
       this._applicationSubmission = application;
+
+      this.isSoilStructureFarmUseReasonVisible = application.soilProposedStructures.some(
+        (structure) => structure.type === STRUCTURE_TYPES.FARM_STRUCTURE,
+      );
+      this.isSoilStructureResidentialUseReasonVisible = application.soilProposedStructures.some(
+        (structure) =>
+          structure.type === STRUCTURE_TYPES.PRINCIPAL_RESIDENCE ||
+          structure.type === STRUCTURE_TYPES.ADDITIONAL_RESIDENCE ||
+          structure.type === STRUCTURE_TYPES.ACCESSORY_STRUCTURE,
+      );
+      this.isSoilAgriParcelActivityVisible = application.soilProposedStructures.some(
+        (structure) => structure.type === STRUCTURE_TYPES.FARM_STRUCTURE,
+      );
+      this.isSoilStructureResidentialAccessoryUseReasonVisible = application.soilProposedStructures.some(
+        (structure) => structure.type === STRUCTURE_TYPES.ACCESSORY_STRUCTURE,
+      );
+      this.isSoilOtherStructureVisible = application.soilProposedStructures.some(
+        (structure) => structure.type === STRUCTURE_TYPES.OTHER,
+      );
     }
   }
 
@@ -23,18 +50,28 @@ export class PfrsDetailsComponent {
       this.crossSections = documents.filter((document) => document.type?.code === DOCUMENT_TYPE.CROSS_SECTIONS);
       this.proposalMap = documents.filter((document) => document.type?.code === DOCUMENT_TYPE.PROPOSAL_MAP);
       this.reclamationPlans = documents.filter((document) => document.type?.code === DOCUMENT_TYPE.RECLAMATION_PLAN);
+      this.buildingPlans = documents.filter((document) => document.type?.code === DOCUMENT_TYPE.BUILDING_PLAN);
       this.noticeOfWork = documents.filter((document) => document.type?.code === DOCUMENT_TYPE.NOTICE_OF_WORK);
     }
   }
 
   crossSections: ApplicationDocumentDto[] = [];
   proposalMap: ApplicationDocumentDto[] = [];
   reclamationPlans: ApplicationDocumentDto[] = [];
+  buildingPlans: ApplicationDocumentDto[] = [];
   noticeOfWork: ApplicationDocumentDto[] = [];
 
   constructor(private router: Router, private applicationDocumentService: ApplicationDocumentService) {}
 
   async openFile(file: ApplicationDocumentDto) {
     await this.applicationDocumentService.download(file.uuid, file.fileName);
   }
+
+  mapStructureTypeValueToLabel(value: STRUCTURE_TYPES | null): string | null {
+    if (value === null) {
+      return null;
+    }
+
+    return STRUCTURE_TYPE_LABEL_MAP[value];
+  }
 }