Merge pull request #537 from fahad-aot/bugfix/fwf-sort-modal-fixes

bugfix/fwf-4453:sortmodal and drag and drop fixes

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/DragandDropSort.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect ,useRef} from "react";
 import { FormVariableIcon, DraggableIcon } from "../SvgIcons/index";
 import { StyleServices } from "@formsflow/service";
 
@@ -18,7 +18,7 @@ interface DragAndDropFilterProps {
 export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({ items, onUpdate }) => {
 
   const darkColor = StyleServices.getCSSVariable('--ff-gray-darkest');
-  
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const [filterItems, setFilterItems] = useState<FilterItem[]>(items);
   const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
 
@@ -34,6 +34,20 @@ export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({ items, onUpd
 
   const onDragOver = (e: React.DragEvent<HTMLLIElement>) => {
     e.preventDefault();
+    const container = containerRef.current;
+    if (!container) return;
+  
+    const bounding = container.getBoundingClientRect();
+    const offset = 40; 
+    const scrollSpeed = 5; //scroll speed  can be adjusted here
+  
+    if (e.clientY < bounding.top + offset) {
+      // scroll up
+      container.scrollTop -= scrollSpeed;
+    } else if (e.clientY > bounding.bottom - offset) {
+      // scroll down
+      container.scrollTop += scrollSpeed;
+    }
   };
 
 
@@ -72,7 +86,7 @@ export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({ items, onUpd
   };
 
   return (
-    <div className="drag-drop-container">
+    <div className="drag-drop-container" ref={containerRef}>
       <ul>
         {filterItems.map((item, index) => (
           <li

forms-flow-components/src/components/CustomComponents/SortModal.tsx

@@ -64,6 +64,11 @@ export const SortModal: React.FC<SortModalProps> = React.memo(
       }
     }, [showSortModal, defaultSortOption, defaultSortOrder]);
 
+    const isPrimaryButtonDisabled =
+      !selectedOption ||
+      !selectedOrder ||
+      (selectedOption === defaultSortOption &&
+        selectedOrder === defaultSortOrder);
     return (
       <Modal show={showSortModal} onHide={onClose} size="sm" centered={true}>
         <Modal.Header>
@@ -119,7 +124,7 @@ export const SortModal: React.FC<SortModalProps> = React.memo(
           <CustomButton
             variant="primary"
             size="md"
-            disabled={!selectedOption || !selectedOrder}
+            disabled={isPrimaryButtonDisabled}
             label={t(primaryBtnLabel)}
             onClick={handlePrimaryAction}
             name="applyButton"

forms-flow-service/src/helpers/helperServices.ts

@@ -84,6 +84,13 @@ class HelperServices {
       exactRouteMatches.some((route) => location == route) || 
       partOfRouteMatches.some((route) => location.includes(route))
     );
+  } 
+
+  public static getResetSortOrders(options){
+    return options.reduce((acc, option) => {
+      acc[option.value] = {sortOrder:"asc"} // Reset all to ascending
+      return acc;
+    }, {});
   }
 }
 

forms-flow-theme/scss/_modal.scss

@@ -1005,7 +1005,7 @@ $black-color: var(--ff-black);
     align-items: center;
     gap: var(--spacer-100);
     border-radius: var(--radius-sm);
-    padding-top: var(--spacer-150);
+    padding: var(--spacer-075) 0px;
     transition: 
       transform 1s cubic-bezier(0.25, 1, 0.5, 1), 
       background-color 1s ease-in-out, 
@@ -1034,9 +1034,10 @@ $black-color: var(--ff-black);
 
     &.dragging {
       background-color: $gray-medium;
+      padding-right: 3px;
       opacity: 1;
       z-index: 1000;
-      transform: scale(1.03); 
+      transform: scale(0.98); 
     }
     .checkbox-container{
       display: flex;