Merge branch 'main' of https://git.smc.it/openk9/openk9 into 554-fix-…

…sort-result

js-packages/search-frontend/src/App.tsx

@@ -12,6 +12,7 @@ import { CalendarMobileSvg } from "./svgElement/CalendarMobileSvg";
 import moment from "moment";
 import { DeleteLogo } from "./components/DeleteLogo";
 import { useTranslation } from "react-i18next";
+import { ChangeLanguage } from "./components/ChangeLanguage";
 export const openk9 = new OpenK9({
   enabled: true,
   searchAutoselect: true,
@@ -35,12 +36,6 @@ export function App() {
       setIsVisibleSearchMobile(true);
     }
   };
-  const mobileCalendarClick = (event: any) => {
-    const elementWidth = window.innerWidth;
-    if (elementWidth < 480) {
-      setIsVisibleCalendar(true);
-    }
-  };
   const [startDate, setStartDate] = React.useState<any | null>(null);
   const [endDate, setEndDate] = React.useState<any | null>(null);
   const [focusedInput, setFocusedInput] = React.useState(null);
@@ -148,14 +143,25 @@ export function App() {
           </span>
         </div>
         <div
-          className="openk9-navbar-login"
-          ref={(element) => openk9.updateConfiguration({ login: element })}
           css={css`
             flex-grow: 1;
             display: flex;
+            gap: 10px;
             justify-content: flex-end;
+            align-items: center;
           `}
-        ></div>
+        >
+          <div
+            className="openk9-navbar-login"
+            ref={(element) => openk9.updateConfiguration({ login: element })}
+          ></div>
+          <div
+            className="openk9-navbar-change-language"
+            ref={(element) =>
+              openk9.updateConfiguration({ changeLanguage: element })
+            }
+          ></div>{" "}
+        </div>
       </div>
       <div
         ref={(element) => openk9.updateConfiguration({ tabs: element })}
@@ -173,7 +179,7 @@ export function App() {
         css={css`
           grid-area: search;
           padding: 16px 0px 16px 0px;
-          @media (max-width: 480px) {
+          @media (min-width: 377px) and (max-width: 480px) {
             padding-inline: 16px;
           }
         `}
@@ -366,7 +372,7 @@ export function App() {
         className="openk9-results-container openk9-box"
         ref={(element) =>
           openk9.updateConfiguration({
-            resultList: { element: element, changeOnOver: false },
+            resultList: { element: element, changeOnOver: true },
           })
         }
         css={css`

js-packages/search-frontend/src/components/ActiveFilters.tsx

@@ -18,7 +18,7 @@ export function ActiveFilter({
   onRemoveFilterToken: (searchToken: SearchToken) => void;
   onConfigurationChange: ConfigurationUpdateFunction;
 }) {
-const { t } = useTranslation();
+  const { t } = useTranslation();
   if (searchQuery.length === 0) return null;
   const activeFilters = searchQuery.filter(
     (search) => "goToSuggestion" in search,

js-packages/search-frontend/src/components/ChangeLanguage.tsx

@@ -0,0 +1,134 @@
+import { css } from "styled-components/macro";
+import { UseQueryResult } from "react-query";
+import React from "react";
+import { useQuery } from "react-query";
+import { SortField, useOpenK9Client } from "../components/client";
+import { useTranslation } from "react-i18next";
+import { GloboSvg } from "../svgElement/Globo";
+import Select, { components } from "react-select";
+import { i18n } from "i18next";
+import { remappingLanguage } from "../embeddable/Main";
+
+export function ChangeLanguage({
+  setChangeLanguage,
+  background = "white",
+  minHeight = "40px",
+  color = "#7e7e7e",
+  languages,
+  activeLanguage,
+  i18nElement,
+}: {
+  setChangeLanguage: (sortResultNew: string) => void;
+  background?: string;
+  minHeight?: string;
+  color?: string;
+  activeLanguage: string;
+  i18nElement: i18n;
+  languages:
+    | {
+        createDate: any;
+        modifiedDate: any;
+        id: number;
+        name: string;
+        value: "value";
+      }[]
+    | undefined;
+}) {
+  const filterLanguages = languages?.find(
+    (language) => language.value === activeLanguage,
+  );
+
+  const startValue = filterLanguages
+    ? {
+        value: filterLanguages.value,
+        name: filterLanguages.name,
+        icon: <GloboSvg />,
+      }
+    : null;
+
+  const handleChange = (e: any) => {
+    i18nElement.changeLanguage(remappingLanguage({ language: e.value }));
+    setChangeLanguage(e.value);
+  };
+  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
+    }),
+  };
+
+  const languagesOption = languages?.map((language) => ({
+    value: language.value,
+    name: language.name,
+    icon: <GloboSvg />,
+  }));
+
+  const SingleValue = (props: any) => (
+    <components.SingleValue {...props}>
+      <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+        <GloboSvg /> {/* Icona SVG */}
+        {remappingLanguageToBack({ language: activeLanguage })}
+      </div>
+    </components.SingleValue>
+  );
+
+  return (
+    <span>
+      <Select
+        value={startValue}
+        options={languagesOption}
+        components={{ SingleValue }}
+        onChange={handleChange}
+        getOptionLabel={(e) => e.name}
+        getOptionValue={(e) => e.value}
+        styles={customStyles}
+      />
+    </span>
+  );
+}
+
+function remappingLanguageToBack({ language }: { language: string }) {
+  switch (language) {
+    case "it_IT":
+      return "ITA";
+    case "es_ES":
+      return "ESP";
+    case "en_US":
+      return "GBR";
+    case "de_DE":
+      return "DEU";
+    case "fr_FR":
+      return "FRA";
+    default:
+      return "GBR";
+  }
+}

js-packages/search-frontend/src/components/FilterCategory.tsx

@@ -31,6 +31,7 @@ type FilterCategoryProps = {
   setHasMoreSuggestionsCategories?: React.Dispatch<
     React.SetStateAction<boolean>
   >;
+  language: string;
 };
 function FilterCategory({
   suggestionCategoryId,
@@ -44,6 +45,7 @@ function FilterCategory({
   isUniqueLoadMore = false,
   loadAll = false,
   dynamicFilters,
+  language,
   setHasMoreSuggestionsCategories = undefined,
 }: FilterCategoryProps) {
   const [text, setText] = React.useState("");
@@ -53,6 +55,7 @@ function FilterCategory({
     useDebounce(text, 600),
     loadAll,
     dynamicFilters,
+    language,
   );
   const { t } = useTranslation();
   React.useEffect(() => {
@@ -440,6 +443,7 @@ export function useInfiniteSuggestions(
   suggestKeyword: string,
   loadAll: boolean,
   dynamicFilters: boolean,
+  language: string,
 ) {
   const pageSize = loadAll ? 19 : suggestKeyword === "" ? 8 : 19;
   const client = useOpenK9Client();
@@ -459,6 +463,7 @@ export function useInfiniteSuggestions(
       activeSuggestionCategory,
       suggestKeyword,
       loadAll,
+      language,
     ] as const,
     async ({
       queryKey: [_, searchQuery, activeSuggestionCategory, suggestKeyword],
@@ -472,6 +477,7 @@ export function useInfiniteSuggestions(
         suggestionCategoryId: activeSuggestionCategory,
         suggestKeyword,
         order: suggestKeyword ? "desc" : "asc",
+        language: language,
       });
       return {
         result: result.result,

js-packages/search-frontend/src/components/FilterCategoryDynamic.tsx

@@ -25,6 +25,7 @@ type FilterCategoryDynamicallyProps = {
   isCollapsable?: boolean;
   isUniqueLoadMore?: boolean;
   loadAll?: boolean;
+  language: string;
   setHasMoreSuggestionsCategories?: React.Dispatch<
     React.SetStateAction<boolean>
   >;
@@ -40,6 +41,7 @@ function FilterCategoryDynamic({
   isCollapsable = true,
   isUniqueLoadMore = false,
   loadAll = false,
+  language,
   setHasMoreSuggestionsCategories = undefined,
 }: FilterCategoryDynamicallyProps) {
   const [text, setText] = React.useState("");
@@ -48,6 +50,7 @@ function FilterCategoryDynamic({
     suggestionCategoryId,
     useDebounce(text, 600),
     loadAll,
+    language,
   );
 
   const { t } = useTranslation();
@@ -382,6 +385,7 @@ function useInfiniteSuggestions(
   activeSuggestionCategory: number,
   suggestKeyword: string,
   loadAll: boolean,
+  language: string,
 ) {
   const pageSize = loadAll ? 19 : suggestKeyword === "" ? 8 : 19;
   const client = useOpenK9Client();
@@ -405,6 +409,7 @@ function useInfiniteSuggestions(
         suggestionCategoryId: activeSuggestionCategory,
         suggestKeyword,
         order: suggestKeyword ? "desc" : "asc",
+        language: language,
       });
       return {
         result: result.result,

js-packages/search-frontend/src/components/Filters.tsx

@@ -22,6 +22,7 @@ type FiltersProps = {
   sort: SortField[];
   dynamicFilters: boolean;
   preFilters?: React.ReactNode;
+  language: string;
 };
 function Filters({
   searchQuery,
@@ -32,12 +33,17 @@ function Filters({
   sort,
   dynamicFilters,
   preFilters,
+  language,
 }: FiltersProps) {
   const suggestionCategories = useSuggestionCategories();
   const { t } = useTranslation();
   const [lastSearchQueryWithResults, setLastSearchQueryWithResults] =
     React.useState(searchQuery);
-  const { data, isPreviousData } = useInfiniteResults(searchQuery, sort);
+  const { data, isPreviousData } = useInfiniteResults(
+    searchQuery,
+    sort,
+    language,
+  );
   React.useEffect(() => {
     if (!isPreviousData) {
       setLastSearchQueryWithResults(searchQuery);
@@ -188,25 +194,35 @@ function Filters({
           return dynamicFilters ? (
             <FilterCategoryDynamicMemo
               key={suggestionCategory.id}
-              suggestionCategoryName={suggestionCategory.name}
+              suggestionCategoryName={translateSuggesionCategoryName({
+                names: suggestionCategory.translationMap,
+                language: language,
+                defaultValue: suggestionCategory.name,
+              })}
               suggestionCategoryId={suggestionCategory.id}
               tokens={lastSearchQueryWithResults}
               onAdd={onAddFilterToken}
               onRemove={onRemoveFilterToken}
               multiSelect={suggestionCategory?.multiSelect}
               searchQuery={searchQuery}
+              language={language}
             />
           ) : (
             <FilterCategoryMemo
               key={suggestionCategory.id}
-              suggestionCategoryName={suggestionCategory.name}
+              suggestionCategoryName={translateSuggesionCategoryName({
+                names: suggestionCategory.translationMap,
+                language: language,
+                defaultValue: suggestionCategory.name,
+              })}
               suggestionCategoryId={suggestionCategory.id}
               tokens={lastSearchQueryWithResults}
               onAdd={onAddFilterToken}
               onRemove={onRemoveFilterToken}
               multiSelect={suggestionCategory?.multiSelect}
               searchQuery={searchQuery}
               dynamicFilters={dynamicFilters}
+              language={language}
             />
           );
         })}
@@ -322,3 +338,20 @@ function mergeAndSortArrays(
   mergedArray.sort((a, b) => a.localeCompare(b));
   return mergedArray;
 }
+
+function translateSuggesionCategoryName({
+  names,
+  language,
+  defaultValue,
+}: {
+  names: { [key: string]: string };
+  language: string;
+  defaultValue: string;
+}): string {
+  const desiredKey = "name." + language;
+  if (names && names.hasOwnProperty(desiredKey)) {
+    return names[desiredKey];
+  }
+  return defaultValue;
+  return "";
+}