Add USB, Notifications, Network plugins and reusable EmployeeSearch component
New Plugins: - USB plugin: Device checkout/checkin with employee lookup, checkout history - Notifications plugin: Announcements with types, scheduling, shopfloor display - Network plugin: Network device management with subnets and VLANs - Equipment and Computers plugins: Asset type separation Frontend: - EmployeeSearch component: Reusable employee lookup with autocomplete - USB views: List, detail, checkout/checkin modals - Notifications views: List, form with recognition mode - Network views: Device list, detail, form - Calendar view with FullCalendar integration - Shopfloor and TV dashboard views - Reports index page - Map editor for asset positioning - Light/dark mode fixes for map tooltips Backend: - Employee search API with external lookup service - Collector API for PowerShell data collection - Reports API endpoints - Slides API for TV dashboard - Fixed AppVersion model (removed BaseModel inheritance) - Added checkout_name column to usbcheckouts table Styling: - Unified detail page styles - Improved pagination (page numbers instead of prev/next) - Dark/light mode theme improvements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
379
frontend/src/views/CalendarView.vue
Normal file
379
frontend/src/views/CalendarView.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<h1>Calendar</h1>
|
||||
</div>
|
||||
|
||||
<div class="calendar-container card">
|
||||
<FullCalendar :options="calendarOptions" />
|
||||
</div>
|
||||
|
||||
<!-- More events tooltip -->
|
||||
<div
|
||||
v-if="moreTooltipData.length"
|
||||
ref="moreTooltip"
|
||||
class="fc-more-tooltip"
|
||||
:style="{ left: tooltipPosition.left + 'px', top: tooltipPosition.top + 'px' }"
|
||||
@mouseleave="hideMoreTooltip"
|
||||
>
|
||||
<div
|
||||
v-for="(evt, idx) in moreTooltipData"
|
||||
:key="idx"
|
||||
class="fc-more-tooltip-event"
|
||||
:style="{ borderLeftColor: evt.color }"
|
||||
@click="openEventFromTooltip(evt)"
|
||||
>
|
||||
{{ evt.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event details modal -->
|
||||
<div v-if="selectedEvent" class="modal-overlay" @click.self="closeEventModal">
|
||||
<div class="modal">
|
||||
<!-- Recognition event with employee highlight -->
|
||||
<div v-if="selectedEvent.extendedProps?.typecolor === 'recognition'" class="recognition-header">
|
||||
<div class="recognition-badge">
|
||||
<span class="recognition-icon">🏆</span>
|
||||
</div>
|
||||
<div class="recognition-info">
|
||||
<div class="recognition-label">Recognition</div>
|
||||
<h2 class="recognition-title">{{ selectedEvent.extendedProps?.message || selectedEvent.title }}</h2>
|
||||
<div v-if="selectedEvent.extendedProps?.employeename || selectedEvent.extendedProps?.employeesso" class="recognition-employee">
|
||||
<span class="employee-icon">👤</span>
|
||||
<span class="employee-name">{{ selectedEvent.extendedProps.employeename || selectedEvent.extendedProps.employeesso }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regular event header -->
|
||||
<h2 v-else>{{ selectedEvent.title }}</h2>
|
||||
|
||||
<div class="event-details">
|
||||
<p v-if="selectedEvent.extendedProps?.typename && selectedEvent.extendedProps?.typecolor !== 'recognition'">
|
||||
<strong>Type:</strong> {{ selectedEvent.extendedProps.typename }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Start:</strong> {{ formatDate(selectedEvent.start) }}
|
||||
</p>
|
||||
<p v-if="selectedEvent.end">
|
||||
<strong>End:</strong> {{ formatDate(selectedEvent.end) }}
|
||||
</p>
|
||||
<p v-if="selectedEvent.extendedProps?.message && selectedEvent.extendedProps?.typecolor !== 'recognition'" class="message-block">
|
||||
<strong>Details:</strong>
|
||||
<span class="message-text">{{ selectedEvent.extendedProps.message }}</span>
|
||||
</p>
|
||||
<p v-if="selectedEvent.extendedProps?.ticketnumber">
|
||||
<strong>Ticket:</strong> {{ selectedEvent.extendedProps.ticketnumber }}
|
||||
</p>
|
||||
<p v-if="selectedEvent.extendedProps?.linkurl">
|
||||
<a :href="selectedEvent.extendedProps.linkurl" target="_blank" class="btn btn-link">
|
||||
More Info
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<router-link
|
||||
v-if="selectedEvent.extendedProps?.notificationid"
|
||||
:to="`/notifications/${selectedEvent.extendedProps.notificationid}`"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
View Notification
|
||||
</router-link>
|
||||
<button class="btn btn-primary" @click="closeEventModal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import { notificationsApi } from '@/api'
|
||||
|
||||
const events = ref([])
|
||||
const selectedEvent = ref(null)
|
||||
const calendarRef = ref(null)
|
||||
const moreTooltip = ref(null)
|
||||
const moreTooltipData = ref([])
|
||||
const tooltipPosition = ref({ left: 0, top: 0 })
|
||||
|
||||
// Store events by date for hover lookup
|
||||
const eventsByDate = ref({})
|
||||
|
||||
const calendarOptions = ref({
|
||||
plugins: [dayGridPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
events: [],
|
||||
eventClick: (info) => {
|
||||
selectedEvent.value = info.event
|
||||
},
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,dayGridWeek'
|
||||
},
|
||||
height: 'auto',
|
||||
dayMaxEvents: 3,
|
||||
moreLinkClick: () => 'none' // Disable click, we use hover
|
||||
})
|
||||
|
||||
function hideMoreTooltip() {
|
||||
moreTooltipData.value = []
|
||||
}
|
||||
|
||||
function handleMoreLinkHover(e) {
|
||||
const moreLink = e.target.closest('.fc-daygrid-more-link')
|
||||
if (!moreLink) {
|
||||
return
|
||||
}
|
||||
|
||||
// Find the day cell and get its date
|
||||
const dayCell = moreLink.closest('.fc-daygrid-day')
|
||||
if (!dayCell) return
|
||||
|
||||
const dateStr = dayCell.getAttribute('data-date')
|
||||
if (!dateStr || !eventsByDate.value[dateStr]) return
|
||||
|
||||
// Get events for this date that would be hidden (after first 3)
|
||||
const dayEvents = eventsByDate.value[dateStr]
|
||||
const hiddenEvents = dayEvents.slice(3).map(evt => ({
|
||||
title: evt.title,
|
||||
color: evt.backgroundColor || '#14abef',
|
||||
// Include full event data for modal
|
||||
start: evt.start,
|
||||
end: evt.end,
|
||||
extendedProps: evt.extendedProps || {}
|
||||
}))
|
||||
|
||||
if (hiddenEvents.length === 0) return
|
||||
|
||||
moreTooltipData.value = hiddenEvents
|
||||
|
||||
// Position tooltip
|
||||
const rect = moreLink.getBoundingClientRect()
|
||||
tooltipPosition.value = {
|
||||
left: rect.left,
|
||||
top: rect.bottom + 5
|
||||
}
|
||||
}
|
||||
|
||||
function handleMoreLinkLeave(e) {
|
||||
const related = e.relatedTarget
|
||||
// Don't hide if moving to the tooltip itself
|
||||
if (related && (related.closest('.fc-more-tooltip') || related.closest('.fc-daygrid-more-link'))) {
|
||||
return
|
||||
}
|
||||
hideMoreTooltip()
|
||||
}
|
||||
|
||||
function buildEventsByDate() {
|
||||
const byDate = {}
|
||||
for (const evt of events.value) {
|
||||
const dateStr = evt.start ? evt.start.split('T')[0] : null
|
||||
if (dateStr) {
|
||||
if (!byDate[dateStr]) byDate[dateStr] = []
|
||||
byDate[dateStr].push(evt)
|
||||
}
|
||||
}
|
||||
eventsByDate.value = byDate
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadEvents()
|
||||
|
||||
// Add event delegation for more links
|
||||
await nextTick()
|
||||
const container = document.querySelector('.calendar-container')
|
||||
if (container) {
|
||||
container.addEventListener('mouseenter', handleMoreLinkHover, true)
|
||||
container.addEventListener('mouseleave', handleMoreLinkLeave, true)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
const container = document.querySelector('.calendar-container')
|
||||
if (container) {
|
||||
container.removeEventListener('mouseenter', handleMoreLinkHover, true)
|
||||
container.removeEventListener('mouseleave', handleMoreLinkLeave, true)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await loadEvents()
|
||||
})
|
||||
|
||||
async function loadEvents() {
|
||||
try {
|
||||
const response = await notificationsApi.getCalendar()
|
||||
events.value = response.data.data
|
||||
calendarOptions.value.events = events.value
|
||||
buildEventsByDate()
|
||||
} catch (error) {
|
||||
console.error('Error loading calendar events:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function closeEventModal() {
|
||||
selectedEvent.value = null
|
||||
}
|
||||
|
||||
function openEventFromTooltip(evt) {
|
||||
// Create an event-like object that matches FullCalendar's event structure
|
||||
selectedEvent.value = {
|
||||
title: evt.title,
|
||||
start: evt.start,
|
||||
end: evt.end,
|
||||
extendedProps: evt.extendedProps
|
||||
}
|
||||
hideMoreTooltip()
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar-container {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 18px;
|
||||
color: var(--text);
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.event-details {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.event-details p {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.event-details p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.event-details strong {
|
||||
color: var(--text-light);
|
||||
display: inline-block;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.message-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.message-block strong {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg);
|
||||
border-radius: 0.25rem;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.25rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Recognition event styling */
|
||||
.recognition-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.recognition-badge {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.recognition-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.recognition-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.recognition-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.recognition-title {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 1.4;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.recognition-employee {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: rgba(65, 129, 255, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
border-left: 3px solid var(--primary);
|
||||
}
|
||||
|
||||
.employee-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.employee-name {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user