Adds work week configuration feature
Implements configurable work week presets, allowing users to customize the days displayed in the calendar. This includes: - Defining work week settings (work days, day names, total days). - Providing predefined work week presets (standard, compressed, weekend, full week). - Adding UI elements to switch between presets. - Updating grid and header rendering logic to reflect the selected work week. - Emitting events when the work week changes, triggering necessary UI updates and data re-renders. This provides a more flexible and personalized calendar experience.
This commit is contained in:
parent
26f0cb8aaa
commit
d017d48bd6
11 changed files with 283 additions and 34 deletions
|
|
@ -33,6 +33,9 @@ export class ViewManager {
|
|||
|
||||
// Setup view button handlers
|
||||
this.setupViewButtonHandlers();
|
||||
|
||||
// Setup workweek preset button handlers
|
||||
this.setupWorkweekButtonHandlers();
|
||||
}
|
||||
|
||||
private setupViewButtonHandlers(): void {
|
||||
|
|
@ -48,8 +51,22 @@ export class ViewManager {
|
|||
});
|
||||
}
|
||||
|
||||
private setupWorkweekButtonHandlers(): void {
|
||||
const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
|
||||
workweekButtons.forEach(button => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const workweekId = button.getAttribute('data-workweek');
|
||||
if (workweekId) {
|
||||
this.changeWorkweek(workweekId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private initializeView(): void {
|
||||
this.updateViewButtons();
|
||||
this.updateWorkweekButtons();
|
||||
|
||||
this.eventBus.emit(EventTypes.VIEW_RENDERED, {
|
||||
view: this.currentView
|
||||
|
|
@ -72,6 +89,18 @@ export class ViewManager {
|
|||
});
|
||||
}
|
||||
|
||||
private changeWorkweek(workweekId: string): void {
|
||||
console.log(`ViewManager: Changing workweek to ${workweekId}`);
|
||||
|
||||
// Update the calendar config
|
||||
calendarConfig.setWorkWeek(workweekId);
|
||||
|
||||
// Update button states
|
||||
this.updateWorkweekButtons();
|
||||
|
||||
// Trigger a calendar refresh to apply the new workweek
|
||||
this.eventBus.emit(EventTypes.REFRESH_REQUESTED);
|
||||
}
|
||||
|
||||
private updateViewButtons(): void {
|
||||
const viewButtons = document.querySelectorAll('swp-view-button[data-view]');
|
||||
|
|
@ -85,6 +114,20 @@ export class ViewManager {
|
|||
});
|
||||
}
|
||||
|
||||
private updateWorkweekButtons(): void {
|
||||
const currentWorkweek = calendarConfig.getCurrentWorkWeek();
|
||||
const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
|
||||
|
||||
workweekButtons.forEach(button => {
|
||||
const buttonWorkweek = button.getAttribute('data-workweek');
|
||||
if (buttonWorkweek === currentWorkweek) {
|
||||
button.setAttribute('data-active', 'true');
|
||||
} else {
|
||||
button.removeAttribute('data-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private refreshCurrentView(): void {
|
||||
this.eventBus.emit(EventTypes.VIEW_RENDERED, {
|
||||
view: this.currentView
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue