enhance: exploreで公開ロール一覧とそのメンバーを閲覧できるように

This commit is contained in:
syuilo
2023-02-22 14:43:18 +09:00
parent 69869307bf
commit 870f7608be
20 changed files with 405 additions and 46 deletions

View File

@ -1,10 +1,15 @@
<template>
<MkA v-adaptive-bg :to="`/admin/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
<MkA v-adaptive-bg :to="forModeration ? `/admin/roles/${role.id}` : `/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
<div :class="$style.title">
<span :class="$style.icon">
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
<template v-if="role.iconUrl">
<img :class="$style.badge" :src="role.iconUrl"/>
</template>
<template v-else>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
</template>
</span>
<span :class="$style.name">{{ role.name }}</span>
<span v-if="role.target === 'manual'" :class="$style.users">{{ role.usersCount }} users</span>
@ -20,6 +25,7 @@ import { i18n } from '@/i18n';
const props = defineProps<{
role: any;
forModeration: boolean;
}>();
</script>
@ -38,6 +44,11 @@ const props = defineProps<{
margin-right: 8px;
}
.badge {
height: 1.3em;
vertical-align: -20%;
}
.name {
font-weight: bold;
}

View File

@ -7,9 +7,9 @@
</div>
</template>
<template #default="{ items: users }">
<template #default="{ items }">
<div class="efvhhmdq">
<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
<MkUserInfo v-for="item in items" :key="item.id" class="user" :user="extractor(item)"/>
</div>
</template>
</MkPagination>
@ -20,10 +20,13 @@ import MkUserInfo from '@/components/MkUserInfo.vue';
import MkPagination, { Paging } from '@/components/MkPagination.vue';
import { i18n } from '@/i18n';
const props = defineProps<{
const props = withDefaults(defineProps<{
pagination: Paging;
noGap?: boolean;
}>();
extractor?: (item: any) => any;
}>(), {
extractor: (item) => item,
});
</script>
<style lang="scss" scoped>