791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items-per-page="10"
|
|
:items="items"
|
|
sort-by="updated_at"
|
|
:sort-desc="true"
|
|
class="pa-4 secondary"
|
|
>
|
|
<template v-slot:item.informal_name="{ item }">
|
|
<v-img
|
|
:alt="item.informal_name"
|
|
lazy-src="/images/product-placeholder.jpg"
|
|
:src="computeImage(item)"
|
|
contain
|
|
height="60px"
|
|
width="110px"
|
|
/>
|
|
|
|
{{ item.informal_name }}
|
|
</template>
|
|
|
|
<template v-slot:item.updated_at="{ item }">
|
|
{{ formatDate(item.updated_at) }}
|
|
</template>
|
|
|
|
<template v-slot:item.delegated="{ item }">
|
|
{{ findUserById(item.user_id) }}
|
|
</template>
|
|
|
|
<template v-slot:item.actions="{ item }">
|
|
<div class="view-container">
|
|
<v-btn
|
|
class="mx-4 white--text"
|
|
style="height: 100%"
|
|
:color="$vuetify.theme.dark ? 'info' : 'txt'"
|
|
rounded
|
|
depressed
|
|
nuxt
|
|
small
|
|
:to="localePath(`/manager/members/${item.slug}`)"
|
|
>{{ $t('general.view') }}</v-btn
|
|
>
|
|
</div>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
|
|
export default {
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
required: true,
|
|
default: [],
|
|
},
|
|
users: {
|
|
type: Array,
|
|
required: true,
|
|
default: [],
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
headers: [
|
|
{
|
|
text: 'lid',
|
|
value: 'informal_name',
|
|
},
|
|
{
|
|
text: 'bijgewerkt op',
|
|
value: 'updated_at',
|
|
},
|
|
{
|
|
text: 'door',
|
|
value: 'delegated',
|
|
},
|
|
{
|
|
text: 'aangepast',
|
|
value: 'changes',
|
|
},
|
|
{
|
|
text: '',
|
|
value: 'actions',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
formatDate(date) {
|
|
return dayjs(date).format('D MMM YYYY, HH:mm').toLowerCase()
|
|
},
|
|
|
|
computeImage(item) {
|
|
if (item.logo.thumb) return item.logo.thumb
|
|
return '/images/product-placeholder.jpg'
|
|
},
|
|
|
|
findUserById(id) {
|
|
const unassigned = 'unassigned'
|
|
if (!id) return unassigned
|
|
const user = this.users.find((u) => u.id === id)
|
|
if (user) return user.fullName
|
|
return unassigned
|
|
},
|
|
},
|
|
}
|
|
</script>
|