[MDS-6027] Edit Permit Condition Category (#3357)

* add condition category select, make it look like mockup, send item to bottom of list when there's a change in category

* clean up unused variables

services/common/src/components/forms/BaseInput.tsx

@@ -1,5 +1,5 @@
 import { EMPTY_FIELD } from "@mds/common/constants";
-import { Typography } from "antd";
+import { Form, Typography } from "antd";
 import React, { FC, ReactNode } from "react";
 import { WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps } from "redux-form";
 
@@ -76,6 +76,7 @@ export interface BaseInputProps extends WrappedFieldProps {
   showOptional?: boolean;
   showNA?: boolean;
   autoFocus?: boolean;
+  className?: string;
 }
 
 interface BaseViewInputProps {
@@ -131,3 +132,40 @@ export const getFormItemLabel = (
     </div>
   );
 };
+
+interface WrappedInputProps extends BaseInputProps {
+  children: ReactNode;
+  getValueProps?: () => any;
+}
+
+export const WrappedInput: FC<WrappedInputProps> = ({
+  id,
+  label = "",
+  labelSubtitle,
+  meta,
+  input,
+  required,
+  showOptional,
+  children,
+  getValueProps,
+  className
+}) => {
+  return (
+    <Form.Item
+      className={className}
+      name={input.name}
+      label={getFormItemLabel(label, required, labelSubtitle, showOptional)}
+      required={required}
+      validateStatus={
+        meta.touched ? (meta.error && "error") || (meta.warning && "warning") : ""
+      }
+      help={
+        (meta.touched) &&
+        ((meta.error && <span>{meta.error}</span>) ||
+          (meta.warning && <span>{meta.warning}</span>))
+      }
+      id={id}
+      getValueProps={getValueProps}
+    >{children}</Form.Item>
+  );
+}

services/common/src/components/forms/RenderGroupedSelect.tsx

@@ -1,67 +1,52 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Select, Form } from "antd";
+import React, { FC } from "react";
+import { Select } from "antd";
+import { BaseInputProps, WrappedInput } from "./BaseInput";
+import { IGroupedDropdownList } from "@mds/common/interfaces";
 
 /**
- * @constant RenderGroupedSelect - Ant Design `Select` component for redux-form - used for data sets that require grouping.
+ * @component RenderGroupedSelect - Ant Design `Select` component for redux-form - used for data sets that require grouping.
  * There is a bug when the data sets are large enough to cause the dropdown to scroll, and the field is in a modal.
  * In the case where the modal cannot scroll, it is better to pass in the prop doNotPinDropdown.  It allows the
  * dropdown to render properly
  */
 
-const propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  input: PropTypes.objectOf(PropTypes.any).isRequired,
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
-  meta: PropTypes.any, //CustomPropTypes.formMeta,
-  data: PropTypes.any, //CustomPropTypes.groupOptions,
-  disabled: PropTypes.bool,
-  onSelect: PropTypes.func,
-  usedOptions: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
-};
 
-const defaultProps = {
-  placeholder: "",
-  label: "",
-  data: [],
-  disabled: false,
-  meta: {},
-  onSelect: () => {},
-  usedOptions: [],
-};
+interface GroupedSelectProps extends BaseInputProps {
+  data: IGroupedDropdownList[];
+  allowClear?: boolean;
+  onSelect?: (value, option) => void;
+}
+
 
