90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
const { createApp, ref, computed } = Vue;
|
|
|
|
const app = createApp({
|
|
setup() {
|
|
const leftDrawerOpen = ref(false);
|
|
const search = ref('');
|
|
const selectedCell = ref(null);
|
|
|
|
// Mock Data
|
|
const currentMonthYear = ref('February 2026');
|
|
|
|
const agents = ref([
|
|
{ id: 1, name: 'Alice Smith', role: 'Senior', avatar: 'https://i.pravatar.cc/150?u=1' },
|
|
{ id: 2, name: 'Bob Jones', role: 'Junior', avatar: 'https://i.pravatar.cc/150?u=2' },
|
|
{ id: 3, name: 'Charlie Day', role: 'Senior', avatar: 'https://i.pravatar.cc/150?u=3' },
|
|
{ id: 4, name: 'David Lee', role: 'Expert', avatar: 'https://i.pravatar.cc/150?u=4' },
|
|
{ id: 5, name: 'Eve White', role: 'Trainee', avatar: 'https://i.pravatar.cc/150?u=5' }
|
|
]);
|
|
|
|
const dateRange = computed(() => {
|
|
// Generate next 14 days
|
|
const dates = [];
|
|
const today = new Date();
|
|
for (let i = 0; i < 14; i++) {
|
|
const date = new Date(today);
|
|
date.setDate(today.getDate() + i);
|
|
dates.push({
|
|
date: date,
|
|
dayName: date.toLocaleDateString('en-US', { weekday: 'short' }),
|
|
dayNum: date.toLocaleDateString('en-US', { day: 'numeric' }),
|
|
isWeekend: date.getDay() === 0 || date.getDay() === 6,
|
|
exNetTarget: i % 3 === 0 ? 'High' : 'Normal' // Mock target
|
|
});
|
|
}
|
|
return dates;
|
|
});
|
|
|
|
const toggleLeftDrawer = () => {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
};
|
|
|
|
const handleCellSelection = (cellData) => {
|
|
selectedCell.value = cellData;
|
|
leftDrawerOpen.value = true;
|
|
};
|
|
|
|
const updateCellData = (newData) => {
|
|
console.log('Update cell data:', newData);
|
|
// Logic to update grid data would go here
|
|
if (selectedCell.value) {
|
|
// Ideally find the cell in a reactive store and update it
|
|
}
|
|
};
|
|
|
|
return {
|
|
leftDrawerOpen,
|
|
toggleLeftDrawer,
|
|
search,
|
|
currentMonthYear,
|
|
agents,
|
|
dateRange,
|
|
selectedCell,
|
|
handleCellSelection,
|
|
updateCellData
|
|
};
|
|
}
|
|
});
|
|
|
|
// Configure Quasar
|
|
app.use(Quasar, {
|
|
config: {
|
|
brand: {
|
|
primary: '#3b82f6',
|
|
secondary: '#64748b',
|
|
accent: '#8b5cf6',
|
|
}
|
|
}
|
|
});
|
|
|
|
// Components will be registered in their respective files or here if inline
|
|
// Note: Since we are loading script files sequentially, we need to make sure
|
|
// GridComponent and Sidebar are defined before mounting if they are used in the template.
|
|
// However, component registration usually happens after import.
|
|
// In UMD, we can define global variables for components.
|
|
|
|
app.component('grid-component', window.GridComponent);
|
|
app.component('sidebar-component', window.Sidebar);
|
|
|
|
app.mount('#q-app');
|