File: //home/arjun/projects/buyercall/buyercall/assets/vue/widgets/Worklist/components/WorkList.vue
<template>
<vue-resizable :active="['r']" width="auto" height="auto" :minWidth="200">
<div class="chat-leftsidebar me-lg-4 panel-left">
<div class=""></div>
<div class="chat-leftsidebar-nav mt-1">
<b-tabs pills fill content-class="py-4">
<b-tab active>
<template v-slot:title>
<i class="bx bx-group font-size-20 d-sm-none"></i>
<span class="d-none d-sm-block">Tasks</span>
</template>
<b-card-text>
<task-list></task-list>
</b-card-text>
</b-tab>
<b-tab title="Tab 1">
<template v-slot:title>
<i class="bx bx-chat font-size-20 d-sm-none"></i>
<span class="d-none d-sm-block">Chat</span>
</template>
<b-card-text>
<div>
<h5 class="font-size-14 mb-3">Recent</h5>
<div data-simplebar style="max-height: 410px" id="chat-list">
<ul class="list-unstyled chat-list">
<li
class
v-for="data of chatData"
:key="data.id"
:class="{ active: true }"
>
<a href="javascript: void(0);">
<div class="d-flex">
<div class="align-self-center me-3">
<i
:class="`mdi mdi-circle text-${data.color} font-size-10`"
></i>
</div>
<div class="align-self-center me-3" v-if="data.image">
<img
:src="`${data.image}`"
class="rounded-circle avatar-xs"
alt
/>
</div>
<div
class="avatar-xs align-self-center me-3"
v-if="!data.image"
>
<span
class="
avatar-title
rounded-circle
bg-soft bg-primary
text-primary
"
>{{ data.name.charAt(0) }}</span
>
</div>
<div class="flex-grow-1 overflow-hidden">
<h5 class="text-truncate font-size-14 mb-1">
{{ data.name }}
</h5>
<p class="text-truncate mb-0">
{{ data.message }}
</p>
</div>
<div class="font-size-11">{{ data.time }}</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</b-card-text>
</b-tab>
<b-tab>
<template v-slot:title>
<i class="bx bx-book-content font-size-20 d-sm-none"></i>
<span class="d-none d-sm-block">Contacts</span>
</template>
<b-card-text>
<h5 class="font-size-14 mb-3">Contacts</h5>
<div data-simplebar style="height: 410px">
<div>
<div class="avatar-xs mb-3">
<span
class="
avatar-title
rounded-circle
bg-soft bg-primary
text-primary
"
>A</span
>
</div>
<ul class="list-unstyled chat-list">
<li>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Adam Miller</h5>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Alfonso Fisher</h5>
</a>
</li>
</ul>
</div>
<div class="mt-4">
<div class="avatar-xs mb-3">
<span
class="
avatar-title
rounded-circle
bg-soft bg-primary
text-primary
"
>B</span
>
</div>
<ul class="list-unstyled chat-list">
<li>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Bonnie Harney</h5>
</a>
</li>
</ul>
</div>
<div class="mt-4">
<div class="avatar-xs mb-3">
<span
class="
avatar-title
rounded-circle
bg-soft bg-primary
text-primary
"
>C</span
>
</div>
<ul class="list-unstyled chat-list">
<li>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Charles Brown</h5>
</a>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Carmella Jones</h5>
</a>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Carrie Williams</h5>
</a>
</li>
</ul>
</div>
<div class="mt-4">
<div class="avatar-xs mb-3">
<span
class="
avatar-title
rounded-circle
bg-soft bg-primary
text-primary
"
>D</span
>
</div>
<ul class="list-unstyled chat-list">
<li>
<a href="javascript:void(0);">
<h5 class="font-size-14 mb-0">Dolores Minter</h5>
</a>
</li>
</ul>
</div>
</div>
</b-card-text>
</b-tab>
</b-tabs>
</div>
</div>
<!-- <div class="splitter"></div> -->
</vue-resizable>
</template>
<script>
import Avatar1 from '../../../../styles/2021-theme/images/users/avatar-1.jpg';
import TaskList from './TaskList.vue';
import VueResizable from 'vue-resizable';
import { BTab,BTabs,BCardText } from 'bootstrap-vue-next';
export default {
components: {
VueResizable,
TaskList,
BTab,BTabs,BCardText
},
data() {
return {
Avatar1,
chatData: [
{
id: 1,
// image: Avatar2,
name: 'Steven Franklin',
message: "Hey! there I'm available",
time: '05 min',
color: 'secondary',
messages: [
{
name: 'Steven Franklin',
message: 'Hello!',
time: '10:00',
userType: 'receiver',
},
{
name: 'Henry Wells',
messages: 'Hi, How are you? What about our next meeting?',
time: '10:02',
userType: 'sender',
},
{
name: 'Steven Franklin',
message: 'Yeah everything is fine',
time: '10:06',
userType: 'receiver',
},
{
name: 'Steven Franklin',
message: '& Next meeting tomorrow 10.00AM',
time: '10:06',
userType: 'receiver',
},
{
name: 'Henry Wells',
message: "Wow that's great",
time: '10:07',
userType: 'sender',
},
],
},
{
id: 2,
// image: Avatar3,
name: 'Adam Miller',
message: "I've finished it! See you so",
time: '12 min',
color: 'success',
messages: [
{
name: 'Adam Miller',
message: 'Hey',
time: '10:00',
userType: 'receiver',
},
{
name: 'Henry Wells',
message: 'hi',
time: '10:02',
userType: 'sender',
},
],
},
{
id: 3,
name: 'Keith Gonzales',
message: 'This theme is awesome!',
time: '24 min',
color: 'success',
messages: [
{
name: 'Keith Gonzales',
message: 'Good morning',
time: '8:00',
userType: 'receiver',
},
{
name: 'Henry Wells',
message: 'Hey, Very good morning',
time: '8:10',
userType: 'sender',
},
],
},
{
id: 5,
name: 'Mitchel Givens',
message: "Hey! there I'm available",
time: '3 hrs',
color: 'secondary',
messages: [
{
name: 'Mitchel Givens',
message: 'Hello',
time: '10:00',
userType: 'receiver',
},
{
name: 'Henry Wells',
message: 'Hello!',
time: '10:02',
userType: 'sender',
},
],
},
],
};
},
};
</script>