Re-organize Error Fields, Hints, and Character Limits

* Update order for all proposal / input component steps.
bcgov · Aug 4, 2023 · d99b955 · d99b955
1 parent 4fbf260
commit d99b955
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 79 deletions.
diff --git a/portal-frontend/src/app/features/edit-submission/land-use/land-use.component.html b/portal-frontend/src/app/features/edit-submission/land-use/land-use.component.html
@@ -32,7 +32,6 @@ <h5>Land Use of Parcel(s) under Application</h5>
             maxlength="4000"
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - parcelsAgricultureDescriptionText.textLength }}</span>
         <div
           *ngIf="
             parcelsAgricultureDescription.invalid &&
@@ -43,12 +42,11 @@ <h5>Land Use of Parcel(s) under Application</h5>
           <mat-icon>warning</mat-icon>
           <div *ngIf="parcelsAgricultureDescription.errors?.['required']">This field is required</div>
         </div>
-        <div>
-          <mat-hint class="subtext"
-            >Example 1: PID 001-002-003: 60 ha hay crop, 40 ha grazing, 200 sheep. <br />Example 2: Parcel 1: 10%
-            blueberry crop, 30% vegetables, 60% hay. Parcel 2: 100% hay.
-          </mat-hint>
-        </div>
+        <mat-hint class="subtext"
+          >Example 1: PID 001-002-003: 60 ha hay crop, 40 ha grazing, 200 sheep. Example 2: Parcel 1: 10%
+          blueberry crop, 30% vegetables, 60% hay. Parcel 2: 100% hay.
+        </mat-hint>
+        <div class="subtext">Characters left: {{ 4000 - parcelsAgricultureDescriptionText.textLength }}</div>
       </div>
       <div class="full-row">
         <h6>
@@ -72,9 +70,6 @@ <h6>
             maxlength="4000"
           ></textarea>
         </mat-form-field>
-        <span class="subtext"
-          >Characters left: {{ 4000 - parcelsAgricultureImprovementDescriptionText.textLength }}</span
-        >
         <div
           *ngIf="
             parcelsAgricultureImprovementDescription.invalid &&
@@ -85,7 +80,8 @@ <h6>
           <mat-icon>warning</mat-icon>
           <div *ngIf="parcelsAgricultureImprovementDescription.errors?.['required']">This field is required</div>
         </div>
-        <div class="subtext">Example: 40 ha of grazing land fenced in 2010.</div>
+        <mat-hint class="subtext">Example: 40 ha of grazing land fenced in 2010.</mat-hint>
+        <div class="subtext">Characters left: {{ 4000 - parcelsAgricultureImprovementDescriptionText.textLength }}</div>
       </div>
       <div class="full-row">
         <label for="parcelsNonAgricultureUseDescription">
@@ -106,7 +102,6 @@ <h6>
             maxlength="4000"
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - parcelsNonAgricultureUseDescriptionText.textLength }}</span>
         <div
           *ngIf="
             parcelsNonAgricultureUseDescription.invalid &&
@@ -117,7 +112,8 @@ <h6>
           <mat-icon>warning</mat-icon>
           <div *ngIf="parcelsNonAgricultureUseDescription.errors?.['required']">This field is required</div>
         </div>
-        <div class="subtext">Example: House and 100 square metre detached auto repair shop.</div>
+        <mat-hint class="subtext">Example: House and 100 square metre detached auto repair shop.</mat-hint>
+        <div class="subtext">Characters left: {{ 4000 - parcelsNonAgricultureUseDescriptionText.textLength }}</div>
       </div>
     </div>
     <h5>Identify the land uses surrounding the parcel(s) under application.</h5>

diff --git a/.../src/app/features/edit-submission/parcel-details/parcel-entry/parcel-entry.component.html b/.../src/app/features/edit-submission/parcel-details/parcel-entry/parcel-entry.component.html
@@ -83,6 +83,7 @@ <h5>Parcel Lookup</h5>
 
     <div>
       <label for="map-area">Approx. Map Area (Hectares)</label>
