Skip to content

Commit 2743f2d

Browse files
MrYuionMrYuion
committed
fix(bookings): add all day option to visitor booking (PPT-2376)
1 parent b5e2167 commit 2743f2d

3 files changed

Lines changed: 98 additions & 56 deletions

File tree

‎libs/bookings/src/lib/invite-visitor-form.component.ts‎

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { first } from 'rxjs/operators';
1212

1313
import { CommonModule } from '@angular/common';
1414
import { MatAutocompleteModule } from '@angular/material/autocomplete';
15+
import { MatCheckboxModule } from '@angular/material/checkbox';
1516
import { MatRippleModule } from '@angular/material/core';
1617
import { MatFormFieldModule } from '@angular/material/form-field';
1718
import { MatInputModule } from '@angular/material/input';
@@ -114,37 +115,49 @@ import { BookingFormService } from './booking-form.service';
114115
formControlName="date"
115116
></a-date-field>
116117
</div>
117-
<div class="flex items-center space-x-2">
118-
<div class="flex w-1/3 flex-1 flex-col">
119-
<label for="start-time">
120-
{{ 'FORM.TIME_START' | translate }}
121-
<span>*</span>
122-
</label>
123-
<a-time-field
124-
name="start-time"
125-
[ngModel]="form.value.date"
126-
(ngModelChange)="
127-
form.patchValue({ date: $event })
128-
"
129-
[ngModelOptions]="{ standalone: true }"
130-
[disabled]="form.value.all_day"
131-
[use_24hr]="use_24hr"
132-
></a-time-field>
118+
@if (allow_all_day) {
119+
<div class="-mt-2 mb-2 flex justify-end">
120+
<mat-checkbox formControlName="all_day">
121+
{{ 'COMMON.ALL_DAY' | translate }}
122+
</mat-checkbox>
133123
</div>
134-
<div class="flex w-1/3 flex-1 flex-col">
135-
<label for="end-time">
136-
{{ 'FORM.TIME_END' | translate }}
137-
<span>*</span>
138-
</label>
139-
<a-duration-field
140-
name="end-time"
141-
formControlName="duration"
142-
[time]="form.value.date"
143-
[max]="max_duration"
144-
[use_24hr]="use_24hr"
145-
></a-duration-field>
124+
}
125+
@if (!form.value.all_day) {
126+
<div class="flex items-center space-x-2">
127+
<div class="flex w-1/3 flex-1 flex-col">
128+
<label for="start-time">
129+
{{ 'FORM.TIME_START' | translate }}
130+
<span>*</span>
131+
</label>
132+
<a-time-field
133+
name="start-time"
134+
[ngModel]="form.value.date"
135+
(ngModelChange)="
136+
form.patchValue({
137+
date: $event,
138+
})
139+
"
140+
[ngModelOptions]="{
141+
standalone: true,
142+
}"
143+
[use_24hr]="use_24hr"
144+
></a-time-field>
145+
</div>
146+
<div class="flex w-1/3 flex-1 flex-col">
147+
<label for="end-time">
148+
{{ 'FORM.TIME_END' | translate }}
149+
<span>*</span>
150+
</label>
151+
<a-duration-field
152+
name="end-time"
153+
formControlName="duration"
154+
[time]="form.value.date"
155+
[max]="max_duration"
156+
[use_24hr]="use_24hr"
157+
></a-duration-field>
158+
</div>
146159
</div>
147-
</div>
160+
}
148161
@if (can_book_for_others) {
149162
<div class="flex w-full flex-col">
150163
<label for="host">
@@ -491,6 +504,7 @@ import { BookingFormService } from './booking-form.service';
491504
TranslatePipe,
492505
IconComponent,
493506
MatRippleModule,
507+
MatCheckboxModule,
494508
UserListFieldComponent,
495509
ReactiveFormsModule,
496510
MatFormFieldModule,
@@ -544,6 +558,13 @@ export class InviteVisitorFormComponent
544558
return this._settings.get('app.visitors.allow_pass_number');
545559
}
546560

561+
public get allow_all_day() {
562+
return (
563+
this._settings.get('app.visitors.allow_all_day') ??
564+
this._settings.get('app.bookings.allow_all_day')
565+
);
566+
}
567+
547568
public get multiple() {
548569
return this._settings.get('app.bookings.multiple_visitors');
549570
}

