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:
MD 2022-03-24 22:31:30 +00:00
parent d6962cd57d
commit b5adc8e517
2 changed files with 44 additions and 16 deletions

View 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>

View File

@ -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>