#1203 - named entities to support select control operations

package.json

@@ -36,7 +36,7 @@
     "material-table": "1.43.0",
     "moment": "^2.22.2",
     "openchs-idi": "git+https://github.com/avniproject/openchs-idi#b6c57e051b91ed4bc2634f4f087dba51cc3a01c8",
-    "openchs-models": "1.31.70",
+    "openchs-models": "1.31.73",
     "popper.js": "^1.14.3",
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",

src/common/components/SubjectTypeSelect.js

@@ -1,46 +1,31 @@
 import { AvniFormLabel } from "./AvniFormLabel";
 import Select from "react-select";
 import React, { useEffect, useState } from "react";
-import _ from "lodash";
 import httpClient from "../utils/httpClient";
-
-function getSelectedValue(options, selectedEntities, isMulti) {
-  const selected = _.intersectionWith(options, selectedEntities, (a, b) => {
-    return a.value.uuid === b.uuid;
-  });
-  if (isMulti) {
-    return selected.length === 1 ? selected[0] : null;
-  }
-  return selected;
-}
-
-function getSelected(selectedValue, isMulti) {
-  return isMulti ? selectedValue : selectedValue[0];
-}
+import NamedEntities from "../model/NamedEntities";
 
 export function SubjectTypeSelect({ isMulti }) {
-  const [subjectTypes, setSubjectTypes] = useState([]);
-  const [selectedSubjectTypes, setSelectedSubjectTypes] = useState(isMulti ? [] : null);
+  const [subjectTypes, setSubjectTypes] = useState(NamedEntities.createEmpty());
 
   useEffect(() => {
     httpClient.getAllData("subjectType", "/web/subjectType").then(response => {
-      setSubjectTypes(
-        response.map(subjectType => {
-          return { label: subjectType.name, value: subjectType };
-        })
-      );
+      setSubjectTypes(NamedEntities.fromResources(response));
     });
   }, []);
 
+  const options = subjectTypes.getOptions();
   return (
     <div style={{ width: 400 }}>
       <AvniFormLabel label={"Subject type"} position={"top"} />
       <Select
         isMulti={isMulti}
         placeholder={"Select subject type"}
-        value={getSelectedValue(subjectTypes, selectedSubjectTypes, isMulti)}
-        options={subjectTypes}
-        onChange={e => setSelectedSubjectTypes(getSelected(e.value, isMulti))}
+        value={subjectTypes.getSelected(isMulti)}
+        options={options}
+        onChange={e => {
+          subjectTypes.toggle(e.value, isMulti);
+          setSubjectTypes(subjectTypes.clone());
+        }}
         maxMenuHeight={200}
       />
     </div>

src/common/model/NamedEntities.js

@@ -0,0 +1,58 @@
+import _ from "lodash";
+
+function valueMapper(x) {
+  return x.uuid;
+}
+
+function labelValueMapper(x) {
+  return { label: x.name, value: valueMapper(x) };
+}
+
+class NamedEntities {
+  entities;
+  selectedEntities;
+
+  static createEmpty() {
+    const namedEntities = new NamedEntities();
+    namedEntities.entities = [];
+    namedEntities.selectedEntities = [];
+    return namedEntities;
+  }
+
+  static fromResources(resources) {
+    const namedEntities = new NamedEntities();
+    namedEntities.entities = resources;
+    namedEntities.selectedEntities = [];
+    return namedEntities;
+  }
+
+  toggle(value, isMulti = false) {
+    const removedEntities = _.remove(this.selectedEntities, _.some(this.selectedEntities, x => valueMapper(x) === value));
+    const toggleEntity = _.find(this.entities, x => valueMapper(x) === value);
+    if (isMulti && removedEntities.length === 0) this.selectedEntities.push(toggleEntity);
+    else if (!isMulti) this.selectedEntities = [toggleEntity];
+  }
+
+  clone() {
+    const namedEntities = new NamedEntities();
+    namedEntities.entities = this.entities;
+    namedEntities.selectedEntities = [...this.selectedEntities];
+    return namedEntities;
+  }
+
+  getSelected(isMulti = false) {
+    if (isMulti) {
+      return this.selectedEntities.map(labelValueMapper);
+    } else if (this.selectedEntities.length === 0) {
+      return null;
+    } else {
+      return labelValueMapper(this.selectedEntities[0]);
+    }
+  }
+
+  getOptions() {
+    return this.entities.map(labelValueMapper);
+  }
+}
+
+export default NamedEntities;

src/formDesigner/common/ResourceListView.js

@@ -69,6 +69,7 @@ const ResourceListView = ({ history, title, resourceName, resourceURLName, colum
               rowStyle: rowData => ({
                 backgroundColor: rowData["voided"] ? "#DBDBDB" : "#fff"
               }),
+              pageSizeOptions: [10, 25, 100],
               pageSize: 10
             }}
             actions={UserInfo.hasPrivilege(userInfo, editPrivilegeType) && [editResource, voidResource]}

src/formDesigner/components/ReportCard/CreateEditReportCard.js

@@ -110,6 +110,8 @@ export const CreateEditReportCard = ({ edit, ...props }) => {
     dispatch({ type: type, payload: event.target.value });
   };
 
+  const standardReportCardTypeName = get(card, "standardReportCardType.name") || "";
+
   return (
     <Box boxShadow={2} p={3} bgcolor="background.paper">
       <Title title={"Create offline Card"} />
@@ -211,7 +213,7 @@ export const CreateEditReportCard = ({ edit, ...props }) => {
         {isStandardReportCard && (
           <AvniSelect
             label={`Select standard card type ${isStandardReportCard ? "*" : ""}`}
-            value={get(card, "standardReportCardType.name")}
+            value={standardReportCardTypeName}
             onChange={event => {
               dispatch({ type: "standardReportCardType", payload: standardReportCardTypes.find(x => event.target.value === x.name) });
             }}