Add filtering for past and upcoming bookings in "My Bookings" page
- Enhance UI to separate upcoming and past bookings with collapsible sections. - Add new i18n keys for handling booking filters (`en.json`, `es-ES.json`). - Update booking component logic to filter reservations based on time. - Introduce "Show/Hide Past Bookings" toggle for improved user experience.main
parent
fa93fc0ac6
commit
6e48763947
|
|
@ -4,8 +4,10 @@
|
|||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="6c8b3c54-eabb-40e5-967f-c7b594c750bc" name="Changes" comment="Add seed service to initialize default admin and organization - Implement `SeedService` to create a default admin account and organization on app startup. - Update `PrismaModule` to include `SeedService` as a provider. - Remove seeded credentials display from login page. - Refactor existing seed script for consistency with the new service.">
|
||||
<change beforePath="$PROJECT_DIR$/apps/web/src/lib/components/FloorplanViewer.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/lib/components/FloorplanViewer.svelte" afterDir="false" />
|
||||
<list default="true" id="6c8b3c54-eabb-40e5-967f-c7b594c750bc" name="Changes" comment="Improve real-time space status handling and date-based resets - Add logic to clear real-time updates when the selected date changes. - Enhance space status updates to consider reservation time ranges for relevance. - Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates. - Update API to include reservation details in `space_status_changed` events for improved update precision.">
|
||||
<change beforePath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/en.json" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/en.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/es-ES.json" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/lib/i18n/locales/es-ES.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/apps/web/src/routes/dashboard/my-bookings/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/apps/web/src/routes/dashboard/my-bookings/+page.svelte" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
|
|
@ -127,7 +129,7 @@
|
|||
<updated>1774643312599</updated>
|
||||
<workItem from="1774643313611" duration="74000" />
|
||||
<workItem from="1774643422240" duration="5278000" />
|
||||
<workItem from="1774706361502" duration="11346000" />
|
||||
<workItem from="1774706361502" duration="11708000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="Initialize Hot Desking app with web and API services - Set up SvelteKit for the web interface with Tailwind CSS. - Build the API using NestJS with Prisma ORM for database interaction. - Add environment variable management and docker-compose for PostgreSQL and PgAdmin instances. - Create shared data models for consistent typing across services. - Establish basic routing and layouts for web and API services.">
|
||||
<option name="closed" value="true" />
|
||||
|
|
@ -305,7 +307,15 @@
|
|||
<option name="project" value="LOCAL" />
|
||||
<updated>1774717642991</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="23" />
|
||||
<task id="LOCAL-00023" summary="Improve real-time space status handling and date-based resets - Add logic to clear real-time updates when the selected date changes. - Enhance space status updates to consider reservation time ranges for relevance. - Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates. - Update API to include reservation details in `space_status_changed` events for improved update precision.">
|
||||
<option name="closed" value="true" />
|
||||
<created>1774717937214</created>
|
||||
<option name="number" value="00023" />
|
||||
<option name="presentableId" value="LOCAL-00023" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1774717937214</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="24" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
|
|
@ -336,6 +346,7 @@
|
|||
<MESSAGE value="Add rotation support for spaces in floorplan editor - Extend `Space` model and Prisma schema to include `rotation` property. - Update API services and DTOs to handle rotation data. - Add UI controls in `FloorplanEditor.svelte` for rotating spaces. - Refactor space rendering logic in both editor and viewer to support rotation." />
|
||||
<MESSAGE value="Add i18n integration and translations for improved localization - Extend English (`en.json`) and Spanish (`es-ES.json`) locale files with additional keys for buildings, bookings, reports, and user management. - Update Svelte components and pages to use `svelte-i18n` for dynamic translations across the app. - Refactor labels, titles, and error messages for multilingual support. - Improve date formatting based on locale preferences." />
|
||||
<MESSAGE value="Add seed service to initialize default admin and organization - Implement `SeedService` to create a default admin account and organization on app startup. - Update `PrismaModule` to include `SeedService` as a provider. - Remove seeded credentials display from login page. - Refactor existing seed script for consistency with the new service." />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="Add seed service to initialize default admin and organization - Implement `SeedService` to create a default admin account and organization on app startup. - Update `PrismaModule` to include `SeedService` as a provider. - Remove seeded credentials display from login page. - Refactor existing seed script for consistency with the new service." />
|
||||
<MESSAGE value="Improve real-time space status handling and date-based resets - Add logic to clear real-time updates when the selected date changes. - Enhance space status updates to consider reservation time ranges for relevance. - Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates. - Update API to include reservation details in `space_status_changed` events for improved update precision." />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="Improve real-time space status handling and date-based resets - Add logic to clear real-time updates when the selected date changes. - Enhance space status updates to consider reservation time ranges for relevance. - Update relevant Svelte components (`SpaceCard`, `FloorplanViewer`) to handle date-sensitive real-time updates. - Update API to include reservation details in `space_status_changed` events for improved update precision." />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -99,7 +99,11 @@
|
|||
"deskNote": "Note: Desk bookings are full-day. Times will be automatically adjusted to encompass the entire day.",
|
||||
"saving": "Saving...",
|
||||
"editBookingTitle": "Edit Booking",
|
||||
"saveChanges": "Save Changes"
|
||||
"saveChanges": "Save Changes",
|
||||
"upcoming": "Upcoming Bookings",
|
||||
"past": "Past Bookings",
|
||||
"showPast": "Show past bookings",
|
||||
"hidePast": "Hide past bookings"
|
||||
},
|
||||
"reports": {
|
||||
"title": "Admin Reporting Dashboard",
|
||||
|
|
|
|||
|
|
@ -99,7 +99,11 @@
|
|||
"deskNote": "Nota: Las reservas de puestos son para todo el día. Las horas se ajustarán automáticamente para abarcar el día completo.",
|
||||
"saving": "Guardando...",
|
||||
"editBookingTitle": "Editar reserva",
|
||||
"saveChanges": "Guardar cambios"
|
||||
"saveChanges": "Guardar cambios",
|
||||
"upcoming": "Próximas reservas",
|
||||
"past": "Reservas pasadas",
|
||||
"showPast": "Mostrar reservas pasadas",
|
||||
"hidePast": "Ocultar reservas pasadas"
|
||||
},
|
||||
"reports": {
|
||||
"title": "Panel de Control de Informes",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
import { onMount } from "svelte";
|
||||
import { token } from "$lib/stores/auth";
|
||||
import { apiFetch } from "$lib/api/client";
|
||||
import { Calendar, Clock, MapPin, Trash2, Edit2, ChevronRight, X } from "lucide-svelte";
|
||||
import { format } from "date-fns";
|
||||
import { Calendar, Clock, MapPin, Trash2, Edit2, ChevronRight, X, ChevronDown, ChevronUp } from "lucide-svelte";
|
||||
import { format, isPast } from "date-fns";
|
||||
import { es, enUS } from 'date-fns/locale';
|
||||
import { t, locale } from "svelte-i18n";
|
||||
|
||||
|
|
@ -17,10 +17,14 @@
|
|||
let editEndTimeDate = "";
|
||||
let editEndTimeTime = "";
|
||||
let saving = false;
|
||||
let showPast = false;
|
||||
|
||||
$: dateLocale = $locale === 'es-ES' ? es : enUS;
|
||||
$: dateFormat = $locale === 'es-ES' ? 'dd/MM/yyyy' : 'PPP';
|
||||
|
||||
$: upcomingReservations = reservations.filter(r => !isPast(new Date(r.endTime)));
|
||||
$: pastReservations = reservations.filter(r => isPast(new Date(r.endTime)));
|
||||
|
||||
onMount(async () => {
|
||||
await fetchReservations();
|
||||
});
|
||||
|
|
@ -117,8 +121,12 @@
|
|||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-8">
|
||||
{#if upcomingReservations.length > 0}
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">{$t('myBookings.upcoming')}</h2>
|
||||
<div class="space-y-4">
|
||||
{#each reservations as res}
|
||||
{#each upcomingReservations as res}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:border-indigo-300 transition-colors">
|
||||
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
|
|
@ -168,6 +176,68 @@
|
|||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if pastReservations.length > 0}
|
||||
<section>
|
||||
<button
|
||||
on:click={() => showPast = !showPast}
|
||||
class="flex items-center justify-between w-full text-left mb-4 group"
|
||||
>
|
||||
<h2 class="text-xl font-semibold text-gray-900">
|
||||
{$t('myBookings.past')}
|
||||
<span class="text-sm font-normal text-gray-500 ml-2">({pastReservations.length})</span>
|
||||
</h2>
|
||||
<div class="flex items-center text-indigo-600 text-sm font-medium">
|
||||
{showPast ? $t('myBookings.hidePast') : $t('myBookings.showPast')}
|
||||
{#if showPast}
|
||||
<ChevronUp size={20} class="ml-1" />
|
||||
{:else}
|
||||
<ChevronDown size={20} class="ml-1" />
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{#if showPast}
|
||||
<div class="space-y-4">
|
||||
{#each pastReservations as res}
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-200 overflow-hidden opacity-75">
|
||||
<div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 {res.space.type === 'DESK' ? 'bg-gray-200 text-gray-500' : 'bg-gray-200 text-gray-500'} rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
{#if res.space.type === 'DESK'}
|
||||
<MapPin size={24} />
|
||||
{:else}
|
||||
<Clock size={24} />
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-500">{res.space.name}</h3>
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<MapPin size={14} />
|
||||
{res.space.floor.building.name}, {$t('myBookings.floor', { values: { number: res.space.floor.number } })}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
{format(new Date(res.startTime), dateFormat, { locale: dateLocale })}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Clock size={14} />
|
||||
{format(new Date(res.startTime), "HH:mm")} - {format(new Date(res.endTime), "HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue