diff --git a/CHANGELOG.md b/CHANGELOG.md index b61478b9..53096e9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file. ## [Unreleased] +- [#279](https://github.com/os2display/display-admin-client/pull/279) + - Eventdatabase v2 feed source - Change subscription endpoint. + - Eventdatabase v2 feed source - Fixed options load. - [#271](https://github.com/os2display/display-admin-client/pull/271) - Added new feed source: Eventdatabasen v2. diff --git a/src/components/slide/content/poster/poster-single-search.jsx b/src/components/slide/content/poster/poster-single-search.jsx index f84b900d..725b3b07 100644 --- a/src/components/slide/content/poster/poster-single-search.jsx +++ b/src/components/slide/content/poster/poster-single-search.jsx @@ -1,11 +1,11 @@ -import { React, useEffect, useRef, useState } from "react"; +import { React, useEffect, useState } from "react"; import { Button, Row } from "react-bootstrap"; import Col from "react-bootstrap/Col"; -import AsyncSelect from "react-select/async"; import { useTranslation } from "react-i18next"; import PropTypes from "prop-types"; +import { MultiSelect } from "react-multi-select-component"; +import Form from "react-bootstrap/Form"; import FormInput from "../../../util/forms/form-input"; -import Select from "../../../util/forms/select"; import { getHeaders, loadDropdownOptionsPromise } from "./poster-helper"; /** @@ -24,54 +24,44 @@ function PosterSingleSearch({ }) { const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" }); - const [singleSearch, setSingleSearch] = useState(""); - const [singleSearchType, setSingleSearchType] = useState("title"); - const [singleSearchTypeValue, setSingleSearchTypeValue] = useState(""); + const [title, setTitle] = useState(""); + const [organizations, setOrganizations] = useState([]); + const [locations, setLocations] = useState([]); + const [tags, setTags] = useState([]); - const timeoutRef = useRef(null); + const [locationOptions, setLocationOptions] = useState([]); + const [tagOptions, setTagOptions] = useState([]); + const [organizationOptions, setOrganizationOptions] = useState([]); - const debounceOptions = (inputValue) => { - // Debounce result to avoid searching while typing. - return new Promise((resolve, reject) => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - - timeoutRef.current = setTimeout(() => { - loadDropdownOptionsPromise( - optionsEndpoint, - getHeaders(), - inputValue, - singleSearchType - ) - .then((data) => resolve(data)) - .catch((reason) => reject(reason)); - }, 500); - }); - }; + useEffect(() => { + loadDropdownOptionsPromise(optionsEndpoint, getHeaders(), "", "tags").then( + (r) => setTagOptions(r) + ); + + loadDropdownOptionsPromise( + optionsEndpoint, + getHeaders(), + "", + "locations" + ).then((r) => setLocationOptions(r)); + + loadDropdownOptionsPromise( + optionsEndpoint, + getHeaders(), + "", + "organizations" + ).then((r) => setOrganizationOptions(r)); + }, []); const singleSearchFetch = () => { const params = { type: "events", }; - const singleSearchTypeValueId = singleSearchTypeValue?.value; - - switch (singleSearchType) { - case "title": - params.title = singleSearch; - break; - case "tags": - params.tag = singleSearchTypeValueId; - break; - case "organizations": - params.organization = singleSearchTypeValueId; - break; - case "locations": - params.location = singleSearchTypeValueId; - break; - default: - } + params.title = title; + params.tag = tags.map(({ value }) => value); + params.organization = organizations.map(({ value }) => value); + params.location = locations.map(({ value }) => value); setLoading(true); @@ -89,124 +79,79 @@ function PosterSingleSearch({ }); }; - const singleSearchTypeOptions = [ - { - key: "singleSearchTypeOptions1", - value: "title", - title: t("single-search-type-title"), - }, - { - key: "singleSearchTypeOptions2", - value: "organizations", - title: t("single-search-type-organization"), - }, - { - key: "singleSearchTypeOptions3", - value: "locations", - title: t("single-search-type-location"), - }, - { - key: "singleSearchTypeOptions4", - value: "tags", - title: t("single-search-type-tag"), - }, - ]; - - useEffect(() => { - setSingleSearchTypeValue(""); - }, [singleSearchType]); - return ( - - -