Merge pull request #5306 from FireLemons/javascript_overhaul

replace js form validation with reusable notifier based validation components

app/assets/stylesheets/application.scss

@@ -20,11 +20,12 @@
 @use "shared/form";
 @use "shared/layout";
 @use "shared/navbar";
+@use "shared/noscript";
 @use "shared/select2_additional_styles";
 @use "shared/sidebar";
 @use "shared/typography";
 @use "shared/utilities";
-@use "shared/noscript";
+@use "shared/validated_form_component";
 
 @use "pages/all_casa_admin_dashboard";
 @use "pages/casa_cases";

app/assets/stylesheets/shared/notifier.scss

@@ -14,11 +14,17 @@
   flex-direction: column;
   font-weight: 900;
   max-height: 100vh;
+  max-width: 40%;
   overflow-y: auto;
+  pointer-events: none;
   position: fixed;
   right: 2em;
   z-index: 100;
 
+  &>* {
+    pointer-events: auto;
+  }
+
   div {
     border-radius: .25em;
     margin-bottom: .5em;
@@ -39,8 +45,14 @@
   .messages {
     margin-bottom: 0;
     padding: 0;
+    pointer-events: none;
+
+    &>* {
+      pointer-events: auto;
+    }
 
     div {
+      display: flex;
       width: fit-content;
     }
   }

app/assets/stylesheets/shared/validated_form_component.scss

@@ -0,0 +1,10 @@
+.warning-required-checkbox {
+    background-color: #ffc107;
+    padding: 0.5em;
+
+    input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        margin-right: 0.5em;
+    }
+}

app/javascript/__tests__/case_contact.test.js

@@ -1,28 +1,8 @@
 /* eslint-env jest */
-import { validateOccurredAt, convertDateToSystemTimeZone } from '../src/case_contact'
+import { convertDateToSystemTimeZone } from '../src/case_contact'
 
 require('jest')
 
-test("occured date field won't allow future dates and it will be set back to the current date", () => {
-  const today = new Date()
-  const afterTomorrow = new Date(Date.now() + 3600 * 1000 * 24 * 2)
-
-  const todayString = today.toLocaleDateString('en-GB').split('/').reverse().join('-')
-  const afterTomorrowString = afterTomorrow
-    .toLocaleDateString('en-GB')
-    .split('/')
-    .reverse()
-    .join('-')
-
-  document.body.innerHTML = `<input value="${afterTomorrowString}" data-provide="datepicker" data-date-format="yyyy/mm/dd" class="form-control label-font-weight" type="text" name="case_contact[occurred_at]" id="case_contact_occurred_at">`
-
-  const caseOccurredAt = $('#case_contact_occurred_at')
-
-  validateOccurredAt(caseOccurredAt, 'focusout')
-
-  expect(caseOccurredAt.val()).toEqual(todayString)
-})
-
 test('utc date is correctly converted to system date', () => {
   expect(convertDateToSystemTimeZone('2022-06-22 17:14:50 UTC')).toEqual(new Date('2022-06-22 17:14:50 UTC'))
 })

app/javascript/__tests__/notifier.test.js

@@ -509,7 +509,7 @@ describe('Notifier', () => {
   })
 })
 
-describe('Notifications', () => {
+describe('Notification', () => {
   let notification
   const notificationDefaultMessage = 'm*GV}.n?@D\\~]jW=JD$d'