Screen status

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#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)

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

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

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

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

public/example_config.json

@@ -1,6 +1,7 @@
 {
   "api": "/",
   "touchButtonRegions": false,
+  "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/screen/screen-form.jsx

@@ -1,9 +1,8 @@
 import { React, useEffect, useState } from "react";
-import { Button, Form, Spinner, Alert } from "react-bootstrap";
+import { Button, Form, Spinner } 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 ContentBody from "../util/content-body/content-body";
 import ContentFooter from "../util/content-footer/content-footer";
 import FormInput from "../util/forms/form-input";
@@ -13,13 +12,13 @@ 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 ScreenStatus from "./screen-status";
+import { displayError } from "../util/list/toast-component/display-toast";
 
 /**
  * The screen form component.
@@ -49,11 +48,10 @@ function ScreenForm({
 }) {
   const { t } = useTranslation("common", { keyPrefix: "screen-form" });
   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,
@@ -112,57 +110,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";
@@ -203,35 +150,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>
@@ -371,6 +290,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 })
     ),

src/components/screen/screen-list.jsx

@@ -18,6 +18,7 @@ import {
   displayError,
 } from "../util/list/toast-component/display-toast";
 import "./screen-list.scss";
+import ConfigLoader from "../../config-loader";
 
 /**
  * The screen list component.
@@ -31,6 +32,8 @@ function ScreenList() {
     searchText: { get: searchText },
     page: { get: page },
     createdBy: { get: createdBy },
+    exists: { get: exists },
+    screenUserLatestRequest: { get: screenUserLatestRequest },
   } = useContext(ListContext);
   const { selected, setSelected } = useModal();
 
@@ -40,6 +43,7 @@ function ScreenList() {
   const [loadingMessage, setLoadingMessage] = useState(
     t("loading-messages.loading-screens")
   );
+  const [showScreenStatus, setShowScreenStatus] = useState(false);
 
   // Delete call
   const [
@@ -51,25 +55,30 @@ function ScreenList() {
   const {
     data,
     error: screensGetError,
+    isFetching,
     isLoading,
     refetch,
   } = useGetV2ScreensQuery({
     page,
     order: { title: "asc" },
     search: searchText,
     createdBy,
+    exists,
+    "screenUser.latestRequest": screenUserLatestRequest,
   });
 
+  useEffect(() => {
+    ConfigLoader.loadConfig().then((config) => {
+      setShowScreenStatus(config.showScreenStatus);
+    });
+  }, []);
+
   useEffect(() => {
     if (data) {
       setListData(data);
     }
   }, [data]);
 
-  useEffect(() => {
-    refetch();
-  }, [searchText, page, createdBy]);
-
   // If the tenant is changed, data should be refetched
   useEffect(() => {
     if (context.selectedTenant.get) {
@@ -110,21 +119,22 @@ function ScreenList() {
     setLoadingMessage(t("loading-messages.deleting-screen"));
   };
 
+  // Error with retrieving list of screen
+  useEffect(() => {
+    if (screensGetError) {
+      displayError(t("error-messages.screens-load-error"), screensGetError);
+    }
+  }, [screensGetError]);
+
   // The columns for the table.
   const columns = ScreenColumns({
     handleDelete,
     apiCall: useGetV2ScreensByIdScreenGroupsQuery,
     infoModalRedirect: "/group/edit",
     infoModalTitle: t("info-modal.screen-in-groups"),
+    displayStatus: showScreenStatus,
   });
 
-  // Error with retrieving list of screen
-  useEffect(() => {
-    if (screensGetError) {
-      displayError(t("error-messages.screens-load-error"), screensGetError);
-    }
-  }, [screensGetError]);
-
   return (
     <>
       <ContentHeader
@@ -142,7 +152,9 @@ function ScreenList() {
               calendarViewPossible
               handleDelete={handleDelete}
               isLoading={isLoading || isDeleting}
+              isFetching={isFetching}
               loadingMessage={loadingMessage}
+              enableScreenStatus={showScreenStatus}
             />
           )}
         </>