feat: CE-1066 update rationale to text field

backend/src/types/models/code-tables/index.ts

@@ -51,7 +51,6 @@ export const AvailableCodeTables = [
   "equipment",
   "gir-type",
   "discharge",
-  "rationale",
   "non-compliance",
   "sector",
   "schedule",

backend/src/v1/code-table/code-table.service.ts

@@ -52,7 +52,6 @@ import { SectorCode } from "src/types/models/code-tables/sector-code";
 import { Discharge } from "src/types/models/code-tables/discharge";
 import { NonCompliance } from "src/types/models/code-tables/non-compliance";
 import { DecisionType } from "src/types/models/code-tables/decision-type";
-import { Rationale } from "src/types/models/code-tables/rationale";
 import { TeamCode } from "../team_code/entities/team_code.entity";
 import { TeamType } from "src/types/models/code-tables/team-type";
 import { CompMthdRecvCdAgcyCdXref } from "../comp_mthd_recv_cd_agcy_cd_xref/entities/comp_mthd_recv_cd_agcy_cd_xref";
@@ -608,24 +607,6 @@ export class CodeTableService {
         );
         return results;
       }
-      case "rationale": {
-        const { data } = await get(token, {
-          query: "{rationaleCodes{rationaleCode shortDescription longDescription displayOrder activeIndicator}}",
-        });
-        const results = data.rationaleCodes.map(
-          ({ rationaleCode, shortDescription, longDescription, displayOrder, activeIndicator }) => {
-            const table: Rationale = {
-              rationale: rationaleCode,
-              shortDescription: shortDescription,
-              longDescription: longDescription,
-              displayOrder: displayOrder,
-              isActive: activeIndicator,
-            };
-            return table;
-          },
-        );
-        return results;
-      }
       case "non-compliance": {
         const { data } = await get(token, {
           query:

frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx

@@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from "../../../../../../hooks/hooks";
 import {
   selectDischargeDropdown,
   selectNonComplianceDropdown,
-  selectRationaleDropdown,
   selectSectorDropdown,
   selectScheduleDropdown,
   selectDecisionTypeDropdown,
@@ -26,6 +25,7 @@ import { getComplaintById, selectComplaintCallerInformation } from "../../../../
 import { ToggleError } from "../../../../../../common/toast";
 
 import COMPLAINT_TYPES from "../../../../../../types/app/complaint-types";
+import { ValidationTextArea } from "../../../../../../common/validation-textarea";
 
 type props = {
   officerAssigned: string | null;
@@ -70,7 +70,6 @@ export const DecisionForm: FC<props> = ({
   //-- drop-downs
   const dischargesOptions = useAppSelector(selectDischargeDropdown);
   const nonComplianceOptions = useAppSelector(selectNonComplianceDropdown);
-  const rationaleOptions = useAppSelector(selectRationaleDropdown);
   const sectorsOptions = useAppSelector(selectSectorDropdown);
   const schedulesOptions = useAppSelector(selectScheduleDropdown);
   const decisionTypeOptions = useAppSelector(selectDecisionTypeDropdown);
@@ -82,7 +81,6 @@ export const DecisionForm: FC<props> = ({
   const [scheduleErrorMessage, setScheduleErrorMessage] = useState("");
   const [sectorErrorMessage, setSectorErrorMessage] = useState("");
   const [dischargeErrorMessage, setDischargeErrorMessage] = useState("");
-  const [rationaleErrorMessage] = useState("");
   const [nonComplianceErrorMessage] = useState("");
   const [dateActionTakenErrorMessage, setDateActionTakenErrorMessage] = useState("");
   const [leadAgencyErrorMessage, setLeadAgencyErrorMessage] = useState("");
@@ -146,12 +144,6 @@ export const DecisionForm: FC<props> = ({
         break;
       }
 
-      case "rationale": {
-        const { rationale } = data;
-        result = rationaleOptions.find((item) => item.value === rationale);
-        break;
-      }
-
       case "leadAgency": {
         const { leadAgency } = data;
         result = leadAgencyOptions.find((item) => item.value === leadAgency);
@@ -181,6 +173,10 @@ export const DecisionForm: FC<props> = ({
     updateModel("assignedTo", value);
   };
 
+  const handleRationaleChange = (value: string) => {
+    updateModel("rationale", value.trim());
+  };
+
   const handleDateChange = (date?: Date) => {
     updateModel("actionTakenDate", date);
   };
@@ -508,18 +504,14 @@ export const DecisionForm: FC<props> = ({
         >
           <label htmlFor="outcome-decision-rationale">Rationale</label>
           <div className="comp-details-input full-width">
-            <CompSelect
+            <ValidationTextArea
+              className="comp-form-control"
               id="outcome-decision-rationale"
-              className="comp-details-input"
-              classNamePrefix="comp-select"
-              options={rationaleOptions}
-              enableValidation={true}
-              errorMessage={rationaleErrorMessage}
-              placeholder="Select "
-              onChange={(evt) => {
-                updateModel("rationale", evt?.value);
-              }}
-              value={getValue("rationale")}
+              defaultValue={rationale}
+              rows={2}
+              errMsg={""}
+              maxLength={4000}
+              onChange={handleRationaleChange}
             />
           </div>
         </div>

frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-item.tsx

@@ -5,7 +5,6 @@ import { selectLeadAgencyDropdown } from "../../../../../../store/reducers/code-
 import {
   selectDischargeDropdown,
   selectNonComplianceDropdown,
-  selectRationaleDropdown,
   selectSectorDropdown,
   selectScheduleDropdown,
   selectDecisionTypeDropdown,
@@ -44,7 +43,6 @@ export const DecisionItem: FC<props> = ({
   //-- drop-downs
   const dischargesOptions = useAppSelector(selectDischargeDropdown);
   const nonComplianceOptions = useAppSelector(selectNonComplianceDropdown);
-  const rationaleOptions = useAppSelector(selectRationaleDropdown);
   const sectorsOptions = useAppSelector(selectSectorDropdown);
   const schedulesOptions = useAppSelector(selectScheduleDropdown);
   const decisionTypeOptions = useAppSelector(selectDecisionTypeDropdown);
@@ -75,11 +73,6 @@ export const DecisionItem: FC<props> = ({
         break;
       }
 
-      case "rationale": {
-        result = rationaleOptions.find((item) => item.value === rationale);
-        break;
-      }
-
       case "leadAgency": {
         result = agencyOptions.find((item) => item.value === leadAgency);
         break;
@@ -136,7 +129,7 @@ export const DecisionItem: FC<props> = ({
       </div>
       <div>
         <dt>Rationale</dt>
-        <dd>{getValue("rationale")?.label}</dd>
+        <dd>{rationale}</dd>
       </div>
       <div>
         <dt>Assigned to</dt>

frontend/src/app/constants/code-table-types.ts

@@ -27,7 +27,6 @@ export const CODE_TABLE_TYPES = {
   GIR_TYPE: "gir-type",
   DISCHARGE: "discharge",
   NON_COMPLIANCE: "non-compliance",
-  RATIONALE: "rationale",
   SECTOR: "sector",
   SCHEDULE: "schedule",
   DECISION_TYPE: "decision-type",

frontend/src/app/store/reducers/code-table-selectors.ts

@@ -25,18 +25,6 @@ export const selectNonComplianceDropdown = (state: RootState): Array<Option> =>
   return data;
 };
 
-export const selectRationaleDropdown = (state: RootState): Array<Option> => {
-  const {
-    codeTables: { rationale: items },
-  } = state;
-
-  const data = items.map(({ rationale: value, longDescription: label }) => {
-    return { label, value };
-  });
-
-  return data;
-};
-
 export const selectSectorDropdown = (state: RootState): Array<Option> => {
   const {
     codeTables: { sector: items },

frontend/src/app/store/reducers/code-table-thunks.ts

@@ -4,7 +4,6 @@ import { generateApiParameters, get } from "../../common/api";
 import { CODE_TABLE_TYPES } from "../../constants/code-table-types";
 import { Discharge } from "../../types/app/code-tables/discharge";
 import { NonCompliance } from "../../types/app/code-tables/non-compliance";
-import { Rationale } from "../../types/app/code-tables/rationale";
 import { Schedule } from "../../types/app/code-tables/schedule";
 import { Sector } from "../../types/app/code-tables/sector";
 import { AppThunk } from "../store";
@@ -31,16 +30,6 @@ export const fetchNonComplianceTypes = (): AppThunk => async (dispatch) => {
   }
 };
 
-export const fetchRationaleTypes = (): AppThunk => async (dispatch) => {
-  const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/code-table/${CODE_TABLE_TYPES.RATIONALE}`);
-
-  const response = await get<Array<Rationale>>(dispatch, parameters);
-  if (response && from(response).any()) {
-    const payload = { key: CODE_TABLE_TYPES.RATIONALE, data: response };
-    dispatch(setCodeTable(payload));
-  }
-};
-
 export const fetchSectorTypes = (): AppThunk => async (dispatch) => {
   const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/code-table/${CODE_TABLE_TYPES.SECTOR}`);
 

frontend/src/app/store/reducers/code-table.ts

@@ -37,7 +37,6 @@ import { getUserAgency } from "../../service/user-service";
 import {
   fetchDischargeTypes,
   fetchNonComplianceTypes,
-  fetchRationaleTypes,
   fetchSectorTypes,
   fetchScheduleTypes,
   fetchCEEBDecisionTypes,
@@ -73,7 +72,6 @@ const initialState: CodeTableState = {
   "gir-type": [],
   discharge: [],
   "non-compliance": [],
-  rationale: [],
   sector: [],
   schedule: [],
   "decision-type": [],
@@ -134,7 +132,6 @@ export const fetchAllCodeTables = (): AppThunk => async (dispatch) => {
       "gir-type": girType,
       discharge,
       "non-compliance": nonCompliance,
-      rationale,
       sector,
       schedule,
       "decision-type": decisionType,
@@ -240,9 +237,6 @@ export const fetchAllCodeTables = (): AppThunk => async (dispatch) => {
     if (!from(nonCompliance).any()) {
       dispatch(fetchNonComplianceTypes());
     }
-    if (!from(rationale).any()) {
-      dispatch(fetchRationaleTypes());
-    }
     if (!from(sector).any()) {
       dispatch(fetchSectorTypes());
     }
@@ -301,7 +295,6 @@ export const fetchCaseCodeTables = (): AppThunk => async (dispatch) => {
     dispatch(fetchEquipment());
     dispatch(fetchDischargeTypes());
     dispatch(fetchNonComplianceTypes());
-    dispatch(fetchRationaleTypes());
     dispatch(fetchSectorTypes());
     dispatch(fetchScheduleTypes());
     dispatch(fetchCEEBDecisionTypes());

frontend/src/app/types/state/code-table-state.ts

@@ -29,7 +29,6 @@ import { Equipment } from "../app/code-tables/equipment";
 import { GirType } from "../app/code-tables/gir-type";
 import { Discharge } from "../app/code-tables/discharge";
 import { NonCompliance } from "../app/code-tables/non-compliance";
-import { Rationale } from "../app/code-tables/rationale";
 import { Sector } from "../app/code-tables/sector";
 import { Schedule } from "../app/code-tables/schedule";
 import { DecisionType } from "../app/code-tables/decision-type";
@@ -68,7 +67,6 @@ export interface CodeTableState {
     | Array<Equipment>
     | Array<Discharge>
     | Array<NonCompliance>
-    | Array<Rationale>
     | Array<Sector>
     | Array<Schedule>
     | Array<GirType>
@@ -104,7 +102,6 @@ export interface CodeTableState {
   "gir-type": Array<GirType>;
   discharge: Array<Discharge>;
   "non-compliance": Array<NonCompliance>;
-  rationale: Array<Rationale>;
   sector: Array<Sector>;
   schedule: Array<Schedule>;
   "decision-type": Array<DecisionType>;