Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Distlist/List.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="card" id="distlist-list"> | <div class="card" id="distlist-list"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title"> | <div class="card-title"> | ||||
{{ $tc('distlist.list-title', 2) }} | {{ $tc('distlist.list-title', 2) }} | ||||
<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()" class="btn-success float-end" to="distlist/new" icon="users"> | <btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="distlist/new" icon="users"> | ||||
{{ $t('distlist.create') }} | {{ $t('distlist.create') }} | ||||
</btn-router> | </btn-router> | ||||
</div> | </div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<table class="table table-sm table-hover"> | <list-widget :list="lists"></list-widget> | ||||
<thead> | |||||
<tr> | |||||
<th scope="col">{{ $t('distlist.name') }}</th> | |||||
<th scope="col">{{ $t('distlist.email') }}</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr v-for="list in lists" :key="list.id" @click="$root.clickRecord"> | |||||
<td> | |||||
<svg-icon icon="users" :class="$root.statusClass(list)" :title="$root.statusText(list)"></svg-icon> | |||||
<router-link :to="{ path: 'distlist/' + list.id }">{{ list.name }}</router-link> | |||||
</td> | |||||
<td> | |||||
<router-link :to="{ path: 'distlist/' + list.id }">{{ list.email }}</router-link> | |||||
</td> | |||||
</tr> | |||||
</tbody> | |||||
<tfoot class="table-fake-body"> | |||||
<tr> | |||||
<td colspan="2">{{ $t('distlist.list-empty') }}</td> | |||||
</tr> | |||||
</tfoot> | |||||
</table> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import ListWidget from './ListWidget' | |||||
import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
library.add( | library.add( | ||||
require('@fortawesome/free-solid-svg-icons/faUsers').definition, | require('@fortawesome/free-solid-svg-icons/faUsers').definition, | ||||
) | ) | ||||
export default { | export default { | ||||
components: { | |||||
ListWidget | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
lists: [] | lists: [] | ||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
axios.get('/api/v4/groups', { loader: true }) | axios.get('/api/v4/groups', { loader: true }) | ||||
.then(response => { | .then(response => { | ||||
this.lists = response.data.list | this.lists = response.data.list | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
} | } | ||||
} | } | ||||
</script> | </script> |