Issue #631: fix sort component

smclab · Oct 10, 2023 · 6a5795c · 6a5795c
1 parent 24ae985
commit 6a5795c
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 77 deletions.
diff --git a/js-packages/search-frontend/src/components/SortResultList.tsx b/js-packages/search-frontend/src/components/SortResultList.tsx
@@ -4,90 +4,125 @@ import React from "react";
 import { useQuery } from "react-query";
 import { SortField, useOpenK9Client } from "../components/client";
 import { useTranslation } from "react-i18next";
+import Select, { components } from "react-select";
 
 export function SortResultList({
   setSortResult,
-  background = "white",
+background = "white",
   minHeight = "40px",
   color = "#7e7e7e",
   relevance = "relevance",
 }: {
   setSortResult: (sortResultNew: SortField) => void;
-  background?: string;
+background?: string;
   minHeight?: string;
   color?: string;
   relevance?: string;
 }) {
+  const { t } = useTranslation();
+
+  const startValue = {
+    value: relevance,
+    name: relevance === "relevance" ? t("relevance") : relevance,
+    icon: null,
+  };
+
   const client = useOpenK9Client();
   const options = useQuery(["date-label-sort-options", {}], async () => {
     return await client.getLabelSort();
   });
-  const { t } = useTranslation();
+
+  const sortOptions = [startValue];
+
+  if (options.data?.length) {
+    for (const option of options.data) {
+      sortOptions?.push({
+        value: JSON.stringify({
+          label: option.field,
+          sort: "asc",
+        }),
+        name: option.label + " " + t("asc"),
+        icon: null,
+      });
+      sortOptions?.push({
+        value: JSON.stringify({
+          label: option.field,
+          sort: "desc",
+        }),
+        name: option.label + " " + t("desc"),
+        icon: null,
+      });
+    }
+  }
+
+  const SingleValue = (props: any) => (
+    <components.SingleValue {...props}>
+      <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+        {props.children}
+      </div>
+    </components.SingleValue>
+  );
+
+  const handleChange = (event: any) => {
+    if (event.value === "relevance") {
+      setSortResult({});
+    } else {
+      setSortResult({
+        [JSON.parse(event.value)?.label]: {
+          sort: JSON.parse(event.value)?.sort,
+          missing: "_last",
+        },
+      });
+    }
+  };
+
+  const customStyles = {
+    control: (provided: any, state: any) => ({
+      ...provided,
+      borderRadius: "50px",
+      backgroundColor: "#FAFAFA",
+      border:
+        !state.isFocused || !state.isHovered
+          ? "1px solid #FAFAFA"
+          : "1px solid var(--openk9-embeddable-search--active-color)",
+      boxShadow: "0 0 0 1px var(--openk9-embeddable-search--active-color)",
+      ":hover": {
+        border: "1px solid var(--openk9-embeddable-search--active-color)",
+      },
+    }),
+    menu: (provided: any, state: any) => ({
+      ...provided,
+      zIndex: state.selectProps.menuIsOpen ? "1000" : "1",
+    }),
+    option: (provided: any, state: any) => ({
+      ...provided,
+      backgroundColor: state.isFocused ? "#your-option-focus-color" : "white",
+      color: "black",
+      ":hover": {
+        backgroundColor: state.isSelected ? "#d54949" : "#e836362e",
+        cursor: "pointer",
+      },
+      ...(state.isSelected && {
+        backgroundColor: "#d54949",
+        color: "white",
+      }),
+    }),
+    indicatorSeparator: () => ({
+      display: "none", // Nasconde la linea separatoria
+    }),
+  };
+
   return (
     <span className="openk9-container-sort-result-list-component">
-      <select
-        className="form-control openk9-sort-result-select"
-        id="regularSelectElement"
-        css={css`
-          border-radius: 34px;
-          border: 1px solid #a292926b;
-          height: 30px;
-          width: 100%;
-          padding-inline: 10px;
-          cursor: pointer;
-          :focus {
-            border: 1px solid #a292926b;
-            outline: none;
-          }
-          background: ${background};
-          min-height: ${minHeight};
-          color: ${color};
-        `}
-        onChange={(event) => {
-          if (JSON.parse(event.currentTarget.value)?.label === "relevance") {
-            setSortResult({});
-          } else {
-            setSortResult({
-              [JSON.parse(event.currentTarget.value)?.label]: {
-                sort: JSON.parse(event.currentTarget.value)?.sort,
-                missing: "_last",
-              },
-            });
-          }
-        }}
-      >
-        <option
-          value={JSON.stringify({
-            label: "relevance",
-          })}
-        >
-          {relevance === "relevance" ? t("relevance") : relevance}
-        </option>
-        {options.data?.map((option, index: number) => {
-          return (
-            <React.Fragment key={"fragment " + index}>
-              <option
-                key={option.id + "asc"}
-                value={JSON.stringify({
-                  label: option.field,
-                  sort: "asc",
-                })}
-              >
-                {option.label} {t("asc")}
-              </option>
-              <option
-                key={option.id + "desc"}
-                value={JSON.stringify({
-                  label: option.field,
-                  sort: "desc",
-                })}
-              >
-                {option.label} {t("desc")}
-              </option>
-            </React.Fragment>
-          );
-        })}
-      </select>
+      <Select
+        defaultValue={startValue}
+        options={sortOptions}
+        components={{ SingleValue }}
+        onChange={handleChange}
+        getOptionLabel={(e) => e.name}
+        getOptionValue={(e) => e.value}
+        styles={customStyles}
+      />
     </span>
   );
 }
diff --git a/js-packages/search-frontend/webpack/standalone.dev.js b/js-packages/search-frontend/webpack/standalone.dev.js
@@ -52,21 +52,11 @@ module.exports = {
       watch: true,
     },
     proxy: {
-      "/api/searcher": {
+      "/api": {
         target: "https://test.openk9.io",
         changeOrigin: true,
         secure: false,
       },
-      "/api/datasource": {
-        target: "https://test.openk9.io",
-        changeOrigin: true,
-        secure: false,
-      },
-      "/api/file-manager": {
-        target: "https://test.openk9.io",
-        changeOrigin: true,
-        secure: false,
-      }
     },
   },
 };