205 lines
5.1 KiB
Vue
205 lines
5.1 KiB
Vue
<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
import avatar2 from '@images/avatars/avatar-2.png'
|
|
import avatar3 from '@images/avatars/avatar-3.png'
|
|
import avatar4 from '@images/avatars/avatar-4.png'
|
|
import avatar5 from '@images/avatars/avatar-5.png'
|
|
import avatar6 from '@images/avatars/avatar-6.png'
|
|
import avatar7 from '@images/avatars/avatar-7.png'
|
|
import avatar8 from '@images/avatars/avatar-8.png'
|
|
|
|
const props = defineProps({
|
|
isDialogVisible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:isDialogVisible'])
|
|
|
|
const dialogVisibleUpdate = val => {
|
|
emit('update:isDialogVisible', val)
|
|
}
|
|
|
|
const membersList = [
|
|
{
|
|
avatar: avatar1,
|
|
name: 'Lester Palmer',
|
|
email: 'jerrod98@gmail.com',
|
|
permission: 'Can Edit',
|
|
},
|
|
{
|
|
avatar: avatar2,
|
|
name: 'Mattie Blair',
|
|
email: 'prudence.boehm@yahoo.com',
|
|
permission: 'Owner',
|
|
},
|
|
{
|
|
avatar: avatar3,
|
|
name: 'Marvin Wheeler',
|
|
email: 'rumet@jujpejah.net',
|
|
permission: 'Can Comment',
|
|
},
|
|
{
|
|
avatar: avatar4,
|
|
name: 'Nannie Ford',
|
|
email: 'negza@nuv.io',
|
|
permission: 'Can View',
|
|
},
|
|
{
|
|
avatar: avatar5,
|
|
name: 'Julian Murphy',
|
|
email: 'lunebame@umdomgu.net',
|
|
permission: 'Can Edit',
|
|
},
|
|
{
|
|
avatar: avatar6,
|
|
name: 'Sophie Gilbert',
|
|
email: 'ha@sugit.gov',
|
|
permission: 'Can View',
|
|
},
|
|
{
|
|
avatar: avatar7,
|
|
name: 'Chris Watkins',
|
|
email: 'zokap@mak.org',
|
|
permission: 'Can Comment',
|
|
},
|
|
{
|
|
avatar: avatar8,
|
|
name: 'Adelaide Nichols',
|
|
email: 'ujinomu@jigo.com',
|
|
permission: 'Can Edit',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
:model-value="props.isDialogVisible"
|
|
max-width="900"
|
|
@update:model-value="dialogVisibleUpdate"
|
|
>
|
|
<VCard class="share-project-dialog pa-sm-11 pa-3">
|
|
<!-- 👉 dialog close btn -->
|
|
<DialogCloseBtn
|
|
size="default"
|
|
variant="text"
|
|
@click="emit('update:isDialogVisible', false)"
|
|
/>
|
|
<VCardText class="pt-5">
|
|
<div class="text-center mb-6">
|
|
<h4 class="text-h4 mb-2">
|
|
Share Project
|
|
</h4>
|
|
<p class="text-body-1">
|
|
Share project with the team members
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<h5 class="text-h5 mb-2">
|
|
Add Members
|
|
</h5>
|
|
<VAutocomplete
|
|
:items="membersList"
|
|
item-title="name"
|
|
item-value="name"
|
|
density="compact"
|
|
placeholder="Add project members..."
|
|
>
|
|
<template #item="{ props: listItemProp, item }">
|
|
<VListItem v-bind="listItemProp">
|
|
<template #prepend>
|
|
<VAvatar
|
|
:image="item.raw.avatar"
|
|
size="30"
|
|
/>
|
|
</template>
|
|
</VListItem>
|
|
</template>
|
|
</VAutocomplete>
|
|
</div>
|
|
|
|
<h6 class="text-h6 mb-4">
|
|
8 Members
|
|
</h6>
|
|
|
|
<VList class="card-list mb-6">
|
|
<VListItem
|
|
v-for="member in membersList"
|
|
:key="member.name"
|
|
>
|
|
<template #prepend>
|
|
<VAvatar :image="member.avatar" />
|
|
</template>
|
|
|
|
<VListItemTitle class="text-high-emphasis">
|
|
{{ member.name }}
|
|
</VListItemTitle>
|
|
<VListItemSubtitle>
|
|
{{ member.email }}
|
|
</VListItemSubtitle>
|
|
|
|
<template #append>
|
|
<VBtn
|
|
variant="text"
|
|
color="secondary"
|
|
:icon="$vuetify.display.xs"
|
|
>
|
|
<template v-if="!$vuetify.display.xs">
|
|
{{ member.permission }}
|
|
</template>
|
|
<VIcon
|
|
end
|
|
icon="ri-arrow-down-s-line"
|
|
size="16"
|
|
:class="$vuetify.display.xs ? 'ms-0' : ''"
|
|
/>
|
|
|
|
<VMenu activator="parent">
|
|
<VList :selected="[member.permission]">
|
|
<VListItem
|
|
v-for="(item, index) in ['Owner', 'Can Edit', 'Can Comment', 'Can View']"
|
|
:key="index"
|
|
:value="item"
|
|
>
|
|
<VListItemTitle>{{ item }}</VListItemTitle>
|
|
</VListItem>
|
|
</VList>
|
|
</VMenu>
|
|
</VBtn>
|
|
</template>
|
|
</VListItem>
|
|
</VList>
|
|
|
|
<div class="d-flex justify-space-between align-center flex-wrap gap-3">
|
|
<div class="text-body-1 text-high-emphasis font-weight-medium d-flex align-center">
|
|
<VIcon
|
|
icon="ri-group-line"
|
|
size="20"
|
|
class="me-2"
|
|
/>
|
|
<span>Public to Master - ThemeSelection</span>
|
|
</div>
|
|
|
|
<VBtn
|
|
variant="outlined"
|
|
prepend-icon="ri-link"
|
|
size="small"
|
|
>
|
|
Copy Project Link
|
|
</VBtn>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.share-project-dialog {
|
|
.card-list {
|
|
--v-card-list-gap: 1rem;
|
|
}
|
|
}
|
|
</style>
|