50 lines
3.3 KiB
JavaScript
50 lines
3.3 KiB
JavaScript
import { ref, computed } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js';
|
|
import { ONLINE_USERS } from '../../services/data-constants.js';
|
|
|
|
export default {
|
|
name: 'PlannerUsersOnline',
|
|
setup() {
|
|
const onlineUsers = ref(ONLINE_USERS);
|
|
const visibleOnlineUsers = computed(() => onlineUsers.value.slice(0, 6));
|
|
const remainingOnlineCount = computed(() => onlineUsers.value.length - visibleOnlineUsers.value.length);
|
|
|
|
return {
|
|
onlineUsers,
|
|
visibleOnlineUsers,
|
|
remainingOnlineCount,
|
|
};
|
|
},
|
|
template: `
|
|
<div class="row items-center">
|
|
<!-- Desktop View -->
|
|
<div class="row items-center no-wrap gt-sm">
|
|
<q-avatar v-for="user in visibleOnlineUsers" :key="user.id" size="32px" class="planner-users-online-item planner-users-online-img">
|
|
<img :src="user.img">
|
|
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]" class="bg-white text-grey-9 shadow-10 q-pa-none rounded-borders planner-users-online-tooltip">
|
|
<div class="planner-users-online-profile-card row no-wrap items-center">
|
|
<q-avatar size="54px" class="q-mr-md shadow-1"><img :src="user.img"></q-avatar>
|
|
<div>
|
|
<div class="text-weight-bold text-body2">{{ user.name }}</div>
|
|
<div class="text-caption text-grey-6">{{ user.role }}</div>
|
|
<div class="text-caption text-blue-6 text-weight-medium">Online Now</div>
|
|
</div>
|
|
</div>
|
|
</q-tooltip>
|
|
</q-avatar>
|
|
<div v-if="remainingOnlineCount > 0" class="planner-users-online-item planner-users-online-count-circle cursor-pointer">
|
|
+{{ remainingOnlineCount }}
|
|
<q-menu class="bg-white shadow-15" style="border: 1px solid #e2e8f0">
|
|
<q-list dense style="min-width: 240px"><q-item-label header class="text-weight-bold text-uppercase text-caption text-grey-6">Active Collaborators</q-item-label><q-separator />
|
|
<q-scroll-area style="height: 250px;"><q-item v-for="user in onlineUsers" :key="user.id" clickable v-ripple><q-item-section avatar><q-avatar size="28px"><img :src="user.img"></q-avatar></q-item-section><q-item-section><q-item-label class="text-weight-bold text-caption">{{ user.name }}</q-item-label><q-item-label caption>{{ user.role }}</q-item-label></q-item-section></q-item></q-scroll-area>
|
|
</q-list>
|
|
</q-menu>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile View -->
|
|
<div class="lt-md">
|
|
<q-btn round flat dense color="grey-6" icon="group"><q-badge color="red" floating rounded>{{ onlineUsers.length }}</q-badge>
|
|
<q-menu class="bg-white shadow-15" style="border: 1px solid #e2e8f0"><q-list dense style="min-width: 240px"><q-item-label header class="text-weight-bold text-uppercase text-caption text-grey-6">Online Now</q-item-label><q-separator /><q-scroll-area style="height: 250px;"><q-item v-for="user in onlineUsers" :key="user.id" clickable v-ripple><q-item-section avatar><q-avatar size="28px"><img :src="user.img"></q-avatar></q-item-section><q-item-section><q-item-label class="text-weight-bold text-caption">{{ user.name }}</q-item-label><q-item-label caption>{{ user.role }}</q-item-label></q-item-section></q-item></q-scroll-area></q-list></q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</div>`
|
|
}; |