1 files changed, 84 insertions, 29 deletions

diff --git a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
index f69e797a..2bc9f06f 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
@@ -4,34 +4,61 @@
       <img src="@/assets/images/_sila/collapsed/temperature.svg" />
       {{ $t('pageMemory.temperature') }}
     </b-col>
-    <b-row class="align-items-end limit-container">
-      <b-col xs="12" sm="6" xl="3" class="pt-4">
-        <b-form-group :label="$t('pageMemory.labels.warning')">
-          <b-form-input
-            v-model.number="warning"
-            type="number"
-            :min="0"
-            :max="critical"
-          ></b-form-input>
-        </b-form-group>
-      </b-col>
-      <b-col xs="12" sm="6" xl="3" class="pt-4">
-        <b-form-group :label="$t('pageMemory.labels.critical')">
-          <b-form-input
-            v-model.number="critical"
-            type="number"
-            :min="warning"
-            :max="100"
+    <b-form novalidate>
+      <b-row class="align-items-end limit-container">
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageMemory.labels.warning')">
+            <b-form-input
+              v-model.number="warning"
+              type="number"
+              :min="1"
+              :max="critical"
+              :state="getValidationState($v.warning)"
+              @blur="$v.warning.$touch()"
+            ></b-form-input>
+            <b-form-invalid-feedback class="absolute" role="alert">
+              <div v-if="!$v.warning.between">
+                {{ $t('global.form.invalidValue') }}
+              </div>
+              <div v-if="!$v.warning.required">
+                {{ $t('global.form.fieldRequired') }}
+              </div>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageMemory.labels.critical')">
+            <b-form-input
+              v-model.number="critical"
+              type="number"
+              :min="warning"
+              :max="100"
+              :state="getValidationState($v.critical)"
+              @blur="$v.critical.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback class="absolute" role="alert">
+              <div v-if="!$v.critical.between">
+                {{ $t('global.form.invalidValue') }}
+              </div>
+              <div v-if="!$v.critical.required">
+                {{ $t('global.form.fieldRequired') }}
+              </div>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" sm="6" xl="3" class="pt-4">
+          <b-button
+            variant="primary"
+            style="height: 35px"
+            :disabled="loading"
+            @click="saveLimit"
           >
-          </b-form-input>
-        </b-form-group>
-      </b-col>
-      <b-col xs="12" sm="6" xl="3" class="pt-4">
-        <b-button variant="primary" style="height: 35px" @click="saveLimit">
-          {{ $t('global.action.save') }}
-        </b-button>
-      </b-col>
-    </b-row>
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </b-form>
     <chart
       type="memory"
       :colors="colors"
@@ -80,15 +107,25 @@
 import Chart from '@/components/_sila/Global/Chart';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
 
 import { getGroups, getItems } from '@/utilities/_sila/metricProperties';
+import { between, required } from 'vuelidate/lib/validators';
 
 export default {
   components: { Chart },
-  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin, BVToastMixin],
+  mixins: [
+    DataFormatterMixin,
+    LoadingBarMixin,
+    TableFilterMixin,
+    BVToastMixin,
+    VuelidateMixin,
+  ],
   props: {
     timeScale: {
       type: String,
@@ -97,6 +134,7 @@ export default {
   },
   data() {
     return {
+      loading,
       warning: null,
       critical: null,
       isBusy: true,
@@ -133,6 +171,19 @@ export default {
     };
   },
 
+  validations() {
+    return {
+      warning: {
+        required,
+        between: between(1, this.critical),
+      },
+      critical: {
+        required,
+        between: between(this.warning, 100),
+      },
+    };
+  },
+
   computed: {
     groups() {
       return getGroups(this.filteredSensors);
@@ -193,10 +244,14 @@ export default {
 
   methods: {
     saveLimit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+
       this.startLoader();
       this.$store
         .dispatch('memory/patchLimits', {
           warning: this.warning,
+          critical: this.critical,
           groups: this.groups,
         })
         .catch(({ message }) => this.errorToast(message))