Initial commit
This commit is contained in:
88
resources/js/views/pages/user-profile/UserProfileHeader.vue
Normal file
88
resources/js/views/pages/user-profile/UserProfileHeader.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<script setup>
|
||||
const profileHeaderData = ref()
|
||||
const { data, error } = await useApi('/pages/profile/header')
|
||||
if (error.value) {
|
||||
console.log(error.value)
|
||||
} else {
|
||||
if (data.value)
|
||||
profileHeaderData.value = data.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard v-if="profileHeaderData">
|
||||
<VImg
|
||||
:src="profileHeaderData.coverImg"
|
||||
min-height="125"
|
||||
max-height="250"
|
||||
cover
|
||||
/>
|
||||
|
||||
<VCardText class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-6">
|
||||
<div class="d-flex h-0">
|
||||
<VAvatar
|
||||
rounded
|
||||
size="130"
|
||||
:image="profileHeaderData.profileImg"
|
||||
class="user-profile-avatar mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
|
||||
<h4 class="text-h4 text-center text-sm-start font-weight-medium mb-2">
|
||||
{{ profileHeaderData?.fullName }}
|
||||
</h4>
|
||||
|
||||
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-5">
|
||||
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6">
|
||||
<span class="d-flex gap-x-2 align-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="tabler-palette"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData?.designation }}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="d-flex gap-x-2 align-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="tabler-map-pin"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData?.location }}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="d-flex gap-x-2 align-center">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="tabler-calendar"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData?.joiningDate }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<VBtn prepend-icon="tabler-user-check">
|
||||
Connected
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.user-profile-avatar {
|
||||
border: 5px solid rgb(var(--v-theme-surface));
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
inset-block-start: -3rem;
|
||||
|
||||
.v-img__img {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
resources/js/views/pages/user-profile/connections/index.vue
Normal file
127
resources/js/views/pages/user-profile/connections/index.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup>
|
||||
const router = useRoute('pages-user-profile-tab')
|
||||
const connectionData = ref([])
|
||||
|
||||
const fetchProjectData = async () => {
|
||||
if (router.params.tab === 'connections') {
|
||||
const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
|
||||
|
||||
connectionData.value = data
|
||||
}
|
||||
}
|
||||
|
||||
watch(router, fetchProjectData, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="data in connectionData"
|
||||
:key="data.name"
|
||||
sm="6"
|
||||
lg="4"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="vertical-more">
|
||||
<MoreBtn
|
||||
:menu-list="[
|
||||
{ title: 'Share connection', value: 'Share connection' },
|
||||
{ title: 'Block connection', value: 'Block connection' },
|
||||
{ type: 'divider', class: 'my-2' },
|
||||
{ title: 'Delete', value: 'Delete', class: 'text-error' },
|
||||
]"
|
||||
item-props
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VCardItem>
|
||||
<VCardTitle class="d-flex flex-column align-center justify-center gap-y-6">
|
||||
<VAvatar
|
||||
size="100"
|
||||
:image="data.avatar"
|
||||
class="mt-5"
|
||||
/>
|
||||
|
||||
<div class="text-center">
|
||||
<h5 class="text-h5">
|
||||
{{ data.name }}
|
||||
</h5>
|
||||
<h6 class="text-body-1">
|
||||
{{ data.designation }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center flex-wrap gap-4">
|
||||
<VChip
|
||||
v-for="chip in data.chips"
|
||||
:key="chip.title"
|
||||
label
|
||||
:color="chip.color"
|
||||
size="small"
|
||||
>
|
||||
{{ chip.title }}
|
||||
</VChip>
|
||||
</div>
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-around mb-2">
|
||||
<div class="text-center">
|
||||
<h5 class="text-h5">
|
||||
{{ data.projects }}
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Projects
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h5 class="text-h5">
|
||||
{{ data.tasks }}
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Tasks
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h5 class="text-h5">
|
||||
{{ data.connections }}
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Connections
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-center gap-4 mt-6">
|
||||
<VBtn
|
||||
:prepend-icon="data.isConnected ? 'tabler-user-check' : 'tabler-user-plus'"
|
||||
:variant="data.isConnected ? 'elevated' : 'tonal'"
|
||||
>
|
||||
{{ data.isConnected ? 'connected' : 'connect' }}
|
||||
</VBtn>
|
||||
|
||||
<IconBtn
|
||||
variant="tonal"
|
||||
class="rounded"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-mail"
|
||||
color="secondary"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.vertical-more {
|
||||
position: absolute;
|
||||
inset-block-start: 1rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
111
resources/js/views/pages/user-profile/profile/About.vue
Normal file
111
resources/js/views/pages/user-profile/profile/About.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="mb-6">
|
||||
<VCardText>
|
||||
<p class="text-sm text-disabled">
|
||||
ABOUT
|
||||
</p>
|
||||
|
||||
<VList class="card-list text-medium-emphasis">
|
||||
<VListItem
|
||||
v-for="item in props.data.about"
|
||||
:key="item.property"
|
||||
>
|
||||
<VListItemTitle>
|
||||
<span class="d-flex align-center">
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
class="me-2"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium me-2">{{ item.property }}:</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<p class="text-sm text-disabled mt-6">
|
||||
CONTACTS
|
||||
</p>
|
||||
|
||||
<VList class="card-list text-medium-emphasis">
|
||||
<VListItem
|
||||
v-for="item in props.data.contacts"
|
||||
:key="item.property"
|
||||
>
|
||||
<VListItemTitle>
|
||||
<span class="d-flex align-center">
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
class="me-2"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium me-2">{{ item.property }}:</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<p class="text-sm text-disabled mt-6">
|
||||
TEAMS
|
||||
</p>
|
||||
|
||||
<VList class="card-list text-medium-emphasis">
|
||||
<VListItem
|
||||
v-for="item in props.data.teams"
|
||||
:key="item.property"
|
||||
>
|
||||
<VListItemTitle>
|
||||
<span class="d-flex align-center">
|
||||
<div class="text-body-1 font-weight-medium me-2">{{ item.property }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<p class="text-sm text-disabled">
|
||||
OVERVIEW
|
||||
</p>
|
||||
|
||||
<VList class="card-list text-medium-emphasis">
|
||||
<VListItem
|
||||
v-for="item in props.data.overview"
|
||||
:key="item.property"
|
||||
>
|
||||
<VListItemTitle>
|
||||
<span class="d-flex align-center">
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
class="me-2"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium me-2">{{ item.property }}:</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<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 pdf from '@images/icons/project-icons/pdf.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-chart-bar"
|
||||
size="24"
|
||||
class="me-2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VCardTitle>Activity Timeline</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
side="end"
|
||||
align="start"
|
||||
line-inset="8"
|
||||
truncate-line="start"
|
||||
density="compact"
|
||||
>
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-2">
|
||||
<span class="app-timeline-title">
|
||||
12 Invoices have been paid
|
||||
</span>
|
||||
<span class="app-timeline-meta">12 min ago</span>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Content -->
|
||||
<div class="app-timeline-text mt-1">
|
||||
Invoices have been paid to the company
|
||||
</div>
|
||||
|
||||
<div class="d-inline-flex align-center timeline-chip mt-2">
|
||||
<img
|
||||
:src="pdf"
|
||||
height="20"
|
||||
class="me-2"
|
||||
alt="img"
|
||||
>
|
||||
<span class="app-timeline-text font-weight-medium">
|
||||
invoice.pdf
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem
|
||||
size="x-small"
|
||||
dot-color="success"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-2">
|
||||
<div class="app-timeline-title">
|
||||
Client Meeting
|
||||
</div>
|
||||
<span class="app-timeline-meta">45 min ago</span>
|
||||
</div>
|
||||
|
||||
<div class="app-timeline-text mt-1">
|
||||
Project meeting with john @10:15am
|
||||
</div>
|
||||
|
||||
<!-- 👉 Person -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap">
|
||||
<!-- 👉 Avatar & Personal Info -->
|
||||
<div class="d-flex align-center mt-2">
|
||||
<VAvatar
|
||||
size="32"
|
||||
class="me-2"
|
||||
:image="avatar1"
|
||||
/>
|
||||
<div class="d-flex flex-column">
|
||||
<p class="text-sm font-weight-medium text-medium-emphasis mb-0">
|
||||
Lester McCarthy (Client)
|
||||
</p>
|
||||
<span class="text-sm">CEO of Pixinvent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Design Review -->
|
||||
<VTimelineItem
|
||||
size="x-small"
|
||||
dot-color="info"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-2">
|
||||
<span class="app-timeline-title">
|
||||
Create a new project for client
|
||||
</span>
|
||||
<span class="app-timeline-meta">2 Day Ago</span>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Content -->
|
||||
<p class="app-timeline-text mt-1 mb-2">
|
||||
6 team members in a project
|
||||
</p>
|
||||
|
||||
<div class="v-avatar-group demo-avatar-group">
|
||||
<VAvatar :size="40">
|
||||
<VImg :src="avatar1" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
John Doe
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="40">
|
||||
<VImg :src="avatar2" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Jennie Obrien
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="40">
|
||||
<VImg :src="avatar3" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Peter Harper
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:color="$vuetify.theme.current.dark ? '#373b50' : '#eeedf0'"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
84
resources/js/views/pages/user-profile/profile/Connection.vue
Normal file
84
resources/js/views/pages/user-profile/profile/Connection.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
connectionsData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Share connections',
|
||||
value: 'Share connections',
|
||||
},
|
||||
{
|
||||
title: 'Suggest edits',
|
||||
value: 'Suggest edits',
|
||||
},
|
||||
{
|
||||
title: 'Report Bug',
|
||||
value: 'Report Bug',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Connection">
|
||||
<template #append>
|
||||
<div>
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="data in props.connectionsData"
|
||||
:key="data.name"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="38"
|
||||
:image="data.avatar"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ data.name }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>{{ data.connections }} Connections</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
icon
|
||||
size="38"
|
||||
class="rounded"
|
||||
:variant="data.isFriend ? 'elevated' : 'tonal' "
|
||||
>
|
||||
<VIcon
|
||||
size="22"
|
||||
:icon="data.isFriend ? 'tabler-user-x' : 'tabler-user-check'"
|
||||
/>
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="pt-2 text-center">
|
||||
<RouterLink :to="{ name: 'pages-user-profile-tab', params: { tab: 'connections' } }">
|
||||
<p class="mb-0">
|
||||
View all connections
|
||||
</p>
|
||||
</RouterLink>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
258
resources/js/views/pages/user-profile/profile/ProjectList.vue
Normal file
258
resources/js/views/pages/user-profile/profile/ProjectList.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<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'
|
||||
import figma from '@images/icons/project-icons/figma.png'
|
||||
import html5 from '@images/icons/project-icons/html5.png'
|
||||
import python from '@images/icons/project-icons/python.png'
|
||||
import react from '@images/icons/project-icons/react.png'
|
||||
import sketch from '@images/icons/project-icons/sketch.png'
|
||||
import vue from '@images/icons/project-icons/vue.png'
|
||||
import xamarin from '@images/icons/project-icons/xamarin.png'
|
||||
|
||||
// Project Table Header
|
||||
const projectTableHeaders = [
|
||||
{
|
||||
title: 'PROJECT',
|
||||
key: 'project',
|
||||
},
|
||||
{
|
||||
title: 'LEADER',
|
||||
key: 'leader',
|
||||
},
|
||||
{
|
||||
title: 'Team',
|
||||
key: 'team',
|
||||
},
|
||||
{
|
||||
title: 'PROGRESS',
|
||||
key: 'progress',
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'Action',
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
|
||||
const projects = [
|
||||
{
|
||||
logo: react,
|
||||
name: 'BGC eCommerce App',
|
||||
project: 'React Project',
|
||||
leader: 'Eileen',
|
||||
progress: 78,
|
||||
hours: '18:42',
|
||||
team: [
|
||||
avatar1,
|
||||
avatar8,
|
||||
avatar6,
|
||||
],
|
||||
extraMembers: 3,
|
||||
},
|
||||
{
|
||||
logo: figma,
|
||||
name: 'Falcon Logo Design',
|
||||
project: 'Figma Project',
|
||||
leader: 'Owen',
|
||||
progress: 25,
|
||||
hours: '20:42',
|
||||
team: [
|
||||
avatar5,
|
||||
avatar2,
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: vue,
|
||||
name: 'Dashboard Design',
|
||||
project: 'Vuejs Project',
|
||||
leader: 'Keith',
|
||||
progress: 62,
|
||||
hours: '120:87',
|
||||
team: [
|
||||
avatar8,
|
||||
avatar2,
|
||||
avatar1,
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: xamarin,
|
||||
name: 'Foodista mobile app',
|
||||
project: 'Xamarin Project',
|
||||
leader: 'Merline',
|
||||
progress: 8,
|
||||
hours: '120:87',
|
||||
team: [
|
||||
avatar3,
|
||||
avatar4,
|
||||
avatar7,
|
||||
],
|
||||
extraMembers: 8,
|
||||
},
|
||||
{
|
||||
logo: python,
|
||||
name: 'Dojo Email App',
|
||||
project: 'Python Project',
|
||||
leader: 'Harmonia',
|
||||
progress: 51,
|
||||
hours: '230:10',
|
||||
team: [
|
||||
avatar4,
|
||||
avatar3,
|
||||
avatar1,
|
||||
],
|
||||
extraMembers: 5,
|
||||
},
|
||||
{
|
||||
logo: sketch,
|
||||
name: 'Blockchain Website',
|
||||
project: 'Sketch Project',
|
||||
leader: 'Allyson',
|
||||
progress: 92,
|
||||
hours: '342:41',
|
||||
team: [
|
||||
avatar1,
|
||||
avatar8,
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: html5,
|
||||
name: 'Hoffman Website',
|
||||
project: 'HTML Project',
|
||||
leader: 'Georgie',
|
||||
progress: 80,
|
||||
hours: '12:45',
|
||||
team: [
|
||||
avatar1,
|
||||
avatar8,
|
||||
avatar6,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const options = ref({
|
||||
page: 1,
|
||||
itemsPerPage: 5,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex justify-space-between align-center flex-wrap gap-4">
|
||||
<h5 class="text-h5">
|
||||
Project List
|
||||
</h5>
|
||||
<div style="inline-size: 272px;">
|
||||
<AppTextField
|
||||
v-model="search"
|
||||
placeholder="Search Project"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
<!-- 👉 User Project List Table -->
|
||||
|
||||
<!-- SECTION Datatable -->
|
||||
<VDataTable
|
||||
v-model:page="options.page"
|
||||
:headers="projectTableHeaders"
|
||||
:items-per-page="options.itemsPerPage"
|
||||
:items="projects"
|
||||
item-value="name"
|
||||
hide-default-footer
|
||||
:search="search"
|
||||
show-select
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<!-- projects -->
|
||||
<template #item.project="{ item }">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VAvatar
|
||||
:size="34"
|
||||
:image="item.logo"
|
||||
/>
|
||||
<div>
|
||||
<h6 class="text-h6 text-no-wrap">
|
||||
{{ item.name }}
|
||||
</h6>
|
||||
<div class="text-body-2">
|
||||
{{ item.project }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.leader="{ item }">
|
||||
<div class="text-base text-high-emphasis">
|
||||
{{ item.leader }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Team -->
|
||||
<template #item.team="{ item }">
|
||||
<div class="d-flex">
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
v-for="(data, index) in item.team"
|
||||
:key="index"
|
||||
size="26"
|
||||
>
|
||||
<VImg :src="data" />
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
v-if="item.extraMembers"
|
||||
:color="$vuetify.theme.current.dark ? '#373b50' : '#eeedf0'"
|
||||
:size="26"
|
||||
>
|
||||
<div class="text-caption text-high-emphasis">
|
||||
+{{ item.extraMembers }}
|
||||
</div>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Progress -->
|
||||
<template #item.progress="{ item }">
|
||||
<div class="d-flex align-center gap-3">
|
||||
<div class="flex-grow-1">
|
||||
<VProgressLinear
|
||||
:height="6"
|
||||
:model-value="item.progress"
|
||||
color="primary"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Action -->
|
||||
<template #item.Action>
|
||||
<IconBtn>
|
||||
<VIcon icon="tabler-dots-vertical" />
|
||||
</IconBtn>
|
||||
</template>
|
||||
|
||||
<!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
|
||||
<template #bottom>
|
||||
<TablePagination
|
||||
v-model:page="options.page"
|
||||
:items-per-page="options.itemsPerPage"
|
||||
:total-items="projects.length"
|
||||
/>
|
||||
</template>
|
||||
</VDataTable>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</template>
|
||||
81
resources/js/views/pages/user-profile/profile/Teams.vue
Normal file
81
resources/js/views/pages/user-profile/profile/Teams.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
teamsData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Share connections',
|
||||
value: 'Share connections',
|
||||
},
|
||||
{
|
||||
title: 'Suggest edits',
|
||||
value: 'Suggest edits',
|
||||
},
|
||||
{
|
||||
title: 'Report Bug',
|
||||
value: 'Report Bug',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Teams">
|
||||
<template #append>
|
||||
<div>
|
||||
<MoreBtn :menu-list="moreList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="data in props.teamsData"
|
||||
:key="data.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="38"
|
||||
:image="data.avatar"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ data.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>{{ data.members }} Members</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VChip
|
||||
label
|
||||
:color="data.ChipColor"
|
||||
size="small"
|
||||
class="font-weight-medium"
|
||||
>
|
||||
{{ data.chipText }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="pt-2 text-center">
|
||||
<RouterLink :to="{ name: 'pages-user-profile-tab', params: { tab: 'teams' } }">
|
||||
<p class="mb-0">
|
||||
View all Teams
|
||||
</p>
|
||||
</RouterLink>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
60
resources/js/views/pages/user-profile/profile/index.vue
Normal file
60
resources/js/views/pages/user-profile/profile/index.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import About from './About.vue'
|
||||
import ActivityTimeline from './ActivityTimeline.vue'
|
||||
import Connection from './Connection.vue'
|
||||
import ProjectList from './ProjectList.vue'
|
||||
import Teams from './Teams.vue'
|
||||
|
||||
const router = useRoute('pages-user-profile-tab')
|
||||
const profileTabData = ref()
|
||||
|
||||
const fetchAboutData = async () => {
|
||||
if (router.params.tab === 'profile') {
|
||||
const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
|
||||
|
||||
profileTabData.value = data
|
||||
}
|
||||
}
|
||||
|
||||
watch(router, fetchAboutData, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow v-if="profileTabData">
|
||||
<VCol
|
||||
md="4"
|
||||
cols="12"
|
||||
>
|
||||
<About :data="profileTabData" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<ActivityTimeline />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<Connection :connections-data="profileTabData.connections" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<Teams :teams-data="profileTabData.teamsTech" />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<ProjectList />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
161
resources/js/views/pages/user-profile/projects/index.vue
Normal file
161
resources/js/views/pages/user-profile/projects/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
const router = useRoute('pages-user-profile-tab')
|
||||
const projectData = ref([])
|
||||
|
||||
const fetchProjectData = async () => {
|
||||
if (router.params.tab === 'projects') {
|
||||
const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
|
||||
|
||||
projectData.value = data
|
||||
}
|
||||
}
|
||||
|
||||
watch(router, fetchProjectData, { immediate: true })
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Rename Project',
|
||||
value: 'Rename Project',
|
||||
},
|
||||
{
|
||||
title: 'View Details',
|
||||
value: 'View Details',
|
||||
},
|
||||
{
|
||||
title: 'Add to favorites',
|
||||
value: 'Add to favorites',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
class: 'my-2',
|
||||
},
|
||||
{
|
||||
title: 'Leave Project',
|
||||
value: 'Leave Project',
|
||||
class: 'text-error',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow v-if="projectData">
|
||||
<VCol
|
||||
v-for="data in projectData"
|
||||
:key="data.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem class="pb-4">
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:image="data.avatar"
|
||||
size="38"
|
||||
class="me-2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VCardTitle>{{ data.title }}</VCardTitle>
|
||||
<span class="mb-0 text-body-1 d-flex align-center">
|
||||
<div class="font-weight-medium me-1">
|
||||
Client:
|
||||
</div>
|
||||
<div>{{ data.client }}</div>
|
||||
</span>
|
||||
|
||||
<template #append>
|
||||
<div class="mt-n2">
|
||||
<MoreBtn
|
||||
item-props
|
||||
:menu-list="moreList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between flex-wrap gap-x-2 gap-y-4">
|
||||
<div class="px-3 py-2 bg-var-theme-background rounded">
|
||||
<h6 class="text-base font-weight-medium">
|
||||
{{ data.budgetSpent }} <span class="text-body-1">/ {{ data.budget }}</span>
|
||||
</h6>
|
||||
<div>Total Budget</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-base font-weight-medium">
|
||||
Start Date: <span class="text-body-1">{{ data.startDate }}</span>
|
||||
</h6>
|
||||
<h6 class="text-base font-weight-medium">
|
||||
Deadline: <span class="text-body-1">{{ data.deadline }}</span>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 mb-0 clamp-text">
|
||||
{{ data.description }}
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between flex-wrap gap-2">
|
||||
<h6 class="text-base font-weight-medium">
|
||||
All Hours: <span class="text-body-1">
|
||||
{{ data.hours }}
|
||||
</span>
|
||||
</h6>
|
||||
|
||||
<VChip
|
||||
label
|
||||
:color="data.chipColor"
|
||||
size="small"
|
||||
>
|
||||
{{ data.daysLeft }} Days left
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between flex-wrap text-caption text-medium-emphasis mt-4 mb-2">
|
||||
<span>Task: {{ data.tasks }}</span>
|
||||
<span>{{ Math.round((data.completedTask / data.totalTask) * 100) }}% Completed</span>
|
||||
</div>
|
||||
<VProgressLinear
|
||||
rounded
|
||||
rounded-bar
|
||||
height="8"
|
||||
:model-value="data.completedTask"
|
||||
:max="data.totalTask"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center justify-space-between flex-wrap gap-2 mt-4">
|
||||
<div class="d-flex align-center">
|
||||
<div class="v-avatar-group me-3">
|
||||
<VAvatar
|
||||
v-for="avatar in data.avatarGroup"
|
||||
:key="avatar.name"
|
||||
:image="avatar.avatar"
|
||||
:size="32"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-body-2 text-disabled">
|
||||
{{ data.members }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="d-flex align-center">
|
||||
<VIcon
|
||||
icon="tabler-message-dots"
|
||||
class="me-1 text-disabled"
|
||||
size="24"
|
||||
/>
|
||||
<div class="text-disabled text-body-1">{{ data.comments }}</div>
|
||||
</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
118
resources/js/views/pages/user-profile/team/index.vue
Normal file
118
resources/js/views/pages/user-profile/team/index.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<script setup>
|
||||
const router = useRoute('pages-user-profile-tab')
|
||||
const teamData = ref([])
|
||||
|
||||
const fetchTeamData = async () => {
|
||||
if (router.params.tab === 'teams') {
|
||||
const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
|
||||
|
||||
teamData.value = data
|
||||
}
|
||||
}
|
||||
|
||||
watch(router, fetchTeamData, { immediate: true })
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Rename Project',
|
||||
value: 'Rename Project',
|
||||
},
|
||||
{
|
||||
title: 'View Details',
|
||||
value: 'View Details',
|
||||
},
|
||||
{
|
||||
title: 'Add to favorites',
|
||||
value: 'Add to favorites',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
class: 'my-2',
|
||||
},
|
||||
{
|
||||
title: 'Leave Project',
|
||||
value: 'Leave Project',
|
||||
class: 'text-error',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow v-if="teamData">
|
||||
<VCol
|
||||
v-for="team in teamData"
|
||||
:key="team.title"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem
|
||||
class="pb-4"
|
||||
:title="team.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="38"
|
||||
:image="team?.avatar"
|
||||
/>
|
||||
</template>
|
||||
<template #append>
|
||||
<div>
|
||||
<IconBtn>
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="tabler-star"
|
||||
class="text-disabled"
|
||||
/>
|
||||
</IconBtn>
|
||||
<MoreBtn
|
||||
:menu-list="moreList"
|
||||
item-props
|
||||
density="comfortable"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pb-4">
|
||||
<span class="text-base">{{ team.description }}</span>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex align-center">
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
v-for="data in team.avatarGroup"
|
||||
:key="data.name"
|
||||
size="32"
|
||||
>
|
||||
<VImg :src="data.avatar" />
|
||||
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
{{ data.name }}
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex align-center gap-2">
|
||||
<VChip
|
||||
v-for="data in team.chips"
|
||||
:key="data.title"
|
||||
label
|
||||
:color="data.color"
|
||||
size="small"
|
||||
class="font-weight-medium"
|
||||
>
|
||||
{{ data.title }}
|
||||
</VChip>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user