Merge branch 'ramps-583-implement-relative-order-column-in-allocations_process_resources' into ramps-100-variable-marketplace

merge ramps-583 to ramps-100-variable-marketplace

Author: asimregmi

src/edit-resource/AllocationTypesGrid.jsx

@@ -23,10 +23,10 @@ export const AllocationGrid = React.memo(function AllocationGrid({
         </div>
       </div>
       <Grid
-        classes={style["no-scroll-grid"]}
         columns={columns}
         rows={rows}
         rowClasses={Array(rows.length).fill(style["vertical-align-center"])}
+        scroll={false}
       />
     </div>
   );

src/edit-resource/AllocationTypesGrid.module.scss

@@ -10,11 +10,6 @@
   gap: 1rem; /* Space between the buttons */
 }
 
-.no-scroll-grid {
-  overflow: auto; //hidden for no-scroll
-  height: auto;
-}
-
 .allocation-types-grid {
   margin-bottom: 0.8rem;
   margin-top: 0.8rem;

src/edit-resource/EditResource.jsx

@@ -26,6 +26,7 @@ export default function EditResource({
   );
   const { resourceData, loading, errors, successMessage } = state;
   const resourceDetails = resourceData?.resource_details;
+  const usesExchangeRates = resourceData?.uses_exchange_rates;
 
   const {
     allowedActionsOptions,
@@ -51,8 +52,12 @@ export default function EditResource({
     handleRequiredResourceChange,
   } = useAllocationGrid(resourceData, resourceDetails, dispatch);
 
-  const { exchangeRateColumns, exchangeRateRows, handleAddDiscountRate } =
-    useExchangeRates(resourceData, dispatch);
+  const {
+    exchangeRateColumns,
+    exchangeRateRows,
+    handleAddDiscountRate,
+    dateErrors,
+  } = useExchangeRates(resourceData, dispatch);
 
   const handleSubmit = useResourceSubmit(
     resourceDetails,
@@ -65,10 +70,12 @@ export default function EditResource({
 
   // Expose handleSubmit to external Rails template script
   useEffect(() => {
-    if (setExternalSubmit) {
+    if (setExternalSubmit && dateErrors.length == 0) {
       setExternalSubmit(handleSubmit);
+    } else {
+      setExternalSubmit(null);
     }
-  }, [handleSubmit, setExternalSubmit]);
+  }, [handleSubmit, setExternalSubmit, dateErrors]);
 
   const { allocationColumns, allocationRows } = useAllocationRowsAndColumns(
     resourceDetails,
@@ -169,11 +176,14 @@ export default function EditResource({
         />
       </AddNewModal>
 
-      <ExchangeRates
-        columns={exchangeRateColumns}
-        rows={exchangeRateRows}
-        onAddDiscountRate={handleAddDiscountRate}
-      />
+      {usesExchangeRates && (
+        <ExchangeRates
+          columns={exchangeRateColumns}
+          rows={exchangeRateRows}
+          onAddDiscountRate={handleAddDiscountRate}
+          dateErrors={dateErrors}
+        />
+      )}
     </div>
   );
 }

src/edit-resource/ExchangeRates.jsx

@@ -7,6 +7,7 @@ export const ExchangeRates = React.memo(function ExchangeRatesGrid({
   columns,
   rows,
   onAddDiscountRate,
+  dateErrors = [],
 }) {
   return (
     <div className={style["exchange-rates-grid"]}>
@@ -19,11 +20,21 @@ export const ExchangeRates = React.memo(function ExchangeRatesGrid({
         </div>
       </div>
       <Grid
-        classes={style["no-scroll-grid"]}
         columns={columns}
         rows={rows}
         rowClasses={Array(rows.length).fill(style["vertical-align-center"])}
+        scroll={false}
       />
+      {/* Error Summary */}
+      {dateErrors.length > 0 && (
+        <div className={style["error-summary"]}>
+          <ul>
+            {dateErrors.map((error, index) => (
+              <li key={index}>{error}</li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 });
@@ -32,4 +43,5 @@ ExchangeRates.propTypes = {
   columns: PropTypes.array.isRequired,
   rows: PropTypes.array.isRequired,
   onAddDiscountRate: PropTypes.func.isRequired,
+  dateErrors: PropTypes.array,
 };

src/edit-resource/ExchangeRatesGrid.module.scss

@@ -1,5 +1,6 @@
 .exchange-rates-grid {
-  margin: 2rem 0;
+  margin: 0.8rem 0;
+  border: 0;
 
   .header-container {
     display: flex;
@@ -8,11 +9,6 @@
     margin-bottom: 1rem;
   }
 
-  .header-title {
-    font-size: 1.25rem;
-    margin: 0;
-  }
-
   .header-buttons {
     display: flex;
     gap: 1rem;
@@ -30,17 +26,6 @@
     }
   }
 
-  // Prevent horizontal scrolling when not needed
-  .no-scroll-grid {
-    :global(.table) {
-      margin-bottom: 0;
-    }
-
-    tbody tr:last-child td {
-      border-bottom: 1px solid #dee2e6;
-    }
-  }
-
   // Style inputs within the grid
   :global {
     .form-control {
@@ -62,3 +47,21 @@
     }
   }
 }
+
+.error-summary {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+  border-radius: 4px;
+
+  ul {
+    margin: 0;
+    padding-left: 1.5rem;
+  }
+
+  li {
+    margin-bottom: 0.25rem;
+  }
+}

src/edit-resource/helpers/hooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useReducer, useState } from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 import { resources } from "./reducers";
 import {
   setLoading,
@@ -54,45 +54,30 @@ export const useResourceData = (resourceId, relativeUrlRoot) => {
 
 export const useResourceOptions = (resourceData) => {
   return {
-    allowedActionsOptions: useMemo(
-      () =>
-        resourceData?.resource_state_types_available?.map((state) => ({
-          value: state.resource_state_type_id,
-          label: state.display_resource_state_type,
-          additionalInfo: state.action_types
-            .map((action) => action.display_action_type)
-            .join(", "), // Pass action_types as additionalInfo Prop
-        })) || [],
-      [resourceData]
-    ),
-
-    resourceTypesOptions: useMemo(
-      () =>
-        resourceData?.resource_types_available?.map((type) => ({
-          value: type.resource_type_id,
-          label: type.display_resource_type,
-        })) || [],
-      [resourceData]
-    ),
-
-    unitTypesOptions: useMemo(
-      () =>
-        resourceData?.unit_types_available?.map((type) => ({
-          value: type.unit_type_id,
-          label: type.display_unit_type,
-        })) || [],
-      [resourceData]
-    ),
-
-    availableResources: useMemo(
-      () => resourceData?.required_resources_available || [],
-      [resourceData]
-    ),
-
-    availableAllocationTypes: useMemo(
-      () => resourceData?.unassigned_allocation_types || [],
-      [resourceData]
-    ),
+    allowedActionsOptions:
+      resourceData?.resource_state_types_available?.map((state) => ({
+        value: state.resource_state_type_id,
+        label: state.display_resource_state_type,
+        additionalInfo: state.action_types
+          .map((action) => action.display_action_type)
+          .join(", "),
+      })) || [],
+
+    resourceTypesOptions:
+      resourceData?.resource_types_available?.map((type) => ({
+        value: type.resource_type_id,
+        label: type.display_resource_type,
+      })) || [],
+
+    unitTypesOptions:
+      resourceData?.unit_types_available?.map((type) => ({
+        value: type.unit_type_id,
+        label: type.display_unit_type,
+      })) || [],
+
+    availableResources: resourceData?.required_resources_available || [],
+
+    availableAllocationTypes: resourceData?.unassigned_allocation_types || [],
   };
 };
 
@@ -105,7 +90,7 @@ export const useAllocationRowsAndColumns = (
   handleCommentChange,
   handleRequiredResourceChange
 ) => {
-  const requiredResourcesColumns = useMemo(() => {
+  const requiredResourcesColumns = () => {
     if (!resourceDetails) return [];
 
     const requiredResources = new Set();
@@ -119,36 +104,34 @@ export const useAllocationRowsAndColumns = (
       .sort((a, b) => a.localeCompare(b))
       .map((resourceName) => ({
         key: resourceName,
-        name: resourceName,
+        name: `Require ${resourceName}`,
         width: 150,
         type: "checkbox",
       }));
-  }, [resourceDetails]);
-
-  const allocationColumns = useMemo(
-    () => [
-      { key: "display_name", name: "Allocation Type", width: 200 },
-      {
-        key: "allowed_actions",
-        name: "Allowed Actions",
-        width: 200,
-        type: "select",
-        tooltip: "Tooltip text",
-      },
-      {
-        key: "comment",
-        name: "Descriptive Text",
-        width: 200,
-        type: "input",
-        tooltip:
-          "Appears below the resource name and allocations description in the form when making a new request",
-      },
-      ...requiredResourcesColumns,
-    ],
-    [requiredResourcesColumns]
-  );
+  };
+
+  const generatedColumns = requiredResourcesColumns();
 
-  const allocationRows = useMemo(() => {
+  const allocationColumns = [
+    { key: "display_name", name: "Allocation Type", width: 200 },
+    {
+      key: "allowed_actions",
+      name: "Allowed Actions",
+      width: 200,
+      type: "select",
+    },
+    {
+      key: "comment",
+      name: "Descriptive Text",
+      width: 200,
+      type: "input",
+      tooltip:
+        "Appears below the resource name and allocations description in the form when making a new request",
+    },
+    ...generatedColumns,
+  ];
+
+  const allocationRows = () => {
     if (!resourceDetails?.allocation_types) return [];
 
     return resourceDetails.allocation_types.map((type) => ({
@@ -166,7 +149,7 @@ export const useAllocationRowsAndColumns = (
           handleCommentChange(type.allocation_type_id, newValue),
       },
       ...Object.fromEntries(
-        requiredResourcesColumns.map((column) => [
+        generatedColumns.map((column) => [
           column.key,
           {
             checked:
@@ -184,16 +167,13 @@ export const useAllocationRowsAndColumns = (
         ])
       ),
     }));
-  }, [
-    resourceDetails,
-    allowedActionsOptions,
-    requiredResourcesColumns,
-    handleAllowedActionChange,
-    handleCommentChange,
-    handleRequiredResourceChange,
-  ]);
+  };
 
-  return { allocationColumns, allocationRows, requiredResourcesColumns };
+  return {
+    allocationColumns,
+    allocationRows: allocationRows(),
+    requiredResourcesColumns: generatedColumns,
+  };
 };
 
 export const useAllocationGrid = (resourceData, resourceDetails, dispatch) => {