Skip to content

Commit 196b332

Browse files
tujtuj
committed
2927: Changed how poster feed single source search is handled
1 parent c2cba72 commit 196b332

File tree

4 files changed

+109
-163
lines changed

4 files changed

+109
-163
lines changed

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

Lines changed: 51 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import PropTypes from "prop-types";
66
import { MultiSelect } from "react-multi-select-component";
77
import Form from "react-bootstrap/Form";
88
import FormInput from "../../../util/forms/form-input";
9-
import Select from "../../../util/forms/select";
109
import { getHeaders, loadDropdownOptionsPromise } from "./poster-helper";
1110

1211
/**
@@ -25,56 +24,44 @@ function PosterSingleSearch({
2524
}) {
2625
const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" });
2726

28-
const [singleSearch, setSingleSearch] = useState("");
29-
const [singleSearchType, setSingleSearchType] = useState("title");
30-
const [singleSearchTypeValue, setSingleSearchTypeValue] = useState("");
31-
27+
const [title, setTitle] = useState("");
28+
const [organizations, setOrganizations] = useState([]);
3229
const [locations, setLocations] = useState([]);
3330
const [tags, setTags] = useState([]);
34-
const [organizations, setOrganizations] = useState([]);
31+
32+
const [locationOptions, setLocationOptions] = useState([]);
33+
const [tagOptions, setTagOptions] = useState([]);
34+
const [organizationOptions, setOrganizationOptions] = useState([]);
3535

3636
useEffect(() => {
3737
loadDropdownOptionsPromise(optionsEndpoint, getHeaders(), "", "tags").then(
38-
(r) => setTags(r)
38+
(r) => setTagOptions(r)
3939
);
4040

4141
loadDropdownOptionsPromise(
4242
optionsEndpoint,
4343
getHeaders(),
4444
"",
4545
"locations"
46-
).then((r) => setLocations(r));
46+
).then((r) => setLocationOptions(r));
4747

4848
loadDropdownOptionsPromise(
4949
optionsEndpoint,
5050
getHeaders(),
5151
"",
5252
"organizations"
53-
).then((r) => setOrganizations(r));
53+
).then((r) => setOrganizationOptions(r));
5454
}, []);
5555

5656
const singleSearchFetch = () => {
5757
const params = {
5858
type: "events",
5959
};
6060

61-
const singleSearchTypeValueId = singleSearchTypeValue?.value;
62-
63-
switch (singleSearchType) {
64-
case "title":
65-
params.title = singleSearch;
66-
break;
67-
case "tags":
68-
params.tag = singleSearchTypeValueId;
69-
break;
70-
case "organizations":
71-
params.organization = singleSearchTypeValueId;
72-
break;
73-
case "locations":
74-
params.location = singleSearchTypeValueId;
75-
break;
76-
default:
77-
}
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);
7865

7966
setLoading(true);
8067

@@ -92,125 +79,79 @@ function PosterSingleSearch({
9279
});
9380
};
9481

95-
const singleSearchTypeOptions = [
96-
{
97-
key: "singleSearchTypeOptions1",
98-
value: "title",
99-
title: t("single-search-type-title"),
100-
},
101-
{
102-
key: "singleSearchTypeOptions2",
103-
value: "organizations",
104-
title: t("single-search-type-organization"),
105-
},
106-
{
107-
key: "singleSearchTypeOptions3",
108-
value: "locations",
109-
title: t("single-search-type-location"),
110-
},
111-
{
112-
key: "singleSearchTypeOptions4",
113-
value: "tags",
114-
title: t("single-search-type-tag"),
115-
},
116-
];
117-
118-
/**
119-
* A callback on changed data.
120-
*
121-
* @param {Array} data The data to call back with
122-
*/
123-
const changeData = (data) => {
124-
if (data?.length > 0) {
125-
const index = data?.length > 1 ? 1 : 0;
126-
setSingleSearchTypeValue(data[index]);
127-
}
128-
};
129-
130-
useEffect(() => {
131-
setSingleSearchTypeValue("");
132-
}, [singleSearchType]);
133-
13482
return (
135-
<Row className="mb-2">
136-
<Col>
137-
<Select
138-
value={singleSearchType}
139-
onChange={({ target }) => setSingleSearchType(target.value)}
140-
label={t("single-search-type")}
141-
options={singleSearchTypeOptions}
142-
name="poster-search-type"
143-
allowNull={false}
144-
/>
145-
</Col>
146-
{singleSearchType === "title" && (
147-
<Col>
148-
<FormInput
149-
label={t("single-search-title")}
150-
name="poster-search"
151-
value={singleSearch}
152-
onChange={({ target }) => setSingleSearch(target.value)}
153-
/>
154-
</Col>
155-
)}
156-
{singleSearchType === "locations" && (
83+
<>
84+
<Row className="mb-2">
15785
<Col>
15886
<Form.Label htmlFor="single-search-select-locations">
159-
{t("single-search-select")}
87+
{t("single-search-locations")}
16088
</Form.Label>
16189
<MultiSelect
16290
id="single-search-select-locations"
16391
label={t("single-search-select")}
16492
name="locations"
165-
onChange={changeData}
166-
options={locations}
167-
value={singleSearchTypeValue ? [singleSearchTypeValue] : []}
93+
onChange={(newValue) => setLocations(newValue)}
94+
options={locationOptions}
95+
hasSelectAll={false}
96+
value={locations}
16897
placeholder={t("single-search-placeholder")}
16998
labelledBy="single-search-select-locations"
17099
/>
171100
</Col>
172-
)}
173-
{singleSearchType === "organizations" && (
174101
<Col>
175102
<Form.Label htmlFor="single-search-select-organizations">
176-
{t("single-search-select")}
103+
{t("single-search-organizations")}
177104
</Form.Label>
178105
<MultiSelect
179106
id="single-search-select-organizations"
180107
label={t("single-search-select")}
181108
name="organizations"
182109
singleSelect
183-
options={organizations}
184-
onChange={changeData}
185-
value={singleSearchTypeValue ? [singleSearchTypeValue] : []}
110+
options={organizationOptions}
111+
hasSelectAll={false}
112+
onChange={(newValue) => setOrganizations(newValue)}
113+
value={organizations}
186114
placeholder={t("single-search-placeholder")}
187115
labelledBy="single-search-select-organizations"
188116
/>
189117
</Col>
190-
)}
191-
{singleSearchType === "tags" && (
118+
</Row>
119+
<Row>
192120
<Col>
193121
<Form.Label htmlFor="single-search-select-tags">
194-
{t("single-search-select")}
122+
{t("single-search-tags")}
195123
</Form.Label>
196124
<MultiSelect
197125
id="single-search-select-tags"
198126
label={t("single-search-select")}
199127
name="tags"
200-
options={tags}
201-
onChange={changeData}
202-
value={singleSearchTypeValue ? [singleSearchTypeValue] : []}
128+
options={tagOptions}
129+
hasSelectAll={false}
130+
onChange={(newValue) => setTags(newValue)}
131+
value={tags}
203132
placeholder={t("single-search-placeholder")}
204133
labelledBy="single-search-select-tags"
205134
/>
206135
</Col>
207-
)}
208-
<Col className="d-flex align-items-end">
209-
<Button onClick={singleSearchFetch} className="mt-3" variant="success">
210-
{t("single-search-button")}
211-
</Button>
212-
</Col>
213-
</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+
</>
214155
);
215156
}
216157

