From d65b5a84182cf38a03c3f536b3acfa69537bd4c2 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 27 Jan 2022 16:44:17 -0500
Subject: [PATCH] fix(preferences(js)): fix validation of enabled days for
 vacation

Fixes #5469
---
 UI/Templates/PreferencesUI/UIxPreferences.wox    |  2 +-
 .../js/Common/sgToggleGrid.directive.js          | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 37db15b87..8dd1b83a8 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -1196,7 +1196,7 @@
                     <label class="pseudo-input-label"><var:string label:value="Enable auto reply on these days"/></label>
                     <md-grid-list md-cols="7" md-row-height="2em" md-gutter="0.5em"
                                   ng-model="app.preferences.defaults.Vacation.days"
-                                  ng-disabled="app.preferences.defaults.Vacation.weekdaysEnabled"
+                                  ng-required="app.preferences.defaults.Vacation.weekdaysEnabled"
                                   sg-toggle-grid="sg-toggle-grid">
                       <var:foreach list="shortWeekDaysList" item="item">
                         <md-grid-tile var:value="numberForWeekDay"><var:string value="item"/></md-grid-tile>
diff --git a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
index 5cac49d5e..41980e585 100644
--- a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
+++ b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
@@ -27,6 +27,7 @@
       var CLASS_ACTIVE = 'md-default-theme md-accent md-bg md-bdr';
       return function postLink(scope, element, attr, controllers) {
         var tiles = tElement.find('md-grid-tile'),
+            label = tElement.parent().children()[0],
             tile,
             ngModelCtrl,
             i,
@@ -40,6 +41,15 @@
           return !value || value.length === 0;
         };
 
+        scope.$watch(function() {
+          return ngModelCtrl.$invalid;
+        }, setInvalid);
+
+        tAttrs.$observe('required', function(value) {
+          angular.element(label).toggleClass('md-required', !!value);
+          ngModelCtrl.$validate();
+        });
+
         toggleClass = function() {
           // Toggle class on click event and call toggle function
           var tile = angular.element(this),
@@ -69,11 +79,10 @@
             }
           });
           ngModelCtrl.$validate();
-          setInvalid(ngModelCtrl.$invalid);
         }
 
-        function setInvalid(invalid) {
-          var label = element.parent().children()[0];
+        function setInvalid() {
+          var invalid = ngModelCtrl.$invalid;
           if (invalid) {
             element.addClass('sg-toggle-grid-invalid');
             if (label.tagName == 'LABEL') {
@@ -111,7 +120,6 @@
             ngModelCtrl.$setViewValue(modelDays);
             ngModelCtrl.$setDirty();
             ngModelCtrl.$validate();
-            setInvalid(ngModelCtrl.$invalid);
           });
         }
       };