Fine tuning of admin users page

This commit is contained in:
Robert Schäfer 2019-07-12 01:24:09 +02:00
parent 8b1d92ee7e
commit 08a5a70fd0
3 changed files with 36 additions and 7 deletions

View File

@ -192,7 +192,7 @@
"table": { "table": {
"columns": { "columns": {
"name": "Name", "name": "Name",
"slug": "Username", "slug": "Slug",
"role": "Rolle" "role": "Rolle"
} }
} }

View File

@ -193,7 +193,7 @@
"table": { "table": {
"columns": { "columns": {
"name": "Name", "name": "Name",
"slug": "Username", "slug": "Slug",
"role": "Role" "role": "Role"
} }
} }

View File

@ -11,16 +11,26 @@
params: { id: scope.row.id, slug: scope.row.slug }, params: { id: scope.row.id, slug: scope.row.slug },
}" }"
> >
<b>{{ scope.row.name | truncate(50) }}</b> <b>{{ scope.row.name | truncate(20) }}</b>
</nuxt-link>
</template>
<template slot="slug" slot-scope="scope">
<nuxt-link
:to="{
name: 'profile-id-slug',
params: { id: scope.row.id, slug: scope.row.slug },
}"
>
<b>{{ scope.row.slug | truncate(20) }}</b>
</nuxt-link> </nuxt-link>
</template> </template>
</ds-table> </ds-table>
<ds-flex direction="row-reverse"> <ds-flex direction="row-reverse">
<ds-flex-item width="50px"> <ds-flex-item width="50px">
<ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary /> <ds-button @click="next" :loading="$apollo.loading" :disabled="!hasNext" icon="arrow-right" primary />
</ds-flex-item> </ds-flex-item>
<ds-flex-item width="50px"> <ds-flex-item width="50px">
<ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary /> <ds-button @click="back" :loading="$apollo.loading" :disabled="!hasPrevious" icon="arrow-left" primary />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-card> </ds-card>
@ -49,7 +59,22 @@ export default {
index: '#', index: '#',
name: this.$t('admin.users.table.columns.name'), name: this.$t('admin.users.table.columns.name'),
slug: this.$t('admin.users.table.columns.slug'), slug: this.$t('admin.users.table.columns.slug'),
role: this.$t('admin.users.table.columns.role'), contributionsCount: {
label: '🖉',
align: 'right'
},
commentedCount: {
label: '🗨',
align: 'right'
},
shoutedCount: {
label: '❤',
align: 'right'
},
role: {
label: this.$t('admin.users.table.columns.role'),
align: 'right'
}
} }
}, },
}, },
@ -63,6 +88,9 @@ export default {
name name
slug slug
role role
contributionsCount
commentedCount
shoutedCount
} }
} }
`) `)
@ -72,7 +100,8 @@ export default {
return { first, offset } return { first, offset }
}, },
update({ User }) { update({ User }) {
this.hasNext = User && User.length >= this.pageSize if (!User) return []
this.hasNext = User.length >= this.pageSize
if (User.length <= 0) return this.User // edge case, avoid a blank page if (User.length <= 0) return this.User // edge case, avoid a blank page
return User.map((u, i) => Object.assign({}, u, { index: this.offset + i })) return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
}, },