2533: Fixed merge

Author: tuj

.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

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [2.4.0] - 2025-03-31
+
+- [#281](https://github.com/os2display/display-admin-client/pull/281)
+  - Fixed screen status bugs.
+- [#274](https://github.com/os2display/display-admin-client/pull/274)
+  - Added screen status to screen list.
+  - Refactored screen status on screen edit.
+  - Change campaign icon in screen list to boolean text.
+
+## [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)
   - Fixed calendar api feed source config endpoint.
 - [#272](https://github.com/os2display/display-admin-client/pull/272)

infrastructure/itkdev/etc/confd/templates/config.tmpl

@@ -2,6 +2,7 @@
   "api": "{{ getenv "API_PATH" "/" }}",
   "touchButtonRegions": "{{ getenv "APP_TOUCH_BUTTON_REGIONS" "false"}}",
   "previewClient": "{{ getenv "APP_PREVIEW_CLIENT" "null"}}",
+  "showScreenStatus": "{{ getenv "APP_SHOW_SCREEN_STATUS" "true"}}",
   "rejseplanenApiKey": "{{ getenv "APP_REJSEPLANEN_API_KEY" "null"}}",
   "loginMethods": [
     {

infrastructure/os2display/etc/confd/templates/config.tmpl

@@ -2,6 +2,7 @@
   "api": "{{ getenv "API_PATH" "/" }}",
   "touchButtonRegions": "{{ getenv "APP_TOUCH_BUTTON_REGIONS" "false"}}",
   "previewClient": "{{ getenv "APP_PREVIEW_CLIENT" "null"}}",
+  "showScreenStatus": "{{ getenv "APP_SHOW_SCREEN_STATUS" "false"}}",
   "rejseplanenApiKey": "{{ getenv "APP_REJSEPLANEN_API_KEY" "null"}}",
   "loginMethods": [
     {

public/example_config.json

@@ -2,6 +2,7 @@
   "api": "/",
   "touchButtonRegions": false,
   "previewClient": null,
+  "showScreenStatus": false,
   "rejseplanenApiKey": null,
   "loginMethods": [
     {

src/app.jsx

@@ -64,6 +64,8 @@ function App() {
   const [page, setPage] = useState(1);
   const [createdBy, setCreatedBy] = useState("all");
   const [isPublished, setIsPublished] = useState("all");
+  const [exists, setExists] = useState(null);
+  const [screenUserLatestRequest, setScreenUserLatestRequest] = useState(null);
 
   const userStore = {
     authenticated: { get: authenticated, set: setAuthenticated },
@@ -80,6 +82,11 @@ function App() {
     page: { get: page, set: setPage },
     createdBy: { get: createdBy, set: setCreatedBy },
     isPublished: { get: isPublished, set: setIsPublished },
+    exists: { get: exists, set: setExists },
+    screenUserLatestRequest: {
+      get: screenUserLatestRequest,
+      set: setScreenUserLatestRequest,
+    },
   };
 
   useEffect(() => {

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

@@ -13,6 +13,7 @@ import CalendarApiFeedType from "./templates/calendar-api-feed-type";
 import NotifiedFeedType from "./templates/notified-feed-type";
 import EventDatabaseApiFeedType from "./templates/event-database-feed-type";
 import StickyFooter from "../util/sticky-footer";
+import EventDatabaseApiV2FeedType from "./templates/event-database-v2-feed-type";
 
 /**
  * The feed-source form component.
@@ -102,6 +103,14 @@ 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

@@ -69,6 +69,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/screen/screen-form.jsx

@@ -3,7 +3,6 @@ import { Button, Form, Spinner, Alert, Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
-import { useDispatch } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
@@ -14,17 +13,17 @@ import GridGenerationAndSelect from "./util/grid-generation-and-select";
 import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropdown";
 import idFromUrl from "../util/helpers/id-from-url";
 import {
-  api,
   useGetV2LayoutsQuery,
   useGetV2ScreensByIdScreenGroupsQuery,
 } from "../../redux/api/api.generated.ts";
-import { displayError } from "../util/list/toast-component/display-toast";
 import FormCheckbox from "../util/forms/form-checkbox";
 import "./screen-form.scss";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
 import Select from "../util/forms/select";
 import userContext from "../../context/user-context";
+import ScreenStatus from "./screen-status";
+import { displayError } from "../util/list/toast-component/display-toast";
 
 /**
  * The screen form component.
@@ -55,11 +54,10 @@ function ScreenForm({
   const { t } = useTranslation("common", { keyPrefix: "screen-form" });
   const { config } = useContext(userContext);
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+
   const [layoutError, setLayoutError] = useState(false);
   const [selectedLayout, setSelectedLayout] = useState();
   const [layoutOptions, setLayoutOptions] = useState();
-  const [bindKey, setBindKey] = useState("");
   const { data: layouts } = useGetV2LayoutsQuery({
     page: 1,
     itemsPerPage: 20,
@@ -136,57 +134,6 @@ function ScreenForm({
     });
   };
 
-  const handleBindScreen = () => {
-    if (bindKey) {
-      dispatch(
-        api.endpoints.postScreenBindKey.initiate({
-          id: idFromUrl(screen["@id"]),
-          screenBindObject: JSON.stringify({
-            bindKey,
-          }),
-        })
-      ).then((response) => {
-        if (response.error) {
-          const err = response.error;
-          displayError(
-            t("error-messages.error-binding", {
-              status: err.status,
-            }),
-            err
-          );
-        } else {
-          // Set screenUser to true, to indicate it has been set.
-          handleInput({ target: { id: "screenUser", value: true } });
-        }
-      });
-    }
-  };
-
-  const handleUnbindScreen = () => {
-    if (screen?.screenUser) {
-      setBindKey("");
-
-      dispatch(
-        api.endpoints.postScreenUnbind.initiate({
-          id: idFromUrl(screen["@id"]),
-        })
-      ).then((response) => {
-        if (response.error) {
-          const err = response.error;
-          displayError(
-            t("error-messages.error-unbinding", {
-              status: err.status,
-            }),
-            err
-          );
-        } else {
-          // Set screenUser to null, to indicate it has been removed.
-          handleInput({ target: { id: "screenUser", value: null } });
-        }
-      });
-    }
-  };
-
   const isVertical = () => {
     if (screen?.orientation?.length > 0) {
       return screen.orientation[0].id === "vertical";
@@ -230,35 +177,7 @@ function ScreenForm({
             {Object.prototype.hasOwnProperty.call(screen, "@id") && (
               <ContentBody>
                 <h2 className="h4 mb-3">{t("bind-header")}</h2>
-                {screen?.screenUser && (
-                  <>
-                    <div className="mb-3">
-                      <Alert key="screen-bound" variant="success">
-                        {t("already-bound")}
-                      </Alert>
-                    </div>
-                    <Button onClick={handleUnbindScreen}>{t("unbind")}</Button>
-                  </>
-                )}
-                {!screen?.screenUser && (
-                  <>
-                    <div className="mb-3">
-                      <Alert key="screen-not-bound" variant="danger">
-                        {t("not-bound")}
-                      </Alert>
-                    </div>
-                    <FormInput
-                      onChange={({ target }) => {
-                        setBindKey(target?.value);
-                      }}
-                      name="bindKey"
-                      value={bindKey}
-                      label={t("bindkey-label")}
-                      className="mb-3"
-                    />
-                    <Button onClick={handleBindScreen}>{t("bind")}</Button>
-                  </>
-                )}
+                <ScreenStatus screen={screen} handleInput={handleInput} />
               </ContentBody>
             )}
             <ContentBody>
@@ -494,6 +413,7 @@ ScreenForm.propTypes = {
     screenUser: PropTypes.string,
     size: PropTypes.string,
     title: PropTypes.string,
+    status: PropTypes.shape({}),
     playlists: PropTypes.arrayOf(
       PropTypes.shape({ name: PropTypes.string, id: PropTypes.number })
     ),