diff --git a/frontend/src/api/domains.js b/frontend/src/api/domains.js index c86d69a37..13948e681 100644 --- a/frontend/src/api/domains.js +++ b/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/`) }, diff --git a/frontend/src/components/domains/DomainAliasForm.vue b/frontend/src/components/domains/DomainAliasForm.vue index 5e1c4d955..fde701cc7 100644 --- a/frontend/src/components/domains/DomainAliasForm.vue +++ b/frontend/src/components/domains/DomainAliasForm.vue @@ -41,11 +41,19 @@ - Close + Close + + + Delete 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) { diff --git a/frontend/src/components/domains/DomainList.vue b/frontend/src/components/domains/DomainList.vue index 894972019..7eb117ace 100644 --- a/frontend/src/components/domains/DomainList.vue +++ b/frontend/src/components/domains/DomainList.vue @@ -104,7 +104,7 @@ :key="alias.name" class="mr-4" > - {{ alias.name }} + {{ alias.name }} DNS OK @@ -117,6 +117,15 @@ max-width="800px"> + + + @@ -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') diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue index bba3231d4..72b32ae02 100644 --- a/frontend/src/components/layout/Navbar.vue +++ b/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; } }