-een gebruiker kan meerdere bedrijven hebben

-manier van afspraken maken veranderd in de backend ivm meerdere bedrijven gebruiker
 -email is aangepast op bedrijf en gebruiker
 -dropdown voor instellingen toegevoegd

src/app/components/customer-details/customer-details.component.html

@@ -10,6 +10,13 @@
     [style.color]="'var(--tui-background-accent-1)'"/>
   {{ customer.email }}
 </h2>
+<h2>
+  <tui-icon
+    icon="@tui.phone"
+    [style.color]="'var(--tui-background-accent-1)'"/>
+  <span *ngIf="customer.phone"> {{ customer.phone }}</span>
+  <span *ngIf="!customer.phone"> -</span>
+</h2>
 <ng-template *ngIf="appointment">
   <br>
   <h2>

src/app/components/new-customer/new-customer.component.html

@@ -36,6 +36,19 @@
       formControlName="email"/>
   </tui-input>
   <br>
+  <tui-input
+    formControlName="phone"
+    tuiTextfieldSize="m"
+    id="telefoon-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Telefoonnummer
+    <input
+      tuiTextfieldLegacy
+      autocomplete=""
+      type="tel"
+      formControlName="phone"/>
+  </tui-input>
+  <br>
   <button
     appearance="secondary"
     size="m"

src/app/components/new-customer/new-customer.component.ts

@@ -32,6 +32,7 @@ export class NewCustomerComponent {
       firstName: new FormControl('', [Validators.required]),
       lastName: new FormControl('', [Validators.required]),
       email: new FormControl('', [Validators.required, Validators.pattern(this.emailRegex)]),
+      phone: new FormControl('', [Validators.required]),
     })
   }
 
