1 files changed, 43 insertions, 33 deletions

diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
index b96c9251..94845854 100644
--- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -9,7 +9,32 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <template #cell(value)="data">
-        <b-row v-if="!(typeof data.value === 'boolean')">
+        <b-row v-if="data.index === 0">
+          <b-col>
+            <span>
+              {{ data.value ? 'Включен' : 'Выключен' }}
+            </span>
+          </b-col>
+          <b-col>
+            <b-button
+              :id="`popover-choice-${data.index}`"
+              class="popover-option-ractive"
+              variant="toogle-popover"
+            >
+              <img :is="iconChevron" class="icon-chevron" />
+            </b-button>
+            <two-chioce-popover
+              :id="data.index"
+              fitst-option="Включен"
+              second-option="Выключен"
+              :chosen-option="chosenOption"
+              :first-action="setOn"
+              :second-action="setOff"
+              placement="leftbottom"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else>
           <b-form-input
             v-if="systems[data.index].isEdit"
             ref="input"
@@ -37,34 +62,11 @@
             <img
               v-else
               src="@/assets/images/icon-edit.svg"
-              class="system-network-table__icon pointer"
+              class="system-network-table__icon icon-edit pointer"
               @click="editCellHandler(data)"
             />
           </b-col>
         </b-row>
-        <b-row v-else class="popup-container">
-          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
-          <b-col v-else>{{ 'Выключен' }}</b-col>
-          <div
-            v-if="isActive"
-            class="popup"
-            :class="{ popup_active: isActive }"
-          >
-            <button class="popup-button popup-on medium-12px" @click="DHCPon">
-              <span class="popup-text">Включен</span>
-            </button>
-            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
-              <span class="popup-text">Выключен</span>
-            </button>
-          </div>
-          <b-col class="system-network-table__icon-col">
-            <img
-              :is="iconChevron"
-              class="pointer"
-              @click="isActive = !isActive"
-            />
-          </b-col>
-        </b-row>
       </template>
     </b-table>
   </page-section>
@@ -75,18 +77,20 @@ import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import PageSection from '@/components/Global/PageSection';
 import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 
 export default {
-  components: { PageSection },
+  components: { PageSection, TwoChiocePopover },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
   data() {
     return {
       selectedCell: null,
       isActive: false,
       isIpInvalid: false,
+      chosenOption: 'Выключен',
       fields: [
         {
           key: 'param',
@@ -174,6 +178,14 @@ export default {
         ipCheck
       );
     },
+    setOn() {
+      this.chosenOption = 'Включен';
+      this.systems[0].value = true;
+    },
+    setOff() {
+      this.chosenOption = 'Выключен';
+      this.systems[0].value = false;
+    },
     DHCPoff() {
       this.systems[0].value = false;
       this.isActive = false;
@@ -196,10 +208,8 @@ export default {
 
 .system-network-table__icon-col {
   max-width: 20%;
-  margin: 0 5px 0 auto !important;
 }
 </style>
-
 <style lang="scss" scoped>
 .row {
   align-items: baseline;
@@ -209,10 +219,6 @@ export default {
   margin: 0 !important;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .close_icon {
   margin-left: 5px;
 }
@@ -252,7 +258,6 @@ export default {
   margin: 4px;
   border-radius: 8px;
   border: none;
-  cursor: pointer;
 
   display: flex;
   align-items: center;
@@ -286,4 +291,9 @@ export default {
 .popup_active {
   visibility: visible;
 }
+
+.popover-option-ractive {
+  display: block;
+  margin: -6px 9px 0 auto;
+}
 </style>