implement edit event

admin/src/app/features/calendar/components/calendar-view/calendar-view.html

@@ -6,11 +6,18 @@
   </div>
   <full-calendar #calendar [options]="calendarOptions"></full-calendar>
 </div>
-
-<rs-daisy-modal [isOpen]="isOpen()" (closeClick)="closeDialog()"   >
-  @if (isOpen()){
- <app-create-event-form (ready)="closeDialog()" [date]="selectedDate()" [id]="selectedEventId()"></app-create-event-form>
+{{"workflow:"+workflow()}}
+<rs-daisy-modal [isOpen]="workflow() == 'create'" (closeClick)="closeDialog()">
+  @if (workflow() == 'create') {
+    <app-create-event-form (ready)="closeDialog()" [date]="selectedDate()"
+                           [id]="undefined"></app-create-event-form>
   }
-
 </rs-daisy-modal>
 
+
+
+@if (workflow() == 'event-dashboard' && selectedEvent()) {
+  <rs-daisy-modal [isOpen]="true" (closeClick)="closeDialog()">
+    <app-single-event-dashboard [event]="selectedEvent()"></app-single-event-dashboard>
+  </rs-daisy-modal>
+}

admin/src/app/features/calendar/components/calendar-view/calendar-view.ts

@@ -9,13 +9,13 @@ import interactionPlugin from '@fullcalendar/interaction';
 import { Modal } from '@rschneider/ng-daisyui';
 import { CreateEventForm } from '../create-event-form/create-event-form';
 import { CalendarService } from '../../services/calendar.service';
-import { addDays, subDays } from 'date-fns';
-import { EventsInRangeDTO } from '../../models/events-in-range-dto.model';
+import { CalendarEventDto, EventsInRangeDTO } from '../../models/events-in-range-dto.model';
 import { map } from 'rxjs';
+import { SingleEventDashboard } from './single-event-dashboard/single-event-dashboard';
 
 @Component({
   selector: 'app-calendar-view',
-  imports: [FullCalendarModule, Modal, CreateEventForm],
+  imports: [FullCalendarModule, Modal, CreateEventForm, SingleEventDashboard],
   templateUrl: './calendar-view.html',
   styleUrl: './calendar-view.css',
 })
@@ -27,67 +27,40 @@ export class CalendarView implements OnInit, AfterViewInit {
   calendarService = inject(CalendarService);
 
   workflow = signal<string>('');
-  isOpen = signal<boolean>(false);
   selectedDate = signal<Date|undefined>(undefined);
-  selectedEventId = signal<number|undefined>(undefined)
-
-  events = signal<EventsInRangeDTO[]>([]);
+  selectedEvent = signal<CalendarEventDto|undefined>(undefined)
 
   calendarOptions: CalendarOptions;
 
   constructor() {
-    const start = new Date();
-    start.setHours(10, 0, 0);
-    const end = new Date();
-    end.setHours(11, 0, 0);
-
 
     this.calendarOptions = {
       plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
       initialView: 'dayGridMonth',
       weekends: true,
+      firstDay: 1,
       headerToolbar: {
         left: 'prev,next,today',
         center: 'title',
-        // right: 'dayGridMonth,dayGridWeek,dayGridDay' // user can switch between the two
         right: 'dayGridMonth,dayGridWeek,dayGridDay,timeGridWeek,timeGridDay,listWeek',
 
       },
       events: this.fetchEvents.bind(this), // Bind the context
 
-      eventClick: function(info) {
-        console.info('Event info: ', info);
-
-        // change the border color just for fun
-        info.el.style.borderColor = 'red';
+      eventClick: (info) => {
+        this.selectedEvent.set(info.event.extendedProps['event']);
+        this.workflow.set('event-dashboard');
       },
 
       dateClick: (info) => {
-        console.info('setting day ',info);
-        this.workflow.set('day');
+        console.info('create new evet for day ',info);
+        this.workflow.set('create');
         this.selectedDate.set(info.date);
-        this.selectedEventId.set(undefined);
-        console.info("date click with", this.selectedDate())
-        this.isOpen.set(true);
-        // console.info('Date click on: ' , info);
-        // const calendarApi = info.view.calendar;
-        // const start = new Date(info.date.getTime())
-        // start.setHours(2,0,0)
-        // const end = new Date(info.date.getTime())
-        // end.setHours(3,0,0)
-        // calendarApi.addEvent({
-        //   title: 'New Event',
-        //   start,
-        //   end,
-        // });
+        this.selectedEvent.set(undefined);
       },
 
     };
 
-    effect(() => {
-      // this.calendarOptions.events = this.events
-
-    });
   }
 
   fetchEvents(fetchInfo: any, successCallback: (events: EventInput[]) => void, failureCallback: (error: any) => void): void {
@@ -111,7 +84,10 @@ export class CalendarView implements OnInit, AfterViewInit {
             const calendarEvent: EventInput = {
               start: new Date(model.startTime),
               // end: model.end_time,
-              title: model.title
+              title: model.title,
+              extendedProps: {
+                event:  value
+              }
             };
             if ( model.eventType){
               calendarEvent.borderColor = model.eventType.color;
@@ -160,6 +136,6 @@ export class CalendarView implements OnInit, AfterViewInit {
   }
 
   closeDialog() {
-    this.isOpen.set(false);
+    this.workflow.set('');
   }
 }

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

@@ -0,0 +1,3 @@
+<app-detail-view
+[config]="config"
+></app-detail-view>

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

@@ -0,0 +1,28 @@
+import { Component, input, signal } from '@angular/core';
+import { CalendarEventDto, EventsInRangeDTO } from '../../../models/events-in-range-dto.model';
+import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
+
+@Component({
+  selector: 'app-single-event-dashboard',
+  imports: [
+    DetailView,
+  ],
+  templateUrl: './single-event-dashboard.html',
+  styleUrl: './single-event-dashboard.css',
+})
+export class SingleEventDashboard {
+
+  event = input<CalendarEventDto>();
+
+  config: DetailViewConfig<CalendarEventDto>;
+  constructor() {
+    this.config = {
+      data: this.event()!,
+
+      rows: [{
+        attribute: 'title',
+        getTitle: 'title',
+      }]
+    }
+  }
+}