git init v2
This commit is contained in:
149
src/app/components/edit-item/edit-item.component.html
Normal file
149
src/app/components/edit-item/edit-item.component.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<form [formGroup]="testForm">
|
||||
<tui-input formControlName="title">
|
||||
Titel
|
||||
<input
|
||||
tuiTextfieldLegacy
|
||||
formControlName="title"
|
||||
type="text"
|
||||
/>
|
||||
</tui-input>
|
||||
<div
|
||||
*ngIf="testForm.get('title').value == ''"
|
||||
tuiGroup
|
||||
class="group"
|
||||
[collapsed]="true">
|
||||
<button
|
||||
*ngFor="let action of quickActions"
|
||||
appearance="outline"
|
||||
tuiButton
|
||||
size="s"
|
||||
(click)="addAction(action)"
|
||||
type="button">{{ action }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="toolbar">
|
||||
<tui-combo-box
|
||||
[formControl]="control"
|
||||
[stringify]="stringify"
|
||||
tuiTextfieldSize="m">
|
||||
Klant
|
||||
<tui-data-list-wrapper
|
||||
*tuiDataList
|
||||
[itemContent]="stringify | tuiStringifyContent"
|
||||
[items]="items | tuiFilterByInput"
|
||||
/>
|
||||
</tui-combo-box>
|
||||
<button
|
||||
size="m"
|
||||
tuiButton
|
||||
(click)="toggleCustomerModal()"
|
||||
iconStart="@tui.plus"
|
||||
type="button">
|
||||
</button>
|
||||
</div>
|
||||
<br>
|
||||
<div
|
||||
tuiGroup
|
||||
class="group"
|
||||
>
|
||||
<div>
|
||||
<tui-input-date
|
||||
formControlName="date"
|
||||
tuiTextfieldSize="m"
|
||||
class="tui-space_vertical-4"
|
||||
[tuiTextfieldLabelOutside]="false"
|
||||
>
|
||||
Datum
|
||||
</tui-input-date>
|
||||
</div>
|
||||
<div>
|
||||
<tui-input-time
|
||||
formControlName="startTime"
|
||||
tuiTextfieldSize="m"
|
||||
class="tui-space_top-2"
|
||||
[tuiTextfieldLabelOutside]="false">
|
||||
Van
|
||||
</tui-input-time>
|
||||
</div>
|
||||
<div>
|
||||
<tui-input-time
|
||||
formControlName="endTime"
|
||||
tuiTextfieldSize="m"
|
||||
class="tui-space_top-2"
|
||||
[tuiTextfieldLabelOutside]="false"
|
||||
>
|
||||
Tot
|
||||
</tui-input-time>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<tui-textarea formControlName="notes">Notities</tui-textarea>
|
||||
</form>
|
||||
<br>
|
||||
<button
|
||||
size="m"
|
||||
tuiButton
|
||||
type="button" (click)="updateAppointment()"
|
||||
[tuiAppearanceState]="formIsValid()">
|
||||
Afspraak bewerken
|
||||
</button>
|
||||
|
||||
<app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
|
||||
<form [formGroup]="customerForm">
|
||||
<tui-input
|
||||
formControlName="firstName"
|
||||
tuiTextfieldSize="m"
|
||||
[tuiTextfieldCleaner]="true"
|
||||
>
|
||||
Voornaam
|
||||
<input
|
||||
tuiTextfieldLegacy
|
||||
type="text"
|
||||
formControlName="firstName"
|
||||
/>
|
||||
</tui-input>
|
||||
<br>
|
||||
|
||||
<tui-input
|
||||
formControlName="lastName"
|
||||
tuiTextfieldSize="m"
|
||||
[tuiTextfieldCleaner]="true"
|
||||
>
|
||||
Achternaam
|
||||
<input
|
||||
tuiTextfieldLegacy
|
||||
type="text"
|
||||
formControlName="lastName"
|
||||
/>
|
||||
</tui-input>
|
||||
<br>
|
||||
<tui-input
|
||||
formControlName="email"
|
||||
tuiTextfieldSize="m"
|
||||
[tuiTextfieldCleaner]="true"
|
||||
>
|
||||
Email
|
||||
<input
|
||||
tuiTextfieldLegacy
|
||||
autocomplete="email"
|
||||
type="email"
|
||||
formControlName="email"
|
||||
/>
|
||||
</tui-input>
|
||||
<br>
|
||||
<button
|
||||
appearance="secondary"
|
||||
size="m"
|
||||
tuiButton
|
||||
(click)="saveCustomer()"
|
||||
type="button">
|
||||
<tui-icon
|
||||
icon="@tui.plus"
|
||||
[style.height.rem]="1"
|
||||
/>
|
||||
Klant toevoegen
|
||||
</button>
|
||||
</form>
|
||||
</app-modal>
|
||||
15
src/app/components/edit-item/edit-item.component.scss
Normal file
15
src/app/components/edit-item/edit-item.component.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.toolbar {
|
||||
button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
tui-combo-box {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
146
src/app/components/edit-item/edit-item.component.ts
Normal file
146
src/app/components/edit-item/edit-item.component.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
|
||||
import {NgForOf, NgIf} from "@angular/common";
|
||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
|
||||
import {
|
||||
TuiComboBoxModule,
|
||||
TuiInputDateModule,
|
||||
TuiInputModule,
|
||||
TuiInputTimeModule,
|
||||
TuiTextareaModule,
|
||||
TuiTextfieldControllerModule
|
||||
} from "@taiga-ui/legacy";
|
||||
import {Appointment} from '../../models/appointment';
|
||||
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
|
||||
import {AppointmentService} from '../../services/appointment.service';
|
||||
import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
|
||||
import {Customer} from '../../models/customer';
|
||||
import {CustomerService} from '../../services/customer.service';
|
||||
import {ModalComponent} from '../modal/modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-item',
|
||||
imports: [
|
||||
NgForOf,
|
||||
NgIf,
|
||||
ReactiveFormsModule,
|
||||
TuiButton,
|
||||
TuiGroup,
|
||||
TuiInputDateModule,
|
||||
TuiInputModule,
|
||||
TuiInputTimeModule,
|
||||
TuiTextareaModule,
|
||||
TuiTextfieldControllerModule,
|
||||
TuiComboBoxModule,
|
||||
TuiDataListWrapperComponent,
|
||||
TuiStringifyContentPipe,
|
||||
TuiFilterByInputPipe,
|
||||
ModalComponent,
|
||||
TuiIcon
|
||||
],
|
||||
templateUrl: './edit-item.component.html',
|
||||
styleUrl: './edit-item.component.scss'
|
||||
})
|
||||
export class EditItemComponent implements OnInit {
|
||||
|
||||
@Input() appointment: Appointment;
|
||||
testForm: FormGroup;
|
||||
quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
|
||||
waiting: boolean = false;
|
||||
protected value: TuiDay | null = null;
|
||||
@Output() appointmentUpdateEvent = new EventEmitter();
|
||||
showNewCustomer = false;
|
||||
customerForm: FormGroup;
|
||||
private readonly alerts = inject(TuiAlertService);
|
||||
|
||||
|
||||
constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log(this.appointment);
|
||||
let date = new Date(this.appointment.startDate);
|
||||
this.testForm = new FormGroup({
|
||||
title: new FormControl(this.appointment.title, Validators.required),
|
||||
notes: new FormControl(this.appointment.description),
|
||||
startTime: new FormControl(new TuiTime(this.appointment.startHour, this.appointment.startMinute), Validators.required),
|
||||
endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), Validators.required),
|
||||
date: new FormControl(new TuiDay(date.getFullYear(), date.getMonth(), date.getDate()), Validators.required),
|
||||
})
|
||||
this.control = new FormControl(this.appointment.customer)
|
||||
|
||||
this.getCustomers()
|
||||
this.customerForm = new FormGroup({
|
||||
firstName: new FormControl('', Validators.required),
|
||||
lastName: new FormControl('', Validators.required),
|
||||
email: new FormControl('', Validators.required),
|
||||
})
|
||||
}
|
||||
|
||||
updateAppointment() {
|
||||
const title = this.testForm.get('title').value
|
||||
const description = this.testForm.get('notes').value
|
||||
const startTime = this.testForm.get('startTime').value
|
||||
const endTime = this.testForm.get('endTime').value
|
||||
let date = this.testForm.get('date').value
|
||||
let correctDate = new Date(date.year, date.month, date.day + 1)
|
||||
|
||||
const customer = this.control.value;
|
||||
this.appointment.startDate = correctDate;
|
||||
this.appointment.title = title;
|
||||
this.appointment.description = description
|
||||
this.appointment.startHour = startTime.hours
|
||||
this.appointment.startMinute = startTime.minutes
|
||||
this.appointment.endHour = endTime.hours
|
||||
this.appointment.endMinute = endTime.minutes
|
||||
this.appointment.customer = customer;
|
||||
this.appointment.durationInMinutes = (this.appointment.endHour * 60 + this.appointment.endMinute) - (this.appointment.startHour * 60 + this.appointment.startMinute);
|
||||
|
||||
this.waiting = true
|
||||
this.appointmentService.updateAppointment(this.appointment).subscribe(() => {
|
||||
this.waiting = false
|
||||
this.appointmentUpdateEvent.emit(this.appointment.id)
|
||||
this.alerts.open(`Afspraak <strong>${title}</strong> is aangepast.`)
|
||||
.subscribe();
|
||||
})
|
||||
}
|
||||
|
||||
formIsValid() {
|
||||
return this.testForm.valid ? 'active' : 'disabled'
|
||||
}
|
||||
|
||||
addAction(action: string) {
|
||||
this.testForm.get('title').setValue(`${action} `)
|
||||
}
|
||||
|
||||
protected control = new FormControl<Customer | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
toggleCustomerModal() {
|
||||
this.showNewCustomer = !this.showNewCustomer;
|
||||
}
|
||||
|
||||
protected items: Customer[] = [];
|
||||
|
||||
protected readonly stringify = (item: Customer): string =>
|
||||
`${item.firstName} ${item.lastName}`;
|
||||
|
||||
saveCustomer() {
|
||||
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);
|
||||
|
||||
this.customerService.addCustomer(customer).subscribe(() => {
|
||||
this.showNewCustomer = false;
|
||||
this.getCustomers()
|
||||
})
|
||||
}
|
||||
|
||||
getCustomers() {
|
||||
this.customerService.getCustomers().subscribe(response => {
|
||||
this.items = response;
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user