arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve planning view

Browse source
This commit is contained in:
Arthur Belleville 2025-10-05 22:50:31 +02:00
parent 5d29201552
commit f8f931aab1
No known key found for this signature in database
3 changed files with 58 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/EventDetailsModal.tsx
View file

@ -11,12 +11,15 @@ interface EventDetailsModalProps {
isOpen: boolean;
onClose: () => void;
onEdit?: () => void;
canEdit?: boolean;
}
export const EventDetailsModal = ({
event,
isOpen,
onClose,
onEdit,
canEdit = false,
}: EventDetailsModalProps) => {
if (!event) return null;
@ -139,6 +142,7 @@ export const EventDetailsModal = ({
<Button variant="outline" onPress={onClose}>
Fermer
</Button>
{canEdit && onEdit && <Button onPress={onEdit}>Modifier</Button>}
</div>
</CustomModal>
);

16
ui/src/pages/bookings.tsx
View file

@ -16,7 +16,7 @@ import { SearchIcon } from "lucide-react";
import { CalendarIcon } from "@ui/ui-library/icons/outline/calendar";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useEventsByTablo } from "@ui/hooks/events";
import { useTablosList } from "@ui/hooks/tablos";
import { useTablosList, useGetAllTabloAccess } from "@ui/hooks/tablos";
import { EventAndTablo } from "@ui/types/events.types";
import { LoadingSpinner } from "@ui/components/LoadingSpinner";
import { EventDetailsModal } from "@ui/components/EventDetailsModal";
@ -57,6 +57,8 @@ export const BookingsPage = () => {
const { data: events = [], isLoading: eventsLoading } = useEventsByTablo(
selectedTabloId !== "all" ? selectedTabloId : null
);
// Fetch all tablo accesses for permissions
const { data: tabloAccess } = useGetAllTabloAccess();
// Filter and search events
const filteredEvents = useMemo(() => {
@ -184,8 +186,17 @@ export const BookingsPage = () => {
navigate(`/planning/create?date=${dateParam}${tabloParam}`);
};
// Check if an event can be edited (admin access required)
const canEditEvent = (event: EventAndTablo) => {
return tabloAccess?.find(
(access) => access.tablo_id === event.tablo_id && access.is_admin
)
? true
: false;
};
const handleEditEvent = (event: EventAndTablo) => {
if (event.event_id && event.tablo_id) {
if (event.event_id && event.tablo_id && canEditEvent(event)) {
navigate(`/planning/${event.tablo_id}/events/${event.event_id}/edit`);
}
};
@ -529,6 +540,7 @@ export const BookingsPage = () => {
setSelectedEvent(null);
}}
onEdit={() => selectedEvent && handleEditEvent(selectedEvent)}
canEdit={selectedEvent ? canEditEvent(selectedEvent) : false}
/>
</main>
</div>

53
ui/src/pages/planning.tsx
View file

@ -52,6 +52,11 @@ export const PlanningPage = () => {
return false;
};
// Check if an event can be edited (same logic as delete - admin access required)
const canEditEvent = (event: EventAndTablo) => {
return canDeleteEvent(event);
};
// Keyboard shortcuts for view switching
useEffect(() => {
const handleKeyPress = (event: KeyboardEvent) => {
@ -380,21 +385,29 @@ export const PlanningPage = () => {
.map((event) => (
<div
key={event.event_id}
className={`text-[10px] px-1.5 py-1 rounded text-white ${event.tablo_color} truncate cursor-pointer hover:opacity-80 group relative leading-tight`}
className={`text-[10px] px-1.5 py-1 rounded text-white ${
event.tablo_color
} truncate group relative leading-tight ${
canEditEvent(event)
? "cursor-pointer hover:opacity-80"
: "cursor-default opacity-75"
}`}
title={`${formatTime(event.start_time)} ${event.title}${
selectedTabloId === "all" && event.tablo_name
? ` - ${event.tablo_name}`
: ""
}`}
}${!canEditEvent(event) ? " (Lecture seule)" : ""}`}
onClick={(e) => {
e.stopPropagation();
navigate({
pathname: "/planning/create",
search:
selectedTabloId === "all"
? `?date=${day.toISOString()}`
: `?date=${day.toISOString()}&tablo_id=${selectedTabloId}`,
});
if (canEditEvent(event)) {
navigate({
pathname: "/planning/create",
search:
selectedTabloId === "all"
? `?date=${day.toISOString()}`
: `?date=${day.toISOString()}&tablo_id=${selectedTabloId}`,
});
}
}}
>
<div className="truncate">
@ -512,7 +525,13 @@ export const PlanningPage = () => {
return (
<div
key={event.event_id}
className={`absolute left-1 right-1 p-0.5 rounded text-white ${event.tablo_color} text-xs overflow-hidden z-10 group cursor-pointer hover:opacity-90`}
className={`absolute left-1 right-1 p-0.5 rounded text-white ${
event.tablo_color
} text-xs overflow-hidden z-10 group ${
canEditEvent(event)
? "cursor-pointer hover:opacity-90"
: "cursor-default opacity-75"
}`}
style={{
top: `${eventOffset}px`,
height: `${eventHeight}px`,
@ -524,9 +543,10 @@ export const PlanningPage = () => {
selectedTabloId === "all" && event.tablo_name
? ` - ${event.tablo_name}`
: ""
}`}
}${!canEditEvent(event) ? " (Lecture seule)" : ""}`}
onClick={(e) => {
e.stopPropagation();
// Read-only events are not clickable
}}
>
<div className="text-[10px] font-medium leading-tight">
@ -623,7 +643,13 @@ export const PlanningPage = () => {
return (
<div
key={event.event_id}
className={`absolute left-2 right-2 p-1 rounded text-white ${event.tablo_color} overflow-hidden z-10 group cursor-pointer hover:opacity-90`}
className={`absolute left-2 right-2 p-1 rounded text-white ${
event.tablo_color
} overflow-hidden z-10 group ${
canEditEvent(event)
? "cursor-pointer hover:opacity-90"
: "cursor-default opacity-75"
}`}
style={{
top: `${eventOffset}px`,
height: `${eventHeight}px`,
@ -635,9 +661,10 @@ export const PlanningPage = () => {
selectedTabloId === "all" && event.tablo_name
? ` - ${event.tablo_name}`
: ""
}`}
}${!canEditEvent(event) ? " (Lecture seule)" : ""}`}
onClick={(e) => {
e.stopPropagation();
// Read-only events are not clickable
}}
>
<div className="text-[10px] font-medium truncate leading-tight">