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> |