ui-soxo-bootstrap-core 2.4.25-dev.41 → 2.4.25-dev.46

package/core/lib/elements/basic/reference-select/reference-select.js

@@ -1,337 +1,337 @@
-/**
- *
- * Generic Form create accepts an array of fields to update any resource
- */
-
-import React, { useState, useEffect } from 'react';
-
-import { Select } from 'antd';
-
-import { BaseLoader } from '../../..';
-
-const { Option } = Select;
-
-// #TODO
-/**
- * Below is the plan for clearing the pending list
- *
- * nura single needs to be removed ,
- *
- * as it has no dependency , Passing path should be a feature of both firebase and SQL Implementation
- * Or the component should accept model
- *
- *
- */
-
-/**
- * Component for selecting head
- *
- * @param {*} param0
- * @returns
- */
-function ReferenceSelect({
-  model,
-  path = '',
-  config,
-  value,
-  queries = [],
-  onChange,
-  label = 'name',
-  mode = '',
-  field = 'id',
-  allowClear,
-  sortKey, // Key for sorting
-  sortOrder = 'asc', // default to ascending,
-  ...componentProps
-}) {
-  let [options, setOptions] = useState([]);
-
-  useEffect(() => {
-    loadOptions();
-  }, []);
-
-  /**
-   * Conditionally sorts an array of objects based on a specified key and order.
-   *
-   * @param {Array} data - The array of objects to be sorted.
-   * @returns {Array} - The sorted array if sorting is enabled and data is an array; otherwise, returns the original data.
-   *
-   * Sorting behavior:
-   * - Only proceeds if `sortKey` is truthy and `data` is a valid array.
-   * - Sorts in ascending order by default; descending if `sortOrder` is `'desc'`.
-   * - Case-insensitive sorting using `String.prototype.localeCompare`.
-   *
-   * Assumptions:
-   * -  `sortKey`, `label`, and `sortOrder` are variables available in the enclosing scope.
-   */
-  function sortIfNeeded(data) {
-    if (!sortKey || !Array.isArray(data)) return data;
-
-    const key = sortKey;
-    const order = sortOrder === 'desc' ? -1 : 1;
-
-    return [...data].sort((a, b) => {
-      const aVal = a?.[key]?.toString().toLowerCase() || '';
-      const bVal = b?.[key]?.toString().toLowerCase() || '';
-      return aVal.localeCompare(bVal) * order;
-    });
-  }
-
-  /**
-   * Loads and sets options based on the current `mode`, fetching data via the `model` or `BaseLoader`.
-   * Handles optional sorting and applying a default value condition if specified.
-   */
-  function loadOptions() {
-    // Destructure defaultValueCondition from componentProps, with a fallback of null
-    const { defaultValueCondition = null } = componentProps;
-
-    // Case 1: 'nura-base' mode – used for general fetch via config
-    if (mode === 'nura-base') {
-      // Fetch data from model using config
-      model.get({ ...config }).then((response) => {
-        // Extract result from response or fallback to response directly
-        let data = response.result || response;
-
-        // Conditionally sort the data using external sortIfNeeded function
-        data = sortIfNeeded(data);
-
-        // Set the sorted (or original) data to options
-        setOptions(data);
-
-        // If a defaultValueCondition is defined and data is not empty, apply it
-        if (defaultValueCondition && data.length) {
-          triggerDefaultValue(data);
-        }
-      });
-
-      // Case 2: 'nura-single' mode – fetches based on 'queries'
-    } else if (mode === 'nura-single') {
-      // Fetch data from model with given queries
-      model.get(queries).then(({ result }) => {
-        // Sort the result if needed
-        const data = sortIfNeeded(result);
-
-        // Set the (possibly sorted) data to options
-        setOptions(data);
-      });
-
-      // Case 3: All other modes
-    } else {
-      // Determine fetcher: use BaseLoader if path is provided, otherwise use model
-      const fetcher = path ? new BaseLoader({ path }) : model;
-
-      // Fetch data using the selected fetcher
-      fetcher.get(queries).then((result) => {
-        // Extract data using fetcher's name property
-        let data = path ? result[fetcher.name] : result[model.name];
-
-        // Sort the data if sorting is enabled
-        data = sortIfNeeded(data);
-
-        // Set the sorted (or original) data to options
-        setOptions(data);
-      });
-    }
-  }
-
-  /**
-   *  Function defaults the value from the matching record
-   * @param {*} records
-   */
-  function triggerDefaultValue(records) {
-    const { defaultValueCondition = null } = componentProps;
-
-    let matching = defaultValueCondition(records);
-
-    if (matching) {
-      onChange(matching[field]);
-    }
-  }
-
-  let props = {};
-
-  if (mode == 'multiple') {
-    props.mode = mode;
-  }
-
-  return (
-    <div className="head-selector">
-      <Select
-        allowClear={allowClear}
-        showSearch // Enables the search functionality in the Select dropdown
-        filterOption={(input, option) => {
-          // Custom filtering function to match the search input with the options
-          const searchText = input.toLowerCase().trim(); // Converts the search input to lowercase and trims whitespace
-
-          const optionLabel = option.children?.toString().toLowerCase().trim(); // Converts the option label to lowercase and trims whitespace
-
-          return optionLabel.includes(searchText); // Checks if the option label includes the search text
-        }}
-        {...props}
-        style={{ width: '100%' }}
-        onChange={onChange}
-        value={value}
-        {...componentProps}
-      >
-        {options.map((option, key) => (
-          <Option key={key} value={option[field]} record={option}>
-            {option[label]}
-          </Option>
-        ))}
-      </Select>
-    </div>
-  );
-}
-
-export default ReferenceSelect;
-
-// import React, { useState } from "react";
-
-// import PropTypes from "prop-types";
-
-// import 'antd/dist/antd.css';
-
-// /**
-//  * A reference Select component.
-//  */
-// function ReferenceSelect({ options, onSelect, defaultValue }) {
-//   const [selectedValue, setSelectedValue] = useState(defaultValue);
-
-//   const handleChange = (event) => {
-//     const value = event.target.value;
-//     setSelectedValue(value);
-//     onSelect(value);
-//   };
-
-//     useEffect(() => {
-//         loadOptions()
-//     }, [])
-
-//     /**
-//      * Load the matching heads
-//      */
-//     function loadOptions() {
-
-//         const { defaultValueCondition = null } = componentProps
-
-//         // Mode to handle all cases of Nura/StopTB/Medicant
-//         if (mode === 'nura-base') {
-
-//             model.get({ ...config }).then((response) => {
-
-//                 // Since base class implementation , data is available under data.
-//                 if (response.result) {
-//                     setOptions(response.result);
-//                 } else {
-//                     setOptions(response)
-//                 }
-
-//                 // Default value
-//                 if (defaultValueCondition) {
-
-//                     // If the response
-//                     if (response.result.length) {
-
-//                         // Trigger the default value
-//                         triggerDefaultValue(response.result);
-//                     }
-
-//                     // #Temporary Handling
-//                     if (response.length) {
-
-//                         triggerDefaultValue(response);
-//                     }
-//                 }
-//             })
-
-//         } else if (mode === 'nura-single') {
-
-//             model.get(queries).then(({ result }) => {
-
-//                 setOptions(result);
-
-//             })
-
-//         } else {
-
-//             if (path) {
-
-//                 let dynamicModel = new BaseLoader({ path })
-
-//                 dynamicModel.get(queries).then((result) => {
-
-//                     setOptions(result[dynamicModel.name]);
-
-//                 })
-
-//             } else {
-
-//                 model.get(queries).then((result) => {
-
-//                     setOptions(result[model.name]);
-
-//                 })
-//             }
-//         }
-//     }
-
-//     /**
-//      * Function defaults the value from the matching record
-//      */
-//     function triggerDefaultValue(records) {
-
-//         const { defaultValueCondition = null } = componentProps
-
-//         let matching = defaultValueCondition(records);
-
-//         if (matching) {
-
-//             onChange(matching[field]);
-//         }
-//     }
-
-//     let props = {}
-
-//     if (mode == 'multiple') {
-//         props.mode = mode;
-//     }
-
-//     return (
-//         <div className="head-selector">
-//             <Select {...props} style={{ width: '100%' }} onChange={onChange} value={value} {...componentProps}>
-//                 {options.map((option, key) => (
-//                     <Option key={key} value={option[field]} record={option}>
-//                         {option[label]}
-//                     </Option>
-//                 ))}
-//             </Select>
-//         </div>
-//     );
-// }
-
-// ReferenceSelect.propTypes = {
-//   /**
-//    * An array of reference options for the Select component.
-//    */
-//   options: PropTypes.arrayOf(
-//     PropTypes.shape({
-//       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-//         .isRequired,
-//       label: PropTypes.string.isRequired,
-//     })
-//   ).isRequired,
-//   /**
-//    * A callback function that is called when a reference is selected.
-//    */
-//   onSelect: PropTypes.func.isRequired,
-//   /**
-//    * The default value for the Select component.
-//    */
-//   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-// };
-
-// ReferenceSelect.defaultProps = {
-//   defaultValue: "",
-// };
-
-// export default ReferenceSelect;
+/**
+ *
+ * Generic Form create accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Select } from 'antd';
+
+import { BaseLoader } from '../../..';
+
+const { Option } = Select;
+
+// #TODO
+/**
+ * Below is the plan for clearing the pending list
+ *
+ * nura single needs to be removed ,
+ *
+ * as it has no dependency , Passing path should be a feature of both firebase and SQL Implementation
+ * Or the component should accept model
+ *
+ *
+ */
+
+/**
+ * Component for selecting head
+ *
+ * @param {*} param0
+ * @returns
+ */
+function ReferenceSelect({
+  model,
+  path = '',
+  config,
+  value,
+  queries = [],
+  onChange,
+  label = 'name',
+  mode = '',
+  field = 'id',
+  allowClear,
+  sortKey, // Key for sorting
+  sortOrder = 'asc', // default to ascending,
+  ...componentProps
+}) {
+  let [options, setOptions] = useState([]);
+
+  useEffect(() => {
+    loadOptions();
+  }, []);
+
+  /**
+   * Conditionally sorts an array of objects based on a specified key and order.
+   *
+   * @param {Array} data - The array of objects to be sorted.
+   * @returns {Array} - The sorted array if sorting is enabled and data is an array; otherwise, returns the original data.
+   *
+   * Sorting behavior:
+   * - Only proceeds if `sortKey` is truthy and `data` is a valid array.
+   * - Sorts in ascending order by default; descending if `sortOrder` is `'desc'`.
+   * - Case-insensitive sorting using `String.prototype.localeCompare`.
+   *
+   * Assumptions:
+   * -  `sortKey`, `label`, and `sortOrder` are variables available in the enclosing scope.
+   */
+  function sortIfNeeded(data) {
+    if (!sortKey || !Array.isArray(data)) return data;
+
+    const key = sortKey;
+    const order = sortOrder === 'desc' ? -1 : 1;
+
+    return [...data].sort((a, b) => {
+      const aVal = a?.[key]?.toString().toLowerCase() || '';
+      const bVal = b?.[key]?.toString().toLowerCase() || '';
+      return aVal.localeCompare(bVal) * order;
+    });
+  }
+
+  /**
+   * Loads and sets options based on the current `mode`, fetching data via the `model` or `BaseLoader`.
+   * Handles optional sorting and applying a default value condition if specified.
+   */
+  function loadOptions() {
+    // Destructure defaultValueCondition from componentProps, with a fallback of null
+    const { defaultValueCondition = null } = componentProps;
+
+    // Case 1: 'nura-base' mode – used for general fetch via config
+    if (mode === 'nura-base') {
+      // Fetch data from model using config
+      model.get({ ...config }).then((response) => {
+        // Extract result from response or fallback to response directly
+        let data = response.result || response;
+
+        // Conditionally sort the data using external sortIfNeeded function
+        data = sortIfNeeded(data);
+
+        // Set the sorted (or original) data to options
+        setOptions(data);
+
+        // If a defaultValueCondition is defined and data is not empty, apply it
+        if (defaultValueCondition && data.length) {
+          triggerDefaultValue(data);
+        }
+      });
+
+      // Case 2: 'nura-single' mode – fetches based on 'queries'
+    } else if (mode === 'nura-single') {
+      // Fetch data from model with given queries
+      model.get(queries).then(({ result }) => {
+        // Sort the result if needed
+        const data = sortIfNeeded(result);
+
+        // Set the (possibly sorted) data to options
+        setOptions(data);
+      });
+
+      // Case 3: All other modes
+    } else {
+      // Determine fetcher: use BaseLoader if path is provided, otherwise use model
+      const fetcher = path ? new BaseLoader({ path }) : model;
+
+      // Fetch data using the selected fetcher
+      fetcher.get(queries).then((result) => {
+        // Extract data using fetcher's name property
+        let data = path ? result[fetcher.name] : result[model.name];
+
+        // Sort the data if sorting is enabled
+        data = sortIfNeeded(data);
+
+        // Set the sorted (or original) data to options
+        setOptions(data);
+      });
+    }
+  }
+
+  /**
+   *  Function defaults the value from the matching record
+   * @param {*} records
+   */
+  function triggerDefaultValue(records) {
+    const { defaultValueCondition = null } = componentProps;
+
+    let matching = defaultValueCondition(records);
+
+    if (matching) {
+      onChange(matching[field]);
+    }
+  }
+
+  let props = {};
+
+  if (mode == 'multiple') {
+    props.mode = mode;
+  }
+
+  return (
+    <div className="head-selector">
+      <Select
+        allowClear={allowClear}
+        showSearch // Enables the search functionality in the Select dropdown
+        filterOption={(input, option) => {
+          // Custom filtering function to match the search input with the options
+          const searchText = input.toLowerCase().trim(); // Converts the search input to lowercase and trims whitespace
+
+          const optionLabel = option.children?.toString().toLowerCase().trim(); // Converts the option label to lowercase and trims whitespace
+
+          return optionLabel.includes(searchText); // Checks if the option label includes the search text
+        }}
+        {...props}
+        style={{ width: '100%' }}
+        onChange={onChange}
+        value={value}
+        {...componentProps}
+      >
+        {options.map((option, key) => (
+          <Option key={key} value={option[field]} record={option}>
+            {option[label]}
+          </Option>
+        ))}
+      </Select>
+    </div>
+  );
+}
+
+export default ReferenceSelect;
+
+// import React, { useState } from "react";
+
+// import PropTypes from "prop-types";
+
+// import 'antd/dist/antd.css';
+
+// /**
+//  * A reference Select component.
+//  */
+// function ReferenceSelect({ options, onSelect, defaultValue }) {
+//   const [selectedValue, setSelectedValue] = useState(defaultValue);
+
+//   const handleChange = (event) => {
+//     const value = event.target.value;
+//     setSelectedValue(value);
+//     onSelect(value);
+//   };
+
+//     useEffect(() => {
+//         loadOptions()
+//     }, [])
+
+//     /**
+//      * Load the matching heads
+//      */
+//     function loadOptions() {
+
+//         const { defaultValueCondition = null } = componentProps
+
+//         // Mode to handle all cases of Nura/StopTB/Medicant
+//         if (mode === 'nura-base') {
+
+//             model.get({ ...config }).then((response) => {
+
+//                 // Since base class implementation , data is available under data.
+//                 if (response.result) {
+//                     setOptions(response.result);
+//                 } else {
+//                     setOptions(response)
+//                 }
+
+//                 // Default value
+//                 if (defaultValueCondition) {
+
+//                     // If the response
+//                     if (response.result.length) {
+
+//                         // Trigger the default value
+//                         triggerDefaultValue(response.result);
+//                     }
+
+//                     // #Temporary Handling
+//                     if (response.length) {
+
+//                         triggerDefaultValue(response);
+//                     }
+//                 }
+//             })
+
+//         } else if (mode === 'nura-single') {
+
+//             model.get(queries).then(({ result }) => {
+
+//                 setOptions(result);
+
+//             })
+
+//         } else {
+
+//             if (path) {
+
+//                 let dynamicModel = new BaseLoader({ path })
+
+//                 dynamicModel.get(queries).then((result) => {
+
+//                     setOptions(result[dynamicModel.name]);
+
+//                 })
+
+//             } else {
+
+//                 model.get(queries).then((result) => {
+
+//                     setOptions(result[model.name]);
+
+//                 })
+//             }
+//         }
+//     }
+
+//     /**
+//      * Function defaults the value from the matching record
+//      */
+//     function triggerDefaultValue(records) {
+
+//         const { defaultValueCondition = null } = componentProps
+
+//         let matching = defaultValueCondition(records);
+
+//         if (matching) {
+
+//             onChange(matching[field]);
+//         }
+//     }
+
+//     let props = {}
+
+//     if (mode == 'multiple') {
+//         props.mode = mode;
+//     }
+
+//     return (
+//         <div className="head-selector">
+//             <Select {...props} style={{ width: '100%' }} onChange={onChange} value={value} {...componentProps}>
+//                 {options.map((option, key) => (
+//                     <Option key={key} value={option[field]} record={option}>
+//                         {option[label]}
+//                     </Option>
+//                 ))}
+//             </Select>
+//         </div>
+//     );
+// }
+
+// ReferenceSelect.propTypes = {
+//   /**
+//    * An array of reference options for the Select component.
+//    */
+//   options: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+//         .isRequired,
+//       label: PropTypes.string.isRequired,
+//     })
+//   ).isRequired,
+//   /**
+//    * A callback function that is called when a reference is selected.
+//    */
+//   onSelect: PropTypes.func.isRequired,
+//   /**
+//    * The default value for the Select component.
+//    */
+//   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+// };
+
+// ReferenceSelect.defaultProps = {
+//   defaultValue: "",
+// };
+
+// export default ReferenceSelect;