From e7daebeb9678834f78ca4ecb7a99703a41b584c9 Mon Sep 17 00:00:00 2001
From: jaspal-aot <163812444+jaspalsingh-aot@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:07:40 -0800
Subject: [PATCH] feat: made changes as per current design requirement (#219)

Co-authored-by: Om Mishra <32200996+mishraomp@users.noreply.github.com>
Co-authored-by: nikhila-aot <38471389+nikhila-aot@users.noreply.github.com>
---
 .../src/app/components/search/SearchInput.tsx |  2 +-
 .../features/details/notations/Notations.tsx  | 38 ++++++++++++++++-
 .../details/notations/NotationsConfig.tsx     | 42 ++++---------------
 3 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/components/search/SearchInput.tsx b/frontend/src/app/components/search/SearchInput.tsx
index 695b7232..0e8bb99d 100644
--- a/frontend/src/app/components/search/SearchInput.tsx
+++ b/frontend/src/app/components/search/SearchInput.tsx
@@ -62,7 +62,7 @@ const SearchInput: React.FC<ISearchInput> = ({
               <MagnifyingGlassIcon />
             </span>
           )}
-          <div>
+          <div className="w-100">
             <input
               id={searchId}
               data-testid={searchId}
diff --git a/frontend/src/app/features/details/notations/Notations.tsx b/frontend/src/app/features/details/notations/Notations.tsx
index bded14fb..d0c61eb8 100644
--- a/frontend/src/app/features/details/notations/Notations.tsx
+++ b/frontend/src/app/features/details/notations/Notations.tsx
@@ -865,15 +865,49 @@ const Notations: React.FC<IComponentProps> = ({ showPending = false }) => {
   };
 
   const handleNotationFormRowFirstChild = (metaData?: any) => {
+    const notationType = {
+      type: FormFieldType.DropDown,
+      label: 'Notation Type',
+      placeholder: 'Notation Type',
+      graphQLPropertyName: 'etypCode',
+      options: [],
+      value: '',
+      colSize: `${viewMode === SiteDetailsMode.EditMode ? 'col-lg-12 col-md-12 col-sm-12' : 'col-xxl-5 col-xl-5 col-lg-8 col-md-6 col-sm-12'}`,
+      customLabelCss: 'custom-notation-lbl-text',
+      customInputTextCss: 'custom-notation-input-text',
+      customEditLabelCss: 'custom-notation-edit-label',
+      customEditInputTextCss: 'custom-notation-edit-input',
+    };
+
+    const notationClass = {
+      type: FormFieldType.DropDown,
+      label: 'Notation Class',
+      placeholder: 'Notation Class',
+      graphQLPropertyName: 'eclsCode',
+      options: [],
+      value: '',
+      colSize: 'col-xxl-5 col-xl-5 col-lg-8 col-md-6 col-sm-12',
+      customLabelCss: 'custom-notation-lbl-text',
+      customInputTextCss: 'custom-notation-input-text',
+      customEditLabelCss: 'custom-notation-edit-label',
+      customEditInputTextCss: 'custom-notation-edit-input',
+    };
     if (metaData && metaData.requiredDate) {
       return updateOptionsBasedOnMetaData(
-        notationFormRowsFirstChildIsRequired,
+        viewMode === SiteDetailsMode.EditMode
+          ? [
+              [notationClass, ...notationFormRowsFirstChildIsRequired[0]],
+              [notationType],
+            ]
+          : [[notationType, ...notationFormRowsFirstChildIsRequired[0]]],
         metaData,
         'eclsCode',
       );
     } else {
       return updateOptionsBasedOnMetaData(
-        notationFormRowsFirstChild,
+        viewMode === SiteDetailsMode.EditMode
+          ? [[notationClass, ...notationFormRowsFirstChild[0]], [notationType]]
+          : [[notationType, ...notationFormRowsFirstChild[0]]],
         metaData,
         'eclsCode',
       );
diff --git a/frontend/src/app/features/details/notations/NotationsConfig.tsx b/frontend/src/app/features/details/notations/NotationsConfig.tsx
index a7465eb4..139f84af 100644
--- a/frontend/src/app/features/details/notations/NotationsConfig.tsx
+++ b/frontend/src/app/features/details/notations/NotationsConfig.tsx
@@ -128,9 +128,9 @@ export const GetNotationConfig = () => {
     [
       {
         type: FormFieldType.DropDown,
-        label: 'Notation Type',
-        placeholder: 'Notation Type',
-        graphQLPropertyName: 'etypCode',
+        label: 'Notation Class',
+        placeholder: 'Notation Class',
+        graphQLPropertyName: 'eclsCode',
         options: [],
         value: '',
         colSize: 'col-lg-11 col-md-11 col-sm-11 col-10',
@@ -143,9 +143,9 @@ export const GetNotationConfig = () => {
     [
       {
         type: FormFieldType.DropDown,
-        label: 'Notation Class',
-        placeholder: 'Notation Class',
-        graphQLPropertyName: 'eclsCode',
+        label: 'Notation Type',
+        placeholder: 'Notation Type',
+        graphQLPropertyName: 'etypCode',
         options: [],
         value: '',
         colSize: 'col-lg-12 col-md-12 col-sm-12',
@@ -364,19 +364,6 @@ export const GetNotationConfig = () => {
 
   const notationFormRowsFirstChild: IFormField[][] = [
     [
-      {
-        type: FormFieldType.DropDown,
-        label: 'Notation Type',
-        placeholder: 'Notation Type',
-        graphQLPropertyName: 'etypCode',
-        options: [],
-        value: '',
-        colSize: 'col-xxl-5 col-xl-5 col-lg-8 col-md-6 col-sm-12',
-        customLabelCss: 'custom-notation-lbl-text',
-        customInputTextCss: 'custom-notation-input-text',
-        customEditLabelCss: 'custom-notation-edit-label',
-        customEditInputTextCss: 'custom-notation-edit-input',
-      },
       {
         type: FormFieldType.Date,
         label: 'Initiated Date',
@@ -409,19 +396,6 @@ export const GetNotationConfig = () => {
 
   const notationFormRowsFirstChildIsRequired: IFormField[][] = [
     [
-      {
-        type: FormFieldType.DropDown,
-        label: 'Notation Type',
-        placeholder: 'Notation Type',
-        graphQLPropertyName: 'etypCode',
-        options: [],
-        value: '',
-        colSize: 'col-xxl-5 col-xl-5 col-lg-8 col-md-6 col-sm-12',
-        customLabelCss: 'custom-notation-lbl-text',
-        customInputTextCss: 'custom-notation-input-text',
-        customEditLabelCss: 'custom-notation-edit-label',
-        customEditInputTextCss: 'custom-notation-edit-input',
-      },
       {
         type: FormFieldType.Date,
         label: 'Initiated Date',
@@ -437,9 +411,9 @@ export const GetNotationConfig = () => {
       },
       {
         type: FormFieldType.Date,
-        label: 'Completed Date',
+        label: 'Required Date',
         placeholder: 'MM/DD/YY',
-        graphQLPropertyName: 'completionDate',
+        graphQLPropertyName: 'requirementDueDate',
         value: [],
         colSize:
           'col-lg-4 col-md-6 col-sm-12 d-none d-xl-block d-xxl-block d-lg-block d-md-block',