os2display · tuj · Dec 18, 2024 · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#276](https://github.com/os2display/display-admin-client/pull/276)
+  - Added Colibo feed type form.
+  - Fixed feed type selector when unsupported type.
 - [#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)

diff --git a/src/components/feed-sources/feed-source-form.jsx b/src/components/feed-sources/feed-source-form.jsx
@@ -1,5 +1,5 @@
 import { React } from "react";
-import { Button } from "react-bootstrap";
+import { Alert, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
@@ -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 ColiboFeedType from "./templates/colibo-feed-type";
 
 /**
  * The feed-source form component.
@@ -47,6 +48,10 @@ function FeedSourceForm({
   const { t } = useTranslation("common", { keyPrefix: "feed-source-form" });
   const navigate = useNavigate();
 
+  const typeInOptions =
+    !feedSource?.feedType ||
+    feedSourceTypeOptions.find((el) => el.value === feedSource.feedType);
+
   return (
     <>
       <Form>
@@ -72,32 +77,62 @@ function FeedSourceForm({
             value={feedSource.description}
             onChange={handleInput}
           />
-          <FormSelect
-            name="feedType"
-            formGroupClasses="mb-2"
-            label={t("feed-source-feed-type-label")}
-            value={feedSource.feedType}
-            onChange={onFeedTypeChange}
-            disabled={mode === "PUT"}
-            options={feedSourceTypeOptions}
-          />
+          {typeInOptions && (
+            <FormSelect
+              name="feedType"
+              formGroupClasses="mb-2"
+              label={t("feed-source-feed-type-label")}
+              value={feedSource.feedType}
+              onChange={onFeedTypeChange}
+              disabled={mode === "PUT"}
+              options={feedSourceTypeOptions}
+            />
+          )}
+          {!typeInOptions && (
+            <>
+              <FormInput
+                name="title"
+                formGroupClasses="mb-2"
+                type="text"
+                disabled
+                label={t("feed-source-feed-type-label")}
+                value={feedSource.feedType}
+                onChange={() => {}}
+              />
+              <Alert className="mt-4" variant="warning">
+                {t("feed-type-not-supported")}
+              </Alert>
+            </>
+          )}
 
-          {feedSource?.feedType === "App\\Feed\\CalendarApiFeedType" && (
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\Calendar\\CalendarApiFeedType" && (
             <CalendarApiFeedType
               handleInput={handleSecretInput}
               formStateObject={feedSource.secrets}
               mode={mode}
               feedSourceId={feedSource["@id"]}
             />
           )}
-          {feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" && (
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\Colibo\\ColiboFeedType" && (
+            <ColiboFeedType
+              handleInput={handleSecretInput}
+              formStateObject={feedSource.secrets}
+              mode={mode}
+              feedSourceId={feedSource["@id"]}
+            />
+          )}
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\EventDatabase\\EventDatabaseApiFeedType" && (
             <EventDatabaseApiFeedType
               handleInput={handleSecretInput}
               formStateObject={feedSource.secrets}
               mode={mode}
             />
           )}
-          {feedSource?.feedType === "App\\Feed\\NotifiedFeedType" && (
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\Notified\\NotifiedFeedType" && (
             <NotifiedFeedType
               handleInput={handleSecretInput}
               formStateObject={feedSource.secrets}

diff --git a/src/components/feed-sources/feed-source-manager.jsx b/src/components/feed-sources/feed-source-manager.jsx
@@ -60,31 +60,42 @@ function FeedSourceManager({
 
   const feedSourceTypeOptions = [
     {
-      value: "App\\Feed\\EventDatabaseApiFeedType",
+      value: "App\\Feed\\SourceType\\Calendar\\CalendarApiFeedType",
+      title: t("dynamic-fields.calendar-api-feed-type.title"),
+      key: "0",
+      secretsDefault: {
+        locations: [],
+      },
+    },
+    {
+      value: "App\\Feed\\SourceType\\Colibo\\ColiboFeedType",
+      title: t("colibo-feed-type.title"),
+      key: "5",
+      secretsDefault: {
+        api_base_uri: "",
+        client_id: "",
+        client_secret: "",
+        recipients: [],
+      },
+    },
+    {
+      value: "App\\Feed\\SourceType\\EventDatabase\\EventDatabaseApiFeedType",
       title: t("dynamic-fields.event-database-api-feed-type.title"),
       key: "1",
       secretsDefault: {
         host: "",
       },
     },
     {
-      value: "App\\Feed\\NotifiedFeedType",
+      value: "App\\Feed\\SourceType\\Notified\\NotifiedFeedType",
       title: t("dynamic-fields.notified-feed-type.title"),
       key: "2",
       secretsDefault: {
         token: "",
       },
     },
     {
-      value: "App\\Feed\\CalendarApiFeedType",
-      title: t("dynamic-fields.calendar-api-feed-type.title"),
-      key: "0",
-      secretsDefault: {
-        locations: [],
-      },
-    },
-    {
-      value: "App\\Feed\\RssFeedType",
+      value: "App\\Feed\\SourceType\\Rss\\RssFeedType",
       title: t("dynamic-fields.rss-feed-type.title"),
       key: "4",
       secretsDefault: {},

diff --git a/src/components/feed-sources/templates/colibo-feed-type.jsx b/src/components/feed-sources/templates/colibo-feed-type.jsx
@@ -0,0 +1,107 @@
+import { React, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Alert } from "react-bootstrap";
+import MultiselectFromEndpoint from "../../slide/content/multiselect-from-endpoint";
+import ConfigLoader from "../../../config-loader";
+import FormInput from "../../util/forms/form-input";
+
+const ColiboFeedType = ({
+  feedSourceId,
+  handleInput,
+  formStateObject,
+  mode,
+}) => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "colibo-feed-type",
+  });
+
+  const [optionsEndpoint, setOptionsEndpoint] = useState(null);
+
+  useEffect(() => {
+    if (feedSourceId && feedSourceId !== "") {
+      ConfigLoader.loadConfig().then((config) => {
+        let endpoint = config.api;
+        endpoint = endpoint.replace(/\/$/, "");
+        endpoint += feedSourceId;
+        endpoint += "/config/recipients";
+
+        setOptionsEndpoint(endpoint);
+      });
+    }
+  }, [feedSourceId]);
+
+  return (
+    <>
+      {!feedSourceId && (
+        <Alert className="mt-4" variant="warning">
+          {t("save-before-recipients-can-be-set")}
+        </Alert>
+      )}
+
+      <FormInput
+        name="api_base_uri"
+        type="text"
+        label={t("api-base-uri")}
+        className="mb-2"
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.api_base_uri}
+      />
+
+      <FormInput
+        name="client_id"
+        type="text"
+        className="mb-2"
+        label={t("client-id")}
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.client_id}
+      />
+
+      <FormInput
+        name="client_secret"
+        type="text"
+        label={t("client-secret")}
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.client_secret}
+      />
+
+      <Alert className="mt-4" variant="info">
+        {t("values-info")}
+      </Alert>
+
+      {optionsEndpoint && (
+        <MultiselectFromEndpoint
+          onChange={handleInput}
+          name="allowed_recipients"
+          disableSearch={false}
+          label={t("allowed-recipients")}
+          value={formStateObject.allowed_recipients ?? []}
+          optionsEndpoint={optionsEndpoint}
+        />
+      )}
+    </>
+  );
+};
+
+ColiboFeedType.propTypes = {
+  handleInput: PropTypes.func,
+  formStateObject: PropTypes.shape({
+    api_base_uri: PropTypes.string,
+    client_id: PropTypes.string,
+    client_secret: PropTypes.string,
+    allowed_recipients: PropTypes.arrayOf(PropTypes.string),
+  }),
+  feedSourceId: PropTypes.string,
+  mode: PropTypes.string,
+};
+
+export default ColiboFeedType;
diff --git a/src/components/slide/content/content-form.jsx b/src/components/slide/content/content-form.jsx
@@ -72,7 +72,7 @@ function ContentForm({
         }
 
         returnElement = (
-          <div key={formData.key}>
+          <div key={formData.key} className={formData.formGroupClasses}>
             {formData?.label && (
               <label htmlFor={formData.name} className="form-label">
                 {formData.label}
@@ -123,7 +123,7 @@ function ContentForm({
             errors={formData.required ? errors : null}
             label={formData.label}
             helpText={formData.helpText}
-            value={formStateObject[formData.name]}
+            value={formStateObject[formData.name] ?? formData?.defaultValue}
             onChange={onChange}
             formGroupClasses={formData.formGroupClasses}
           />

diff --git a/src/components/slide/content/feed-selector.jsx b/src/components/slide/content/feed-selector.jsx
@@ -123,7 +123,9 @@ function FeedSelector({
           value={getValueFromConfiguration(element.name)}
           label={element.label}
           optionsEndpoint={element.endpoint}
-          singleSelect={formElement.singleSelect ?? false}
+          disableSearch={element.disableSearch ?? false}
+          singleSelect={element.singleSelect ?? false}
+          helpText={element.helpText ?? null}
         />
       );
     }

diff --git a/src/components/slide/content/multiselect-from-endpoint.jsx b/src/components/slide/content/multiselect-from-endpoint.jsx
@@ -16,6 +16,7 @@ import { displayError } from "../../util/list/toast-component/display-toast";
  * @param {string} props.optionsEndpoint - Endpoint from which to fetch the options.
  * @param {boolean} props.singleSelect - Allow only to select one option.
  * @param {boolean} props.disableSearch - Disable search. Defaults to true.
+ * @param {string | null} props.helpText - Help text.
  * @returns {object} - The FeedSelector component.
  */
 function MultiselectFromEndpoint({
@@ -26,6 +27,7 @@ function MultiselectFromEndpoint({
   value = [],
   disableSearch = true,
   singleSelect = false,
+  helpText = null,
 }) {
   const { t } = useTranslation("common");
   const [options, setOptions] = useState(null);
@@ -98,6 +100,7 @@ function MultiselectFromEndpoint({
           }}
           filterCallback={() => {}}
           label={label ?? t("multiselect.select")}
+          helpText={helpText}
         />
       )}
     </>
@@ -112,6 +115,7 @@ MultiselectFromEndpoint.propTypes = {
   optionsEndpoint: PropTypes.string.isRequired,
   singleSelect: PropTypes.bool,
   disableSearch: PropTypes.bool,
+  helpText: PropTypes.string,
 };
 
 export default MultiselectFromEndpoint;
diff --git a/src/translations/da/common.json b/src/translations/da/common.json
@@ -261,6 +261,9 @@
       "save-feed-source-error": "Der skete en fejl da feed source skulle gemmes:",
       "load-feed-source-error": "Der skete en fejl da feed source med følgende id: {{id}} skulle hentes:"
     },
+    "colibo-feed-type": {
+      "title": "Colibo"
+    },
     "dynamic-fields": {
       "event-database-api-feed-type": {
         "title": "Eventdatabase API",
@@ -273,20 +276,21 @@
         "redacted-value-input-placeholder": "Skjult værdi"
       },
       "calendar-api-feed-type": {
-        "title": "Kalender feed",
+        "title": "Kalender",
         "locations": "Lokationer",
         "redacted-value-input-placeholder": "Skjult værdi",
         "save-before-locations-can-be-set": "Bemærk! Datakilden skal gemmes før der kan tilkobles lokationer. Gem og åbn datakilden igen."
       },
       "rss-feed-type": {
-        "title": "RSS feed"
+        "title": "RSS"
       }
     }
   },
   "feed-source-form": {
     "feed-source-name-label": "Navn",
     "feed-source-description-label": "Beskrivelse",
     "feed-source-feed-type-label": "Type",
+    "feed-type-not-supported": "Typen understøttes ikke af administrationen.",
     "save-button": "Gem datakilde",
     "cancel-button": "Annuller"
   },
@@ -1075,5 +1079,15 @@
     "active": "Aktiv",
     "future": "Fremtidig",
     "expired": "Udløbet"
+  },
+  "colibo-feed-type": {
+    "title": "Colibo feed",
+    "api-base-uri": "API Base URI",
+    "client-id": "Client ID",
+    "client-secret": "Client Secret",
+    "values-info": "Værdierne Client ID og Client Secret findes ved at oprette en API klient i \"Systemadministration\" -> \"API adgangshåndtering\" i Colibo intranet.",
+    "allowed-recipients": "Tilladte modtagergrupper",
+    "redacted-value-input-placeholder": "Skjult værdi",
+    "save-before-recipients-can-be-set": "Bemærk! Datakilden skal gemmes før der kan tilkobles tilladte modtagergrupper. Gem og åbn datakilden igen."
   }
 }