Added possibility to edit/delete a domain alias.

frontend/src/api/domains.js

@@ -7,6 +7,9 @@ export default {
   getDomains () {
     return repository.get(`/${domainResource}/`)
   },
+  getDomain (domainId) {
+    return repository.get(`/${domainResource}/${domainId}/`)
+  },
   getDomainDNSDetail (domainId) {
     return repository.get(`/${domainResource}/${domainId}/dns_detail/`)
   },

frontend/src/components/domains/DomainAliasForm.vue

@@ -41,11 +41,19 @@
   <v-card-actions>
     <v-spacer></v-spacer>
     <v-btn
-      color="gray darken-1"
+      color="grey darken-1"
       text
       @click="close"
       >
-      Close
+      <translate>Close</translate>
+    </v-btn>
+    <v-btn
+      v-if="domainAlias.pk"
+      color="error"
+      text
+      @click="deleteAlias"
+      >
+      <translate>Delete</translate>
     </v-btn>
     <v-btn
       color="primary darken-1"
@@ -61,6 +69,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { bus } from '@/main'
+import domains from '@/api/domains'
 
 export default {
   props: {
@@ -71,10 +80,10 @@ export default {
       domains: 'domains/domains'
     }),
     submitLabel () {
-      return (this.domainAlias) ? 'Update' : 'Add'
+      return (this.domainAlias) ? this.$gettext('Update') : this.$gettext('Add')
     },
     title () {
-      return (this.domainAlias) ? 'Edit domain alias' : 'Add a new domain alias'
+      return (this.domainAlias) ? this.$gettext('Edit domain alias') : this.$gettext('Add a new domain alias')
     }
   },
   data () {
@@ -89,6 +98,12 @@ export default {
       this.$emit('close')
       this.form = {}
     },
+    deleteAlias () {
+      domains.deleteDomainAlias(this.domainAlias.pk).then(resp => {
+        this.$emit('alias-deleted')
+        bus.$emit('notification', { msg: this.$gettext('Domain alias deleted') })
+      })
+    },
     async submit () {
       const valid = await this.$refs.observer.validate()
       if (!valid) {

frontend/src/components/domains/DomainList.vue

@@ -104,7 +104,7 @@
                :key="alias.name"
                class="mr-4"
                >
-            <a href="#" class="mr-2">{{ alias.name }}</a>
+            <a href="#" class="mr-2" @click="editDomainAlias(item, alias)">{{ alias.name }}</a>
             <v-chip x-small color="success">DNS OK</v-chip>
           </span>
         </td>
@@ -117,6 +117,15 @@
             max-width="800px">
     <dns-detail @close="showDNSdetail = false" :domain="selectedDomain" />
   </v-dialog>
+  <v-dialog v-model="showAliasForm"
+            persistent
+            max-width="800px">
+    <domain-alias-form
+      @close="closeDomainAliasForm"
+      :domain-alias="selectedDomainAlias"
+      @alias-deleted="domainAliasDeleted"
+      />
+  </v-dialog>
 </v-card>
 </template>
 
@@ -125,11 +134,13 @@ import { mapGetters } from 'vuex'
 import domainApi from '@/api/domains'
 import ConfirmDialog from '@/components/layout/ConfirmDialog'
 import DNSDetail from '@/components/domains/DNSDetail'
+import DomainAliasForm from '@/components/domains/DomainAliasForm'
 
 export default {
   components: {
     ConfirmDialog,
-    'dns-detail': DNSDetail
+    'dns-detail': DNSDetail,
+    DomainAliasForm
   },
   computed: mapGetters({
     domains: 'domains/domains'
@@ -145,7 +156,9 @@ export default {
         { text: this.$gettext('Actions'), value: 'actions', sortable: false, align: 'right' }
       ],
       selectedDomain: null,
+      selectedDomainAlias: null,
       showConfirmDialog: false,
+      showAliasForm: false,
       showDNSdetail: false,
       search: '',
       selected: [],
@@ -157,6 +170,11 @@ export default {
     this.$store.dispatch('domains/getDomains')
   },
   methods: {
+    closeDomainAliasForm () {
+      this.showAliasForm = false
+      this.selectedDomain = null
+      this.selectedDomainAlias = null
+    },
     confirmDelete (domain) {
       this.selectedDomain = domain
       this.showConfirmDialog = true
@@ -172,6 +190,18 @@ export default {
         }
       )
     },
+    domainAliasDeleted () {
+      const newList = this.aliases[this.selectedDomain.name].filter(alias => {
+        return alias.pk !== this.selectedDomainAlias.pk
+      })
+      this.$set(this.aliases, this.selectedDomain.name, newList)
+      this.closeDomainAliasForm()
+    },
+    editDomainAlias (domain, alias) {
+      this.selectedDomain = domain
+      this.selectedDomainAlias = alias
+      this.showAliasForm = true
+    },
     getDNSLabel (value) {
       if (value === 'disabled') {
         return this.$gettext('Disabled')

frontend/src/components/layout/Navbar.vue

@@ -168,9 +168,11 @@ export default {
 .v-list-item {
   &--active {
     &::before {
-      background-color: #000;
-      opacity: 0.3;
+      opacity: 0;
     }
+    background-color: #034bad;
+    color: white;
+    opacity: 1;
   }
 }