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