Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Domain/Info.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<status-component v-if="domain_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | <status-component v-if="domain_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | ||||
<div class="card"> | <div class="card"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div> | <div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div> | ||||
<div class="card-title" v-else>{{ $t('form.domain') }} | <div class="card-title" v-else>{{ $t('form.domain') }} | ||||
<btn class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()" icon="trash-can">{{ $t('domain.delete') }}</btn> | <btn class="btn-outline-danger button-delete float-end" @click="$refs.deleteDialog.show()" icon="trash-can">{{ $t('domain.delete') }}</btn> | ||||
</div> | </div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<ul class="nav nav-tabs mt-3" role="tablist"> | <ul class="nav nav-tabs mt-3" role="tablist"> | ||||
<li class="nav-item"> | <li class="nav-item"> | ||||
<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | ||||
{{ $t('form.general') }} | {{ $t('form.general') }} | ||||
</a> | </a> | ||||
</li> | </li> | ||||
▲ Show 20 Lines • Show All 70 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn> | <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="delete-warning" class="modal" tabindex="-1" role="dialog"> | |||||
<div class="modal-dialog" role="document"> | <modal-dialog id="delete-warning" ref="deleteDialog" @click="deleteDomain()" :buttons="['delete']" :cancel-focus="true" | ||||
<div class="modal-content"> | :title="$t('domain.delete-domain', { domain: domain.namespace })" | ||||
<div class="modal-header"> | > | ||||
<h5 class="modal-title">{{ $t('domain.delete-domain', { domain: domain.namespace }) }}</h5> | |||||
<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn> | |||||
</div> | |||||
<div class="modal-body"> | |||||
<p>{{ $t('domain.delete-text') }}</p> | <p>{{ $t('domain.delete-text') }}</p> | ||||
</div> | </modal-dialog> | ||||
<div class="modal-footer"> | |||||
<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn> | |||||
<btn class="btn-danger modal-action" @click="deleteDomain()" icon="trash-can">{{ $t('btn.delete') }}</btn> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Modal } from 'bootstrap' | |||||
import ListInput from '../Widgets/ListInput' | import ListInput from '../Widgets/ListInput' | ||||
import ModalDialog from '../Widgets/ModalDialog' | |||||
import PackageSelect from '../Widgets/PackageSelect' | import PackageSelect from '../Widgets/PackageSelect' | ||||
import StatusComponent from '../Widgets/Status' | import StatusComponent from '../Widgets/Status' | ||||
import SubscriptionSelect from '../Widgets/SubscriptionSelect' | import SubscriptionSelect from '../Widgets/SubscriptionSelect' | ||||
import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
library.add( | library.add( | ||||
require('@fortawesome/free-solid-svg-icons/faRotate').definition, | require('@fortawesome/free-solid-svg-icons/faRotate').definition, | ||||
) | ) | ||||
export default { | export default { | ||||
components: { | components: { | ||||
ListInput, | ListInput, | ||||
ModalDialog, | |||||
PackageSelect, | PackageSelect, | ||||
StatusComponent, | StatusComponent, | ||||
SubscriptionSelect | SubscriptionSelect | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
domain_id: null, | domain_id: null, | ||||
domain: {}, | domain: {}, | ||||
Show All 16 Lines | export default { | ||||
this.status = response.data.statusInfo | this.status = response.data.statusInfo | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
$('#namespace').focus() | $('#namespace').focus() | ||||
$('#delete-warning')[0].addEventListener('shown.bs.modal', event => { | |||||
$(event.target).find('button.modal-cancel').focus() | |||||
}) | |||||
}, | }, | ||||
methods: { | methods: { | ||||
confirm() { | confirm() { | ||||
axios.get('/api/v4/domains/' + this.domain_id + '/confirm') | axios.get('/api/v4/domains/' + this.domain_id + '/confirm') | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.domain.isConfirmed = true | this.domain.isConfirmed = true | ||||
this.status = response.data.statusInfo | this.status = response.data.statusInfo | ||||
Show All 9 Lines | export default { | ||||
axios.delete('/api/v4/domains/' + this.domain_id) | axios.delete('/api/v4/domains/' + this.domain_id) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.$router.push({ name: 'domains' }) | this.$router.push({ name: 'domains' }) | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
showDeleteConfirmation() { | |||||
// Display the warning | |||||
new Modal('#delete-warning').show() | |||||
}, | |||||
statusUpdate(domain) { | statusUpdate(domain) { | ||||
this.domain = Object.assign({}, this.domain, domain) | this.domain = Object.assign({}, this.domain, domain) | ||||
}, | }, | ||||
submit() { | submit() { | ||||
this.$root.clearFormValidation($('#general form')) | this.$root.clearFormValidation($('#general form')) | ||||
let post = this.$root.pick(this.domain, ['namespace']) | let post = this.$root.pick(this.domain, ['namespace']) | ||||
Show All 21 Lines |