Merge pull request #262 from os2display/feature/2807-template-layout-selected-validation

2807 template layout selected validation

Author: sinejespersen

CHANGELOG.md

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

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/);
   });

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"]);
@@ -283,6 +299,7 @@ function ScreenForm({
                   helpText={t("search-to-se-possible-selections")}
                   selected={selectedLayout ? [selectedLayout] : []}
                   name="layout"
+                  error={layoutError}
                   singleSelect
                 />
               </div>
@@ -327,7 +344,7 @@ function ScreenForm({
             type="button"
             id="save_screen"
             size="lg"
-            onClick={handleSubmit}
+            onClick={checkInputsHandleSubmit}
           >
             {t("save-button")}
           </Button>

src/components/screen/screen-manager.jsx

@@ -257,7 +257,7 @@ function ScreenManager({
         regions: mapPlaylistsWithRegion(),
       }),
     };
-    debugger;
+
     setLoadingMessage(t("loading-messages.saving-screen"));
 
     if (saveMethod === "POST") {

src/components/slide/slide-form.jsx

@@ -72,6 +72,7 @@ function SlideForm({
   const [searchTextTheme, setSearchTextTheme] = useState("");
   const [selectedTemplates, setSelectedTemplates] = useState([]);
   const [themesOptions, setThemesOptions] = useState();
+  const [templateError, setTemplateError] = useState(false);
 
   // Load templates.
   const { data: templates, isLoading: loadingTemplates } =
@@ -87,6 +88,21 @@ function SlideForm({
     order: { createdAt: "desc" },
   });
 
+  /** Check if published is set */
+  const checkInputsHandleSubmit = () => {
+    setTemplateError(false);
+    let submit = true;
+    if (!selectedTemplate) {
+      setTemplateError(true);
+      submit = false;
+      displayError(t("slide-form.remember-template-error"));
+    }
+
+    if (submit) {
+      handleSubmit();
+    }
+  };
+
   /**
    * For closing overlay on escape key.
    *
@@ -227,6 +243,7 @@ function SlideForm({
                     handleSelection={selectTemplate}
                     options={templateOptions}
                     selected={selectedTemplates}
+                    error={templateError}
                     name="templateInfo"
                     filterCallback={onFilterTemplate}
                     singleSelect
@@ -484,7 +501,7 @@ function SlideForm({
           <Button
             variant="primary"
             type="button"
-            onClick={handleSubmit}
+            onClick={checkInputsHandleSubmit}
             id="save_slide"
             size="lg"
           >

src/components/util/forms/multiselect-dropdown/multi-dropdown.jsx

@@ -26,6 +26,7 @@ import "./multi-dropdown.scss";
  * @param {Function} props.filterCallback - The callback on search filter.
  * @param {boolean} props.singleSelect - If the dropdown is single select.
  * @param {boolean} props.disableSearch - Disable search option.
+ * @param props.error
  * @returns {object} - The multidropdown
  */
 function MultiSelectComponent({
@@ -35,6 +36,7 @@ function MultiSelectComponent({
   noSelectedString = null,
   isLoading = false,
   errorText = "",
+  error = false,
   helpText = null,
   selected = [],
   options = [],
@@ -43,7 +45,6 @@ function MultiSelectComponent({
   filterCallback = () => {},
 }) {
   const { t } = useTranslation("common");
-  const [error] = useState();
   const [mappedOptions, setMappedOptions] = useState();
   const [mappedSelected, setMappedSelected] = useState();
   const textOnError = errorText || t("multi-dropdown.validation-text");
@@ -224,6 +225,7 @@ MultiSelectComponent.propTypes = {
   name: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   errorText: PropTypes.string,
+  error: PropTypes.bool,
   label: PropTypes.string.isRequired,
   helpText: PropTypes.string,
   singleSelect: PropTypes.bool,

src/components/util/forms/multiselect-dropdown/multi-dropdown.scss

@@ -1,4 +1,10 @@
+@import "bootstrap/scss/bootstrap";
+
 .rmsc {
+  &.invalid {
+    border: 1px solid $red;
+  }
+
   &.single-select {
     input[type="checkbox"] {
       opacity: 0;

src/translations/da/common.json

@@ -305,6 +305,7 @@
   "slide-form": {
     "slide-template-selected": "Skabelon",
     "template-error": "Der skete en fejl da skabelonen skulle hentes:",
+    "remember-template-error": "Husk at tilknytte en skabelon til dit slide",
     "touch-region": "Touch region",
     "touch-region-button-text-label": "Knaptekst i touch region",
     "touch-region-button-text-helptext": "Her kan du sætte knapteksten, hvis slidet indgår i en touch region, hvor slides bliver vist som knapper der kan åbnes.",
@@ -670,6 +671,7 @@
     }
   },
   "screen-form": {
+    "remember-layout-error": "Husk at tilknytte et layout til din skærm",
     "enable-color-scheme-change-headline": "Farveskema",
     "enable-color-scheme-change": "Aktivér farveskema skift",
     "enable-color-scheme-change-helptext": "Hvis dette aktiveres vil skærmen skifte til \"dark mode\" når solen går ned og skifte til normal visning når solen står op. Dette påvirker kun skabeloner der understøtter \"dark mode\".",