mirror of
https://github.com/HangarMC/Hangar.git
synced 2025-03-13 15:39:18 +08:00
Move member list into own component
Still doesn't have all the functionality from Nuxt build, but moving in preparation for that
This commit is contained in:
parent
d6962cd57d
commit
b5adc8e517
42
frontend-new/src/components/projects/MemberList.vue
Normal file
42
frontend-new/src/components/projects/MemberList.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { HangarProject } from "hangar-internal";
|
||||
import Card from "~/components/design/Card.vue";
|
||||
import UserAvatar from "~/components/UserAvatar.vue";
|
||||
import Link from "~/components/design/Link.vue";
|
||||
import DropdownButton from "~/components/design/DropdownButton.vue";
|
||||
import DropdownItem from "~/components/design/DropdownItem.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
project: HangarProject;
|
||||
forceEdit?: boolean;
|
||||
}>();
|
||||
const i18n = useI18n();
|
||||
|
||||
const editing = ref(props.forceEdit);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<template #header>{{ i18n.t("project.members") }}</template>
|
||||
<template #default>
|
||||
<div
|
||||
v-for="member in project.members"
|
||||
:key="member.user.name"
|
||||
class="p-2 w-full border border-neutral-100 dark:border-neutral-800 rounded inline-flex flex-row space-x-4"
|
||||
>
|
||||
<UserAvatar :username="member.user.name" size="sm" />
|
||||
<div class="flex-grow">
|
||||
<p class="font-semibold">
|
||||
<Link :to="'/' + member.user.name">{{ member.user.name }}</Link>
|
||||
</p>
|
||||
<p>{{ member.role.role.title }}</p>
|
||||
</div>
|
||||
<DropdownButton v-if="editing">
|
||||
<DropdownItem @click="alert('OK!')">Change role</DropdownItem>
|
||||
</DropdownButton>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
@ -4,8 +4,7 @@ import Card from "~/components/design/Card.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ProjectInfo from "~/components/projects/ProjectInfo.vue";
|
||||
import { HangarProject } from "hangar-internal";
|
||||
import UserAvatar from "~/components/UserAvatar.vue";
|
||||
import Link from "~/components/design/Link.vue";
|
||||
import MemberList from "~/components/projects/MemberList.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
user: User;
|
||||
@ -33,20 +32,7 @@ const i18n = useI18n();
|
||||
<template #header>{{ i18n.t("page.plural") }}</template>
|
||||
<template #default>Page navigation goes here</template>
|
||||
</Card>
|
||||
<Card>
|
||||
<template #header>{{ i18n.t("project.members") }}</template>
|
||||
<template #default>
|
||||
<div v-for="member in project.members" :key="member.user.name" class="p-2 w-full border border-neutral-100 rounded inline-flex flex-row space-x-4">
|
||||
<UserAvatar :username="member.user.name" size="sm" />
|
||||
<div>
|
||||
<p class="font-semibold">
|
||||
<Link :to="'/' + member.user.name">{{ member.user.name }}</Link>
|
||||
</p>
|
||||
<p>{{ member.role.role.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<MemberList :project="project" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
Loading…
x
Reference in New Issue
Block a user