Merge branch 'release/2.1.1'

.docker/vhost.conf

@@ -7,6 +7,10 @@ server {
         proxy_set_header   X-Forwarded-For $remote_addr;
         proxy_set_header   Host $http_host;
         proxy_pass         http://node:3000;
+
+        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
     }
 
     location /admin/ws {

CHANGELOG.md

@@ -5,6 +5,31 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [2.1.1] - 2024-10-23
+
+- [#266](https://github.com/os2display/display-admin-client/pull/266)
+  - Fixed search from local storage.
+- [#265](https://github.com/os2display/display-admin-client/pull/265)
+  - Add no-cache directive
+- [#263](https://github.com/os2display/display-admin-client/pull/263)
+  - Added prefix to local storage keys.
+- [#262](https://github.com/os2display/display-admin-client/pull/262)
+  - Add multi select styling for `invalid` state 
+  - Add possibility of sending error via props to multiselect component
+  - Add validation checking if layout is selected on screen before save
+  - Add validation checking if template is selected on slide before save
+- [#260](https://github.com/os2display/display-admin-client/pull/260)
+  - Bug in multiselect, fixed by removing duplicates by key both `@id`and `id` 
+- [#265](https://github.com/os2display/display-admin-client/pull/265)
+  - Bug in multiselect, fixed by removing duplicates by key both `@id`and `id`
+- [#259](https://github.com/os2display/display-admin-client/pull/259)
+  - Add saving of playlists/groups with screen (as opposed to _after_)
+  - Clean up `screen-manager.jsx`
+  - Change bootstrap column class from `col-md-8` -> `col-md-12` 
+  - update api.generated.ts to match [related pr](https://github.com/os2display/display-api-service/pull/213)
+  - Add @rtk-incubator/rtk-query-codegen-openapi to package.json in `src/redux/api`
+  - Sort playlists based on weight in drag/drop component
+
 ## [2.1.0] - 2024-10-23
 
 - [#258](https://github.com/os2display/display-admin-client/pull/258)

e2e/slides.spec.js

@@ -145,11 +145,7 @@ test.describe("Create slide page works", () => {
       page.locator(".Toastify").locator(".Toastify__toast--error")
     ).toBeVisible();
     await expect(
-      page
-        .locator(".Toastify")
-        .locator(".Toastify__toast--error")
-        .getByText(/An error occurred/)
-        .first()
+      page.locator(".Toastify").locator(".Toastify__toast--error").first()
     ).toBeVisible();
     await expect(page).toHaveURL(/slide\/create/);
   });

infrastructure/itkdev/etc/confd/templates/default.conf.tmpl

@@ -4,15 +4,21 @@ server {
     root /var/www/html;
     index index.html index.htm;
 
+    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    add_header Pragma "no-cache";
+    add_header Expires "0";
+
     # Any route containing a file extension (e.g. /devicesfile.js)
     location ~* ^{{ getenv "APP_ADMIN_CLIENT_PATH" "" }}/(.+\..+)$ {
         rewrite ^{{ getenv "APP_ADMIN_CLIENT_PATH" "/" }}(.*) /$1 break;
+
         try_files $uri =404;
     }
 
     location ~* ^{{ getenv "APP_ADMIN_CLIENT_PATH" "/" }} {
         rewrite ^{{ getenv "APP_ADMIN_CLIENT_PATH" "/" }}(.*) /$1 break;
         autoindex off;
+
         try_files $uri /index.html;
     }
 

infrastructure/os2display/etc/confd/templates/default.conf.tmpl

@@ -4,15 +4,21 @@ server {
     root /var/www/html;
     index index.html index.htm;
 
+    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    add_header Pragma "no-cache";
+    add_header Expires "0";
+
     # Any route containing a file extension (e.g. /devicesfile.js)
     location ~* ^{{ getenv "APP_ADMIN_CLIENT_PATH" "" }}/(.+\..+)$ {
         rewrite ^{{ getenv "APP_ADMIN_CLIENT_PATH" "/" }}(.*) /$1 break;
+
         try_files $uri =404;
     }
 
     location ~* ^{{ getenv "APP_ADMIN_CLIENT_PATH" "/" }} {
         rewrite ^{{ getenv "APP_ADMIN_CLIENT_PATH" "/" }}(.*) /$1 break;
         autoindex off;
+
         try_files $uri /index.html;
     }
 

src/app.scss

@@ -57,13 +57,8 @@ body,
   padding: 5em;
   z-index: 1021;
 
-  .spinner-container {
-    display: flex;
-    position: fixed;
-
-    .loading-spinner {
-      margin-right: 1em;
-    }
+  .loading-spinner {
+    margin-right: 0.6em;
   }
 }
 

src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx

@@ -20,9 +20,17 @@ import ScreenGanttChart from "../screen/util/screen-gantt-chart";
  * @param {string} props.name - The id of the form element
  * @param {string} props.screenId - The screen id for get request
  * @param {string} props.regionId - The region id for get request
+ * @param {string} props.regionIdForInitializeCallback - The region id to add
+ *   regions to formstateobject.
  * @returns {object} A drag and drop component
  */
-function PlaylistDragAndDrop({ handleChange, name, screenId, regionId }) {
+function PlaylistDragAndDrop({
+  handleChange,
+  name,
+  screenId,
+  regionId,
+  regionIdForInitializeCallback,
+}) {
   const { t } = useTranslation("common", {
     keyPrefix: "playlist-drag-and-drop",
   });
@@ -49,16 +57,35 @@ function PlaylistDragAndDrop({ handleChange, name, screenId, regionId }) {
     sharedWithMe: onlySharedPlaylists,
   });
 
+  /**
+   * @param regionsAndPlaylists This method initializes playlists, so the
+   *   initial formstate object in screen manager is not empty
+   */
+  function callbackToinitializePlaylists(regionsAndPlaylists) {
+    handleChange({
+      target: {
+        id: regionIdForInitializeCallback,
+        value: regionsAndPlaylists["hydra:member"].map(
+          ({ playlist }) => playlist
+        ),
+      },
+    });
+  }
+
   /** Set loaded data into form state. */
   useEffect(() => {
     if (selectedPlaylistsByRegion) {
       setTotalItems(selectedPlaylistsByRegion["hydra:totalItems"]);
       const newPlaylists = selectedPlaylistsByRegion["hydra:member"].map(
-        ({ playlist }) => {
-          return playlist;
-        }
+        ({ playlist, weight }) => ({ ...playlist, weight })
+      );
+
+      const selected = [...selectedData, ...newPlaylists].sort(
+        (a, b) => a.weight - b.weight
       );
-      setSelectedData([...selectedData, ...newPlaylists]);
+
+      setSelectedData(selected);
+      callbackToinitializePlaylists(selectedPlaylistsByRegion);
     }
   }, [selectedPlaylistsByRegion]);
 
@@ -157,6 +184,7 @@ function PlaylistDragAndDrop({ handleChange, name, screenId, regionId }) {
 PlaylistDragAndDrop.propTypes = {
   name: PropTypes.string.isRequired,
   screenId: PropTypes.string.isRequired,
+  regionIdForInitializeCallback: PropTypes.string.isRequired,
   regionId: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
 };

src/components/screen/screen-form.jsx

@@ -50,6 +50,7 @@ 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("");
@@ -59,6 +60,21 @@ function ScreenForm({
     order: { createdAt: "desc" },
   });
 
+  /** Check if published is set */
+  const checkInputsHandleSubmit = () => {
+    setLayoutError(false);
+    let submit = true;
+    if (!selectedLayout) {
+      displayError(t("remember-layout-error"));
+      setLayoutError(true);
+      submit = false;
+    }
+
+    if (submit) {
+      handleSubmit();
+    }
+  };
+
   useEffect(() => {
     if (layouts) {
       setLayoutOptions(layouts["hydra:member"]);
@@ -72,6 +88,11 @@ function ScreenForm({
       );
       if (localSelectedLayout) {
         setSelectedLayout(localSelectedLayout);
+        // Initialize regions in the formstate object of screenmanager. used to save "empty" playlists, in the situation
+        // we are deleting all playlists from a screen region
+        handleInput({
+          target: { id: "regions", value: localSelectedLayout.regions },
+        });
       }
     }
   }, [screen.layout, layoutOptions]);
@@ -84,6 +105,7 @@ function ScreenForm({
    */
   const handleAdd = ({ target }) => {
     const { value, id } = target;
+
     setSelectedLayout(value);
     handleInput({
       target: { id, value: value.map((item) => item["@id"]).shift() },
@@ -250,7 +272,7 @@ function ScreenForm({
             noSelectedString={t("nothing-selected-resolution")}
             handleSelection={handleInput}
             options={resolutionOptions}
-            selected={screen.resolution || ""}
+            selected={screen.resolution || []}
             name="resolution"
             singleSelect
           />
@@ -259,7 +281,7 @@ function ScreenForm({
             noSelectedString={t("nothing-selected-orientation")}
             handleSelection={handleInput}
             options={orientationOptions}
-            selected={screen.orientation || ""}
+            selected={screen.orientation || []}
             name="orientation"
             singleSelect
           />
@@ -277,6 +299,7 @@ function ScreenForm({
                   helpText={t("search-to-se-possible-selections")}
                   selected={selectedLayout ? [selectedLayout] : []}
                   name="layout"
+                  error={layoutError}
                   singleSelect
                 />
               </div>
@@ -321,7 +344,7 @@ function ScreenForm({
             type="button"
             id="save_screen"
             size="lg"
-            onClick={handleSubmit}
+            onClick={checkInputsHandleSubmit}
           >
             {t("save-button")}
           </Button>
@@ -340,7 +363,11 @@ ScreenForm.propTypes = {
     enableColorSchemeChange: PropTypes.bool,
     layout: PropTypes.string,
     location: PropTypes.string,
-    regions: PropTypes.arrayOf(PropTypes.string),
+    regions: PropTypes.arrayOf(
+      PropTypes.shape({
+        "@id": PropTypes.string,
+      })
+    ),
     screenUser: PropTypes.string,
     size: PropTypes.string,
     title: PropTypes.string,