128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import type { Project } from '~/types'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
project?: Partial<Project>
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const isAnonymousTeam = ref<boolean>(props.project?.team?.anonymous || false)
|
|||
|
|
|
|||
|
|
type Member = {
|
|||
|
|
name: string
|
|||
|
|
link: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function useMembers(project?: Partial<Project>) {
|
|||
|
|
const members = ref<Member[]>(project?.team?.teammembers as Member[] || [])
|
|||
|
|
const newMember = reactive<Member>({
|
|||
|
|
name: '',
|
|||
|
|
link: '',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function addMember() {
|
|||
|
|
members.value.push({ ...newMember })
|
|||
|
|
newMember.name = ''
|
|||
|
|
newMember.link = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeMember(index: number) {
|
|||
|
|
members.value.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
members,
|
|||
|
|
newMember,
|
|||
|
|
addMember,
|
|||
|
|
removeMember,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { members, newMember, addMember, removeMember } = useMembers(props.project)
|
|||
|
|
|
|||
|
|
const { useProject } = useData()
|
|||
|
|
const { saveProject } = useProject()
|
|||
|
|
|
|||
|
|
function save() {
|
|||
|
|
saveProject({
|
|||
|
|
team: {
|
|||
|
|
anonymous: isAnonymousTeam.value,
|
|||
|
|
teammembers: members.value,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
save,
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div mt-24px>
|
|||
|
|
<ProjectCreateComponentsToggle
|
|||
|
|
v-model="isAnonymousTeam"
|
|||
|
|
label="Anonymous team"
|
|||
|
|
hint="Are developers able to upgrade and change deployed contract?"
|
|||
|
|
/>
|
|||
|
|
<ProjectCreateComponentsCategoryDivider
|
|||
|
|
w-full
|
|||
|
|
title="TEAM MEMBERS"
|
|||
|
|
/>
|
|||
|
|
<ProjectCreateComponentsItem
|
|||
|
|
v-for="member in members"
|
|||
|
|
:key="member.name"
|
|||
|
|
@remove="() => removeMember(members.indexOf(member))"
|
|||
|
|
>
|
|||
|
|
<template #label>
|
|||
|
|
<div
|
|||
|
|
flex
|
|||
|
|
gap-2px
|
|||
|
|
>
|
|||
|
|
<span
|
|||
|
|
class="text-app-black text-14px font-700"
|
|||
|
|
lg="text-16px"
|
|||
|
|
> {{ member.name }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<template #desc>
|
|||
|
|
<NuxtLink
|
|||
|
|
target="_blank"
|
|||
|
|
:to="member.link"
|
|||
|
|
hover:text-app-black
|
|||
|
|
class="text-app-black/50 text-16px hidden"
|
|||
|
|
lg="block"
|
|||
|
|
>Link
|
|||
|
|
</NuxtLink>
|
|||
|
|
</template>
|
|||
|
|
</ProjectCreateComponentsItem>
|
|||
|
|
<ProjectCreateComponentsItemAdd
|
|||
|
|
button-label="ADD MEMBER"
|
|||
|
|
@add="addMember()"
|
|||
|
|
>
|
|||
|
|
<template #content>
|
|||
|
|
<div
|
|||
|
|
flex
|
|||
|
|
flex-col
|
|||
|
|
gap-16px
|
|||
|
|
lg="gap-24px"
|
|||
|
|
>
|
|||
|
|
<ProjectCreateComponentsInput
|
|||
|
|
v-model="newMember.name"
|
|||
|
|
lg="w-50%"
|
|||
|
|
label="Team member name"
|
|||
|
|
placeholder="Enter member name"
|
|||
|
|
hint="Full member's name"
|
|||
|
|
/>
|
|||
|
|
<ProjectCreateComponentsInput
|
|||
|
|
v-model="newMember.link"
|
|||
|
|
lg="w-50%"
|
|||
|
|
label="Profile URL"
|
|||
|
|
placeholder="Linkedin, Farcaster, Twitter,..."
|
|||
|
|
hint="Link to member’s social profile (ex. Twitter, Linkedin, Lens,...)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ProjectCreateComponentsItemAdd>
|
|||
|
|
</div>
|
|||
|
|
</template>
|