‎libs/bookings/src/lib/visitor-invite-form.component.ts‎

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from '@angular/core';
1313
import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
1414
import { MatAutocompleteModule } from '@angular/material/autocomplete';
15+
import { MatCheckboxModule } from '@angular/material/checkbox';
1516
import { MatFormFieldModule } from '@angular/material/form-field';
1617
import { MatInputModule } from '@angular/material/input';
1718
import { MatSelectModule } from '@angular/material/select';
@@ -79,35 +80,45 @@ import { BookingFormService } from './booking-form.service';
7980
formControlName="date"
8081
></a-date-field>
8182
</div>
82-
<div class="flex items-center space-x-2">
83-
<div class="flex w-1/3 flex-1 flex-col">
84-
<label for="start-time">
85-
{{ 'FORM.TIME_START' | translate }}
86-
<span>*</span>
87-
</label>
88-
<a-time-field
89-
name="start-time"
90-
[ngModel]="form.value.date"
91-
(ngModelChange)="form.patchValue({ date: $event })"
92-
[ngModelOptions]="{ standalone: true }"
93-
[disabled]="form.value.all_day"
94-
[use_24hr]="use_24hr()"
95-
></a-time-field>
83+
@if (allow_all_day) {
84+
<div class="-mt-2 mb-2 flex justify-end">
85+
<mat-checkbox formControlName="all_day">
86+
{{ 'COMMON.ALL_DAY' | translate }}
87+
</mat-checkbox>
9688
</div>
97-
<div class="flex w-1/3 flex-1 flex-col">
98-
<label for="end-time">
99-
{{ 'FORM.TIME_END' | translate }}
100-
<span>*</span>
101-
</label>
102-
<a-duration-field
103-
name="end-time"
104-
formControlName="duration"
105-
[time]="form.value.date"
106-
[max]="max_duration()"
107-
[use_24hr]="use_24hr()"
108-
></a-duration-field>
89+
}
90+
@if (!form.value.all_day) {
91+
<div class="flex items-center space-x-2">
92+
<div class="flex w-1/3 flex-1 flex-col">
93+
<label for="start-time">
94+
{{ 'FORM.TIME_START' | translate }}
95+
<span>*</span>
96+
</label>
97+
<a-time-field
98+
name="start-time"
99+
[ngModel]="form.value.date"
100+
(ngModelChange)="
101+
form.patchValue({ date: $event })
102+
"
103+
[ngModelOptions]="{ standalone: true }"
104+
[use_24hr]="use_24hr()"
105+
></a-time-field>
106+
</div>
107+
<div class="flex w-1/3 flex-1 flex-col">
108+
<label for="end-time">
109+
{{ 'FORM.TIME_END' | translate }}
110+
<span>*</span>
111+
</label>
112+
<a-duration-field
113+
name="end-time"
114+
formControlName="duration"
115+
[time]="form.value.date"
116+
[max]="max_duration()"
117+
[use_24hr]="use_24hr()"
118+
></a-duration-field>
119+
</div>
109120
</div>
110-
</div>
121+
}
111122
@if (can_book_for_others()) {
112123
<div class="flex w-full flex-col">
113124
<label for="host">
@@ -274,6 +285,7 @@ import { BookingFormService } from './booking-form.service';
274285
MatFormFieldModule,
275286
MatInputModule,
276287
MatSelectModule,
288+
MatCheckboxModule,
277289
UserListFieldComponent,
278290
MatAutocompleteModule,
279291
UserSearchFieldComponent,
@@ -342,6 +354,13 @@ export class VisitorInviteFormComponent
342354
return this._settings.time_format;
343355
}
344356

357+
public get allow_all_day() {
358+
return (
359+
this._settings.get('app.visitors.allow_all_day') ??
360+
this._settings.get('app.bookings.allow_all_day')
361+
);
362+
}
363+
345364
public async ngOnInit() {
346365
this._service.clearOldState();
347366
await this.initFormZone();

‎libs/bookings/src/test/invite-visitor-form.component.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { BookingFormService } from '../lib/booking-form.service';
1212
import { generateBookingForm } from '../lib/booking.utilities';
1313

1414
import { MatAutocompleteModule } from '@angular/material/autocomplete';
15+
import { MatCheckboxModule } from '@angular/material/checkbox';
1516
import { SettingsService } from '@placeos/common';
1617
import { InviteVisitorFormComponent } from '../lib/invite-visitor-form.component';
1718

@@ -41,6 +42,7 @@ describe('InviteVisitorFormComponent', () => {
4142
MockModule(MatInputModule),
4243
MockModule(MatProgressSpinnerModule),
4344
MockModule(MatAutocompleteModule),
45+
MockModule(MatCheckboxModule),
4446
],
4547
});
4648

0 commit comments

Comments
 (0)