git init v2

src/app/components/details/details.component.ts

@@ -0,0 +1,74 @@
+import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
+import {Appointment} from '../../models/appointment';
+import {DateFormatter} from '../../utils/date-formatter';
+import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
+import {TuiTextareaModule} from '@taiga-ui/legacy';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {NgIf} from '@angular/common';
+import {ModalComponent} from '../modal/modal.component';
+import {EditItemComponent} from '../edit-item/edit-item.component';
+import {AppointmentService} from '../../services/appointment.service';
+
+@Component({
+  selector: 'app-details',
+  imports: [
+    TuiIcon,
+    TuiTextareaModule,
+    ReactiveFormsModule,
+    NgIf,
+    TuiButton,
+    TuiGroup,
+    ModalComponent,
+    EditItemComponent
+  ],
+  templateUrl: './details.component.html',
+  styleUrl: './details.component.scss'
+})
+export class DetailsComponent implements OnInit {
+  private readonly alerts = inject(TuiAlertService);
+
+  ngOnInit(): void {
+    if (this.appointment.description) {
+      this.testForm.get('testValue1').setValue(this.appointment.description)
+    }
+  }
+
+  constructor(private appointmentService: AppointmentService) {
+  }
+
+  @Input() appointment: Appointment;
+  @Output() appointmentDeleted = new EventEmitter<Appointment>();
+  @Output() appointmentEdited = new EventEmitter<Appointment>();
+  open: boolean = true;
+  readonly = true;
+  showDeleteModal = false;
+  showEditModal = false;
+
+  protected testForm = new FormGroup({
+    testValue1: new FormControl('', Validators.required),
+    testValue2: new FormControl('This one can be expanded', Validators.required),
+    testValue3: new FormControl(
+      'This one can be expanded (expandable on focus)',
+      Validators.required,
+    ),
+  });
+
+  deleteAppointment() {
+    this.appointmentService.deleteAppointment(this.appointment).subscribe(() => {
+        this.showDeleteModal = false;
+        this.appointmentDeleted.emit(this.appointment);
+      }
+    )
+  }
+
+  protected readonly DateFormatter = DateFormatter;
+
+  updateAppointment($event: any) {
+    this.showEditModal = false;
+
+    this.appointmentService.getAppointment($event).subscribe((appointment: Appointment) => {
+      this.appointment = appointment
+      this.appointmentEdited.emit(this.appointment);
+    })
+  }
+}