‎src/components/slide/content/poster/poster-subscription-criteria.jsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import AsyncSelect from "react-select/async";
2-
import {React, useEffect, useRef, useState} from "react";
1+
import { React, useEffect, useState } from "react";
32
import { useTranslation } from "react-i18next";
43
import PropTypes from "prop-types";
4+
import { MultiSelect } from "react-multi-select-component";
55
import { getHeaders, loadDropdownOptionsPromise } from "./poster-helper";
6-
import {MultiSelect} from "react-multi-select-component";
76

87
/**
98
* @param {object} props The props.
@@ -60,10 +59,7 @@ function PosterSubscriptionCriteria({
6059
<h5 className="mt-3">{t("filters")}</h5>
6160
<div className="mb-2">
6261
<div className="form-group">
63-
<label
64-
htmlFor="select-subscription-places"
65-
className="form-label"
66-
>
62+
<label htmlFor="select-subscription-places" className="form-label">
6763
{t("filters-place")}
6864
</label>
6965
<MultiSelect
@@ -73,7 +69,9 @@ function PosterSubscriptionCriteria({
7369
name="subscriptionPlaceValue"
7470
options={locations}
7571
hasSelectAll={false}
76-
onChange={(newValue) => handleSelect('subscriptionPlaceValue', newValue)}
72+
onChange={(newValue) =>
73+
handleSelect("subscriptionPlaceValue", newValue)
74+
}
7775
value={subscriptionPlaceValue ?? []}
7876
placeholder={t("subscription-search-placeholder")}
7977
labelledBy="select-subscription-places"
@@ -96,7 +94,9 @@ function PosterSubscriptionCriteria({
9694
name="subscriptionOrganizerValue"
9795
options={organizations}
9896
hasSelectAll={false}
99-
onChange={(newValue) => handleSelect('subscriptionOrganizerValue', newValue[0])}
97+
onChange={(newValue) =>
98+
handleSelect("subscriptionOrganizerValue", newValue[0])
99+
}
100100
value={subscriptionOrganizerValue ?? []}
101101
placeholder={t("subscription-search-placeholder")}
102102
labelledBy="select-subscription-organizers"
@@ -119,7 +119,9 @@ function PosterSubscriptionCriteria({
119119
name="subscriptionTagValue"
120120
options={tags}
121121
hasSelectAll={false}
122-
onChange={(newValue) => handleSelect('subscriptionTagValue', newValue)}
122+
onChange={(newValue) =>
123+
handleSelect("subscriptionTagValue", newValue)
124+
}
123125
value={subscriptionTagValue ?? []}
124126
placeholder={t("subscription-search-placeholder")}
125127
labelledBy="select-subscription-tags"

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

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -109,53 +109,53 @@ function PosterSubscription({
109109
<Row>
110110
<div>
111111
<h5>{t("preview-of-events")}</h5>
112-
{loadingResults && <Spinner animation="border"/>}
112+
{loadingResults && <Spinner animation="border" />}
113113
<table className="table table-hover text-left">
114114
<thead>
115-
<tr>
116-
<th scope="col">{t("table-image")}</th>
117-
<th scope="col">{t("table-event")}</th>
118-
<th scope="col">{t("table-place")}</th>
119-
<th scope="col">{t("table-date")}</th>
120-
</tr>
115+
<tr>
116+
<th scope="col">{t("table-image")}</th>
117+
<th scope="col">{t("table-event")}</th>
118+
<th scope="col">{t("table-place")}</th>
119+
<th scope="col">{t("table-date")}</th>
120+
</tr>
121121
</thead>
122122
<tbody>
123-
{subscriptionOccurrences?.length > 0 &&
124-
subscriptionOccurrences?.map(
125-
({
126-
eventId,
127-
imageThumbnail,
128-
image,
129-
startDate,
130-
endDate,
131-
title,
132-
organizer,
133-
place,
134-
}) => {
135-
return (
136-
<tr key={`event-${eventId}`}>
137-
<td>
138-
<img
139-
src={imageThumbnail ?? image}
140-
alt={title}
141-
style={{maxWidth: "80px"}}
142-
/>
143-
</td>
144-
<td>
145-
<strong>{title}</strong>
146-
<br/>
147-
{organizer?.name}
148-
</td>
149-
<td>{place?.name}</td>
150-
<td>
151-
{formatDate(startDate, "L HH:mm")}
152-
{" - "}
153-
{formatDate(endDate, "L HH:mm")}
154-
</td>
155-
</tr>
156-
);
157-
}
158-
)}
123+
{subscriptionOccurrences?.length > 0 &&
124+
subscriptionOccurrences?.map(
125+
({
126+
eventId,
127+
imageThumbnail,
128+
image,
129+
startDate,
130+
endDate,
131+
title,
132+
organizer,
133+
place,
134+
}) => {
135+
return (
136+
<tr key={`event-${eventId}`}>
137+
<td>
138+
<img
139+
src={imageThumbnail ?? image}
140+
alt={title}
141+
style={{ maxWidth: "80px" }}
142+
/>
143+
</td>
144+
<td>
145+
<strong>{title}</strong>
146+
<br />
147+
{organizer?.name}
148+
</td>
149+
<td>{place?.name}</td>
150+
<td>
151+
{formatDate(startDate, "L HH:mm")}
152+
{" - "}
153+
{formatDate(endDate, "L HH:mm")}
154+
</td>
155+
</tr>
156+
);
157+
}
158+
)}
159159
</tbody>
160160
</table>
161161
</div>

0 commit comments

Comments
 (0)