rewrite screen save

Author: Sine Jespersen

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

@@ -26,69 +26,32 @@ import ScreenGanttChart from "../screen/util/screen-gantt-chart";
  */
 function PlaylistDragAndDrop({
   handleChange,
+  selectedPlaylists,
   name,
-  screenId,
+  handleAdd,
+  removeFromList,
   regionId,
-  regionIdForInitializeCallback,
 }) {
   const { t } = useTranslation("common", {
     keyPrefix: "playlist-drag-and-drop",
   });
-
   const [searchText, setSearchText] = useState();
-  const [selectedData, setSelectedData] = useState([]);
-  const [totalItems, setTotalItems] = useState(0);
   const [page, setPage] = useState(1);
   const [onlySharedPlaylists, setOnlySharedPlaylists] = useState(false);
-  const { data: selectedPlaylistsByRegion } =
-    useGetV2ScreensByIdRegionsAndRegionIdPlaylistsQuery({
-      id: screenId,
-      regionId,
-      page,
-      itemsPerPage: 10,
-    });
 
-  // Get method
-  const { data } = useGetV2PlaylistsQuery({
+  const {
+    data: {
+      "hydra:member": playlists = null,
+      "hydra:totalItems": totalItems = 0,
+    } = {},
+  } = useGetV2PlaylistsQuery({
     isCampaign: false,
     title: searchText,
     itemsPerPage: 30,
     order: { createdAt: "desc" },
     sharedWithMe: onlySharedPlaylists,
   });
 
-  /**
-   * @param {object} 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, weight }) => ({ ...playlist, weight })
-      );
-
-      const selected = [...selectedData, ...newPlaylists].sort(
-        (a, b) => a.weight - b.weight
-      );
-
-      setSelectedData(selected);
-      callbackToinitializePlaylists(selectedPlaylistsByRegion);
-    }
-  }, [selectedPlaylistsByRegion]);
-
   /**
    * Fetches data for the multi component
    *
@@ -98,39 +61,6 @@ function PlaylistDragAndDrop({
     setSearchText(filter);
   };
 
-  /**
-   * Removes playlist from list of playlists, and closes modal.
-   *
-   * @param {object} removeItem - Item to remove
-   */
-  const removeFromList = (removeItem) => {
-    const indexOfItemToRemove = selectedData
-      .map((item) => {
-        return item["@id"];
-      })
-      .indexOf(removeItem);
-    const selectedDataCopy = [...selectedData];
-    selectedDataCopy.splice(indexOfItemToRemove, 1);
-    setSelectedData(selectedDataCopy);
-
-    const target = { value: selectedDataCopy, id: name };
-    handleChange({ target });
-  };
-
-  /**
-   * Adds group to list of groups.
-   *
-   * @param {object} props - The props.
-   * @param {object} props.target - The target.
-   */
-  const handleAdd = ({ target }) => {
-    const { value, id } = target;
-    setSelectedData(value);
-    handleChange({
-      target: { id, value },
-    });
-  };
-
   const columns = SelectPlaylistColumns({
     handleDelete: removeFromList,
     apiCall: useGetV2PlaylistsByIdSlidesQuery,
@@ -140,42 +70,40 @@ function PlaylistDragAndDrop({
     infoModalTitle: t("select-playlists-table.info-modal.slides"),
   });
 
+  if (!playlists) return null;
+
   return (
     <>
-      {data && data["hydra:member"] && (
-        <>
-          <FormCheckbox
-            label={t("show-only-shared")}
-            onChange={() => {
-              setOnlySharedPlaylists(!onlySharedPlaylists);
-            }}
-            value={onlySharedPlaylists}
-            name="show-only-shared"
-          />
-          <div className="mb-3">
-            <PlaylistsDropdown
-              filterCallback={onFilter}
-              name={name}
-              handlePlaylistSelection={handleAdd}
-              selected={selectedData}
-              data={data["hydra:member"]}
-            />
-          </div>
-          {selectedData.length > 0 && (
-            <DragAndDropTable
-              columns={columns}
-              onDropped={handleChange}
-              name={name}
-              data={selectedData}
-              callback={() => setPage(page + 1)}
-              label={t("more-playlists")}
-              totalItems={totalItems}
-            />
-          )}
-          {selectedData?.length > 0 && (
-            <ScreenGanttChart playlists={selectedData} id={regionId} />
-          )}
-        </>
+      <FormCheckbox
+        label={t("show-only-shared")}
+        onChange={() => {
+          setOnlySharedPlaylists(!onlySharedPlaylists);
+        }}
+        value={onlySharedPlaylists}
+        name="show-only-shared"
+      />
+      <div className="mb-3">
+        <PlaylistsDropdown
+          filterCallback={onFilter}
+          name={name}
+          handlePlaylistSelection={handleAdd}
+          selected={selectedPlaylists}
+          data={playlists}
+        />
+      </div>
+      {selectedPlaylists.length > 0 && (
+        <DragAndDropTable
+          columns={columns}
+          onDropped={handleChange}
+          name={name}
+          data={selectedPlaylists}
+          callback={() => setPage(page + 1)}
+          label={t("more-playlists")}
+          totalItems={totalItems}
+        />
+      )}
+      {selectedPlaylists?.length > 0 && (
+        <ScreenGanttChart playlists={selectedPlaylists} id={regionId} />
       )}
     </>
   );

src/components/screen/screen-form.jsx

@@ -38,11 +38,14 @@ import { displayError } from "../util/list/toast-component/display-toast";
  * @param {string} props.loadingMessage The loading message for the spinner
  * @param {object} props.orientationOptions The options for the orientation dropdown
  * @param {object} props.resolutionOptions The options for the resolution dropdown
+ * @param props.handleSubmitWithoutRedirect
+ * @param props.handleSubmitWithRedirect
  * @returns {object} The screen form.
  */
 function ScreenForm({
+  handleSubmitWithoutRedirect,
   handleInput,
-  handleSubmit,
+  handleSubmitWithRedirect,
   headerText,
   orientationOptions,
   resolutionOptions,
@@ -81,8 +84,12 @@ function ScreenForm({
     previewOrientationOptions[0].value
   );
 
-  /** Check if published is set */
-  const checkInputsHandleSubmit = () => {
+  /**
+   * Check if published is set
+   *
+   * @param redirect
+   */
+  const checkInputsHandleSubmit = (redirect) => {
     setLayoutError(false);
     let submit = true;
 
@@ -93,7 +100,11 @@ function ScreenForm({
     }
 
     if (submit) {
-      handleSubmit();
+      if (redirect) {
+        handleSubmitWithRedirect();
+      } else {
+        handleSubmitWithoutRedirect();
+      }
     }
   };
 
@@ -252,14 +263,14 @@ function ScreenForm({
                 )}
                 {selectedLayout &&
                   selectedLayout.grid &&
-                  selectedLayout.regions && (
+                  selectedLayout.regions &&
+                  screen.layout && (
                     <GridGenerationAndSelect
                       screenId={idFromUrl(screen["@id"])}
                       grid={selectedLayout?.grid}
                       vertical={isVertical()}
                       regions={selectedLayout.regions}
                       handleInput={handleInput}
-                      selectedData={screen.layout}
                     />
                   )}
               </div>
@@ -375,7 +386,7 @@ function ScreenForm({
             type="button"
             className="margin-right-button"
             id="save_screen"
-            onClick={checkInputsHandleSubmit}
+            onClick={() => checkInputsHandleSubmit(false)}
           >
             {t("save-button")}
           </Button>

src/components/screen/screen-manager.jsx

@@ -35,6 +35,7 @@ function ScreenManager({
   initialState = null,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "screen-manager" });
+  const [saveWithoutClose, setSaveWithoutClose] = useState(false);
   const navigate = useNavigate();
   const orientationOptions = [
     { title: "Vertikal", "@id": "vertical" },
@@ -58,7 +59,7 @@ function ScreenManager({
   // Handler for creating screen.
   const [
     PostV2Screens,
-    { error: saveErrorPost, isSuccess: isSaveSuccessPost },
+    { data: postData, error: saveErrorPost, isSuccess: isSaveSuccessPost },
   ] = usePostV2ScreensMutation();
 
   /** If the screen is saved, display the success message */
@@ -170,7 +171,7 @@ function ScreenManager({
   function mapPlaylistsWithRegion() {
     const returnArray = [];
     const { playlists, regions } = formStateObject;
-    const regionIds = regions.map((r) => r["@id"]);
+    const regionIds = regions.map((r) => idFromUrl(r["@id"]));
 
     // The playlists all have a regionId, the following creates a unique list of relevant regions If there are not
     // playlists, then an empty playlist is to be saved per region
@@ -191,7 +192,6 @@ function ScreenManager({
         regionId: idFromUrl(regionId),
       });
     });
-
     // The remaining regions are added with empty playlist arrays.
     if (regionIds.length > 0) {
       regionIds.forEach((regionId) =>
@@ -201,7 +201,6 @@ function ScreenManager({
         })
       );
     }
-
     return returnArray;
   }
 
@@ -267,24 +266,39 @@ function ScreenManager({
     }
   };
 
+  const handleSubmitWithRedirect = () => {
+    setSaveWithoutClose(true);
+    handleSubmit();
+  };
+
   /** Handle submitting is done. */
   useEffect(() => {
     if (isSaveSuccessPut || isSaveSuccessPost) {
       setSavingScreen(false);
-      navigate("/screen/list");
+
+      if (saveWithoutClose) {
+        setSaveWithoutClose(false);
+
+        if (isSaveSuccessPost) {
+          navigate(`/screen/edit/${idFromUrl(postData["@id"])}`);
+        }
+      } else {
+        navigate("/screen/list");
+      }
     }
   }, [isSaveSuccessPut, isSaveSuccessPost]);
 
   return (
     <>
       {formStateObject && (
         <ScreenForm
+          handleSubmitWithoutRedirect={handleSubmitWithRedirect}
           screen={formStateObject}
           orientationOptions={orientationOptions}
           resolutionOptions={resolutionOptions}
           headerText={headerText}
           handleInput={handleInput}
-          handleSubmit={handleSubmit}
+          handleSubmitWithRedirect={handleSubmit}
           isLoading={savingScreen || isLoading}
           loadingMessage={loadingMessage}
           groupId={groupId}