Merge pull request #280 from os2display/release/2.3.0

Release 2.3.0

Author: tuj

.github/workflows/pr.yml

@@ -54,7 +54,6 @@ jobs:
           docker compose run --rm playwright npx playwright install --with-deps
           docker compose run --rm playwright npx playwright test --retries 3
 
-
       - uses: actions/upload-artifact@v4
         if: always()
         with:

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [2.3.0] - 2025-03-24
+
+- [#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.
+
 ## [2.2.0] - 2025-03-17
 
 - [#273](https://github.com/os2display/display-admin-client/pull/273)

src/components/feed-sources/feed-source-form.jsx

@@ -13,6 +13,7 @@ import FormInput from "../util/forms/form-input";
 import CalendarApiFeedType from "./templates/calendar-api-feed-type";
 import NotifiedFeedType from "./templates/notified-feed-type";
 import EventDatabaseApiFeedType from "./templates/event-database-feed-type";
+import EventDatabaseApiV2FeedType from "./templates/event-database-v2-feed-type";
 
 /**
  * The feed-source form component.
@@ -97,6 +98,13 @@ function FeedSourceForm({
               mode={mode}
             />
           )}
+          {feedSource?.feedType === "App\\Feed\\EventDatabaseApiV2FeedType" && (
+            <EventDatabaseApiV2FeedType
+              handleInput={handleSecretInput}
+              formStateObject={feedSource.secrets}
+              mode={mode}
+            />
+          )}
           {feedSource?.feedType === "App\\Feed\\NotifiedFeedType" && (
             <NotifiedFeedType
               handleInput={handleSecretInput}

src/components/feed-sources/feed-source-manager.jsx

@@ -67,6 +67,15 @@ function FeedSourceManager({
         host: "",
       },
     },
+    {
+      value: "App\\Feed\\EventDatabaseApiV2FeedType",
+      title: t("event-database-api-v2-feed-type.title"),
+      key: "7",
+      secretsDefault: {
+        host: "",
+        apikey: "",
+      },
+    },
     {
       value: "App\\Feed\\NotifiedFeedType",
       title: t("dynamic-fields.notified-feed-type.title"),

src/components/feed-sources/templates/event-database-v2-feed-type.jsx

@@ -0,0 +1,43 @@
+import { React } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import FormInput from "../../util/forms/form-input";
+
+const EventDatabaseApiV2FeedType = ({ handleInput, formStateObject, mode }) => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "event-database-api-v2-feed-type",
+  });
+  return (
+    <>
+      <FormInput
+        name="host"
+        type="text"
+        className="mb-2"
+        label={t("host")}
+        onChange={handleInput}
+        value={formStateObject?.host}
+      />
+      <FormInput
+        name="apikey"
+        type="text"
+        label={t("apikey")}
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.apikey}
+      />
+    </>
+  );
+};
+
+EventDatabaseApiV2FeedType.propTypes = {
+  handleInput: PropTypes.func,
+  formStateObject: PropTypes.shape({
+    host: PropTypes.string.isRequired,
+    apikey: PropTypes.string,
+  }),
+  mode: PropTypes.string,
+};
+
+export default EventDatabaseApiV2FeedType;

src/components/slide/content/feed-selector.jsx

@@ -12,7 +12,8 @@ import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dr
 import idFromUrl from "../../util/helpers/id-from-url";
 import ContentForm from "./content-form";
 import MultiselectFromEndpoint from "./multiselect-from-endpoint";
-import PosterSelector from "./poster-selector";
+import PosterSelectorV1 from "./poster/poster-selector-v1";
+import PosterSelectorV2 from "./poster/poster-selector-v2";
 
 /**
  * Feed selector.
@@ -96,9 +97,19 @@ function FeedSelector({
     onChange(newValue);
   };
 
-  const configurationChange = ({ target }) => {
+  const configurationChange = ({ target = null, targets = null }) => {
     const configuration = { ...value.configuration };
-    set(configuration, target.id, target.value);
+
+    if (target !== null) {
+      set(configuration, target.id, target.value);
+    }
+
+    if (targets !== null) {
+      targets.forEach(({ id, value: targetValue }) => {
+        set(configuration, id, targetValue);
+      });
+    }
+
     const newValue = { ...value, configuration };
     onChange(newValue);
   };
@@ -129,10 +140,21 @@ function FeedSelector({
     }
     if (element?.input === "poster-selector") {
       return (
-        <PosterSelector
+        <PosterSelectorV1
+          key={element.key}
+          feedSource={feedSourceData}
+          configurationChange={configurationChange}
+          getValueFromConfiguration={getValueFromConfiguration}
+        />
+      );
+    }
+    if (element?.input === "poster-selector-v2") {
+      return (
+        <PosterSelectorV2
           key={element.key}
           feedSource={feedSourceData}
           configurationChange={configurationChange}
+          configuration={value.configuration}
           getValueFromConfiguration={getValueFromConfiguration}
         />
       );

src/components/slide/content/poster/poster-helper.js

@@ -0,0 +1,89 @@
+import dayjs from "dayjs";
+import localeDa from "dayjs/locale/da";
+import localStorageKeys from "../../../util/local-storage-keys";
+
+const capitalize = (s) => {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+const formatDate = (date, format) => {
+  if (!date) return "";
+  return capitalize(
+    dayjs(date)
+      .locale(localeDa)
+      .format(format ?? "LLLL")
+  );
+};
+
+const loadDropdownOptions = (url, headers, inputValue, callback, type) => {
+  const params = {
+    type,
+    display: "options",
+  };
+
+  if (inputValue) {
+    params.name = inputValue;
+  }
+
+  const query = new URLSearchParams(params);
+
+  fetch(`${url}?${query}`, {
+    headers,
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      callback(data);
+    })
+    .catch(() => {
+      callback([]);
+    });
+};
+
+const loadDropdownOptionsPromise = (url, headers, inputValue, type) => {
+  return new Promise((resolve, reject) => {
+    const params = {
+      entityType: type,
+    };
+
+    if (inputValue) {
+      params.search = inputValue;
+    }
+
+    const query = new URLSearchParams(params);
+    fetch(`${url}?${query}`, {
+      headers,
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        resolve(data);
+      })
+      .catch((reason) => {
+        reject(reason);
+      });
+  });
+};
+
+const getHeaders = () => {
+  const apiToken = localStorage.getItem(localStorageKeys.API_TOKEN);
+  const tenantKey = JSON.parse(
+    localStorage.getItem(localStorageKeys.SELECTED_TENANT)
+  );
+
+  const headers = {
+    authorization: `Bearer ${apiToken ?? ""}`,
+  };
+
+  if (tenantKey) {
+    headers["Authorization-Tenant-Key"] = tenantKey.tenantKey;
+  }
+
+  return headers;
+};
+
+export {
+  formatDate,
+  capitalize,
+  loadDropdownOptions,
+  getHeaders,
+  loadDropdownOptionsPromise,
+};

src/components/slide/content/poster-selector.jsx renamed to src/components/slide/content/poster/poster-selector-v1.jsx

@@ -6,10 +6,10 @@ import AsyncSelect from "react-select/async";
 import Col from "react-bootstrap/Col";
 import dayjs from "dayjs";
 import localeDa from "dayjs/locale/da";
-import Select from "../../util/forms/select";
-import FormInput from "../../util/forms/form-input";
-import FormCheckbox from "../../util/forms/form-checkbox";
-import localStorageKeys from "../../util/local-storage-keys";
+import Select from "../../../util/forms/select";
+import FormInput from "../../../util/forms/form-input";
+import FormCheckbox from "../../../util/forms/form-checkbox";
+import localStorageKeys from "../../../util/local-storage-keys";
 
 /**
  * @param {object} props Props.
@@ -19,7 +19,7 @@ import localStorageKeys from "../../util/local-storage-keys";
  * @param {Function} props.configurationChange Configuration onChange.
  * @returns {object} PosterSelector component.
  */
-function PosterSelector({
+function PosterSelectorV1({
   feedSource,
   getValueFromConfiguration,
   configurationChange,
@@ -650,7 +650,7 @@ function PosterSelector({
                                     <th scope="col">
                                       {t("poster-selector.table-price")}
                                     </th>
-                                    <th scope="col"> </th>
+                                    <th scope="col" />
                                   </tr>
                                 </thead>
                                 <tbody>
@@ -890,7 +890,7 @@ function PosterSelector({
   /* eslint-enable jsx-a11y/control-has-associated-label */
 }
 
-PosterSelector.propTypes = {
+PosterSelectorV1.propTypes = {
   getValueFromConfiguration: PropTypes.func.isRequired,
   configurationChange: PropTypes.func.isRequired,
   feedSource: PropTypes.shape({
@@ -903,4 +903,4 @@ PosterSelector.propTypes = {
   }).isRequired,
 };
 
-export default PosterSelector;
+export default PosterSelectorV1;