feat: CE-1066 update rationale to text field (#652)

Co-authored-by: Barrett Falk <[email protected]> Co-authored-by: Mike <[email protected]> Co-authored-by: Mike Sears <[email protected]>
bcgov · Sep 26, 2024 · ccc837d · ccc837d
1 parent 6b20580
commit ccc837d
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 91 deletions.
diff --git a/backend/src/types/models/code-tables/index.ts b/backend/src/types/models/code-tables/index.ts
@@ -51,7 +51,6 @@ export const AvailableCodeTables = [
  "equipment",
  "gir-type",
  "discharge",
- "rationale",
  "non-compliance",
  "sector",
  "schedule",

diff --git a/backend/src/types/models/code-tables/rationale.ts b/backend/src/types/models/code-tables/rationale.ts
diff --git a/backend/src/v1/code-table/code-table.service.ts b/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:

diff --git a/...nd/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx b/...nd/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>

diff --git a/...nd/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-item.tsx b/...nd/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>

diff --git a/frontend/src/app/constants/code-table-types.ts b/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",

diff --git a/frontend/src/app/store/reducers/code-table-selectors.ts b/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 },

diff --git a/frontend/src/app/store/reducers/code-table-thunks.ts b/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}`);
 

diff --git a/frontend/src/app/store/reducers/code-table.ts b/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());

diff --git a/frontend/src/app/types/app/code-tables/rationale.ts b/frontend/src/app/types/app/code-tables/rationale.ts
diff --git a/frontend/src/app/types/state/code-table-state.ts b/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>;