Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/CompanionappList.vue
<template> | <template> | ||||
<div> | <div> | ||||
<btn icon="trash-can" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()"> | <btn icon="trash-can" class="btn-outline-danger button-delete float-end" @click="$refs.deleteDialog.show()"> | ||||
{{ $t('companion.delete') }} | {{ $t('companion.delete') }} | ||||
</btn> | </btn> | ||||
<list-table class="m-0" :list="entries" :setup="setup"></list-table> | <list-table class="m-0" :list="entries" :setup="setup"></list-table> | ||||
<list-more v-if="hasMore" :on-click="loadMore"></list-more> | <list-more v-if="hasMore" :on-click="loadMore"></list-more> | ||||
<div id="delete-warning" class="modal" tabindex="-1" role="dialog"> | |||||
<div class="modal-dialog" role="document"> | <modal-dialog id="delete-warning" ref="deleteDialog" :title="$t('companion.remove-devices')" @click="removeDevices()" :buttons="['delete']" :cancel-focus="true"> | ||||
<div class="modal-content"> | |||||
<div class="modal-header"> | |||||
<h5 class="modal-title">{{ $t('companion.remove-devices') }}</h5> | |||||
<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn> | |||||
</div> | |||||
<div class="modal-body"> | |||||
<p>{{ $t('companion.remove-devices-text') }}</p> | <p>{{ $t('companion.remove-devices-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" data-bs-dismiss="modal" @click="removeDevices()" icon="trash-can">{{ $t('btn.delete') }}</btn> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Modal } from 'bootstrap' | |||||
import ListTools from './ListTools' | import ListTools from './ListTools' | ||||
import ModalDialog from './ModalDialog' | |||||
export default { | export default { | ||||
components: { | |||||
ModalDialog | |||||
}, | |||||
mixins: [ ListTools ], | mixins: [ ListTools ], | ||||
data() { | data() { | ||||
return { | return { | ||||
entries: [], | entries: [], | ||||
setup: { | setup: { | ||||
model: 'companion', | model: 'companion', | ||||
columns: [ | columns: [ | ||||
{ | { | ||||
prop: 'name' | prop: 'name' | ||||
}, | }, | ||||
{ | { | ||||
prop: 'device_id', | prop: 'device_id', | ||||
label: 'companion.deviceid' | label: 'companion.deviceid' | ||||
} | } | ||||
] | ] | ||||
} | } | ||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.loadMore({ reset: true }) | this.loadMore({ reset: true }) | ||||
$('#delete-warning')[0].addEventListener('shown.bs.modal', event => { | |||||
$(event.target).find('button.modal-cancel').focus() | |||||
}) | |||||
}, | }, | ||||
methods: { | methods: { | ||||
loadMore(params) { | loadMore(params) { | ||||
this.listSearch('entries', '/api/v4/companion/', params) | this.listSearch('entries', '/api/v4/companion/', params) | ||||
}, | }, | ||||
removeDevices() { | removeDevices() { | ||||
axios.post('/api/v4/companion/revoke') | axios.post('/api/v4/companion/revoke') | ||||
.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.loadMore({ reset: true }) | this.loadMore({ reset: true }) | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
}, | } | ||||
showDeleteConfirmation() { | |||||
// Display the warning | |||||
new Modal('#delete-warning').show() | |||||
}, | |||||
} | } | ||||
} | } | ||||
</script> | </script> |