Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Room/List.vue
| <template> | <template> | ||||
| <div class="container"> | <div class="container"> | ||||
| <div id="rooms-list" class="card"> | <div id="rooms-list" class="card"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <div class="card-title"> | <div class="card-title"> | ||||
| {{ $t('room.list-title') }} | {{ $t('room.list-title') }} | ||||
| <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small> | <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small> | ||||
| <btn-router v-if="!$root.isDegraded() && $root.hasPermission('settings')" to="room/new" class="btn-success float-end" icon="comments"> | <btn-router v-if="!$root.isDegraded() && $root.hasPermission('settings')" to="room/new" class="btn-success float-end" icon="comments"> | ||||
| {{ $t('room.create') }} | {{ $t('room.create') }} | ||||
| </btn-router> | </btn-router> | ||||
| </div> | </div> | ||||
| <div class="card-text"> | <div class="card-text"> | ||||
| <list-table :list="rooms" :setup="setup"> | <list-table :list="rooms" :setup="setup"> | ||||
| <template #buttons="{ item }"> | <template #buttons="{ item }"> | ||||
| <btn class="btn-link p-0 ms-1 lh-1" @click="goto(item)" icon="arrow-up-right-from-square" :title="$t('room.goto')"></btn> | <btn class="btn-link p-0 lh-1" @click="roomLinkCopy(item)" :icon="['far', 'clipboard']" :title="$t('room.copy-location')"></btn> | ||||
| <btn class="btn-link p-0 lh-1 ms-2" @click="goto(item)" icon="arrow-up-right-from-square" :title="$t('room.goto')"></btn> | |||||
| </template> | </template> | ||||
| </list-table> | </list-table> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { ListTable } from '../Widgets/ListTools' | import { ListTable } from '../Widgets/ListTools' | ||||
| import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
| library.add( | library.add( | ||||
| require('@fortawesome/free-regular-svg-icons/faClipboard').definition, | |||||
| require('@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare').definition, | require('@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare').definition, | ||||
| require('@fortawesome/free-solid-svg-icons/faComments').definition | require('@fortawesome/free-solid-svg-icons/faComments').definition | ||||
| ) | ) | ||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| ListTable | ListTable | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| rooms: [] | rooms: [] | ||||
| } | } | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| setup() { | setup() { | ||||
| let setup = { | let setup = { | ||||
| buttons: true, | buttons: true, | ||||
| model: 'room', | model: 'room', | ||||
| columns: [ | columns: [ | ||||
| { | { | ||||
| prop: 'name', | prop: 'name', | ||||
| icon: 'comments', | icon: 'comments', | ||||
| link: true | link: true, | ||||
| className: 'text-nowrap' | |||||
| }, | }, | ||||
| { | { | ||||
| prop: 'description', | prop: 'description', | ||||
| link: true | link: true | ||||
| } | } | ||||
| ] | ] | ||||
| } | } | ||||
| if (!this.$root.hasPermission('settings')) { | if (!this.$root.hasPermission('settings')) { | ||||
| setup.footLabel = 'room.list-empty-nocontroller' | setup.footLabel = 'room.list-empty-nocontroller' | ||||
| } | } | ||||
| return setup | return setup | ||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| axios.get('/api/v4/rooms', { loader: true }) | axios.get('/api/v4/rooms', { loader: true }) | ||||
| .then(response => { | .then(response => { | ||||
| this.rooms = response.data.list | this.rooms = response.data.list | ||||
| }) | }) | ||||
| .catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| goto(room) { | goto(room) { | ||||
| const location = window.config['app.url'] + '/meet/' + encodeURI(room.name) | window.open(this.roomLocation(room), '_blank') | ||||
| window.open(location, '_blank') | }, | ||||
| roomLinkCopy(room) { | |||||
| navigator.clipboard.writeText(this.roomLocation(room)); | |||||
| }, | |||||
| roomLocation(room) { | |||||
| return window.config['app.url'] + '/meet/' + encodeURI(room.name) | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||