From 4685e4ae2bbd34a3ed7ff84dc2def940c11a4339 Mon Sep 17 00:00:00 2001
From: sophia-massie <96220951+sophia-massie@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:49:08 -0600
Subject: [PATCH] bug/extension-expected-date (#367)

* - Prevents user from changing Current Expected date
from database when filling out extension form

* - Fixes key console error for mapped options
- Removes deleted css sheet from extension form templates
- Removes required badge from Current Expected Date field
---
 .../extension_submission_form.html                |  3 +--
 .../Extensions/ExtensionFormInfo.module.css       | 15 ---------------
 .../Submitter/Extensions/ExtensionFormInfo.tsx    |  6 ++++--
 .../Extensions/ExtensionsForm.module.css          |  4 ++++
 .../Submitter/Extensions/ExtensionsForm.tsx       |  4 +---
 5 files changed, 10 insertions(+), 22 deletions(-)
 delete mode 100644 apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.module.css

diff --git a/apcd-cms/src/apps/extension/templates/extension_submission_form/extension_submission_form.html b/apcd-cms/src/apps/extension/templates/extension_submission_form/extension_submission_form.html
index 001c02a8..57155bdd 100644
--- a/apcd-cms/src/apps/extension/templates/extension_submission_form/extension_submission_form.html
+++ b/apcd-cms/src/apps/extension/templates/extension_submission_form/extension_submission_form.html
@@ -3,10 +3,9 @@
 
 {% block content %}
 
-<link rel="stylesheet" href="{% static 'forms/css/extension_submission_form.css' %}">
 <div class="container">
   {% include "nav_cms_breadcrumbs.html" %}
       <div id="extension-submission-root">
   </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.module.css b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.module.css
deleted file mode 100644
index ff3c2970..00000000
--- a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.isInvalid {
-  width: 100%; /* To match error message styles from*/
-  margin-top: 0.25rem;
-  font-size: 80%;
-  color: #dc3545;
-}
-
-.dateInputField {
-  padding-right: 2ch; /* Adjust space for icons or padding */
-  min-width: 10ch; /* Minimum width for empty input */
-}
-
-.dateInputContainer {
-  display: inline-block;
-}
diff --git a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.tsx b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.tsx
index 3962be02..c0f4ef8d 100644
--- a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.tsx
+++ b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.tsx
@@ -135,7 +135,7 @@ const ExtensionFormInfo: React.FC<{
           >
             <option value="">-- Select period --</option>
             {dataPeriods.map((item) => (
-              <option value={item.data_period}>{item.data_period}</option>
+              <option value={item.data_period} key={item.data_period}>{item.data_period}</option>
             ))}
           </Field>
         </FieldWrapper>
@@ -166,11 +166,13 @@ const ExtensionFormInfo: React.FC<{
               Current Expected Date <sup>3</sup>
             </>
           }
-          required={true}
+          required={false}
           className={`position-relative ${styles.dateInputContainer} `}
         >
           <Field
             type="date"
+            readOnly
+            className={`position-relative ${styles.currentExpectedDate}`}
             name={`extensions.${index}.currentExpectedDate`}
             id={`extensions.${index}.currentExpectedDate`}
           />
diff --git a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.module.css b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.module.css
index e735f9e3..82d06422 100644
--- a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.module.css
+++ b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.module.css
@@ -38,3 +38,7 @@
 .justification {
   font-size: unset;
 }
+.dateInputContainer :is(input):read-only {
+  border-color: unset;
+  background-color: #e9ecef;
+}
diff --git a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.tsx b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.tsx
index 24134c36..60369824 100644
--- a/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.tsx
+++ b/apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.tsx
@@ -26,9 +26,7 @@ const validationSchema = Yup.object().shape({
       requestedTargetDate: Yup.date().required(
         'Requested Target Date is required'
       ),
-      currentExpectedDate: Yup.date().required(
-        'Current Expected Date is required'
-      ),
+      currentExpectedDate: Yup.date()
     })
   ),
   requestorName: Yup.string().required('Requestor Name is required'),