Skip to content

Commit fbffc51

Browse files
tujtuj
authored
Merge pull request #279 from os2display/feature/2927-fixes
Eventdatabase v2 feed source fixes
2 parents a233ee8 + 4f6dee7 commit fbffc51

File tree

6 files changed

+187
-265
lines changed

6 files changed

+187
-265
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
55

66
## [Unreleased]
77

8+
- [#279](https://github.com/os2display/display-admin-client/pull/279)
9+
- Eventdatabase v2 feed source - Change subscription endpoint.
10+
- Eventdatabase v2 feed source - Fixed options load.
811
- [#271](https://github.com/os2display/display-admin-client/pull/271)
912
- Added new feed source: Eventdatabasen v2.
1013

‎src/components/slide/content/poster/poster-single-search.jsx‎

Lines changed: 90 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { React, useEffect, useRef, useState } from "react";
1+
import { React, useEffect, useState } from "react";
22
import { Button, Row } from "react-bootstrap";
33
import Col from "react-bootstrap/Col";
4-
import AsyncSelect from "react-select/async";
54
import { useTranslation } from "react-i18next";
65
import PropTypes from "prop-types";
6+
import { MultiSelect } from "react-multi-select-component";
7+
import Form from "react-bootstrap/Form";
78
import FormInput from "../../../util/forms/form-input";
8-
import Select from "../../../util/forms/select";
99
import { getHeaders, loadDropdownOptionsPromise } from "./poster-helper";
1010

1111
/**
@@ -24,54 +24,44 @@ function PosterSingleSearch({
2424
}) {
2525
const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" });
2626

27-
const [singleSearch, setSingleSearch] = useState("");
28-
const [singleSearchType, setSingleSearchType] = useState("title");
29-
const [singleSearchTypeValue, setSingleSearchTypeValue] = useState("");
27+
const [title, setTitle] = useState("");
28+
const [organizations, setOrganizations] = useState([]);
29+
const [locations, setLocations] = useState([]);
30+
const [tags, setTags] = useState([]);
3031

31-
const timeoutRef = useRef(null);
32+
const [locationOptions, setLocationOptions] = useState([]);
33+
const [tagOptions, setTagOptions] = useState([]);
34+
const [organizationOptions, setOrganizationOptions] = useState([]);
3235

33-
const debounceOptions = (inputValue) => {
34-
// Debounce result to avoid searching while typing.
35-
return new Promise((resolve, reject) => {
36-
if (timeoutRef.current) {
37-
clearTimeout(timeoutRef.current);
38-
}
39-
40-
timeoutRef.current = setTimeout(() => {
41-
loadDropdownOptionsPromise(
42-
optionsEndpoint,
43-
getHeaders(),
44-
inputValue,
45-
singleSearchType
46-
)
47-
.then((data) => resolve(data))
48-
.catch((reason) => reject(reason));
49-
}, 500);
50-
});
51-
};
36+
useEffect(() => {
37+
loadDropdownOptionsPromise(optionsEndpoint, getHeaders(), "", "tags").then(
38+
(r) => setTagOptions(r)
39+
);
40+
41+
loadDropdownOptionsPromise(
42+
optionsEndpoint,
43+
getHeaders(),
44+
"",
45+
"locations"
46+
).then((r) => setLocationOptions(r));
47+
48+
loadDropdownOptionsPromise(
49+
optionsEndpoint,
50+
getHeaders(),
51+
"",
52+
"organizations"
53+
).then((r) => setOrganizationOptions(r));
54+
}, []);
5255

5356
const singleSearchFetch = () => {
5457
const params = {
5558
type: "events",
5659
};
5760

58-
const singleSearchTypeValueId = singleSearchTypeValue?.value;
59-
60-
switch (singleSearchType) {
61-
case "title":
62-
params.title = singleSearch;
63-
break;
64-
case "tags":
65-
params.tag = singleSearchTypeValueId;
66-
break;
67-
case "organizations":
68-
params.organization = singleSearchTypeValueId;
69-
break;
70-
case "locations":
71-
params.location = singleSearchTypeValueId;
72-
break;
73-
default:
74-
}
61+
params.title = title;
62+
params.tag = tags.map(({ value }) => value);
63+
params.organization = organizations.map(({ value }) => value);
64+
params.location = locations.map(({ value }) => value);
7565

7666
setLoading(true);
7767

@@ -89,124 +79,79 @@ function PosterSingleSearch({
8979
});
9080
};
9181

92-
const singleSearchTypeOptions = [
93-
{
94-
key: "singleSearchTypeOptions1",
95-
value: "title",
96-
title: t("single-search-type-title"),
97-
},
98-
{
99-
key: "singleSearchTypeOptions2",
100-
value: "organizations",
101-
title: t("single-search-type-organization"),
102-
},
103-
{
104-
key: "singleSearchTypeOptions3",
105-
value: "locations",
106-
title: t("single-search-type-location"),
107-
},
108-
{
109-
key: "singleSearchTypeOptions4",
110-
value: "tags",
111-
title: t("single-search-type-tag"),
112-
},
113-
];
114-
115-
useEffect(() => {
116-
setSingleSearchTypeValue("");
117-
}, [singleSearchType]);
118-
11982
return (
120-
<Row className="mb-2">
121-
<Col>
122-
<Select
123-
value={singleSearchType}
124-
onChange={({ target }) => setSingleSearchType(target.value)}
125-
label={t("single-search-type")}
126-
options={singleSearchTypeOptions}
127-
name="poster-search-type"
128-
allowNull={false}
129-
/>
130-
</Col>
131-
{singleSearchType === "title" && (
83+
<>
84+
<Row className="mb-2">
13285
<Col>
133-
<FormInput
134-
label={t("single-search-title")}
135-
name="poster-search"
136-
value={singleSearch}
137-
onChange={({ target }) => setSingleSearch(target.value)}
138-
/>
139-
</Col>
140-
)}
141-
{singleSearchType === "locations" && (
142-
<Col>
143-
<label
144-
className="form-label"
145-
htmlFor="single-search-select-locations"
146-
>
147-
{t("single-search-select")}
148-
</label>
149-
<AsyncSelect
86+
<Form.Label htmlFor="single-search-select-locations">
87+
{t("single-search-locations")}
88+
</Form.Label>
89+
<MultiSelect
15090
id="single-search-select-locations"
151-
isClearable
152-
isSearchable
153-
defaultOptions
91+
label={t("single-search-select")}
92+
name="locations"
93+
onChange={(newValue) => setLocations(newValue)}
94+
options={locationOptions}
95+
hasSelectAll={false}
96+
value={locations}
15497
placeholder={t("single-search-placeholder")}
155-
loadOptions={debounceOptions}
156-
value={singleSearchTypeValue}
157-
onChange={(newValue) => {
158-
setSingleSearchTypeValue(newValue);
159-
}}
98+
labelledBy={t("single-search-locations")}
16099
/>
161100
</Col>
162-
)}
163-
{singleSearchType === "organizations" && (
164101
<Col>
165-
<label
166-
className="form-label"
167-
htmlFor="single-search-select-organizations"
168-
>
169-
{t("single-search-select")}
170-
</label>
171-
<AsyncSelect
102+
<Form.Label htmlFor="single-search-select-organizations">
103+
{t("single-search-organizations")}
104+
</Form.Label>
105+
<MultiSelect
172106
id="single-search-select-organizations"
173-
isClearable
174-
isSearchable
175-
defaultOptions
107+
label={t("single-search-select")}
108+
name="organizations"
109+
singleSelect
110+
options={organizationOptions}
111+
hasSelectAll={false}
112+
onChange={(newValue) => setOrganizations(newValue)}
113+
value={organizations}
176114
placeholder={t("single-search-placeholder")}
177-
loadOptions={debounceOptions}
178-
value={singleSearchTypeValue}
179-
onChange={(newValue) => {
180-
setSingleSearchTypeValue(newValue);
181-
}}
115+
labelledBy={t("single-search-organizations")}
182116
/>
183117
</Col>
184-
)}
185-
{singleSearchType === "tags" && (
118+
</Row>
119+
<Row>
186120
<Col>
187-
<label className="form-label" htmlFor="single-search-select-tags">
188-
{t("single-search-select")}
189-
</label>
190-
<AsyncSelect
121+
<Form.Label htmlFor="single-search-select-tags">
122+
{t("single-search-tags")}
123+
</Form.Label>
124+
<MultiSelect
191125
id="single-search-select-tags"
192-
isClearable
193-
isSearchable
194-
defaultOptions
126+
label={t("single-search-select")}
127+
name="tags"
128+
options={tagOptions}
129+
hasSelectAll={false}
130+
onChange={(newValue) => setTags(newValue)}
131+
value={tags}
195132
placeholder={t("single-search-placeholder")}
196-
loadOptions={debounceOptions}
197-
value={singleSearchTypeValue}
198-
onChange={(newValue) => {
199-
setSingleSearchTypeValue(newValue);
200-
}}
133+
labelledBy={t("single-search-tags")}
201134
/>
202135
</Col>
203-
)}
204-
<Col className="d-flex align-items-end">
205-
<Button onClick={singleSearchFetch} className="mt-3" variant="success">
206-
{t("single-search-button")}
207-
</Button>
208-
</Col>
209-
</Row>
136+
<Col>
137+
<FormInput
138+
label={t("single-search-title")}
139+
name="poster-search"
140+
value={title}
141+
onChange={({ target }) => setTitle(target.value)}
142+
/>
143+
</Col>
144+
<Col className="d-flex align-items-end">
145+
<Button
146+
onClick={singleSearchFetch}
147+
className="mt-3"
148+
variant="success"
149+
>
150+
{t("single-search-button")}
151+
</Button>
152+
</Col>
153+
</Row>
154+
</>
210155
);
211156
}
212157

‎src/components/slide/content/poster/poster-single.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function PosterSingle({ configurationChange, feedSource, configuration }) {
134134

135135
<Row className="m-1 mt-2 mb-3">
136136
<Alert variant="warning" className="mb-0">
137-
{t("preview-updates-after-save")}
137+
{t("subscription-preview-of-events-helptext")}
138138
</Alert>
139139
</Row>
140140

0 commit comments

Comments
 (0)