1 files changed, 32 insertions, 18 deletions
diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
index 69807762..b96c9251 100644
--- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -11,33 +11,34 @@
       <template #cell(value)="data">
         <b-row v-if="!(typeof data.value === 'boolean')">
           <b-form-input
-            v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            v-if="systems[data.index].isEdit"
             ref="input"
-            v-model="systems[data.index].value"
+            v-model="selectedCell"
             class="regular-12px"
+            :class="{ validateIP: isIpInvalid }"
             type="text"
+            @keydown.enter="clickOk(data)"
+            @keydown.escape="clickCancel(data)"
           ></b-form-input>
           <b-col v-else>{{ data.value }}</b-col>
           <b-col class="system-network-table__icon-col">
-            <b-row
-              v-if="systems[data.index].isEdit && selectedCell === 'value'"
-            >
+            <b-row v-if="systems[data.index].isEdit">
               <img
                 src="@/assets/images/edit-ok.svg"
                 class="system-network-table__icon pointer"
-                @click="clickOk"
+                @click="clickOk(data)"
               />
               <img
                 src="@/assets/images/edit-no.svg"
                 class="system-network-table__icon close_icon pointer"
-                @click="clickCancel"
+                @click="clickCancel(data)"
               />
             </b-row>
             <img
               v-else
               src="@/assets/images/icon-edit.svg"
               class="system-network-table__icon pointer"
-              @click="editCellHandler(data, 'value')"
+              @click="editCellHandler(data)"
             />
           </b-col>
         </b-row>
@@ -85,6 +86,7 @@ export default {
     return {
       selectedCell: null,
       isActive: false,
+      isIpInvalid: false,
       fields: [
         {
           key: 'param',
@@ -144,22 +146,33 @@ export default {
       ],
     };
   },
-  mounted() {
-    this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
-  },
   methods: {
-    editCellHandler(data, value) {
+    editCellHandler(data) {
       this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
       this.systems[data.index].isEdit = true;
-      this.selectedCell = value;
+      this.selectedCell = this.systems[data.index].value;
       this.$nextTick(() => this.$refs.input.focus());
     },
     clickOk(data) {
-      this.selectedCell = null;
-      this.systems[data.index].value = this.$refs.input.value;
+      const EDIT_VALUE = this.selectedCell.trim();
+      if (this.validateIP(EDIT_VALUE)) {
+        this.systems[data.index].value = EDIT_VALUE;
+        this.isIpInvalid = false;
+        this.selectedCell = null;
+        this.systems[data.index].isEdit = false;
+      } else {
+        this.isIpInvalid = true;
+      }
     },
-    clickCancel() {
+    clickCancel(data) {
+      this.isIpInvalid = false;
       this.selectedCell = null;
+      this.systems[data.index].isEdit = false;
+    },
+    validateIP(ipCheck) {
+      return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+        ipCheck
+      );
     },
     DHCPoff() {
       this.systems[0].value = false;
@@ -205,14 +218,15 @@ export default {
 }
 
 .form-control {
-  border: none;
   max-height: 16px;
   width: 60%;
-  border: none;
   background-color: transparent;
   &:focus {
     box-shadow: none;
   }
+  &.validateIP {
+    color: $red-brand-primary;
+  }
 }
 .popup-container {
   position: relative;