rschneider/dvbooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add calendar dashboard edit

Browse Source
This commit is contained in:
Schneider Roland
2025-12-08 16:40:19 +01:00
parent cacc04a217
commit 2e2f37ab86
16 changed files with 194 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
admin/src/app/features/calendar/components/calendar-view/calendar-view.ts
View File

@@ -24,8 +24,8 @@ import {
SingleEventDashboardEventDelete,
} from './single-event-dashboard-event-delete/single-event-dashboard-event-delete';
import {
SingleEventDashboardEventCancel,
} from './single-event-dashboard-event-cancel/single-event-dashboard-event-cancel';
SingleEventDashboardEventActivation,
} from './single-event-dashboard-event-activation/single-event-dashboard-event-activation.component';
import { SingleEventDashboardEventEdit } from './single-event-dashboard-event-edit/single-event-dashboard-event-edit';
@Component({
@@ -81,7 +81,6 @@ export class CalendarView {
{
component: SingleEventDashboardEventDelete,
isRendered: () => this.workflow() == 'event-delete',
// isRendered: () => true,
closeClick: () => this.closeDialog(),
modalBoxStyleClass: 'max-w-none w-2xl',
componentInputs: () => {
@@ -94,13 +93,26 @@ export class CalendarView {
},
{
component: SingleEventDashboardEventCancel,
component: SingleEventDashboardEventActivation,
isRendered: () => this.workflow() == 'event-cancel',
// isRendered: () => true,
closeClick: () => this.closeDialog(),
modalBoxStyleClass: 'max-w-none w-2xl',
componentInputs: () => {
return {
'mode': 'cancel',
'event': this.selectedEvent(),
'onAction': this.handleAction,
};
},
},
{
component: SingleEventDashboardEventActivation,
isRendered: () => this.workflow() == 'event_activate',
closeClick: () => this.closeDialog(),
modalBoxStyleClass: 'max-w-none w-2xl',
componentInputs: () => {
return {
'mode': 'activate',
'event': this.selectedEvent(),
'onAction': this.handleAction,
};
@@ -141,6 +153,12 @@ export class CalendarView {
extendedProps: {
event: model,
},
editable: !model.isCancelled,
// 2. Add a class for styling
classNames: model.isCancelled ? ['disabled-event'] : [],
// Optional: Force a gray color here if not using CSS
backgroundColor: '#d3d3d3',
borderColor: '#d3d3d3'
};
if (model.eventType) {
calendarEvent.borderColor = model.eventType.color;
@@ -197,6 +215,9 @@ export class CalendarView {
case 'event_edit':
this.workflow.set('event-edit');
break;
default:
this.workflow.set(action);
break;
}
}
@@ -209,6 +230,7 @@ export class CalendarView {
} else if ( msg == 'save-event-success'){
this.closeDialog();
this.calendarComponent?.getApi().refetchEvents();
}else{
}
};

0
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.css → admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-activation/single-event-dashboard-event-activation.component.css
View File

27
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-activation/single-event-dashboard-event-activation.component.html Normal file
View File

@@ -0,0 +1,27 @@
<h2 class="text-2xl">
@if (mode() == 'cancel') {
Esemény lemondása
} @else {
Esemény aktiválása
}
</h2>
<app-single-event-dashboard-event-details-view [event]="event()"></app-single-event-dashboard-event-details-view>
<div class="flex gap-2 mt-3">
@if (mode() == 'cancel') {
<rs-daisy-button variant="error" (click)="cancelEventOccurrence()">
<span [outerHTML]="SvgIcons.heroTrash | safeHtml"></span>
Lemondás
</rs-daisy-button>
}
@if (mode() == 'activate') {
<rs-daisy-button variant="error" (click)="activateEventOccurrence()">
<span [outerHTML]="SvgIcons.heroTrash | safeHtml"></span>
Aktiválás
</rs-daisy-button>
}
<rs-daisy-button variant="primary" (click)="closeDialog()">
<span [outerHTML]="SvgIcons.heroXcircle | safeHtml"></span>
Mégsem
</rs-daisy-button>
</div>

10
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.spec.ts → admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-activation/single-event-dashboard-event-activation.component.spec.ts
View File

@@ -1,18 +1,18 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SingleEventDashboardEventCancel } from './single-event-dashboard-event-cancel';
import { SingleEventDashboardEventActivation } from './single-event-dashboard-event-activation.component';
describe('SingleEventDashboardEventCancel', () => {
let component: SingleEventDashboardEventCancel;
let fixture: ComponentFixture<SingleEventDashboardEventCancel>;
let component: SingleEventDashboardEventActivation;
let fixture: ComponentFixture<SingleEventDashboardEventActivation>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [SingleEventDashboardEventCancel]
imports: [SingleEventDashboardEventActivation]
})
.compileComponents();
fixture = TestBed.createComponent(SingleEventDashboardEventCancel);
fixture = TestBed.createComponent(SingleEventDashboardEventActivation);
component = fixture.componentInstance;
fixture.detectChanges();
});

63
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-activation/single-event-dashboard-event-activation.component.ts Normal file
View File

@@ -0,0 +1,63 @@
import { Component, inject, input } from '@angular/core';
import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
import {
SingleEventDashboardEventDetailsView
} from '../single-event-dashboard-event-details-view/single-event-dashboard-event-details-view';
import { Button } from '@rschneider/ng-daisyui';
import { SvgIcons } from '../../../../../svg-icons';
import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
import { CalendarService } from '../../../services/calendar.service';
export type ACTIVATION_TYPE = 'cancel' | 'activate';
@Component({
selector: 'app-single-event-dashboard-event-cancel',
imports: [
SingleEventDashboardEventDetailsView,
Button,
SafeHtmlPipe,
],
templateUrl: './single-event-dashboard-event-activation.component.html',
styleUrl: './single-event-dashboard-event-activation.component.css',
})
export class SingleEventDashboardEventActivation {
mode = input<ACTIVATION_TYPE>('cancel');
calendarService = inject(CalendarService);
event = input<CalendarEventDto>();
onAction = input.required<(msg: string) => void>();
protected readonly SvgIcons = SvgIcons;
protected setEventOccurrenceActivation(activated: boolean) {
const eventId =this.event()?.id!;
const startTime = this.event()?.startTime!;
this.calendarService.applyException(eventId,{
originalStartTime: new Date(startTime),
isCancelled: !activated,
}).subscribe(
{
next: () => {
this.onAction()('close');
},
error: err => {
alert("Failed to change event");
}
}
)
}
protected cancelEventOccurrence() {
this.setEventOccurrenceActivation(false);
}
protected activateEventOccurrence() {
this.setEventOccurrenceActivation(true);
}
protected closeDialog() {
this.onAction()('close')
}
}

12
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.html
View File

@@ -1,12 +0,0 @@
<h2 class="text-2xl">Esemény lemondása</h2>
<app-single-event-dashboard-event-details-view [event]="event()"></app-single-event-dashboard-event-details-view>
<div class="flex gap-2 mt-3">
<rs-daisy-button variant="error">
<span [outerHTML]="SvgIcons.heroTrash | safeHtml"></span>
Törlés
</rs-daisy-button>
<rs-daisy-button variant="primary" (click)="triggerAction()">
<span [outerHTML]="SvgIcons.heroXcircle | safeHtml"></span>
Mégsem
</rs-daisy-button>
</div>

31
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.ts
View File

@@ -1,31 +0,0 @@
import { Component, input } from '@angular/core';
import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
import {
SingleEventDashboardEventDetailsView
} from '../single-event-dashboard-event-details-view/single-event-dashboard-event-details-view';
import { Button } from '@rschneider/ng-daisyui';
import { SvgIcons } from '../../../../../svg-icons';
import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
@Component({
selector: 'app-single-event-dashboard-event-cancel',
imports: [
SingleEventDashboardEventDetailsView,
Button,
SafeHtmlPipe,
],
templateUrl: './single-event-dashboard-event-cancel.html',
styleUrl: './single-event-dashboard-event-cancel.css',
})
export class SingleEventDashboardEventCancel {
event = input<CalendarEventDto>();
onAction = input.required<(msg: string) => void>();
protected readonly SvgIcons = SvgIcons;
protected triggerAction() {
this.onAction()('close')
}
}

10
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard/single-event-dashboard.html
View File

@@ -1,5 +1,9 @@
<h2 class="text-xl">Esemény</h2>
@if (event()?.isRecurring) {
<h2 class="text-xl">Esemény sorozat</h2>
}
@if (!event()?.isRecurring) {
<h2 class="text-xl">Esemény </h2>
}
@if (config) {
<app-detail-view
[config]="config"
@@ -7,7 +11,7 @@
}
<div class="flex mt-3 gap-2 flex-wrap content-stretch ">
@for (card of cards; let i = $index; track i) {
@for (card of cards(); let i = $index; track i) {
<app-single-event-dashboard-card
[title]="card.title"

26
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard/single-event-dashboard.ts
View File

@@ -1,4 +1,4 @@
import { Component, effect, input, output } from '@angular/core';
import { Component, effect, input, output, signal } from '@angular/core';
import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
import { SvgIcons } from '../../../../../svg-icons';
@@ -19,13 +19,14 @@ export class SingleEventDashboard {
action = output<string>();
config: DetailViewConfig<CalendarEventDto> | undefined;
cards: CardConfig[] = [];
cards = signal<CardConfig[]>([]);
constructor() {
effect(() => {
console.info("dashboard", this.event());
this.config = {
data: this.event()!,
@@ -50,8 +51,8 @@ export class SingleEventDashboard {
},
],
};
});
this.cards = [
this.cards.set( [
{
buttonTitle: 'Szerkesztés',
title: 'Szerkesztés',
@@ -59,11 +60,21 @@ export class SingleEventDashboard {
description: 'Az esemény módosítása',
action: 'event_edit',
},
this.event()?.isCancelled ?
{
buttonTitle: 'Aktiválás',
title: 'Előfordulás aktiválása',
svgIcon: SvgIcons.heroPlay,
description: 'Az esemény ezen előfordulásának aktiválása',
action: 'event_activate',
} :
{
buttonTitle: 'Lemondás',
title: 'Esemény lemondása',
title: 'Előfordulás lemondása',
svgIcon: SvgIcons.heroXcircle,
description: 'Az esemény lemondása',
description: 'Az esemény ezen előfordulásának lemondása',
action: 'event_cancel',
},
{
@@ -94,7 +105,8 @@ export class SingleEventDashboard {
description: 'Az időpont lemondása',
action: 'user_cancel',
},
];
]);
});
}
onCardAction (action: string|undefined) {

8
admin/src/app/features/calendar/models/event-exception.model.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface CreateExceptionDto {
originalStartTime: Date; // The start time of the instance to modify/cancel
isCancelled?: boolean;
newStartTime?: Date;
newEndTime?: Date;
title?: string;
description?: string;
}

2
admin/src/app/features/calendar/models/events-in-range-dto.model.ts
View File

@@ -25,6 +25,8 @@ export type CalendarEventDto = {
description: string,
isModified?: boolean;
eventBookings: BookingWithUserDto[];
isCancelled: boolean;
isRecurring: boolean;
eventType: EventType
};

4
admin/src/app/features/calendar/services/calendar.service.ts
View File

@@ -5,6 +5,7 @@ import { ConfigurationService } from '../../../services/configuration.service';
import { EventFormDTO, UpdateEventFormDTO } from '../models/event-form-dto.model';
import { Event } from '../../events/models/event.model';
import { CalendarEventDto, EventsInRangeDTO } from '../models/events-in-range-dto.model';
import { CreateExceptionDto } from '../models/event-exception.model';
@Injectable({
@@ -40,4 +41,7 @@ export class CalendarService {
return this.http.patch<Event>(this.apiUrl+'/events/'+id, data);
}
public applyException(eventId: number, eventException: CreateExceptionDto){
return this.http.post(this.apiUrl+`/events/${eventId}/exceptions`, eventException);
}
}

4
admin/src/app/svg-icons.ts
View File

@@ -39,5 +39,9 @@ export class SvgIcons {
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
`
public static heroPlay = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
</svg>
`;
}

11
admin/src/styles.css
View File

@@ -4,3 +4,14 @@
@import "./styles/grid.css";
@source "../projects/rschneider/ng-daisyui/src";
@plugin "daisyui";
.disabled-event {
/* Make it look faded */
opacity: 0.5;
/* Make it un-clickable (stops hover effects and click events) */
/*pointer-events: none;*/
/* Optional: Change cursor to indicate it's not interactive */
/*cursor: not-allowed;*/
}

13
server/src/calendar/calendar.service.ts
View File

@@ -51,6 +51,7 @@ type BookingWithUserDto = {
// The final shape of a calendar event occurrence
export type CalendarEventDto = Omit<Event, 'bookings'> & {
isModified?: boolean;
isCancelled?: boolean;
eventBookings: BookingWithUserDto[];
};
@@ -170,16 +171,20 @@ export class CalendarService {
);
if (exception) {
if (exception.isCancelled) continue;
// if (exception.isCancelled) continue;
// This is a MODIFIED occurrence
const key = `${event.id}-${exception.newStartTime.getTime()}`;
const key = `${event.id}-${exception.newStartTime?.getTime() || occurrenceDate.getTime()}`;
recurringOccurrences.push({
...event,
startTime: exception.newStartTime,
endTime: exception.newEndTime,
// startTime: exception.newStartTime || occurrenceDate,
startTime: exception.newStartTime || occurrenceDate,
endTime:
exception.newEndTime ||
new Date(occurrenceDate.getTime() + duration),
isModified: true,
eventBookings: bookingMap.get(key) || [],
isCancelled: !!exception.isCancelled,
});
} else {
// This is a REGULAR occurrence

10
server/src/calendar/dto/create-exception.dto.ts
View File

@@ -1,4 +1,10 @@
import { IsDate, IsNotEmpty, IsOptional, IsString, IsBoolean } from 'class-validator';
import {
IsDate,
IsNotEmpty,
IsOptional,
IsString,
IsBoolean,
} from 'class-validator';
import { Type } from 'class-transformer';
export class CreateExceptionDto {
@@ -28,4 +34,4 @@ export class CreateExceptionDto {
@IsOptional()
@IsString()
description?: string;
}
}