-const RenderGroupedSelect = (props) => (
-  <Form.Item
-    label={props.label}
-    validateStatus={
-      props.meta.touched ? (props.meta.error && "error") || (props.meta.warning && "warning") : ""
-    }
-    help={
-      props.meta.touched &&
-      ((props.meta.error && <span>{props.meta.error}</span>) ||
-        (props.meta.warning && <span>{props.meta.warning}</span>))
-    }
-  >
+const RenderGroupedSelect: FC<GroupedSelectProps> = (props) => {
+  const {
+    placeholder = "",
+    id,
+    input,
+    data = [],
+    onSelect = () => { },
+    allowClear = true,
+    disabled = false,
+  } = props;
+  return <WrappedInput {...props}>
     <Select
       virtual={false}
-      disabled={props.disabled}
+      disabled={disabled}
       dropdownMatchSelectWidth
       showSearch
-      placeholder={props.placeholder}
+      placeholder={placeholder}
       optionFilterProp="children"
-      id={props.id}
-      defaultValue={props.input.value}
-      value={props.input.value ? props.input.value : undefined}
-      onChange={props.input.onChange}
-      onSelect={props.onSelect}
+      id={id}
+      value={input.value ? input.value : undefined}
+      onChange={input.onChange}
+      onSelect={onSelect}
+      allowClear={allowClear}
     >
-      {props.data.map((group) => (
+      {data.map((group) => (
         <Select.OptGroup label={group.groupName} key={group.groupName}>
           {group.opt.map((opt) => (
             <Select.Option
-              disabled={props.usedOptions && props.usedOptions.includes(opt.value)}
-              key={opt.value}
+              key={opt.value.toString()}
               value={opt.value}
             >
               {opt.label}
@@ -70,10 +55,7 @@ const RenderGroupedSelect = (props) => (
         </Select.OptGroup>
       ))}
     </Select>
-  </Form.Item>
-);
-
-RenderGroupedSelect.propTypes = propTypes;
-RenderGroupedSelect.defaultProps = defaultProps;
+  </WrappedInput>
+};
 
 export default RenderGroupedSelect;

services/core-api/app/api/mines/permits/permit_conditions/resources/permit_conditions_resource.py

@@ -73,17 +73,26 @@ def get(self, mine_guid, permit_guid, permit_amendment_guid, permit_condition_gu
     @api.marshal_with(PERMIT_CONDITION_MODEL, code=200)
     def put(self, mine_guid, permit_guid, permit_amendment_guid, permit_condition_guid):
 
+        request_data = request.json
         permit_amendment = get_permit_amendment(permit_amendment_guid)
 
         if permit_amendment.is_generated_in_core and permit_amendment.permit_amendment_status_code != "DFT":
             raise BadRequest('Permit Conditions cannot be edited if the permit was issued in Core and is no longer a draft.')
 
         old_condition = PermitConditions.find_by_permit_condition_guid(permit_condition_guid)
         old_display_order = old_condition.display_order
+        old_category_code = old_condition.condition_category_code
+        new_category_code = request_data.get("condition_category_code", None)
+        changed_category = old_category_code != new_category_code
+
+        if changed_category:
+            sub_conditions = old_condition.sub_conditions
+            for sub_c in sub_conditions:
+                sub_c.condition_category_code = new_category_code
 
         try:
             condition = PermitConditions._schema().load(
-                request.json,
+                request_data,
                 instance=PermitConditions.find_by_permit_condition_guid(permit_condition_guid))
         except MarshmallowError as e:
             raise BadRequest(e)
@@ -96,6 +105,8 @@ def put(self, mine_guid, permit_guid, permit_amendment_guid, permit_condition_gu
                     condition.permit_amendment_id)
                 if x.condition_category_code == condition.condition_category_code
             ]
+        if changed_category:
+            condition.display_order = len(conditions) + 1
 
         if condition.display_order > old_display_order:
             conditions = sorted(

services/core-web/src/components/mine/Permit/PermitConditionForm.tsx

@@ -13,6 +13,7 @@ import {
     faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
 import { FORM, IPermitCondition } from "@mds/common";
+import { IGroupedDropdownList } from "@mds/common/interfaces/common/option.interface";
 import { ERROR } from "@mds/common/constants/actionTypes";
 import FormWrapper from "@mds/common/components/forms/FormWrapper";
 import RenderAutoSizeField from "@mds/common/components/forms/RenderAutoSizeField";
@@ -26,6 +27,7 @@ import { createMineReportPermitRequirement } from "@mds/common/redux/slices/mine
 import RenderField from "@mds/common/components/forms/RenderField";
 import { deleteConfirmWrapper } from "@mds/common/components/common/ActionMenu";
 import { formatPermitConditionStep, parsePermitConditionStep } from "@mds/common/utils/helpers";
+import RenderGroupedSelect from "@mds/common/components/forms/RenderGroupedSelect";
 
 
 interface PermitConditionFormProps {
@@ -40,6 +42,7 @@ interface PermitConditionFormProps {
     refreshData: () => Promise<void>;
     setIsAddingListItem: (isAdding: boolean) => void;
     isAddingListItem: boolean;
+    categoryOptions?: IGroupedDropdownList[];
 }
 const PermitConditionForm: FC<PermitConditionFormProps> = ({
     permitAmendmentGuid,
@@ -52,12 +55,14 @@ const PermitConditionForm: FC<PermitConditionFormProps> = ({
     moveDown,
     refreshData,
     setIsAddingListItem,
-    isAddingListItem
+    isAddingListItem,
+    categoryOptions
 }) => {
     const dispatch = useDispatch();
     const { id: mineGuid, permitGuid } = useParams<{ id: string; permitGuid: string }>();
     const [isEditMode, setIsEditMode] = useState<boolean>(false);
-    const formName = `${FORM.EDIT_PERMIT_CONDITION}_${condition.permit_condition_id}`;
+    // the form fails to re-initialize when the category is changed, so concatenating it forces it to make a new one
+    const formName = `${FORM.EDIT_PERMIT_CONDITION}_${condition.permit_condition_id}_${condition.condition_category_code}`;
 
     const startEdit = () => {
         onEdit();
@@ -81,8 +86,8 @@ const PermitConditionForm: FC<PermitConditionFormProps> = ({
         const resp = await dispatch(updatePermitCondition(values.permit_condition_guid, permitAmendmentGuid, payload));
         // @ts-ignore
         if (resp?.type !== ERROR) {
-            refreshData();
             cancelEdit();
+            return refreshData();
         }
     };
     const handleCancel = () => {
@@ -153,8 +158,22 @@ const PermitConditionForm: FC<PermitConditionFormProps> = ({
                 enableReinitialize: true
             }}
         >
+            {(isEditMode && categoryOptions) && <Row>
+                <Col span={24}>
+                    <Field
+                        showOptional={false}
+                        label="Condition Category:"
+                        component={RenderGroupedSelect}
+                        name="condition_category_code"
+                        data={categoryOptions}
+                        allowClear={false}
+                        className="horizontal-form-item"
+                    />
+                </Col>
+            </Row>}
             <Row
                 wrap={false}
+                align="top"
                 className={`condition-content ${!editingConditionGuid ? "editable" : ""}`}
             >
                 <Col className="step-column" style={{ flexShrink: 0 }}>

services/core-web/src/components/mine/Permit/PermitConditionLayer.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from "react";
 import { IPermitCondition } from "@mds/common/interfaces/permits/permitCondition.interface";
 import PermitConditionForm from "./PermitConditionForm";
 import SubConditionForm from "./SubConditionForm";
+import { IGroupedDropdownList } from "@mds/common/interfaces/common/option.interface";
 
 interface PermitConditionLayerProps {
   condition: IPermitCondition;
@@ -17,6 +18,7 @@ interface PermitConditionLayerProps {
   permitAmendmentGuid: string;
   refreshData: () => Promise<void>;
   conditionSelected?: (condition: IPermitCondition) => void;
+  categoryOptions?: IGroupedDropdownList[];
 }
 
 const PermitConditionLayer: FC<PermitConditionLayerProps> = ({
@@ -33,6 +35,7 @@ const PermitConditionLayer: FC<PermitConditionLayerProps> = ({
   conditionCount,
   permitAmendmentGuid,
   refreshData,
+  categoryOptions
 }) => {
   const editingCondition = editingConditionGuid === condition.permit_condition_guid;
   const [isAddingListItem, setIsAddingListItem] = useState<boolean>(false);
@@ -97,6 +100,7 @@ const PermitConditionLayer: FC<PermitConditionLayerProps> = ({
           refreshData={refreshData}
           setIsAddingListItem={setIsAddingListItem}
           isAddingListItem={isAddingListItem}
+          categoryOptions={categoryOptions}
         />
         {condition?.sub_conditions?.map((subCondition, idx) => {
           return (

services/core-web/src/components/mine/Permit/PermitConditions.tsx

@@ -53,6 +53,7 @@ import { getIsFetching } from "@mds/common/redux/reducers/networkReducer";
 import { NetworkReducerTypes } from "@mds/common/constants/networkReducerTypes";
 import PermitConditionReviewAssignment from "@/components/mine/Permit/PermitConditionReviewAssignment";
 import { getUser } from "@mds/common/redux/slices/userSlice";
+import { createDropDownList } from "@common/utils/helpers";
 
 const { Title } = Typography;
 
@@ -201,6 +202,26 @@ const PermitConditions: FC<PermitConditionProps> = ({
     featureUrlRouteArguments: [mineGuid, permitGuid, "conditions"],
   };
 
+  const customCategories = createDropDownList(
+    latestAmendment?.condition_categories ?? [],
+    "description",
+    "condition_category_code"
+  );
+
+  const standardCategories = createDropDownList(
+    condWithoutConditionsText,
+    "description",
+    "condition_category_code"
+  );
+
+  const dropdownCategories = [{
+    groupName: "Custom Categories",
+    opt: customCategories
+  }, {
+    groupName: "Standard Categories",
+    opt: standardCategories
+  }]
+
   const topOffset = 99 + 49; // header + tab nav
 
   const handleAddCondition = async () => {
@@ -458,6 +479,7 @@ const PermitConditions: FC<PermitConditionProps> = ({
                                 editingConditionGuid={editingConditionGuid ?? addingToCategoryCode}
                                 refreshData={refreshData}
                                 conditionSelected={setSelectedCondition}
+                                categoryOptions={dropdownCategories}
                               />
                             </Col>
                           ))}
@@ -468,9 +490,8 @@ const PermitConditions: FC<PermitConditionProps> = ({
                                 permitAmendmentGuid={latestAmendment.permit_amendment_guid}
                                 handleCancel={() => setAddingToCategoryCode(null)}
                                 onSubmit={handleAddCondition}
-                              />
-                            </Col>
-                          )}
+                                categoryOptions={dropdownCategories}
+                              /></Col>)}
                           {conditionsWithRequirements?.length > 0 && (
                             <div className="report-collapse-container ">
                               <Title level={4} className="primary-colour">