1<template>
2  <page-section :section-title="$t('pageNetwork.staticDns')">
3    <b-row>
4      <b-col lg="6">
5        <b-table
6          responsive="md"
7          hover
8          :fields="dnsTableFields"
9          :items="form.dnsStaticTableItems"
10          :empty-text="$t('global.table.emptyMessage')"
11          class="mb-0"
12          show-empty
13        >
14          <template #cell(actions)="{ item }">
15            <table-row-action
16              v-for="(action, actionIndex) in item.actions"
17              :key="actionIndex"
18              :value="action.value"
19              :title="action.title"
20              :enabled="action.enabled"
21              @click-table-action="onDnsTableAction(action, $event, index)"
22            >
23              <template #icon>
24                <icon-edit v-if="action.value === 'edit'" />
25                <icon-trashcan v-if="action.value === 'delete'" />
26              </template>
27            </table-row-action>
28          </template>
29        </b-table>
30      </b-col>
31    </b-row>
32  </page-section>
33</template>
34
35<script>
36import BVToastMixin from '@/components/Mixins/BVToastMixin';
37import IconEdit from '@carbon/icons-vue/es/edit/20';
38import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
39import PageSection from '@/components/Global/PageSection';
40import TableRowAction from '@/components/Global/TableRowAction';
41import { mapState } from 'vuex';
42
43export default {
44  name: 'DNSTable',
45  components: {
46    IconEdit,
47    IconTrashcan,
48    PageSection,
49    TableRowAction,
50  },
51  mixins: [BVToastMixin],
52  props: {
53    tabIndex: {
54      type: Number,
55      default: 0,
56    },
57  },
58  data() {
59    return {
60      form: {
61        dnsStaticTableItems: [],
62      },
63      actions: [
64        {
65          value: 'edit',
66          title: this.$t('global.action.edit'),
67        },
68        {
69          value: 'delete',
70          title: this.$t('global.action.delete'),
71        },
72      ],
73      dnsTableFields: [
74        {
75          key: 'address',
76          label: this.$t('pageNetwork.table.ipAddress'),
77        },
78        { key: 'actions', label: '', tdClass: 'text-right' },
79      ],
80    };
81  },
82  computed: {
83    ...mapState('network', ['ethernetData']),
84  },
85  watch: {
86    // Watch for change in tab index
87    tabIndex() {
88      this.getStaticDnsItems();
89    },
90  },
91  created() {
92    this.getStaticDnsItems();
93    this.$store.dispatch('network/getEthernetData').finally(() => {
94      // Emit initial data fetch complete to parent component
95      this.$root.$emit('network-table-dns-complete');
96    });
97  },
98  methods: {
99    getStaticDnsItems() {
100      const index = this.tabIndex;
101      const dns = this.ethernetData[index].StaticNameServers || [];
102      this.form.dnsStaticTableItems = dns.map((server) => {
103        return {
104          address: server,
105          actions: [
106            {
107              value: 'edit',
108              title: this.$t('pageNetwork.table.editDns'),
109            },
110            {
111              value: 'delete',
112              title: this.$t('pageNetwork.table.deleteDns'),
113            },
114          ],
115        };
116      });
117    },
118    onDnsTableAction(action, row) {
119      if (action === 'delete') {
120        this.form.dnsStaticTableItems.splice(row, 1);
121        // TODO: delete row in store
122      }
123    },
124  },
125};
126</script>
127