@@ -39,7 +40,8 @@ export class NewCustomerComponent {
     const firstName = this.customerForm.get('firstName').value
     const lastName = this.customerForm.get('lastName').value
     const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
+    const phone = this.customerForm.get('phone').value
+    const customer = new Customer(firstName, lastName, email, phone);
 
     this.customerService.addCustomer(customer).subscribe(() => {
       this.customerAdded.emit(customer);

src/app/components/new-item/new-item.component.html

@@ -33,6 +33,7 @@
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
+        id="klant-input"
         *tuiDataList
         [itemContent]="stringify | tuiStringifyContent"
         [items]="items | tuiFilterByInput"
@@ -90,7 +91,7 @@
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title + '-' + appointment.customer">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDate + '-' + appointment.startHour + appointment.startMinute">
         <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
         <span class="name" id="titel-naam">
         <tui-icon
@@ -110,7 +111,7 @@
     </div>
   </ng-container>
   <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notities">Notities</tui-textarea>
 </form>
 <br>
 <button

src/app/components/new-item/new-item.component.ts

@@ -11,7 +11,7 @@ import {
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
 import {Appointment} from '../../models/appointment';
-import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
+import {TuiDay, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
 import {Customer} from '../../models/customer';
@@ -70,25 +70,13 @@ export class NewItemComponent implements OnInit {
       lastName: new FormControl('', Validators.required),
       email: new FormControl('', [Validators.required, Validators.email]),
     })
-    this.appointmentForm.get('startTime').setValue(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required)
-    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    this.appointmentForm.get('startTime').setValue('', Validators.required)
+    this.appointmentForm.get('endTime').setValue('', [Validators.required, timeAfterStartValidator('startTime')])
     this.appointments.sort((a, b) => {
       return a.startHour - b.startHour || a.startMinute - b.startMinute;
     });
   }
 
-  getEndTime(): Date {
-    const endTime = new Date(this.today); // Kopieer startTime
-    endTime.setMinutes(endTime.getMinutes() + 30); // 30 minuten toevoegen
-
-    // Controleer of de dag nog steeds hetzelfde is
-    if (endTime.getDate() !== this.today.getDate()) {
-      endTime.setHours(23, 59, 59, 999); // Zet naar 23:59:59 als het overloopt
-    }
-
-    return endTime;
-  }
-
   registerAppointment() {
     const title = this.appointmentForm.get('title').value
     const description = this.appointmentForm.get('notes').value

src/app/models/customer.ts

@@ -3,11 +3,13 @@ export class Customer {
   firstName: string;
   lastName: string;
   email: string;
+  phone: string;
 
 
-  constructor(firstName: string, lastName: string, email: string) {
+  constructor(firstName: string, lastName: string, email: string, phone: string) {
     this.firstName = firstName;
     this.lastName = lastName;
     this.email = email;
+    this.phone = phone
   }
 }

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

@@ -12,12 +12,12 @@
     <h1 class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}
       <tui-icon
         *ngIf="!showCalendar"
-      icon="@tui.chevron-down"
-      [style.color]="'var(--tui-background-accent-1)'"/>
+        icon="@tui.chevron-down"
+        [style.color]="'var(--tui-background-accent-1)'"/>
       <tui-icon
         *ngIf="showCalendar"
-      icon="@tui.chevron-up"
-      [style.color]="'var(--tui-background-accent-1)'"/>
+        icon="@tui.chevron-up"
+        [style.color]="'var(--tui-background-accent-1)'"/>
     </h1>
     <button
       appearance="primary"
@@ -52,7 +52,7 @@
       size="m"
       tuiButton
       id="afspraakMaken"
-      (click)="isModalOpen = true"
+      (click)="showNewItem = true"
       type="button">
       <tui-icon
         icon="@tui.plus"
@@ -60,6 +60,23 @@
       />
       Afspraak maken
     </button>
+    <button
+      appearance="secondary"
+      size="m"
+      tuiButton
+      id="instellingen"
+      (click)="openSettings()"
+      [tuiDropdown]="dropdownContent"
+      [tuiDropdownManual]="open"
+      type="button">
+      <tui-icon
+        icon="@tui.settings"
+        [style.height.rem]="1">
+      </tui-icon>
+    </button>
+    <ng-template #dropdownContent>
+      <div class="dropdown">But there is nothing to choose...</div>
+    </ng-template>
   </div>
   <div class="content">
     <div class="agenda-container">
@@ -88,7 +105,7 @@
   </div>
 </div>
 
-<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="isModalOpen">
+<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="showNewItem">
   <app-new-item [appointments]="appointments" [appointmentForm]="appointmentForm"
                 (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
 </app-modal>

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

@@ -11,20 +11,21 @@ import {
   TuiTextareaModule,
   TuiTextfieldControllerModule
 } from '@taiga-ui/legacy';
-import {TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {TuiDay, TuiMonth, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {DetailsComponent} from '../../components/details/details.component';
 import {DateFormatter} from '../../utils/date-formatter';
 import {WeekDay} from '../../models/week-day';
 import {NewItemComponent} from '../../components/new-item/new-item.component';
 import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
+import {TuiChevron} from '@taiga-ui/kit';
 
 @Component({
   selector: 'app-agenda',
   imports: [NgFor,
     TuiButton, CommonModule, NgIf, ModalComponent, ReactiveFormsModule,
     TuiInputTimeModule, TuiTextfieldControllerModule,
-    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, TuiCalendar, NewItemComponent],
+    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, TuiCalendar, NewItemComponent, TuiChevron],
   templateUrl: './agenda.component.html',
   providers: [tuiDateFormatProvider({separator: '-'}), AppointmentService],
   styleUrl: './agenda.component.scss'
@@ -40,13 +41,14 @@ export class AgendaComponent implements OnInit {
 
   timeSlots: number[] = Array.from({length: 24}, (_, i) => i); // 24 uren
   appointments: Appointment[] = [];
-  isModalOpen = false
+  showNewItem = false
   today = new Date()
   selectedDate = new Date()
   waiting: boolean = false;
   selectedAppointment: Appointment;
   protected value: TuiDay | null = null;
   showCalendar: boolean = false;
+  open = false
 
   private readonly alerts = inject(TuiAlertService);
   protected appointmentForm = new FormGroup({
@@ -60,7 +62,7 @@ export class AgendaComponent implements OnInit {
   registerAppointment(title: string): void {
     this.getAppointmentsByDate(this.selectedDate);
     this.waiting = false
-    this.isModalOpen = false
+    this.showNewItem = false
     this.showNotification(title)
     this.resetForms()
   }
@@ -187,7 +189,7 @@ export class AgendaComponent implements OnInit {
   }
 
   closeNewItemModal() {
-    this.isModalOpen = false
+    this.showNewItem = false
     this.resetForms()
   }
 
@@ -202,5 +204,35 @@ export class AgendaComponent implements OnInit {
   appointmentIsEdited($event: Appointment) {
     this.getAppointmentsByDate(this.selectedDate);
   }
+
+  protected firstMonth = TuiMonth.currentLocal().append({month: -1});
+
+  protected middleMonth = TuiMonth.currentLocal();
+
+  protected lastMonth = TuiMonth.currentLocal().append({month: 2});
+
+  protected hoveredItem: TuiDay | null = null;
+
+  protected onMonthChangeFirst(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -1});
+    this.middleMonth = month
+    this.lastMonth = month.append({month: 2});
+  }
+
+  protected onMonthChangeMiddle(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -1});
+    this.middleMonth = month;
+    this.lastMonth = month.append({month: 1});
+  }
+
+  protected onMonthChangeLast(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -2});
+    this.middleMonth = month.append({month: -1});
+    this.lastMonth = month;
+  }
+
+  openSettings() {
+    this.open = !this.open
+  }
 }
 

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

@@ -19,24 +19,27 @@
       [tuiObscuredEnabled]="open"
       (click)="onClick()"
       (tuiActiveZoneChange)="onActiveZone($event)"
-      (tuiObscured)="onObscured($event)"
-    >
+      (tuiObscured)="onObscured($event)">
       <tui-avatar src="{{getInitials()}}"/>
-      <ng-template #dropdownContent>
-        <div class="dropdown">
-          <h3>{{ fullName }}</h3>
-          <button
-            size="m"
-            tuiButton
-            type="button"
-            id="uitloggen"
-            (click)="logout()"
-          >
-            Uitloggen
-          </button>
-        </div>
-      </ng-template>
+
+
+
     </button>
+    <ng-template #dropdownContent>
+      <div class="dropdown">
+        <h3>{{ fullName }}</h3>
+        <h4>{{ currentCompany.name }}</h4>
+
+        <button
+          size="m"
+          tuiButton
+          type="button"
+          id="uitloggen"
+          (click)="logout()">
+          Uitloggen
+        </button>
+      </div>
+    </ng-template>
   </div>
 </header>
 

src/app/pages/home/home.component.scss

@@ -1,6 +1,7 @@
 .navbar {
   background-color: #f8f9fa;
-  display: flex
+  display: flex;
+  align-items: center;
 }
 
 ul {
@@ -48,11 +49,12 @@ tui-avatar {
   line-height: 1.25rem;
   padding: 0.25rem 0.75rem;
   margin-left: 4px;
-  margin-right: 4px;
+  margin-right: 20px;
   margin-bottom: 8px;
+  min-width: 200px;
 }
 
-.t-content {
+ui-scrollbar.t-scroll.ng-tns-c452864359-10._native-hidden {
   margin-right: 24px;
 }
 

src/app/pages/home/home.component.ts

@@ -1,21 +1,26 @@
 import {Component, OnInit} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Router, RouterLink, RouterLinkActive, RouterModule} from '@angular/router';
 import {TuiAvatar, TuiChevron,} from '@taiga-ui/kit';
 import {AuthService} from '../../services/auth.service';
 import {User} from '../../models/user';
 import {TuiButton, TuiDropdown} from '@taiga-ui/core';
 import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
+import {environment} from '../../../environments/environment';
+import {Company} from '../../models/company';
+import {CompanyService} from '../../services/company.service';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
   selector: 'app-home',
-  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron],
+  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron, TuiSelectModule, ReactiveFormsModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
 export class HomeComponent implements OnInit {
   user: User
   fullName: string
+  companies: Company[]
 
   getInitials(): string {
     this.user = this.authService.getUserInfo();
@@ -39,17 +44,29 @@ export class HomeComponent implements OnInit {
     this.open = active && this.open;
   }
 
-  constructor(private authService: AuthService, private router: Router) {
+  constructor(private authService: AuthService, private router: Router, private companyService: CompanyService) {
   }
 
   ngOnInit(): void {
     if (!this.authService.isAuthenticated()) {
       this.router.navigate(['login']);
+    } else {
+      this.companyService.getCompanies().subscribe(
+        response => {
+          this.companies = response
+          this.authService.setCurrentCompany(response[0])
+          console.log(this.companies)
+        }
+      )
     }
+
   }
 
   logout() {
     this.authService.logout();
     this.router.navigate(['login']);
   }
+
+  protected readonly environment = environment;
+  currentCompany: Company;
 }

src/app/services/appointment.service.ts

@@ -2,6 +2,7 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Appointment} from '../models/appointment';
 import {environment} from '../../environments/environment';
+import {AuthService} from './auth.service';
 
 @Injectable({
   providedIn: 'root',
@@ -9,7 +10,7 @@ import {environment} from '../../environments/environment';
 export class AppointmentService {
   baseApi = `${environment.baseApi}/appointments`;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private authService: AuthService) {
   }
 
   getAllAppointments() {
@@ -24,7 +25,8 @@ export class AppointmentService {
   }
 
   addAppointment(appointment: Appointment) {
-    return this.http.post(`${this.baseApi}`, appointment);
+    let companyId = this.authService.getCurrentCompany().id
+    return this.http.post(`${this.baseApi}/${companyId}`, appointment);
   }
 
   deleteAppointment(appointment: Appointment) {

src/app/services/auth.service.ts

@@ -4,6 +4,7 @@ import {JwtHelperService} from '@auth0/angular-jwt';
 import {Observable} from 'rxjs';
 import {jwtDecode} from 'jwt-decode';
 import {environment} from '../../environments/environment';
+import {Company} from '../models/company';
 
 @Injectable({
   providedIn: 'root',
@@ -11,6 +12,7 @@ import {environment} from '../../environments/environment';
 export class AuthService {
   baseApi = `${environment.baseApi}/auth/login`;
   jwtHelper = new JwtHelperService();
+  currentCompany: Company;
 
   constructor(private http: HttpClient) {
   }
@@ -39,5 +41,15 @@ export class AuthService {
     }
     return null;
   }
+
+  setCurrentCompany(company: Company): void {
+    this.currentCompany = company;
+    console.log(this.currentCompany);
+  }
+
+  getCurrentCompany(): Company {
+    console.log(this.currentCompany);
+    return this.currentCompany;
+  }
 }
 

src/app/services/company.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';
+import {Company} from '../models/company';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CompanyService {
+  baseApi = `${environment.baseApi}/company`;
+
+  constructor(private http: HttpClient) {
+  }
+
+  getCompanies(): Observable<Company[]> {
+    return this.http.get<Company[]>(`${this.baseApi}`);
+  }
+}