Update 0.0.3:

-delen van agenda toegevoegd
-popup aangepast
-accepteren van uitnodiging toegevoegd

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

@@ -0,0 +1,30 @@
+<div class="share-wrapper">
+  <h1>Deel je agenda</h1>
+
+  <p>Kies het bedrijf waarvoor je de agenda wilt delen:</p>
+
+  <select [formControl]="companyForm" class="custom-select">
+    <option *ngFor="let item of companies" [value]="item.id">{{ item.name }}</option>
+  </select>
+
+  <div class="link-section">
+    <div class="share-media">
+      <h3>
+        Uitnodigen via email:
+      </h3>
+      <div class="link-box">
+        <input placeholder="Email" type="email" [formControl]="email"/>
+        <button tuiButton size="m" appearance="primary" [disabled]="email.invalid" (click)="sendInvite()">
+          Versturen
+        </button>
+      </div>
+    </div>
+    <br>
+
+    <p class="label" *ngIf="shareLink">Kopieerbare link:</p>
+    <div class="link-box" *ngIf="shareLink">
+      <input type="text" [value]="shareLink" readonly/>
+      <button tuiButton size="m" iconStart="@tui.copy" appearance="secondary" (click)="copyLink()"></button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,139 @@
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  90% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+}
+
+.share-wrapper {
+  max-width: 500px;
+  margin: 2rem auto;
+  padding: 2rem;
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', sans-serif;
+
+  h1 {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  p {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .custom-select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    appearance: none;
+    background-color: #f9f9f9;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 1rem;
+    cursor: pointer;
+    transition: border-color 0.3s, box-shadow 0.3s;
+
+    &:focus {
+      outline: none;
+      border-color: #007bff;
+      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+    }
+  }
+
+  .link-section {
+    margin-top: 2rem;
+
+    .label {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    .link-box {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      input[type="text"], input[type="email"] {
+        flex: 1;
+        padding: 0.6rem 1rem;
+        border: 1px solid #ccc;
+        border-radius: 0.5rem;
+        font-size: 0.95rem;
+        background-color: #f5f5f5;
+        transition: box-shadow 0.3s;
+
+        &:focus {
+          outline: none;
+          box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.25);
+        }
+      }
+
+      .copy-button {
+        background: #eee;
+        border: none;
+        border-radius: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        font-size: 1.2rem;
+        cursor: pointer;
+        transition: background 0.2s, transform 0.1s;
+
+        &:hover {
+          background: #ddd;
+        }
+
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+
+    .copied-msg {
+      margin-top: 0.5rem;
+      color: #28a745;
+      font-weight: 600;
+      animation: fadeInOut 2.5s ease-in-out forwards;
+    }
+  }
+}
+
+a{
+  text-decoration: none;
+  color: white;
+}
+
+.share-wrapper{
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.share-media button {
+  margin-right: 8px;
+}

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

@@ -0,0 +1,101 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {TuiSelectModule} from '@taiga-ui/legacy';
+import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiAlertService, TuiButton} from '@taiga-ui/core';
+import {NgForOf, NgIf} from '@angular/common';
+import {Company} from '../../models/company';
+import {CompanyService} from '../../services/company.service';
+import {AgendaService} from '../../services/agenda.service';
+import {Router} from '@angular/router';
+import {InviteEntity} from '../../models/invite-entity';
+import {UserService} from '../../services/user.service';
+import {CompanyDTO} from '../../models/app-user-dto';
+
+@Component({
+  selector: 'app-agenda-delen',
+  imports: [
+    TuiSelectModule,
+    FormsModule,
+    NgIf,
+    FormsModule,
+    NgForOf,
+    ReactiveFormsModule,
+    TuiButton,
+  ],
+  templateUrl: './agenda-delen.component.html',
+  styleUrl: './agenda-delen.component.scss'
+})
+export class AgendaDelenComponent implements OnInit {
+  companies: CompanyDTO[];
+  selectedCompany: CompanyDTO | null = null;
+  companyForm: FormControl;
+  email: FormControl;
+  invite: InviteEntity;
+
+  constructor(@Inject(TuiAlertService) private readonly alerts: TuiAlertService, private companyService: CompanyService, private agendaService: AgendaService, private router: Router, private userService: UserService) {
+  }
+
+  ngOnInit(): void {
+    this.companyForm = new FormControl('');
+    this.email = new FormControl('', [
+      Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/),
+      Validators.required]);
+    this.companyForm.valueChanges.subscribe(
+      companyToSelect => {
+        console.log(companyToSelect);
+        this.selectCompany(companyToSelect);
+
+      }
+    )
+    this.email.valueChanges.subscribe(
+      () => {
+        if (this.email.valid) {
+          this.createInvite()
+        }
+      }
+    )
+    this.companies = this.userService.userValue.companies.map(a => a.company)
+    this.selectedCompany = this.companies[0]
+    this.companyForm.setValue(this.selectedCompany.id);
+  }
+
+  get shareLink(): string | null {
+    if (!this.invite) return null;
+    return `${window.location.origin}/#/home/agenda-invite?token=${this.invite.token}`;
+  }
+
+  copyLink(): void {
+    if (this.shareLink) {
+      navigator.clipboard.writeText(this.shareLink);
+      this.alerts.open('Link gekopieerd naar klembord.').subscribe();
+    }
+  }
+
+  selectCompany(companyId: number): void {
+    console.log(companyId);
+    this.selectedCompany = this.companies.find(company =>
+      company.id == companyId
+    );
+    console.log(this.selectedCompany);
+  }
+
+  sendInvite(): void {
+    this.agendaService.sendInvite(this.shareLink, this.email.value).subscribe(
+      () => {
+        console.log('Successfully sent invite')
+        this.router.navigate(['/home/agenda']);
+        this.alerts.open(`Email is verstuurd naar: <strong>${this.email.value}`).subscribe();
+      }
+    )
+  }
+
+  createInvite(): void {
+    this.agendaService.createInvite(this.selectedCompany.id, this.email.value).subscribe(
+      response => {
+        this.invite = response
+      }
+    )
+  }
+
+  protected readonly encodeURIComponent = encodeURIComponent;
+}