New feed source: Eventdatabasen v2

.github/workflows/pr.yml

@@ -54,8 +54,7 @@ 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@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#271](https://github.com/os2display/display-admin-client/pull/271)
+  - Added new feed source: Eventdatabasen v2.
 - [#273](https://github.com/os2display/display-admin-client/pull/273)
   - Fixed calendar api feed source config endpoint.
 - [#272](https://github.com/os2display/display-admin-client/pull/272)

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 PosterSelector from "./poster/poster-selector";
+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) {
+      for (let i = 0; i < targets.length; i += 1) {
+        set(configuration, targets[i].id, targets[i].value);
+      }
+    }
+
     const newValue = { ...value, configuration };
     onChange(newValue);
   };
@@ -137,6 +148,17 @@ function FeedSelector({
         />
       );
     }
+    if (element?.input === "poster-selector-v2") {
+      return (
+        <PosterSelectorV2
+          key={element.key}
+          feedSource={feedSourceData}
+          configurationChange={configurationChange}
+          configuration={value.configuration}
+          getValueFromConfiguration={getValueFromConfiguration}
+        />
+      );
+    }
 
     return (
       <ContentForm

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/poster-selector-v2.jsx

@@ -0,0 +1,104 @@
+import { React } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Button, Card, Row } from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import PosterSingle from "./poster-single";
+import PosterSubscription from "./poster-subscription";
+
+/**
+ * @param {object} props Props.
+ * @param {object} props.feedSource Feed source.
+ * @param {Function} props.getValueFromConfiguration Gets a value from the feed
+ *   configuration.
+ * @param {Function} props.configurationChange Configuration onChange.
+ * @param {object} props.configuration Configuration.
+ * @returns {object} PosterSelector component.
+ */
+function PosterSelectorV2({
+  feedSource,
+  getValueFromConfiguration,
+  configuration,
+  configurationChange,
+}) {
+  const { t } = useTranslation("common", { keyPrefix: "poster-selector-v2" });
+  const posterType = getValueFromConfiguration("posterType");
+
+  return (
+    <Card className="mb-3">
+      <Card.Body>
+        {!posterType && (
+          <Row>
+            <Col>
+              <h5>{t("select-mode")}</h5>
+            </Col>
+            <Col>
+              <Button
+                onClick={() =>
+                  configurationChange({
+                    target: {
+                      id: "posterType",
+                      value: "single",
+                    },
+                  })
+                }
+              >
+                {t("poster-feed-type-single")}
+              </Button>
+            </Col>
+            <Col>
+              <Button
+                onClick={() =>
+                  configurationChange({
+                    target: {
+                      id: "posterType",
+                      value: "subscription",
+                    },
+                  })
+                }
+              >
+                {t("poster-feed-type-subscription")}
+              </Button>
+            </Col>
+          </Row>
+        )}
+        {posterType && (
+          <>
+            {posterType === "single" && (
+              <PosterSingle
+                feedSource={feedSource}
+                configuration={configuration}
+                getValueFromConfiguration={getValueFromConfiguration}
+                configurationChange={configurationChange}
+              />
+            )}
+            {posterType === "subscription" && (
+              <PosterSubscription
+                feedSource={feedSource}
+                configuration={configuration}
+                getValueFromConfiguration={getValueFromConfiguration}
+                configurationChange={configurationChange}
+              />
+            )}
+          </>
+        )}
+      </Card.Body>
+    </Card>
+  );
+}
+
+PosterSelectorV2.propTypes = {
+  getValueFromConfiguration: PropTypes.func.isRequired,
+  configurationChange: PropTypes.func.isRequired,
+  configuration: PropTypes.shape({}),
+  feedSource: PropTypes.shape({
+    admin: PropTypes.arrayOf(
+      PropTypes.shape({
+        endpointEntity: PropTypes.string,
+        endpointSearch: PropTypes.string,
+      })
+    ),
+  }).isRequired,
+};
+
+export default PosterSelectorV2;

src/components/slide/content/poster-selector.jsx → src/components/slide/content/poster/poster-selector.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.
@@ -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>