first commit
This commit is contained in:
Inshal
94
resources/js/views/pages/user-profile/UserProfileHeader.vue
Normal file
94
resources/js/views/pages/user-profile/UserProfileHeader.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<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"
|
||||
>
|
||||
<VImg
|
||||
:src="profileHeaderData.profileImg"
|
||||
height="120"
|
||||
width="120"
|
||||
/>
|
||||
</VAvatar>
|
||||
</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 mb-2">
|
||||
{{ profileHeaderData.fullName }}
|
||||
</h4>
|
||||
|
||||
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
|
||||
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6">
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-palette-line"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData.designation }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-map-pin-line"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData.location }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-calendar-line"
|
||||
/>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData.joiningDate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VBtn prepend-icon="ri-user-follow-line">
|
||||
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.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
resources/js/views/pages/user-profile/connections/index.vue
Normal file
135
resources/js/views/pages/user-profile/connections/index.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<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 })
|
||||
|
||||
const moreBtnList = [
|
||||
{
|
||||
title: 'Share connection',
|
||||
value: 'Share connection',
|
||||
},
|
||||
{
|
||||
title: 'Block connection',
|
||||
value: 'Block connection',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
class: 'my-2',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
class: 'text-error',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="data in connectionData"
|
||||
:key="data.name"
|
||||
sm="6"
|
||||
lg="4"
|
||||
cols="12"
|
||||
>
|
||||
<VCard>
|
||||
<div class="vertical-more">
|
||||
<MoreBtn
|
||||
item-props
|
||||
:menu-list="moreBtnList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex flex-column align-center justify-center">
|
||||
<VAvatar
|
||||
size="100"
|
||||
:image="data.avatar"
|
||||
class="mb-6"
|
||||
/>
|
||||
|
||||
<h5 class="text-h5">
|
||||
{{ data.name }}
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
{{ data.designation }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center flex-wrap gap-4 my-6">
|
||||
<VChip
|
||||
v-for="chip in data.chips"
|
||||
:key="chip.title"
|
||||
:color="chip.color"
|
||||
size="small"
|
||||
>
|
||||
{{ chip.title }}
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-around">
|
||||
<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 ? 'ri-user-follow-line' : 'ri-user-add-line'"
|
||||
:variant="data.isConnected ? 'elevated' : 'outlined'"
|
||||
>
|
||||
{{ data.isConnected ? 'connected' : 'connect' }}
|
||||
</VBtn>
|
||||
|
||||
<IconBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
rounded
|
||||
>
|
||||
<VIcon icon="ri-mail-open-line" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.vertical-more {
|
||||
position: absolute;
|
||||
inset-block-start: 1rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
109
resources/js/views/pages/user-profile/profile/About.vue
Normal file
109
resources/js/views/pages/user-profile/profile/About.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="mb-4">
|
||||
<VCardText>
|
||||
<div class="text-body-2 mb-4 text-disabled">
|
||||
ABOUT
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-y-4">
|
||||
<div
|
||||
v-for="item in props.data.about"
|
||||
:key="item.property"
|
||||
class="d-flex align-center gap-x-2"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
/>
|
||||
<div class="font-weight-medium">
|
||||
{{ item.property }}:
|
||||
</div>
|
||||
<div>
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-body-2 text-disabled mt-6 mb-4">
|
||||
CONTACTS
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-y-4">
|
||||
<div
|
||||
v-for="item in props.data.contacts"
|
||||
:key="item.property"
|
||||
class="d-flex align-center gap-x-2"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
/>
|
||||
<div class="font-weight-medium">
|
||||
{{ item.property }}:
|
||||
</div>
|
||||
<div class="text-truncate">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-body-2 text-disabled mt-6 mb-4">
|
||||
TEAMS
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-y-4">
|
||||
<div
|
||||
v-for="item in props.data.teams"
|
||||
:key="item.property"
|
||||
>
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<div class="font-weight-medium text-no-wrap">
|
||||
{{ item.property }}:
|
||||
</div>
|
||||
<div class="text-no-wrap text-truncate">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="text-body-2 text-disabled mb-4">
|
||||
OVERVIEW
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-y-4">
|
||||
<div
|
||||
v-for="item in props.data.overview"
|
||||
:key="item.property"
|
||||
class="d-flex gap-x-2 align-center"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
/>
|
||||
<div class="font-weight-medium">
|
||||
{{ item.property }}:
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
import pdf from '@images/icons/project-icons/pdf.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="ri-bar-chart-2-line"
|
||||
size="24"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VCardTitle>Activity Timeline</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
side="end"
|
||||
align="start"
|
||||
line-inset="8"
|
||||
truncate-line="start"
|
||||
density="compact"
|
||||
>
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
12 Invoices have been paid
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
12 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Invoices have been paid to the company.
|
||||
</p>
|
||||
|
||||
<div class="d-inline-flex align-center timeline-chip mb-4">
|
||||
<img
|
||||
:src="pdf"
|
||||
height="20"
|
||||
class="me-3"
|
||||
alt="img"
|
||||
>
|
||||
<h6 class="text-h6 text-medium-emphasis">
|
||||
invoice.pdf
|
||||
</h6>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="success"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Client Meeting
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
45 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Project meeting with john @10:15am
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center mb-2">
|
||||
<VAvatar
|
||||
size="32"
|
||||
:image="avatar1"
|
||||
class="me-3"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="text-body-2 font-weight-medium">
|
||||
Lester McCarthy (Client)
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
CEO of ThemeSelection
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="info"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap mb-3">
|
||||
<div class="app-timeline-title align-self-start">
|
||||
Create a new project for client
|
||||
</div>
|
||||
<div class="app-timeline-meta">
|
||||
2 Day Ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-0 app-timeline-text mb-2">
|
||||
6 team members in a project
|
||||
</p>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar1"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar8"
|
||||
/>
|
||||
<VAvatar
|
||||
:size="40"
|
||||
:image="avatar6"
|
||||
/>
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="40"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
104
resources/js/views/pages/user-profile/profile/Connection.vue
Normal file
104
resources/js/views/pages/user-profile/profile/Connection.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<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"
|
||||
class="connectionCard"
|
||||
>
|
||||
<template #append>
|
||||
<div class="me-n2">
|
||||
<MoreBtn
|
||||
:menu-list="moreList"
|
||||
density="compact"
|
||||
/>
|
||||
</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 mb-1">
|
||||
{{ data.name }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>{{ data.connections }} Connections</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
icon
|
||||
class="rounded"
|
||||
:variant="data.isFriend ? 'elevated' : 'outlined' "
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="data.isFriend ? 'ri-user-line' : 'ri-user-add-line'"
|
||||
/>
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle>
|
||||
<VBtn
|
||||
block
|
||||
variant="text"
|
||||
>
|
||||
View all connections
|
||||
</VBtn>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.connectionCard{
|
||||
.v-list{
|
||||
.v-list-item{
|
||||
&__prepend{
|
||||
.v-list-item__spacer{
|
||||
inline-size: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
266
resources/js/views/pages/user-profile/profile/ProjectList.vue
Normal file
266
resources/js/views/pages/user-profile/profile/ProjectList.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<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 moreList = [
|
||||
{
|
||||
title: 'Download',
|
||||
value: 'Download',
|
||||
},
|
||||
{
|
||||
title: 'Delete',
|
||||
value: 'Delete',
|
||||
},
|
||||
{
|
||||
title: 'View',
|
||||
value: 'View',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard
|
||||
title="Project List"
|
||||
class="projectList"
|
||||
>
|
||||
<!-- 👉 User Project List Table -->
|
||||
|
||||
<!-- SECTION Datatable -->
|
||||
<VDataTable
|
||||
:headers="projectTableHeaders"
|
||||
:items="projects"
|
||||
hide-default-footer
|
||||
show-select
|
||||
item-value="name"
|
||||
>
|
||||
<!-- 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="30"
|
||||
>
|
||||
<VImg :src="data" />
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
v-if="item.extraMembers"
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="30"
|
||||
>
|
||||
<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"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
<div class="text-high-emphasis">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Action -->
|
||||
<template #item.Action>
|
||||
<MoreBtn
|
||||
:menu-list="moreList"
|
||||
density="compact"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.projectList{
|
||||
.v-table{
|
||||
&--density-default{
|
||||
.v-table__wrapper{
|
||||
table{
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
block-size: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
resources/js/views/pages/user-profile/profile/Teams.vue
Normal file
100
resources/js/views/pages/user-profile/profile/Teams.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<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"
|
||||
class="teamsCard"
|
||||
>
|
||||
<template #append>
|
||||
<div class="me-n2">
|
||||
<MoreBtn
|
||||
:menu-list="moreList"
|
||||
density="compact"
|
||||
/>
|
||||
</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 mb-1">
|
||||
{{ data.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>{{ data.members }} Members</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VChip
|
||||
:color="data.ChipColor"
|
||||
size="small"
|
||||
>
|
||||
{{ data.chipText }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle>
|
||||
<VBtn
|
||||
block
|
||||
variant="text"
|
||||
>
|
||||
View all teams
|
||||
</VBtn>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.teamsCard{
|
||||
.v-list{
|
||||
.v-list-item{
|
||||
&__prepend{
|
||||
.v-list-item__spacer{
|
||||
inline-size: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
154
resources/js/views/pages/user-profile/projects/index.vue
Normal file
154
resources/js/views/pages/user-profile/projects/index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<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"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VCardTitle>{{ data.title }}</VCardTitle>
|
||||
<div>
|
||||
<span class="font-weight-medium">Client:</span>
|
||||
{{ data.client }}
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<div>
|
||||
<MoreBtn
|
||||
item-props
|
||||
:menu-list="moreList"
|
||||
density="compact"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between flex-wrap gap-x-2 gap-y-4">
|
||||
<div class="py-2 px-3 bg-var-theme-background rounded">
|
||||
<div>
|
||||
<span class="text-high-emphasis font-weight-medium">{{ data.budgetSpent }}</span>/{{ data.budget }}
|
||||
</div>
|
||||
<div>Total Budget</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<span class="text-high-emphasis font-weight-medium">Start Date:</span> {{ data.startDate }}
|
||||
</div>
|
||||
<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">
|
||||
<div>
|
||||
<span class="font-weight-medium text-high-emphasis">All Hours:</span> {{ data.hours }}
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
:color="data.chipColor"
|
||||
size="small"
|
||||
>
|
||||
{{ data.chipText }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between flex-wrap text-caption text-medium-emphasis mt-4 mb-2">
|
||||
<div>Task: {{ data.tasks }}</div>
|
||||
<div>{{ Math.round((data.completedTask / data.totalTask) * 100) }}% Completed</div>
|
||||
</div>
|
||||
<VProgressLinear
|
||||
rounded
|
||||
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-2">
|
||||
<VAvatar
|
||||
v-for="avatar in data.avatarGroup"
|
||||
:key="avatar.name"
|
||||
:image="avatar.avatar"
|
||||
:size="32"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
{{ data.members }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-x-1 align-center text-disabled">
|
||||
<VIcon
|
||||
icon="ri-wechat-line"
|
||||
size="24"
|
||||
/>
|
||||
<div>{{ data.comments }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
122
resources/js/views/pages/user-profile/team/index.vue
Normal file
122
resources/js/views/pages/user-profile/team/index.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<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">
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="38"
|
||||
:image="team?.avatar"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VCardTitle>{{ team.title }}</VCardTitle>
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<IconBtn>
|
||||
<VIcon
|
||||
icon="ri-star-line"
|
||||
color="disabled"
|
||||
/>
|
||||
</IconBtn>
|
||||
<MoreBtn
|
||||
item-props
|
||||
:menu-list="moreList"
|
||||
color="disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="text-base mb-4">
|
||||
{{ team.description }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<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>
|
||||
<VAvatar
|
||||
v-if="team.extraMembers"
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="32"
|
||||
>
|
||||
<div class="text-body-2 text-high-emphasis font-weight-medium">
|
||||
+{{ team.extraMembers }}
|
||||
</div>
|
||||
</VAvatar>
|
||||
</div>
|
||||
<VSpacer />
|
||||
<div class="d-flex align-center gap-2">
|
||||
<VChip
|
||||
v-for="data in team.chips"
|
||||
:key="data.title"
|
||||
:color="data.color"
|
||||
size="small"
|
||||
>
|
||||
{{ data.title }}
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user