add table for snmp

3 files changed, 67 insertions, 89 deletions

diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 4acca098..034edff3 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -1146,6 +1146,7 @@
   },
   "pageTransfer": {
     "title": "Настройка передачи информации",
+    "description": "Настройте SMTP и SNMP",
     "saveSmtpSuсcess": "Настройки SMTP успешно сохранены.",
     "saveSmtpError": "Ошибка сохранения настроек SMTP.",
     "smtp": {
diff --git a/src/views/_sila/Settings/TransferInfo/Snmp.vue b/src/views/_sila/Settings/TransferInfo/Snmp.vue
index 2b4ae3c7..8a7ca730 100644
--- a/src/views/_sila/Settings/TransferInfo/Snmp.vue
+++ b/src/views/_sila/Settings/TransferInfo/Snmp.vue
@@ -1,46 +1,40 @@
 <template>
   <page-section :section-title="$t('pageTransfer.snmp.snmpTitle')">
-    <b-row class="snmp-warning mb-5">
-      <b-col xs="12" sm="12">
-        <b-form-group
-          :label="$t('pageTransfer.snmp.host')"
-          label-for="snmp-host"
-        >
-          <b-form-input
-            id="snmp-host"
-            v-model="form.host"
-            :disabled="isNotAdmin"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col xs="12" sm="12">
-        <b-form-group
-          :label="$t('pageTransfer.snmp.port')"
-          label-for="snmp-port"
-        >
-          <b-form-input
-            id="snmp-port"
-            v-model="form.port"
-            type="number"
-            :disabled="isNotAdmin"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col xs="4" class="d-flex justify-content-end align-items-start">
-        <b-button variant="primary" :disabled="isNotAdmin" @click="saveSnmp">
-          {{ $t('global.action.add') }}
-        </b-button>
-      </b-col>
-    </b-row>
     <b-row>
       <b-col>
+        <div class="text-right">
+          <b-button
+            variant="primary"
+            :disabled="isNotAdmin"
+            @click="initSnmpModal()"
+          >
+            <icon-add />
+            {{ $t('global.action.add') }}
+          </b-button>
+        </div>
         <b-table
-          hover
           responsive="md"
-          show-empty
-          :fields="fields"
+          hover
+          :fields="snmpTableFields"
+          :items="form.snmpTableItems"
           :empty-text="$t('global.table.emptyMessage')"
+          show-empty
         >
+          <template #cell(actions)="{ item, index }">
+            <table-row-action
+              v-for="(action, actionIndex) in item.actions"
+              :key="actionIndex"
+              :value="action.value"
+              :title="action.title"
+              :enabled="action.enabled"
+              @click-table-action="onSnmpTableAction(action, $event, index)"
+            >
+              <template #icon>
+                <icon-edit v-if="action.value === 'edit'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
         </b-table>
       </b-col>
     </b-row>
@@ -50,37 +44,48 @@
 <script>
 import PageSection from '@/components/_sila/Global/PageSection';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import TableRowAction from '@/components/_sila/Global/TableRowAction';
 
 export default {
   name: 'Snmp',
   components: {
+    IconAdd,
+    IconEdit,
+    IconTrashcan,
     PageSection,
+    TableRowAction,
   },
-  mixins: [BVToastMixin, DataFormatterMixin],
+  mixins: [BVToastMixin],
 
   data() {
     return {
       form: {
-        user: '',
-        password: '',
-        host: '',
-        port: '',
-        auth: false,
-        ssl: false,
+        snmpTableItems: [],
       },
-      fields: [
+      actions: [
+        {
+          value: 'edit',
+          title: this.$t('global.action.edit'),
+        },
+        {
+          value: 'delete',
+          title: this.$t('global.action.delete'),
+        },
+      ],
+      snmpTableFields: [
         {
-          key: 'name',
-          label: this.$t('pageTransfer.table.userName'),
-          formatter: this.dataFormatter,
+          key: 'host',
+          label: this.$t('pageTransfer.snmp.host'),
         },
         {
-          key: 'value',
-          label: this.$t('pageTransfer.table.value'),
-          formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          key: 'port',
+          label: this.$t('pageTransfer.snmp.port'),
         },
+        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
   },
@@ -92,34 +97,15 @@ export default {
       );
     },
   },
-  methods: {
-    saveSnmp() {
-      if (!this.form.auth) {
-        // eslint-disable-next-line no-unused-vars
-        const { user, password, ...formWithoutCredits } = this.form;
-        this.form = formWithoutCredits;
-      }
 
-      this.$store
-        .dispatch('snmpStore/setSnmpSettings', this.form)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
+  created() {
+    this.getSnmpItems();
+  },
+
+  methods: {
+    getSnmpItems() {},
+    initSnmpModal() {},
+    onSnmpTableAction() {},
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.switch-group {
-  margin-bottom: 1.5rem;
-}
-.snmp-warning {
-  width: 50%;
-  @media (max-width: 1200px) {
-    width: 75%;
-  }
-  @media (max-width: 576px) {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/_sila/Settings/TransferInfo/Transfer.vue b/src/views/_sila/Settings/TransferInfo/Transfer.vue
index 19d72282..76f7f104 100644
--- a/src/views/_sila/Settings/TransferInfo/Transfer.vue
+++ b/src/views/_sila/Settings/TransferInfo/Transfer.vue
@@ -1,10 +1,10 @@
 <template>
   <b-container fluid="xl">
-    <page-title :description="$t('pageTransfer.title')" />
+    <page-title :description="$t('pageTransfer.description')" />
     <snmp />
     <hr />
-    <!--    <warning-smnp />-->
     <smtp />
+    <hr />
     <!--    <syslog />-->
   </b-container>
 </template>
@@ -12,7 +12,6 @@
 <script>
 import PageTitle from '@/components/_sila/Global/PageTitle';
 import Snmp from './Snmp';
-// import WarningSmnp from './WarningSmnp';
 import Smtp from './Smtp';
 // import Syslog from './Syslog';
 
@@ -21,16 +20,8 @@ export default {
   components: {
     PageTitle,
     Snmp,
-    //  WarningSmnp,
     Smtp,
     //  Syslog
   },
-
-  data() {
-    return {
-      policyValue: null,
-      options: [],
-    };
-  },
 };
 </script>