+      <div class="subtext">The area of the entire parcel in hectares, not just the area under application.</div>
       <mat-form-field class="full-width-input" appearance="outline">
         <input
           id="map-area"
@@ -112,7 +113,7 @@ <h5>Parcel Lookup</h5>
       </div>
     </div>
 
-    <div *ngIf="isCrownLand">
+    <div class="full-row" *ngIf="isCrownLand">
       <label for="pin">PIN (optional)</label>
       <mat-form-field class="full-width-input" appearance="outline">
         <input id="pin" matInput placeholder="Enter PIN" formControlName="pin" />
@@ -133,19 +134,20 @@ <h5>Parcel Lookup</h5>
         <mat-datepicker-toggle matIconSuffix [for]="purchaseDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #purchaseDatePicker startView="multi-year"></mat-datepicker>
       </mat-form-field>
-      <div>
-        <mat-hint class="subtext"> Example: 2020-Mar-01 </mat-hint>
-      </div>
       <div *ngIf="purchaseDate.invalid && (purchaseDate.dirty || purchaseDate.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="purchaseDate.errors?.['required']">This field is required</div>
       </div>
+      <div>
+        <mat-hint class="subtext"> Example: 2020-Mar-01 </mat-hint>
+      </div>
     </div>
 
     <div class="full-row">
       <label for="isFarm">Farm Classification</label>
       <div class="subtext">
-        As determined by <a class='subtext' href="https://www.bcassessment.ca/" target="_blank" rel="noreferrer">BC Assessment</a>
+        As determined by
+        <a class="subtext" href="https://www.bcassessment.ca/" target="_blank" rel="noreferrer">BC Assessment</a>
       </div>
       <mat-button-toggle-group class="input" id="isFarm" formControlName="isFarm">
         <mat-button-toggle
@@ -353,7 +355,6 @@ <h6>Owner Information</h6>
         isConfirmedByApplicant.invalid &&
         (isConfirmedByApplicant.dirty || isConfirmedByApplicant.touched)
     }"
-    class=""
     >I confirm that the owner information provided above matches the current Certificate of Title. Mismatched
     information can cause significant delays to processing time.
   </mat-checkbox>

diff --git a/...tend/src/app/features/edit-submission/proposal/excl-proposal/excl-proposal.component.html b/...tend/src/app/features/edit-submission/proposal/excl-proposal/excl-proposal.component.html
@@ -91,11 +91,11 @@ <h2>Proposal</h2>
           placeholder="Type comment"
         ></textarea>
       </mat-form-field>
-      <span class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</span>
       <div *ngIf="purpose.invalid && (purpose.dirty || purpose.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="purpose.errors?.['required']">This field is required</div>
       </div>
+      <div class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</div>
     </div>
     <div class="full-row">
       <label for="whyExclude"> Explain why you believe that the parcel(s) should be excluded from the ALR </label>
@@ -109,7 +109,7 @@ <h2>Proposal</h2>
           placeholder="Type comment"
         ></textarea>
       </mat-form-field>
-      <span class="subtext">Characters left: {{ 4000 - outsideLandsText.textLength }}</span>
+      <div class="subtext">Characters left: {{ 4000 - outsideLandsText.textLength }}</div>
       <div *ngIf="whyExclude.invalid && (whyExclude.dirty || whyExclude.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="whyExclude.errors?.['required']">This field is required</div>

diff --git a/...tend/src/app/features/edit-submission/proposal/incl-proposal/incl-proposal.component.html b/...tend/src/app/features/edit-submission/proposal/incl-proposal/incl-proposal.component.html
@@ -55,11 +55,11 @@ <h2>Proposal</h2>
           placeholder="Type comment"
         ></textarea>
       </mat-form-field>
-      <span class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</span>
       <div *ngIf="purpose.invalid && (purpose.dirty || purpose.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="purpose.errors?.['required']">This field is required</div>
       </div>
