3172: Added to remaining forms

tuj · tuj · commit 77d13aaeef4d · 2024-12-05T14:26:50.000+01:00
diff --git a/src/components/slide/slides-list.jsx b/src/components/slide/slides-list.jsx
@@ -1,13 +1,13 @@
-import { React, useState, useEffect, useContext } from "react";
-import { useTranslation } from "react-i18next";
+import {React, useState, useEffect, useContext} from "react";
+import {useTranslation} from "react-i18next";
 import List from "../util/list/list";
 import idFromUrl from "../util/helpers/id-from-url";
 import UserContext from "../../context/user-context";
 import ListContext from "../../context/list-context";
 import ContentHeader from "../util/content-header/content-header";
 import ContentBody from "../util/content-body/content-body";
 import useModal from "../../context/modal-context/modal-context-hook";
-import { SlideColumns } from "./slides-columns";
+import {SlideColumns} from "./slides-columns";
 import {
   displayError,
   displaySuccess,
@@ -17,22 +17,23 @@ import {
   useDeleteV2SlidesByIdMutation,
   useGetV2PlaylistsByIdQuery,
 } from "../../redux/api/api.generated.ts";
+import Row from "react-bootstrap/Row";
 
 /**
  * The slides list component.
  *
  * @returns {object} The slides list
  */
 function SlidesList() {
-  const { t } = useTranslation("common", { keyPrefix: "slides-list" });
+  const {t} = useTranslation("common", {keyPrefix: "slides-list"});
   const context = useContext(UserContext);
-  const { selected, setSelected } = useModal();
+  const {selected, setSelected} = useModal();
 
   const {
-    searchText: { get: searchText },
-    page: { get: page },
-    createdBy: { get: createdBy },
-    isPublished: { get: isPublished },
+    searchText: {get: searchText},
+    page: {get: page},
+    createdBy: {get: createdBy},
+    isPublished: {get: isPublished},
   } = useContext(ListContext);
 
   // Local state
@@ -43,7 +44,7 @@ function SlidesList() {
   );
 
   // Delete call
-  const [DeleteV2Slides, { isSuccess: isDeleteSuccess, error: isDeleteError }] =
+  const [DeleteV2Slides, {isSuccess: isDeleteSuccess, error: isDeleteError}] =
     useDeleteV2SlidesByIdMutation();
 
   // Get method
@@ -54,7 +55,7 @@ function SlidesList() {
     refetch,
   } = useGetV2SlidesQuery({
     page,
-    order: { createdAt: "desc" },
+    order: {createdAt: "desc"},
     title: searchText,
     published: isPublished,
     createdBy,
@@ -83,7 +84,7 @@ function SlidesList() {
       const slideToDelete = selected[0];
       setSelected(selected.slice(1));
       const slideToDeleteId = idFromUrl(slideToDelete.id);
-      DeleteV2Slides({ id: slideToDeleteId });
+      DeleteV2Slides({id: slideToDeleteId});
     }
   }, [isDeleting, isDeleteSuccess]);
 
diff --git a/src/components/themes/theme-create.jsx b/src/components/themes/theme-create.jsx
@@ -18,9 +18,7 @@ function ThemeCreate() {
   };
 
   return (
-    <div className="p-3">
-      <ThemeManager saveMethod="POST" initialState={data} />
-    </div>
+    <ThemeManager saveMethod="POST" initialState={data} />
   );
 }
 
diff --git a/src/components/themes/theme-edit.jsx b/src/components/themes/theme-edit.jsx
@@ -18,15 +18,13 @@ function ThemeEdit() {
   } = useGetV2ThemesByIdQuery({ id });
 
   return (
-    <div className="p-3">
-      <ThemeManager
-        saveMethod="PUT"
-        initialState={data}
-        id={id}
-        loadingError={loadingError}
-        isLoading={isLoading}
-      />
-    </div>
+    <ThemeManager
+      saveMethod="PUT"
+      initialState={data}
+      id={id}
+      loadingError={loadingError}
+      isLoading={isLoading}
+    />
   );
 }
 
