From f66ddd69c508d956851982aa6df914b3b52573e8 Mon Sep 17 00:00:00 2001
From: Ian Liu <81595625+ianliuwk1019@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:03:35 -0800
Subject: [PATCH] fix: #553 End of Operation Year Validation Fix. (#554)

* Add conditional expression for @minDate; esentially, it becomes "equal or greater than" validator.

* Remove unused import

* Fix typo

* Deployment trigger commits.
---
 .../app/foms/fom-add-edit/fom-add-edit.form.ts  | 17 ++++++++++++++---
 public/src/styles.scss                          |  2 +-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/admin/src/app/foms/fom-add-edit/fom-add-edit.form.ts b/admin/src/app/foms/fom-add-edit/fom-add-edit.form.ts
index c08907375..3af7198d2 100644
--- a/admin/src/app/foms/fom-add-edit/fom-add-edit.form.ts
+++ b/admin/src/app/foms/fom-add-edit/fom-add-edit.form.ts
@@ -1,7 +1,8 @@
+import { AbstractControl } from '@angular/forms';
 import { DistrictResponse, ForestClientResponse, ProjectResponse, WorkflowStateCode } from '@api-client';
-import { minLength, prop, required, minDate, maxLength } from '@rxweb/reactive-form-validators';
-import moment = require("moment");
+import { maxLength, minDate, minLength, prop, required } from '@rxweb/reactive-form-validators';
 import * as R from 'remeda';
+import moment = require("moment");
 
 const updateFields = [
   'name',
@@ -57,7 +58,17 @@ export class FomAddEditForm implements Pick<ProjectResponse,
 
   // Special case. It is at form control, but will be convert into request body for 'operationEndYear' (number).
   @required({message: 'Operation End Year is required.'})
-  @minDate({fieldName:'opStartDate', message: 'Must be equal to or later than the Start of Operations'})
+  @minDate({
+    // In this case, do not use (x,y) arrow expression for validator. 
+    // Use 'function(control)' expression, so it can get current field value through "this.".
+    conditionalExpression: function(control: AbstractControl) {
+      // For 'opStartDate' and 'opEndDate', only need "year" from the date; but still use "Date" type for datePicker.
+      // (This is a tricky case to set up "conditionalExpression" validator for @minDate, as date is passed from datePicker)
+      // So, conditionally, if years are the same, no need to validate on @minDate().
+      const sameYear = moment(this.opStartDate).year() == moment(this.opEndDate).year();
+      return !sameYear;
+    },
+    fieldName:'opStartDate', message: 'Must be equal to or later than the Start of Operations'})
   @prop()
   opEndDate: Date;
 
diff --git a/public/src/styles.scss b/public/src/styles.scss
index 981f1a922..0d5bd783e 100644
--- a/public/src/styles.scss
+++ b/public/src/styles.scss
@@ -32,4 +32,4 @@
 @import "assets/styles/components/pagination.scss";
 @import "assets/styles/components/spinner.scss";
 @import "assets/styles/components/tab-nav.scss";
-@import "assets/styles/components/table.scss";
+@import "assets/styles/components/table.scss";
\ No newline at end of file