+      <div class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</div>
     </div>
     <div class="full-row">
       <label for="agSupport">Does the proposal support agriculture in the short or long term? Please explain.</label>
@@ -73,11 +73,11 @@ <h2>Proposal</h2>
           placeholder="Type comment"
         ></textarea>
       </mat-form-field>
-      <span class="subtext">Characters left: {{ 4000 - outsideLandsText.textLength }}</span>
       <div *ngIf="agSupport.invalid && (agSupport.dirty || agSupport.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="agSupport.errors?.['required']">This field is required</div>
       </div>
+      <div class="subtext">Characters left: {{ 4000 - outsideLandsText.textLength }}</div>
     </div>
     <div class="full-row">
       <label for="improvements"
@@ -98,12 +98,12 @@ <h2>Proposal</h2>
           placeholder="Type comment"
         ></textarea>
       </mat-form-field>
-      <div class="subtext">Example: 40 ha of grazing land fenced in 2010.</div>
-      <span class="subtext">Characters left: {{ 4000 - improvementsText.textLength }}</span>
       <div *ngIf="improvements.invalid && (improvements.dirty || improvements.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="improvements.errors?.['required']">This field is required</div>
       </div>
+      <mat-hint class="subtext">Example: 40 ha of grazing land fenced in 2010.</mat-hint>
+      <div class="subtext">Characters left: {{ 4000 - improvementsText.textLength }}</div>
     </div>
     <div class="full-row">
       <label class="subheading2" for="proposal-map">Proposal Map / Site Plan</label>

diff --git a/...tend/src/app/features/edit-submission/proposal/naru-proposal/naru-proposal.component.html b/...tend/src/app/features/edit-submission/proposal/naru-proposal/naru-proposal.component.html
@@ -50,11 +50,11 @@ <h2>Proposal</h2>
       <mat-form-field appearance="outline">
         <textarea formControlName="purpose" #purposeText maxlength="4000" id="purpose" matInput></textarea>
       </mat-form-field>
-      <span class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</span>
       <div *ngIf="purpose.invalid && (purpose.dirty || purpose.touched)" class="field-error">
         <mat-icon>warning</mat-icon>
         <div *ngIf="purpose.errors?.['required']">This field is required</div>
       </div>
+      <div class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</div>
     </div>
 
     <ng-container *ngIf="subtype.value === 'ARFU'">
@@ -97,14 +97,14 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - residenceNecessityText.textLength }}</span>
         <div
           *ngIf="residenceNecessity.invalid && (residenceNecessity.dirty || residenceNecessity.touched)"
           class="field-error"
         >
           <mat-icon>warning</mat-icon>
           <div *ngIf="residenceNecessity.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - residenceNecessityText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -123,14 +123,14 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - locationRationaleText.textLength }}</span>
         <div
           *ngIf="locationRationale.invalid && (locationRationale.dirty || locationRationale.touched)"
           class="field-error"
         >
           <mat-icon>warning</mat-icon>
           <div *ngIf="locationRationale.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - locationRationaleText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -151,11 +151,11 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - infrastructureText.textLength }}</span>
         <div *ngIf="infrastructure.invalid && (infrastructure.dirty || infrastructure.touched)" class="field-error">
           <mat-icon>warning</mat-icon>
           <div *ngIf="infrastructure.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - infrastructureText.textLength }}</div>
       </div>
     </ng-container>
 
@@ -196,14 +196,14 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - residenceNecessityText.textLength }}</span>
         <div
           *ngIf="residenceNecessity.invalid && (residenceNecessity.dirty || residenceNecessity.touched)"
           class="field-error"
         >
           <mat-icon>warning</mat-icon>
           <div *ngIf="residenceNecessity.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - residenceNecessityText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -219,14 +219,14 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - locationRationaleText.textLength }}</span>
         <div
           *ngIf="locationRationale.invalid && (locationRationale.dirty || locationRationale.touched)"
           class="field-error"
         >
           <mat-icon>warning</mat-icon>
           <div *ngIf="locationRationale.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - locationRationaleText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -247,11 +247,11 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - infrastructureText.textLength }}</span>
         <div *ngIf="infrastructure.invalid && (infrastructure.dirty || infrastructure.touched)" class="field-error">
           <mat-icon>warning</mat-icon>
           <div *ngIf="infrastructure.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - infrastructureText.textLength }}</div>
       </div>
     </ng-container>
 
