Skip to content

Commit fe78bb3

Browse files
MrYuionMrYuion
committed
chore(workplace): update parking request form styles
1 parent 28c86a3 commit fe78bb3

4 files changed

Lines changed: 241 additions & 172 deletions

File tree

‎apps/workplace/src/app/book/parking-request-flow.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ParkingRequestSuccessComponent } from './parking-request-flow/parking-r
88
@Component({
99
selector: 'placeos-parking-request-flow',
1010
template: `
11-
<div class="bg-base-100 z-50 h-full w-full">
11+
<div class="bg-base-200 z-50 h-full w-full">
1212
@switch (view()) {
1313
@case ('success') {
1414
<parking-request-success></parking-request-success>

‎apps/workplace/src/app/book/parking-request-flow/parking-request-form-details.component.ts‎

Lines changed: 91 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,28 @@ import { DateFieldComponent } from '@placeos/form-fields';
2222
import { addDays, endOfDay, startOfDay, startOfWeek } from 'date-fns';
2323

2424
const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
25-
business: { start: 540, end: 1020 },
26-
morning: { start: 360, end: 720 },
27-
afternoon: { start: 720, end: 1080 },
25+
day_worker: { start: 420, end: 1020 },
26+
day_shift_12hr: { start: 330, end: 1110 },
27+
night_shift_12hr: { start: 1050, end: 390 },
28+
half_day_am: { start: 420, end: 720 },
29+
half_day_pm: { start: 750, end: 1020 },
2830
};
2931

3032
@Component({
3133
selector: 'parking-request-form-details',
3234
template: `
3335
@if (form()) {
34-
<div class="space-y-4" [formGroup]="form()">
36+
<div [formGroup]="form()">
3537
<!-- BOOKING FREQUENCY -->
36-
<div class="border-base-300 space-y-3 rounded-lg border p-4">
37-
<h3
38-
class="text-info flex items-center gap-2 text-sm font-bold tracking-wider uppercase"
39-
>
40-
<icon class="text-lg">date_range</icon>
38+
<div
39+
class="gradient border-base-content flex items-center space-x-2 border-l-8 px-4 py-3 font-medium"
40+
>
41+
<icon>date_range</icon>
42+
<div>
4143
{{ 'BOOKINGS.PARKING_BOOKING_FREQUENCY' | translate }}
42-
</h3>
44+
</div>
45+
</div>
46+
<div class="space-y-3 p-4">
4347
<a-date-field
4448
name="date"
4549
formControlName="date"
@@ -248,13 +252,15 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
248252
</div>
249253
250254
<!-- REQUEST TYPE -->
251-
<div class="border-base-300 space-y-3 rounded-lg border p-4">
252-
<h3
253-
class="text-info flex items-center gap-2 text-sm font-bold tracking-wider uppercase"
254-
>
255-
<icon class="text-lg">ballot</icon>
255+
<div
256+
class="gradient border-base-content flex items-center space-x-2 border-l-8 px-4 py-3 font-medium"
257+
>
258+
<icon>ballot</icon>
259+
<div>
256260
{{ 'BOOKINGS.PARKING_REQUEST_TYPE' | translate }}
257-
</h3>
261+
</div>
262+
</div>
263+
<div class="space-y-3 p-4">
258264
<div class="space-y-2">
259265
@for (type of request_types(); track type.value) {
260266
<div
@@ -312,13 +318,15 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
312318
</div>
313319
314320
<!-- SHIFT SELECTION -->
315-
<div class="border-base-300 space-y-3 rounded-lg border p-4">
316-
<h3
317-
class="text-info flex items-center gap-2 text-sm font-bold tracking-wider uppercase"
318-
>
319-
<icon class="text-lg">schedule</icon>
321+
<div
322+
class="gradient border-base-content flex items-center space-x-2 border-l-8 px-4 py-3 font-medium"
323+
>
324+
<icon>schedule</icon>
325+
<div>
320326
{{ 'BOOKINGS.PARKING_SHIFT_SELECTION' | translate }}
321-
</h3>
327+
</div>
328+
</div>
329+
<div class="space-y-3 p-4">
322330
<div class="space-y-3">
323331
<div>
324332
<label class="mb-1 block text-sm font-medium">
@@ -334,16 +342,24 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
334342
setShiftType($event.value)
335343
"
336344
>
337-
<mat-option value="business">{{
338-
'BOOKINGS.PARKING_SHIFT_BUSINESS'
345+
<mat-option value="day_worker">{{
346+
'BOOKINGS.PARKING_SHIFT_DAY_WORKER'
347+
| translate
348+
}}</mat-option>
349+
<mat-option value="day_shift_12hr">{{
350+
'BOOKINGS.PARKING_SHIFT_DAY_12HR'
351+
| translate
352+
}}</mat-option>
353+
<mat-option value="night_shift_12hr">{{
354+
'BOOKINGS.PARKING_SHIFT_NIGHT_12HR'
339355
| translate
340356
}}</mat-option>
341-
<mat-option value="morning">{{
342-
'BOOKINGS.PARKING_SHIFT_MORNING'
357+
<mat-option value="half_day_am">{{
358+
'BOOKINGS.PARKING_SHIFT_HALF_DAY_AM'
343359
| translate
344360
}}</mat-option>
345-
<mat-option value="afternoon">{{
346-
'BOOKINGS.PARKING_SHIFT_AFTERNOON'
361+
<mat-option value="half_day_pm">{{
362+
'BOOKINGS.PARKING_SHIFT_HALF_DAY_PM'
347363
| translate
348364
}}</mat-option>
349365
<mat-option value="custom">{{
@@ -416,17 +432,17 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
416432
<!-- LOCATION PREFERENCE -->
417433
@if ((building_list | async)?.length > 1) {
418434
<div
419-
class="border-base-300 space-y-3 rounded-lg border p-4"
435+
class="gradient border-base-content flex items-center space-x-2 border-l-8 px-4 py-3 font-medium"
420436
>
421-
<h3
422-
class="text-success flex items-center gap-2 text-sm font-bold tracking-wider uppercase"
423-
>
424-
<icon class="text-lg">place</icon>
437+
<icon>place</icon>
438+
<div>
425439
{{
426440
'BOOKINGS.PARKING_LOCATION_PREFERENCE'
427441
| translate
428442
}}
429-
</h3>
443+
</div>
444+
</div>
445+
<div class="space-y-3 p-4">
430446
@if (region_name) {
431447
<div class="text-sm font-medium">
432448
{{ region_name }}
@@ -477,13 +493,15 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
477493
</div>
478494
}
479495
<!-- VEHICLE DETAILS -->
480-
<div class="border-base-300 space-y-3 rounded-lg border p-4">
481-
<h3
482-
class="text-info flex items-center gap-2 text-sm font-bold tracking-wider uppercase"
483-
>
484-
<icon class="text-lg">directions_car</icon>
496+
<div
497+
class="gradient border-base-content flex items-center space-x-2 border-l-8 px-4 py-3 font-medium"
498+
>
499+
<icon>directions_car</icon>
500+
<div>
485501
{{ 'BOOKINGS.PARKING_VEHICLE_DETAILS' | translate }}
486-
</h3>
502+
</div>
503+
</div>
504+
<div class="space-y-3 p-4">
487505
<div class="flex flex-col gap-3 sm:flex-row sm:gap-4">
488506
<div class="flex-1">
489507
<label class="mb-1 block text-sm font-medium">
@@ -537,16 +555,18 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
537555
</div>
538556
539557
<!-- SPACE RESTRICTIONS -->
540-
<div class="border-base-300 space-y-3 rounded-lg border p-4">
541-
<h3
542-
class="text-info flex items-center gap-2 text-sm font-bold tracking-wider uppercase"
543-
>
544-
<icon class="text-lg">tune</icon>
558+
<div
559+
class="gradient border-base-content flex items-center space-x-2 border-l-8 px-4 py-3 font-medium"
560+
>
561+
<icon>tune</icon>
562+
<div>
545563
{{
546564
'BOOKINGS.PARKING_SPACE_RESTRICTIONS_TITLE'
547565
| translate
548566
}}
549-
</h3>
567+
</div>
568+
</div>
569+
<div class="space-y-3 p-4">
550570
<p class="text-sm opacity-60">
551571
{{
552572
'BOOKINGS.PARKING_SPACE_RESTRICTIONS_DESC'
@@ -579,7 +599,18 @@ const SHIFT_PRESETS: Record<string, { start: number; end: number }> = {
579599
</div>
580600
}
581601
`,
582-
styles: [``],
602+
styles: [
603+
`
604+
.gradient {
605+
background: linear-gradient(
606+
105deg,
607+
var(--base-200) 0%,
608+
var(--base-200) 50%,
609+
var(--base-100) 100%
610+
);
611+
}
612+
`,
613+
],
583614
imports: [
584615
CommonModule,
585616
ReactiveFormsModule,
@@ -624,8 +655,8 @@ export class ParkingRequestFormDetailsComponent
624655
public readonly week_options = computed(() =>
625656
Array.from({ length: this.max_weeks() }, (_, i) => i + 1),
626657
);
627-
public readonly shift_type = signal<string>('custom');
628-
public readonly start_time_mins = signal<number>(480);
658+
public readonly shift_type = signal<string>('day_worker');
659+
public readonly start_time_mins = signal<number>(420);
629660
public readonly end_time_mins = signal<number>(1020);
630661

631662
public readonly WEEKDAY_OPTIONS = [1, 2, 3, 4, 5].map((index) => ({
@@ -701,18 +732,17 @@ export class ParkingRequestFormDetailsComponent
701732
public ngOnInit() {
702733
const form = this.form();
703734
if (!form) return;
735+
const is_edit = !!form.value.id;
704736
const date = form.getRawValue().date;
705-
if (date) {
737+
if (is_edit && date) {
706738
const d = new Date(date);
707739
const start = d.getHours() * 60 + d.getMinutes();
708-
const duration = form.value.duration || 540;
740+
const duration = form.value.duration || 600;
709741
this.start_time_mins.set(start);
710742
this.end_time_mins.set(start + duration);
711743
this._detectShiftType(start, start + duration);
712744
} else {
713-
this.start_time_mins.set(480);
714-
this.end_time_mins.set(1020);
715-
this.shift_type.set('custom');
745+
this.setShiftType('day_worker');
716746
}
717747
const is_daily = form.value.recurrence_type === 'daily';
718748
this.booking_frequency.set(is_daily ? 'daily' : 'single');
@@ -824,10 +854,13 @@ export class ParkingRequestFormDetailsComponent
824854
const raw_date = form.getRawValue().date || Date.now();
825855
const day = startOfDay(raw_date);
826856
const new_date = day.valueOf() + start_mins * 60 * 1000;
827-
const duration = Math.max(end_mins - start_mins, 30);
857+
const duration =
858+
end_mins > start_mins
859+
? end_mins - start_mins
860+
: 1440 - start_mins + end_mins;
828861
const was_disabled = form.controls.date.disabled;
829862
if (was_disabled) form.controls.date.enable({ emitEvent: false });
830-
form.patchValue({ date: new_date, duration });
863+
form.patchValue({ date: new_date, duration: Math.max(duration, 30) });
831864
if (was_disabled) form.controls.date.disable({ emitEvent: false });
832865
}
833866

@@ -855,8 +888,9 @@ export class ParkingRequestFormDetailsComponent
855888
}
856889

857890
private _detectShiftType(start: number, end: number) {
891+
const normalized_end = end > 1440 ? end - 1440 : end;
858892
for (const [key, preset] of Object.entries(SHIFT_PRESETS)) {
859-
if (preset.start === start && preset.end === end) {
893+
if (preset.start === start && preset.end === normalized_end) {
860894
this.shift_type.set(key);
861895
return;
862896
}

0 commit comments

Comments
 (0)