Merge pull request #218 from Meowmerry/RequestFixed_OctV1

derekjkeller · web-flow · commit 88eb84333b22 · 2025-10-09T10:44:54.000-05:00
Request fixed oct v1
diff --git a/src/components/FilterComponents/RangeSlider/RangeSliderComponent.tsx b/src/components/FilterComponents/RangeSlider/RangeSliderComponent.tsx
@@ -36,7 +36,6 @@ interface RangeSliderProps {
   maxRange: number
 }
 const RangeSlider:FunctionComponent<RangeSliderProps> = ({
-  handleSliderChangeMouseUp,
   setCurrentSliderValue,
   currentSliderValue,
   minRange:min,
@@ -72,6 +71,7 @@ const RangeSlider:FunctionComponent<RangeSliderProps> = ({
   }, [varName, newFilters]);
 
   const fetchRangeSliderData = useCallback(async () => {
+
     try {
       let response;
       if (checkPagesRouteForVoyages(styleName!)) {
@@ -122,23 +122,19 @@ const RangeSlider:FunctionComponent<RangeSliderProps> = ({
 
     const rangSliderLocal: number[] = filterByVarName.searchTerm as number[];
 
-    const initialValue: number[] = rangSliderLocal;
+    // ✅  Convert back to percentage for display if isPercent is true
+    const initialValue: number[] = isPercent 
+      ? rangSliderLocal.map(v => v * 100)  // Convert 0-1 to 0-100
+      : rangSliderLocal;
+   
     setCurrentSliderValue(initialValue);
     dispatch(setFilterObject(filter));
-  }, [varName, styleName, dispatch, fetchRangeSliderData,setCurrentSliderValue]);
+  }, [varName, styleName, dispatch, fetchRangeSliderData, setCurrentSliderValue, isPercent]);
 
 
   return (
     <Grid
       className="autocomplete-modal-box"
-      // style={{
-      //   width: 450,
-      //   marginTop: 10,
-      //   display: 'flex',
-      //   flexDirection: 'column',
-      //   gap: 12,
-      //   alignItems: 'center',
-      // }}
     >
       <div
         style={{
diff --git a/src/components/SelectorComponents/Cascading/MenuListsDropdown.tsx b/src/components/SelectorComponents/Cascading/MenuListsDropdown.tsx
@@ -129,6 +129,7 @@ export const MenuListsDropdown = () => {
     opsRoles,
     rangeSliderMinMax,
     rangeValue,
+    isPercent,
   } = useSelector(
     (state: RootState) => state.rangeSlider as FilterObjectsState,
   );
@@ -226,8 +227,13 @@ export const MenuListsDropdown = () => {
     event: MouseEvent<HTMLLIElement> | MouseEvent<HTMLDivElement>,
     ops: string[],
     roles?: RolesProps[],
+    isPercentParam?: boolean,
   ) => {
-    const { value, type, label, percent } = event.currentTarget.dataset;
+    const { value, type, label } = event.currentTarget.dataset;
+    const isPercent =
+      value?.includes('percentage') ||
+      value?.includes('_ratio') ||
+      isPercentParam;
     event.stopPropagation();
     setIsClickMenu(!isClickMenu);
     let opsValue = '';
@@ -237,8 +243,8 @@ export const MenuListsDropdown = () => {
       } else {
         dispatch(setKeyValueName(value));
       }
-      if (percent) {
-        dispatch(setIsPercent(Boolean(percent)));
+      if (isPercent) {
+        dispatch(setIsPercent(Boolean(isPercent)));
       } else {
         dispatch(setIsPercent(false));
       }
@@ -456,12 +462,18 @@ export const MenuListsDropdown = () => {
       (filter) => filter.varName === varName,
     );
     if (existingFilterIndex !== -1) {
-      existingFilters[existingFilterIndex].searchTerm = updateValue as number[];
+      existingFilters[existingFilterIndex].searchTerm = isPercent
+        ? updateValue.map((v) => v / 100)
+        : updateValue;
       existingFilters[existingFilterIndex].op = opsRoles!;
     } else {
+      const normalizedValue = isPercent
+        ? updateValue.map((v) => v / 100)
+        : updateValue;
+
       const newFilter: Filter = {
         varName: varName,
-        searchTerm: updateValue!,
+        searchTerm: normalizedValue,
         op: opsRoles!,
         label: labelVarName,
       };
@@ -525,7 +537,8 @@ export const MenuListsDropdown = () => {
     if (Array.isArray(nodes!)) {
       return nodes.map((node: FilterMenu | ChildrenFilter, index: number) => {
         const { children, var_name, type, label: nodeLabel, ops, roles } = node;
-        const isPercent = var_name?.includes('percentage');
+        const isPercent =
+          var_name?.includes('percentage') || var_name?.includes('_ratio');
         const hasChildren = children && children.length >= 1;
         const menuLabel = (nodeLabel as LabelFilterMeneList)[languageValue];
         const uniqueKey = `${menuLabel} - ${index}`;
@@ -549,18 +562,19 @@ export const MenuListsDropdown = () => {
             children: renderDropdownMenu(children),
             onClick: (
               event: MouseEvent<HTMLLIElement> | MouseEvent<HTMLDivElement>,
-            ) => handleClickMenu(event, ops!, roles!),
+            ) => handleClickMenu(event, ops!, roles!, isPercent!),
           };
         }
 
         return {
           key: uniqueKey,
           label: menuLabel,
-          onClick: (event: any) => handleClickMenu(event, ops!, roles!),
+          onClick: (event: any) =>
+            handleClickMenu(event, ops!, roles!, isPercent!),
           'data-value': var_name,
           'data-type': type,
           'data-label': menuLabel,
-          'data-percent': isPercent,
+          'data-is-percent': isPercent,
         };
       });
     }
@@ -574,6 +588,8 @@ export const MenuListsDropdown = () => {
       const { children, var_name, type, label: nodeLabel, ops, roles } = node;
       const menuLabel = (nodeLabel as LabelFilterMeneList)[languageValue];
       const hasChildren = children && children.length >= 1;
+      const isPercent =
+        var_name?.includes('percentage') || var_name?.includes('_ratio');
 
       if (hasChildren) {
         return {
@@ -595,11 +611,12 @@ export const MenuListsDropdown = () => {
                 value: var_name,
                 type: type,
                 label: menuLabel,
+                isPercent: String(isPercent),
               },
             },
             stopPropagation: () => {},
           } as any;
-          handleClickMenu(mockEvent, ops!, roles!);
+          handleClickMenu(mockEvent, ops!, roles!, isPercent);
         },
       };
     });
@@ -771,58 +788,64 @@ export const MenuListsDropdown = () => {
   // Render desktop filter buttons
   const renderDesktopFilterButtons = () => (
     <div className="filter-menu-bar">
-      {filterMenu.map((item: FilterMenuList, index: number) => {
-        const { var_name, label, type, ops } = item;
-        const itemLabel = (label as LabelFilterMeneList)[languageValue];
-        return var_name ? (
-          <Button
-            key={`${itemLabel} - ${index}`}
-            data-value={var_name}
-            data-type={type}
-            data-label={itemLabel}
-            onClick={(event: any) => handleClickMenu(event, ops!)}
-            style={baseFilterButtonStyle}
-          >
-            <Tooltip
-              placement="top"
-              title={`Filter by ${itemLabel}`}
-              color="rgba(0, 0, 0, 0.75)"
+      {filterMenu.map(
+        (item: FilterMenuList | ChildrenFilter, index: number) => {
+          const { var_name, label, type, ops, roles } = item;
+          const isPercent =
+            var_name?.includes('percentage') || var_name?.includes('_ratio');
+          const itemLabel = (label as LabelFilterMeneList)[languageValue];
+          return var_name ? (
+            <Button
+              key={`${itemLabel} - ${index}`}
+              data-value={var_name}
+              data-type={type}
+              data-label={itemLabel}
+              onClick={(event: any) =>
+                handleClickMenu(event, ops!, roles!, isPercent)
+              }
+              style={baseFilterButtonStyle}
             >
-              {itemLabel}
-            </Tooltip>
-          </Button>
-        ) : (
-          <DropdownCascading
-            key={`${itemLabel} - ${index}`}
-            trigger={
-              <Button style={baseFilterButtonStyle}>
-                <Tooltip
-                  placement="top"
-                  title={`Filter by ${itemLabel}`}
-                  color="rgba(0, 0, 0, 0.75)"
-                >
-                  {itemLabel}
-                </Tooltip>
-                <span style={{ marginTop: 4 }}>
-                  <CaretRightOutlined
-                    style={{
-                      display: isMobile ? 'inline' : 'none',
-                      fontSize: 14,
-                    }}
-                  />
-                  <CaretDownOutlined
-                    style={{
-                      display: isMobile ? 'none' : 'inline',
-                      fontSize: 16,
-                    }}
-                  />
-                </span>
-              </Button>
-            }
-            menu={renderDropdownMenu(item.children!)}
-          />
-        );
-      })}
+              <Tooltip
+                placement="top"
+                title={`Filter by ${itemLabel}`}
+                color="rgba(0, 0, 0, 0.75)"
+              >
+                {itemLabel}
+              </Tooltip>
+            </Button>
+          ) : (
+            <DropdownCascading
+              key={`${itemLabel} - ${index}`}
+              trigger={
+                <Button style={baseFilterButtonStyle}>
+                  <Tooltip
+                    placement="top"
+                    title={`Filter by ${itemLabel}`}
+                    color="rgba(0, 0, 0, 0.75)"
+                  >
+                    {itemLabel}
+                  </Tooltip>
+                  <span style={{ marginTop: 4 }}>
+                    <CaretRightOutlined
+                      style={{
+                        display: isMobile ? 'inline' : 'none',
+                        fontSize: 14,
+                      }}
+                    />
+                    <CaretDownOutlined
+                      style={{
+                        display: isMobile ? 'none' : 'inline',
+                        fontSize: 16,
+                      }}
+                    />
+                  </span>
+                </Button>
+              }
+              menu={renderDropdownMenu(item.children!)}
+            />
+          );
+        },
+      )}
     </div>
   );
 
diff --git a/src/components/SelectorComponents/DropDown/MenuDropdown.tsx b/src/components/SelectorComponents/DropDown/MenuDropdown.tsx
@@ -24,11 +24,11 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ open }) => {
   const { languageValue: language } = useSelector(
     (state: RootState) => state.getLanguages,
   );
+
   useEffect(() => {
     const maxLength = Math.max(
       ...menuLists.map((list) => list.name[language].length),
     );
-
     setMaxTextLength(maxLength * 5);
   }, [language]);
 
@@ -52,6 +52,28 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ open }) => {
     );
   };
 
+  // ✅ Helper function to render link (internal or external)
+  const renderLink = (url: string, text: string, isExternal?: boolean) => {
+    if (isExternal) {
+      return (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          <ListItemText primary={text} />
+        </a>
+      );
+    }
+
+    return (
+      <Link to={url.startsWith('/') ? url : `/${url}`}>
+        <ListItemText primary={text} />
+      </Link>
+    );
+  };
+
   return (
     <StyledMenu open={open} underlineWidth={maxTextLength}>
       <List
@@ -76,15 +98,16 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ open }) => {
                   cursor: 'pointer',
                 }}
               >
+                {/* ✅ Handle main menu links */}
                 {item.url ? (
-                  <Link to={`/${item.url}`}>
-                    <ListItemText primary={item.name[language]} />
-                  </Link>
+                  renderLink(item.url, item.name[language], item.isExternal)
                 ) : (
                   <ListItemText primary={item.name[language]} />
                 )}
                 {item.submenu ? displayIcon(item.name[language]) : null}
               </ListItemButton>
+
+              {/* ✅ Handle submenu links */}
               {item.submenu &&
                 expandedMenus[item.name[language]] &&
                 item.submenu.map((submenuItem) => (
@@ -103,17 +126,36 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ open }) => {
                       }}
                     >
                       <ListItemButton style={{ padding: 0 }}>
-                        <Link to={`${submenuItem.url}`}>
-                          <ListItemText
-                            primary={submenuItem.name[language]}
-                            style={{
-                              paddingLeft: 20,
-                              marginTop: 0,
-                              marginBottom: 0,
-                              cursor: 'pointer',
-                            }}
-                          />
-                        </Link>
+                        {submenuItem.isExternal ? (
+                          <a
+                            href={submenuItem.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{ textDecoration: 'none', color: 'inherit' }}
+                          >
+                            <ListItemText
+                              primary={submenuItem.name[language]}
+                              style={{
+                                paddingLeft: 20,
+                                marginTop: 0,
+                                marginBottom: 0,
+                                cursor: 'pointer',
+                              }}
+                            />
+                          </a>
+                        ) : (
+                          <Link to={`${submenuItem.url}`}>
+                            <ListItemText
+                              primary={submenuItem.name[language]}
+                              style={{
+                                paddingLeft: 20,
+                                marginTop: 0,
+                                marginBottom: 0,
+                                cursor: 'pointer',
+                              }}
+                            />
+                          </Link>
+                        )}
                       </ListItemButton>
                     </List>
                   </Collapse>
diff --git a/src/share/InterfaceTypes.ts b/src/share/InterfaceTypes.ts
@@ -566,6 +566,7 @@ export interface HeaderLabel {
 export interface MenuListsProps {
   name: LabelFilterMeneList;
   url?: string;
+  isExternal?: boolean;
   submenu?: MenuListsProps[];
 }
 
@@ -675,6 +676,7 @@ export interface FilterMenuList {
   var_name?: string;
   type?: string;
   ops?: string[];
+  roles?: RolesProps[];
   children?: ChildrenFilter[];
 }
 export interface LabelFilterMeneList {
diff --git a/src/utils/functions/menuListHome.ts b/src/utils/functions/menuListHome.ts

Original file line number	Diff line number	Diff line change
`@@ -566,6 +566,7 @@ export interface HeaderLabel {`
`566`	`566`	`export interface MenuListsProps {`
`567`	`567`	`name: LabelFilterMeneList;`
`568`	`568`	`url?: string;`
	`569`	`+ isExternal?: boolean;`
`569`	`570`	`submenu?: MenuListsProps[];`
`570`	`571`	`}`
`571`	`572`
`@@ -675,6 +676,7 @@ export interface FilterMenuList {`
`675`	`676`	`var_name?: string;`
`676`	`677`	`type?: string;`
`677`	`678`	`ops?: string[];`
	`679`	`+ roles?: RolesProps[];`
`678`	`680`	`children?: ChildrenFilter[];`
`679`	`681`	`}`
`680`	`682`	`export interface LabelFilterMeneList {`