@@ -316,14 +316,14 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - residenceNecessityText.textLength }}</span>
         <div
           *ngIf="residenceNecessity.invalid && (residenceNecessity.dirty || residenceNecessity.touched)"
           class="field-error"
         >
           <mat-icon>warning</mat-icon>
           <div *ngIf="residenceNecessity.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - residenceNecessityText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -339,14 +339,14 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - locationRationaleText.textLength }}</span>
         <div
           *ngIf="locationRationale.invalid && (locationRationale.dirty || locationRationale.touched)"
           class="field-error"
         >
           <mat-icon>warning</mat-icon>
           <div *ngIf="locationRationale.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - locationRationaleText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -367,11 +367,11 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - infrastructureText.textLength }}</span>
         <div *ngIf="infrastructure.invalid && (infrastructure.dirty || infrastructure.touched)" class="field-error">
           <mat-icon>warning</mat-icon>
           <div *ngIf="infrastructure.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - infrastructureText.textLength }}</div>
       </div>
 
       <div class="full-row">
@@ -389,11 +389,11 @@ <h2>Proposal</h2>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - agriTourismText.textLength }}</span>
         <div *ngIf="agriTourism.invalid && (agriTourism.dirty || agriTourism.touched)" class="field-error">
           <mat-icon>warning</mat-icon>
           <div *ngIf="agriTourism.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - agriTourismText.textLength }}</div>
       </div>
     </ng-container>
 
@@ -415,14 +415,14 @@ <h2>Proposal</h2>
           matInput
         ></textarea>
       </mat-form-field>
-      <span class="subtext">Characters left: {{ 4000 - existingStructuresText.textLength }}</span>
       <div
         *ngIf="existingStructures.invalid && (existingStructures.dirty || existingStructures.touched)"
         class="field-error"
       >
         <mat-icon>warning</mat-icon>
         <div *ngIf="existingStructures.errors?.['required']">This field is required</div>
       </div>
+      <div class="subtext">Characters left: {{ 4000 - existingStructuresText.textLength }}</div>
     </div>
 
     <div class="full-row">
@@ -477,12 +477,12 @@ <h3>Soil & Fill Components</h3>
         <mat-form-field appearance="outline">
           <textarea formControlName="fillType" #fillTypeToPlaceText maxlength="4000" id="fillType" matInput></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - fillTypeToPlaceText.textLength }}</span>
         <div *ngIf="fillType.invalid && (fillType.dirty || fillType.touched)" class="field-error">
           <mat-icon>warning</mat-icon>
           <div *ngIf="fillType.errors?.['required']">This field is required</div>
         </div>
-        <div class="subtext">Example: Aggregate, topsoil, structural fill, sand, gravel, etc</div>
+        <mat-hint class="subtext">Example: Aggregate, topsoil, structural fill, sand, gravel, etc</mat-hint>
+        <div class="subtext">Characters left: {{ 4000 - fillTypeToPlaceText.textLength }}</div>
       </div>
     </div>
 
@@ -498,11 +498,11 @@ <h3>Soil & Fill Components</h3>
             matInput
           ></textarea>
         </mat-form-field>
-        <span class="subtext">Characters left: {{ 4000 - fillOriginToPlaceText.textLength }}</span>
         <div *ngIf="fillOrigin.invalid && (fillOrigin.dirty || fillOrigin.touched)" class="field-error">
           <mat-icon>warning</mat-icon>
           <div *ngIf="fillOrigin.errors?.['required']">This field is required</div>
         </div>
+        <div class="subtext">Characters left: {{ 4000 - fillOriginToPlaceText.textLength }}</div>
       </div>
     </div>