From 7a977a6ba5ab0d52d78aa9ea543b464455ec861d Mon Sep 17 00:00:00 2001 From: veenm Date: Mon, 21 Apr 2025 15:41:32 +0200 Subject: [PATCH] Missing id's + verdere uitwerking afspraken naast elkaar --- .../appointment/appointment.component.ts | 4 +-- .../dropdown-content.component.html | 2 +- .../dropdown-content.component.ts | 2 ++ .../week-view/week-view.component.html | 22 ++++++++-------- src/app/pages/agenda/agenda.component.html | 25 ++++++++++++------- src/app/pages/agenda/agenda.component.scss | 14 ++++++++++- src/app/pages/agenda/agenda.component.ts | 13 +++++++--- src/app/pages/home/home.component.html | 4 +-- 8 files changed, 58 insertions(+), 28 deletions(-) diff --git a/src/app/components/appointment/appointment.component.ts b/src/app/components/appointment/appointment.component.ts index e2e6226..2dd3e65 100644 --- a/src/app/components/appointment/appointment.component.ts +++ b/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(); 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`, }; } diff --git a/src/app/components/dropdown-content/dropdown-content.component.html b/src/app/components/dropdown-content/dropdown-content.component.html index 29005ef..5df7f4e 100644 --- a/src/app/components/dropdown-content/dropdown-content.component.html +++ b/src/app/components/dropdown-content/dropdown-content.component.html @@ -8,7 +8,7 @@ [style.color]="'var(--tui-background-accent-1)'"/> Agenda delen -
- +
@@ -138,7 +134,8 @@ - + @@ -153,4 +150,14 @@ (appointmentEdited)="appointmentIsEdited($event)"> - + +

Beschikbare agenda's:

+
+ + +
+ diff --git a/src/app/pages/agenda/agenda.component.scss b/src/app/pages/agenda/agenda.component.scss index 1c1cb08..128a55b 100644 --- a/src/app/pages/agenda/agenda.component.scss +++ b/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; + } +} diff --git a/src/app/pages/agenda/agenda.component.ts b/src/app/pages/agenda/agenda.component.ts index b8763cf..ca6d782 100644 --- a/src/app/pages/agenda/agenda.component.ts +++ b/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() diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index e21dfd5..f5de5a7 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -8,8 +8,8 @@