diff options
Diffstat (limited to 'src/views/SystemDescription/Network/InventoryIPv4Settings.vue')
-rw-r--r-- | src/views/SystemDescription/Network/InventoryIPv4Settings.vue | 50 |
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; |