diff --git a/src/components/themes/theme-form.jsx b/src/components/themes/theme-form.jsx
@@ -1,15 +1,15 @@
 import { React } from "react";
-import { Button, FormLabel } from "react-bootstrap";
+import { Button, FormLabel, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import FormInputArea from "../util/forms/form-input-area";
 import ContentBody from "../util/content-body/content-body";
-import ContentFooter from "../util/content-footer/content-footer";
 import FormInput from "../util/forms/form-input";
 import ImageUploader from "../util/image-uploader/image-uploader";
+import StickyFooter from "../util/sticky-footer";
 
 /**
  * The theme form component.
@@ -26,81 +26,94 @@ import ImageUploader from "../util/image-uploader/image-uploader";
 function ThemeForm({
   handleInput,
   handleSubmit,
+  handleSaveNoClose,
   headerText,
   isLoading = false,
   loadingMessage = "",
   theme = null,
 }) {
-  const { t } = useTranslation("common");
+  const { t } = useTranslation("common", { keyPrefix: "theme-form" });
   const navigate = useNavigate();
 
   return (
-    <>
+    <div>
+      <LoadingComponent
+        isLoading={isLoading}
+        loadingMessage={loadingMessage}
+      />
       <Form>
-        <LoadingComponent
-          isLoading={isLoading}
-          loadingMessage={loadingMessage}
-        />
-        <h1 id="themeTitle">{headerText}</h1>
-        <ContentBody>
-          <FormInput
-            name="title"
-            type="text"
-            label={t("theme-form.theme-name-label")}
-            value={theme.title}
-            onChange={handleInput}
-          />
-          <FormInputArea
-            name="description"
-            type="text"
-            label={t("theme-form.theme-description-label")}
-            value={theme.description}
-            onChange={handleInput}
-          />
-        </ContentBody>
-        <ContentBody>
-          <h2 className="h4">{t("theme-form.css-header")}</h2>
-          <FormInputArea
-            name="cssStyles"
-            type="text"
-            label={t("theme-form.theme-css-label")}
-            value={theme.cssStyles}
-            onChange={handleInput}
-          />
-          <FormLabel htmlFor="logo" className="mt-5">
-            {t("theme-form.logo-title")}
-          </FormLabel>
-          <ImageUploader
-            multipleImages={false}
-            handleImageUpload={handleInput}
-            inputImage={theme.logo}
-            name="logo"
-            showLibraryButton
-          />
-        </ContentBody>
-        <ContentFooter>
+        <Row className="m-2">
+          <h1 id="themeTitle">{headerText}</h1>
+          <Col>
+            <ContentBody>
+              <FormInput
+                name="title"
+                type="text"
+                label={t("theme-name-label")}
+                value={theme.title}
+                onChange={handleInput}
+              />
+              <FormInputArea
+                name="description"
+                type="text"
+                label={t("theme-description-label")}
+                value={theme.description}
+                onChange={handleInput}
+              />
+            </ContentBody>
+            <ContentBody>
+              <h2 className="h4">{t("css-header")}</h2>
+              <FormInputArea
+                name="cssStyles"
+                type="text"
+                label={t("theme-css-label")}
+                value={theme.cssStyles}
+                onChange={handleInput}
+              />
+              <FormLabel htmlFor="logo" className="mt-5">
+                {t("logo-title")}
+              </FormLabel>
+              <ImageUploader
+                multipleImages={false}
+                handleImageUpload={handleInput}
+                inputImage={theme.logo ?? null}
+                name="logo"
+                showLibraryButton
+              />
+            </ContentBody>
+          </Col>
+        </Row>
+
+        <StickyFooter>
           <Button
             variant="secondary"
             type="button"
             id="cancel_theme"
             onClick={() => navigate("/themes/list")}
-            size="lg"
             className="margin-right-button"
           >
-            {t("theme-form.cancel-button")}
+            {t("cancel-button")}
+          </Button>
+          <Button
+            variant="outline-primary"
+            type="button"
+            id="save_without_close"
+            onClick={handleSaveNoClose}
+            className="margin-right-button"
+          >
+            {t("save-without-close-button")}
           </Button>
           <Button
             variant="primary"
             type="button"
             onClick={handleSubmit}
             id="save_theme"
-            size="lg"
           >
-            {t("theme-form.save-button")}
+            {t("save-button")}
           </Button>
-        </ContentFooter>
+        </StickyFooter>
       </Form>
-    </>
+    </div>
   );
 }
 
@@ -113,6 +126,7 @@ ThemeForm.propTypes = {
   }),
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  handleSaveNoClose: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   loadingMessage: PropTypes.string,
diff --git a/src/components/themes/theme-manager.jsx b/src/components/themes/theme-manager.jsx
@@ -12,6 +12,7 @@ import {
   displaySuccess,
   displayError,
 } from "../util/list/toast-component/display-toast";
+import idFromUrl from "../util/helpers/id-from-url";
 
 /**
  * The theme manager component.
@@ -43,6 +44,7 @@ function ThemeManager({
   const [loadingMessage, setLoadingMessage] = useState(
     t("loading-messages.loading-theme")
   );
+  const [saveWithoutClose, setSaveWithoutClose] = useState(false);
 
   const [submitting, setSubmitting] = useState(false);
   const [formStateObject, setFormStateObject] = useState({
@@ -173,7 +175,16 @@ function ThemeManager({
     if (isSaveSuccessPost || isSaveSuccessPut) {
       setSubmitting(false);
       displaySuccess(t("success-messages.saved-theme"));
-      navigate("/themes/list");
+
+      if (saveWithoutClose) {
+        setSaveWithoutClose(false);
+
+        if (isSaveSuccessPost) {
+          navigate(`/themes/edit/${idFromUrl(data["@id"])}`);
+        }
+      } else {
+        navigate(`/themes/list`);
+      }
     }
   }, [isSaveSuccessPut, isSaveSuccessPost]);
 
@@ -188,6 +199,11 @@ function ThemeManager({
     }
   };
 
+  const handleSaveNoClose = () => {
+    setSaveWithoutClose(true);
+    handleSubmit();
+  };
+
   /** If the theme is saved with error, display the error message */
   useEffect(() => {
     if (saveErrorPut || saveErrorPost) {
@@ -205,6 +221,7 @@ function ThemeManager({
           headerText={`${headerText}: ${formStateObject?.title}`}
           handleInput={handleInput}
           handleSubmit={handleSubmit}
+          handleSaveNoClose={handleSaveNoClose}
           isLoading={isLoading || submitting}
           loadingMessage={loadingMessage}
         />
diff --git a/src/translations/da/common.json b/src/translations/da/common.json
@@ -407,7 +407,8 @@
     "theme-description-label": "Temaets beskrivelse",
     "css-header": "Temaets CSS",
     "theme-css-label": "Temaets CSS",
-    "save-button": "Gem tema",
+    "save-button": "Gem tema og luk",
+    "save-without-close-button": "Gem tema",
     "cancel-button": "Annuller"
   },
   "group-form": {

Original file line number	Diff line number	Diff line change
`@@ -18,9 +18,7 @@ function ThemeCreate() {`
`18`	`18`	`};`
`19`	`19`
`20`	`20`	`return (`
`21`		`- <div className="p-3">`
`22`		`- <ThemeManager saveMethod="POST" initialState={data} />`
`23`		`- </div>`
	`21`	`+ <ThemeManager saveMethod="POST" initialState={data} />`
`24`	`22`	`);`
`25`	`23`	`}`
`26`	`24`