Feature/2314 save playlist and regions in screen manager

CHANGELOG.md

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

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

@@ -72,6 +72,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 +89,7 @@ function ScreenForm({
    */
   const handleAdd = ({ target }) => {
     const { value, id } = target;
+
     setSelectedLayout(value);
     handleInput({
       target: { id, value: value.map((item) => item["@id"]).shift() },
@@ -250,7 +256,7 @@ function ScreenForm({
             noSelectedString={t("nothing-selected-resolution")}
             handleSelection={handleInput}
             options={resolutionOptions}
-            selected={screen.resolution || ""}
+            selected={screen.resolution || []}
             name="resolution"
             singleSelect
           />
@@ -259,7 +265,7 @@ function ScreenForm({
             noSelectedString={t("nothing-selected-orientation")}
             handleSelection={handleInput}
             options={orientationOptions}
-            selected={screen.orientation || ""}
+            selected={screen.orientation || []}
             name="orientation"
             singleSelect
           />
@@ -340,7 +346,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,