From 7e993a86b377bc87021c6cd4ed396e94692753c8 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 13:25:00 +0200
Subject: [PATCH 01/12] 2807: add invalid styling for multiselect component

---
 .../util/forms/multiselect-dropdown/multi-dropdown.scss     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss b/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss
index e301580d..a42030dd 100644
--- a/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss
+++ b/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;

From 959c61f592adf443546f63b93705e9f3c60d54b4 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 13:25:17 +0200
Subject: [PATCH 02/12] 2807: add screen layout validation

---
 src/components/screen/screen-form.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/screen/screen-form.jsx b/src/components/screen/screen-form.jsx
index bd17030c..3286224e 100644
--- a/src/components/screen/screen-form.jsx
+++ b/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,20 @@ function ScreenForm({
     order: { createdAt: "desc" },
   });
 
+  /** Check if published is set */
+  const checkInputsHandleSubmit = () => {
+    setLayoutError(false);
+    let submit = true;
+    if (!selectedLayout) {
+      setLayoutError(true);
+      submit = false;
+    }
+
+    if (submit) {
+      handleSubmit();
+    }
+  };
+
   useEffect(() => {
     if (layouts) {
       setLayoutOptions(layouts["hydra:member"]);
@@ -283,6 +298,7 @@ function ScreenForm({
                   helpText={t("search-to-se-possible-selections")}
                   selected={selectedLayout ? [selectedLayout] : []}
                   name="layout"
+                  error={layoutError}
                   singleSelect
                 />
               </div>
@@ -327,7 +343,7 @@ function ScreenForm({
             type="button"
             id="save_screen"
             size="lg"
-            onClick={handleSubmit}
+            onClick={checkInputsHandleSubmit}
           >
             {t("save-button")}
           </Button>

From 6559727a5afb8f72ebde00afb8e4f5ba11e6bc72 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 13:25:33 +0200
Subject: [PATCH 03/12] 2807: add slide template validation

---
 src/components/slide/slide-form.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/slide/slide-form.jsx b/src/components/slide/slide-form.jsx
index 2ae24f73..7dc763f9 100644
--- a/src/components/slide/slide-form.jsx
+++ b/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,20 @@ function SlideForm({
     order: { createdAt: "desc" },
   });
 
+  /** Check if published is set */
+  const checkInputsHandleSubmit = () => {
+    setTemplateError(false);
+    let submit = true;
+    if (!selectedTemplate) {
+      setTemplateError(true);
+      submit = false;
+    }
+
+    if (submit) {
+      handleSubmit();
+    }
+  };
+
   /**
    * For closing overlay on escape key.
    *
@@ -227,6 +242,7 @@ function SlideForm({
                     handleSelection={selectTemplate}
                     options={templateOptions}
                     selected={selectedTemplates}
+                    error={templateError}
                     name="templateInfo"
                     filterCallback={onFilterTemplate}
                     singleSelect
@@ -484,7 +500,7 @@ function SlideForm({
           <Button
             variant="primary"
             type="button"
-            onClick={handleSubmit}
+            onClick={checkInputsHandleSubmit}
             id="save_slide"
             size="lg"
           >

From 04babd25905a09c83fca9d0a12a44aa1dd6fc6f0 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 13:25:46 +0200
Subject: [PATCH 04/12] 2807: add error to multiselect component

---
 .../util/forms/multiselect-dropdown/multi-dropdown.jsx        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/util/forms/multiselect-dropdown/multi-dropdown.jsx b/src/components/util/forms/multiselect-dropdown/multi-dropdown.jsx
index 5bd7d4c1..512cb917 100644
--- a/src/components/util/forms/multiselect-dropdown/multi-dropdown.jsx
+++ b/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,

From ffe5717d6a64e7d72f050e275dd4f0175256d490 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 13:28:53 +0200
Subject: [PATCH 05/12] 2807: changelog updated

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 915961c8..559d5c57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,10 +7,18 @@ All notable changes to this project will be documented in this file.
 
 - [#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`

From 103965d7fbc892e64ec6c8ab74d6a1321c2fa9c0 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 13:32:09 +0200
Subject: [PATCH 06/12] 2807: remove whitespace

---
 .../util/forms/multiselect-dropdown/multi-dropdown.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss b/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss
index a42030dd..19748238 100644
--- a/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss
+++ b/src/components/util/forms/multiselect-dropdown/multi-dropdown.scss
@@ -2,7 +2,7 @@
 
 .rmsc {
   &.invalid {
-    border: 1px solid $red; 
+    border: 1px solid $red;
   }
 
   &.single-select {

From 3f5bf50bab6154f690e9e4afe7237dd1a2731ed9 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 14:01:09 +0200
Subject: [PATCH 07/12] 2807 add error toasts

---
 src/components/screen/screen-form.jsx | 1 +
 src/components/slide/slide-form.jsx   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/screen/screen-form.jsx b/src/components/screen/screen-form.jsx
index 3286224e..0c702c3b 100644
--- a/src/components/screen/screen-form.jsx
+++ b/src/components/screen/screen-form.jsx
@@ -65,6 +65,7 @@ function ScreenForm({
     setLayoutError(false);
     let submit = true;
     if (!selectedLayout) {
+      displayError(t("remember-layout-error"));
       setLayoutError(true);
       submit = false;
     }
diff --git a/src/components/slide/slide-form.jsx b/src/components/slide/slide-form.jsx
index 7dc763f9..1755b490 100644
--- a/src/components/slide/slide-form.jsx
+++ b/src/components/slide/slide-form.jsx
@@ -95,6 +95,7 @@ function SlideForm({
     if (!selectedTemplate) {
       setTemplateError(true);
       submit = false;
+      displayError(t("slide-form.remember-template-error"));
     }
 
     if (submit) {

From 71dcced852c5c286a218fcb7687dd3ea51623c1d Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 14:10:12 +0200
Subject: [PATCH 08/12] 2807: update test text

---
 e2e/slides.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/slides.spec.js b/e2e/slides.spec.js
index 7895caeb..474fe3fc 100644
--- a/e2e/slides.spec.js
+++ b/e2e/slides.spec.js
@@ -148,7 +148,7 @@ test.describe("Create slide page works", () => {
       page
         .locator(".Toastify")
         .locator(".Toastify__toast--error")
-        .getByText(/An error occurred/)
+        .getByText(/Husk at tilknytte en skabelon til dit slide/)
         .first()
     ).toBeVisible();
     await expect(page).toHaveURL(/slide\/create/);

From 87d5a725715d3e34d6be3ee8b13ac30aaa4397cb Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 14:20:13 +0200
Subject: [PATCH 09/12] 2807: use locator in spec

---
 e2e/slides.spec.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/e2e/slides.spec.js b/e2e/slides.spec.js
index 474fe3fc..5507c01c 100644
--- a/e2e/slides.spec.js
+++ b/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(/Husk at tilknytte en skabelon til dit slide/)
-        .first()
+      page.locator(".Toastify").locator(".Toastify__toast--error").first()
     ).toBeVisible();
     await expect(page).toHaveURL(/slide\/create/);
   });

From 66e3f38a9969e54afabdd244c4deaf84c79f8d56 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 14:28:37 +0200
Subject: [PATCH 10/12] 2807: add new strings

---
 src/translations/da/common.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/translations/da/common.json b/src/translations/da/common.json
index 778ec3ba..686dc784 100644
--- a/src/translations/da/common.json
+++ b/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\".",

From 38e5daef87e2ad8aa73c0c382c57ef0bdf23551b Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 14:30:34 +0200
Subject: [PATCH 11/12] 2807: remove debugger

---
 src/components/screen/screen-manager.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/screen/screen-manager.jsx b/src/components/screen/screen-manager.jsx
index c9ea4249..6983fb01 100644
--- a/src/components/screen/screen-manager.jsx
+++ b/src/components/screen/screen-manager.jsx
@@ -257,7 +257,7 @@ function ScreenManager({
         regions: mapPlaylistsWithRegion(),
       }),
     };
-    debugger;
+
     setLoadingMessage(t("loading-messages.saving-screen"));
 
     if (saveMethod === "POST") {

From 1cb200cb0bb788f27caf49571de5b09277ead4c2 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 23 Oct 2024 14:37:52 +0200
Subject: [PATCH 12/12] 2807: add 265 changelog entry (Add no-cache directive)

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 559d5c57..23ee3982 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@ 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.