Missing id's + verdere uitwerking afspraken naast elkaar

src/app/components/appointment/appointment.component.ts

@@ -17,7 +17,7 @@ import {TuiIcon} from '@taiga-ui/core';
 export class AppointmentComponent {
   @Input() appointment: AppointmentDto;
   @Input() size: 'large' | 'medium' | 'small' = 'medium';
-  @Input() width: 'normal' | 'small' = 'normal';
+  @Input() width: number;
   @Output() onClick = new EventEmitter<AppointmentDto>();
 
   selectAppointment(appointment: AppointmentDto) {
@@ -30,7 +30,7 @@ export class AppointmentComponent {
       '--start-minute': `${appointment.startMinute}`,
       'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
       'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren
-      'width': this.width == "normal"? '100px' : '50px',
+      'width': `${this.width}px`,
     };
   }
 

src/app/components/dropdown-content/dropdown-content.component.html

@@ -8,7 +8,7 @@
           [style.color]="'var(--tui-background-accent-1)'"/>
         Agenda delen
       </button>
-      <button tuiOption class="dropdown-item" (click)="switchAgenda();" [disabled]="true">
+      <button tuiOption class="dropdown-item" (click)="switchAgenda();" [disabled]="false">
         <tui-icon
           icon="@tui.arrow-left-right"
           [style.color]="'var(--tui-background-accent-1)'"/>

src/app/components/dropdown-content/dropdown-content.component.ts

@@ -23,6 +23,7 @@ export class DropdownContentComponent {
   @Input() currentView: string = 'day'
   @Output() close = new EventEmitter()
   @Output() view = new EventEmitter()
+  @Output() changeAgenda = new EventEmitter()
 
   shareAgenda() {
     this.close.emit()/* open modal etc */
@@ -30,6 +31,7 @@ export class DropdownContentComponent {
   }
 
   switchAgenda() {
+    this.changeAgenda.emit()/* toggle agenda */
     this.close.emit()/* toggle agenda */
   }
 

src/app/components/week-view/week-view.component.html

@@ -15,17 +15,19 @@
 
       <div *ngFor="let day of days" class="day-column">
         <div *ngFor="let hour of hours" class="hour-cell">
+          <div *ngIf="searchAppointments(day, hour) as appointmentDtos">
             <div
               class="appointments-wrapper"
               [ngClass]="{ 'multiple': searchAppointments(day, hour).length > 1 }">
 
               <component-appointment
-              *ngFor="let appointment of searchAppointments(day, hour)"
+                *ngFor="let appointment of appointmentDtos"
                 [appointment]="appointment"
                 size="medium"
+                [width]="100 / appointmentDtos.length"
                 (onClick)="emitAppointment($event)">
               </component-appointment>
-
+            </div>
           </div>
         </div>
       </div>

src/app/pages/agenda/agenda.component.html

@@ -62,11 +62,6 @@
     </button>
   </div>
   <div class="calendar" *ngIf="showCalendar">
-<!--    <tui-calendar-->
-<!--      id="calenderDatum"-->
-<!--      [value]="value"-->
-<!--      (dayClick)="onDayClick($event)"-->
-<!--    />-->
     <datepicker (onSelectedDate)="onDayClick($event)" [currentDate]="selectedDate"></datepicker>
   </div>
   <div class="toolbar">
@@ -109,7 +104,8 @@
     </button>
     <ng-template #dropdownContent>
       <div class="dropdown">
-        <dropdown-content (close)="open = false" (view)="setView($event)" [currentView]="view" ></dropdown-content>
+        <dropdown-content (close)="open = false" (view)="setView($event)" [currentView]="view"
+                          (changeAgenda)="toggleCalendarChange()"></dropdown-content>
       </div>
     </ng-template>
   </div>
@@ -138,7 +134,8 @@
       </div>
     </div>
 
-    <app-week-view *ngIf="view == 'week'" [selectedDate]="selectedDate" (appointmentSelected)="selectedAppointment = $event"></app-week-view>
+    <app-week-view *ngIf="view == 'week'" [selectedDate]="selectedDate"
+                   (appointmentSelected)="selectedAppointment = $event"></app-week-view>
   </div>
 </div>
 
@@ -153,4 +150,14 @@
                (appointmentEdited)="appointmentIsEdited($event)"></app-details>
 </app-modal>
 
-<app-modal title="Agenda delen" *ngIf="false"></app-modal>
+<app-modal title="Agenda wisselen" *ngIf="showCalendarChange" (close)="toggleCalendarChange()">
+  <h3>Beschikbare agenda's:</h3>
+  <div *ngFor="let companyDto of userService.userValue.companies" class="appointment-option">
+    <input
+      tuiCheckbox
+      type="checkbox"
+      [ngModel]="true"
+    />
+    <label>{{ companyDto.company.name }} <span *ngIf="companyDto.accessLevel == 'READ_ONLY'">[Alleen inzien]</span></label>
+  </div>
+</app-modal>

src/app/pages/agenda/agenda.component.scss

@@ -140,7 +140,7 @@ strong, p {
   text-decoration: underline;
 }
 
-.dropdown{
+.dropdown {
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -231,3 +231,15 @@ strong, p {
   }
 }
 
+.appointment-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  label {
+    font-weight: bold;
+    font-size: 14px;
+  }
+}

src/app/pages/agenda/agenda.component.ts

@@ -2,7 +2,7 @@ import {Component, inject, Input, OnInit, ViewChild} from '@angular/core';
 import {CommonModule, NgFor, NgIf} from '@angular/common';
 import {TuiAlertService, TuiButton, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
 import {ModalComponent} from '../../components/modal/modal.component';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {
   TuiInputDateModule,
   TuiInputModule,
@@ -21,20 +21,22 @@ import {DropdownContentComponent} from '../../components/dropdown-content/dropdo
 import {AppointmentDto} from '../../models/appointment-dto';
 import {WeekViewComponent} from '../../components/week-view/week-view.component';
 import {DatepickerComponent} from '../../components/datepicker/datepicker.component';
+import {TuiCheckbox} from '@taiga-ui/kit';
+import {UserService} from '../../services/user.service';
 
 @Component({
   selector: 'app-agenda',
   imports: [NgFor,
     TuiButton, CommonModule, NgIf, ModalComponent, ReactiveFormsModule,
     TuiInputTimeModule, TuiTextfieldControllerModule,
-    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, NewItemComponent, DropdownContentComponent, WeekViewComponent, DatepickerComponent],
+    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, NewItemComponent, DropdownContentComponent, WeekViewComponent, DatepickerComponent, TuiCheckbox, FormsModule],
   templateUrl: './agenda.component.html',
   providers: [tuiDateFormatProvider({separator: '-'}), AppointmentService],
   styleUrl: './agenda.component.scss'
 })
 export class AgendaComponent implements OnInit {
 
-  constructor(private appointmentService: AppointmentService) {
+  constructor(private appointmentService: AppointmentService, protected userService: UserService) {
   }
 
   ngOnInit(): void {
@@ -50,6 +52,7 @@ export class AgendaComponent implements OnInit {
   selectedAppointment: AppointmentDto;
   protected value: TuiDay | null = null;
   showCalendar: boolean = false;
+  showCalendarChange: boolean = false;
   open = false
   @Input() view: 'day' | 'week' | 'month' = 'day'
   @ViewChild(WeekViewComponent) childComponent!: WeekViewComponent;
@@ -218,6 +221,10 @@ export class AgendaComponent implements OnInit {
     this.showCalendar = !this.showCalendar
   }
 
+  toggleCalendarChange() {
+    this.showCalendarChange = !this.showCalendarChange
+  }
+
   closeNewItemModal() {
     this.showNewItem = false
     this.resetForms()

src/app/pages/home/home.component.html

@@ -8,8 +8,8 @@
     <button class="hamburger" (click)="menuOpen = !menuOpen">&#9776;</button>
     <div class="nav-wrapper" [ngClass]="{ 'open': menuOpen }">
       <ul>
-        <li><a routerLink="/home/agenda" routerLinkActive="active" (click)="menuOpen = false">Agenda</a></li>
+        <li><a routerLink="/home/agenda" routerLinkActive="active" (click)="menuOpen = false" id="agenda">Agenda</a></li>
-        <li><a routerLink="/home/klanten" routerLinkActive="active" (click)="menuOpen = false">Klanten</a></li>
+        <li><a routerLink="/home/klanten" routerLinkActive="active" (click)="menuOpen = false" id="klanten">Klanten</a></li>
       </ul>
 
       <button