diff --git a/packages/client/src/controllers/AdminBar.tsx b/packages/client/src/controllers/AdminBar.tsx index 176e0d4b3..1770b6763 100644 --- a/packages/client/src/controllers/AdminBar.tsx +++ b/packages/client/src/controllers/AdminBar.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React from "react"; import { useDispatch } from "react-redux"; import { LinkItem, AdminBar } from "@eisbuk/ui"; @@ -13,7 +13,7 @@ import SendBookingEmails from "@/controllers/SendBookingEmails"; import { signOut } from "@/store/actions/authOperations"; const AdminHeader: React.FC<{ className?: string }> = ({ className = "" }) => { - const dispatch = useDispatch() + const dispatch = useDispatch(); const additionalAdminContent = (
@@ -23,13 +23,15 @@ const AdminHeader: React.FC<{ className?: string }> = ({ className = "" }) => {
); - return dispatch(signOut)} - /> -} + return ( + dispatch(signOut)} + /> + ); +}; const adminLinks: LinkItem[] = [ { @@ -54,5 +56,4 @@ const adminLinks: LinkItem[] = [ }, ]; -export default AdminHeader - +export default AdminHeader; diff --git a/packages/client/src/pages/attendance/views/ByDay.tsx b/packages/client/src/pages/attendance/views/ByDay.tsx index ed82a2801..f7f0ac4af 100644 --- a/packages/client/src/pages/attendance/views/ByDay.tsx +++ b/packages/client/src/pages/attendance/views/ByDay.tsx @@ -2,8 +2,8 @@ import React from "react"; import { useSelector } from "react-redux"; import { Link } from "react-router-dom"; -import { Button } from "@eisbuk/ui" -import { Printer } from "@eisbuk/svg" +import { Button } from "@eisbuk/ui"; +import { Printer } from "@eisbuk/svg"; import AttendanceCard from "@/controllers/AttendanceCard"; @@ -24,12 +24,13 @@ const AttendanceByDayView: React.FC = () => { /> ))} -
+
diff --git a/packages/client/src/pages/slots/index.tsx b/packages/client/src/pages/slots/index.tsx index 94ee5c865..e5dec0029 100644 --- a/packages/client/src/pages/slots/index.tsx +++ b/packages/client/src/pages/slots/index.tsx @@ -26,7 +26,7 @@ import { LocalStore, SlotsWeek } from "@/types/store"; import { getOrganization } from "@/lib/getters"; -import AdminBar from "@/controllers/AdminBar" +import AdminBar from "@/controllers/AdminBar"; import { NotificationsContainer } from "@/features/notifications/components/index"; import SlotOperationButtons, { CopyButton, @@ -118,13 +118,13 @@ const SlotsPage: React.FC = () => { weekToPaste && weekToPaste.weekStart.toMillis() === date.toMillis(); const handleSlotClick = ({ slot, selected }: { slot: SlotInterface; selected: boolean }) => - () => { - if (selected) { - dispatch(deleteSlotFromClipboard(slot.id)); - } else { - dispatch(addSlotToClipboard(slot)); - } - }; + () => { + if (selected) { + dispatch(deleteSlotFromClipboard(slot.id)); + } else { + dispatch(addSlotToClipboard(slot)); + } + }; return (
@@ -190,7 +190,13 @@ const SlotsPage: React.FC = () => { } + additionalContent={ + canEdit ? ( + additionalButtons + ) : ( +
+ ) + } stickyOffset="top-[141px] md:top-[272px]" >
@@ -226,9 +232,7 @@ const SlotsPage: React.FC = () => { })} -
+
{canEdit ? ( { className="h-11 text-gray-600" aria-label={t(SlotsAria.EnableEdit)} > - Edit + Edit{" "} + + + )}
diff --git a/packages/ui/src/CalendarNav/CalendarNav.stories.tsx b/packages/ui/src/CalendarNav/CalendarNav.stories.tsx index e406a049b..e28dbba34 100644 --- a/packages/ui/src/CalendarNav/CalendarNav.stories.tsx +++ b/packages/ui/src/CalendarNav/CalendarNav.stories.tsx @@ -2,11 +2,11 @@ import React, { useState } from "react"; import { ComponentMeta } from "@storybook/react"; import { DateTime } from "luxon"; -import { Printer, PlusCircle, Copy, XCircle, Pencil } from "@eisbuk/svg" +import { Printer, PlusCircle, Copy } from "@eisbuk/svg"; import CalendarNav from "./CalendarNav"; import EmptySpace from "../EmptySpace"; -import Button, { ButtonColor } from "../Button" +import Button, { ButtonColor } from "../Button"; export default { title: "Calendar Nav", @@ -53,8 +53,8 @@ const countdown = ( ); export const WithAdditionalContent = (): JSX.Element => { - const [canEdit, setCanEdit] = useState(false) - const toggleEdit = () => setCanEdit(!canEdit) + const [canEdit, setCanEdit] = useState(false); + const toggleEdit = () => setCanEdit(!canEdit); return ( <> @@ -89,7 +89,11 @@ export const WithAdditionalContent = (): JSX.Element => { @@ -97,7 +101,7 @@ export const WithAdditionalContent = (): JSX.Element => { } /> - ) + ); }; export const WithCountdown = (): JSX.Element => ( @@ -107,4 +111,3 @@ export const WithCountdown = (): JSX.Element => ( additionalContent={countdown} /> ); - diff --git a/packages/ui/src/SlotCard/SlotCard.stories.tsx b/packages/ui/src/SlotCard/SlotCard.stories.tsx index 05efead36..f01a3492c 100644 --- a/packages/ui/src/SlotCard/SlotCard.stories.tsx +++ b/packages/ui/src/SlotCard/SlotCard.stories.tsx @@ -54,8 +54,8 @@ export const PackedWithContent = (): JSX.Element => ( ); export const ButtonsToggle = (): JSX.Element => { - const [canEdit, setCanEdit] = React.useState(false) - const toggleEdit = () => setCanEdit(!canEdit) + const [canEdit, setCanEdit] = React.useState(false); + const toggleEdit = () => setCanEdit(!canEdit); return ( <> @@ -69,14 +69,15 @@ export const ButtonsToggle = (): JSX.Element => { - ) + ); }; export const Selected = (): JSX.Element => { diff --git a/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx b/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx index d51f55d7d..4583d31df 100644 --- a/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx +++ b/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx @@ -89,7 +89,7 @@ export const WithButtons = (): JSX.Element => ( ); export const PrototypeSlotsPage = (): JSX.Element => { - const [canEdit, setCanEdit] = React.useState(false) + const [canEdit, setCanEdit] = React.useState(false); return (
@@ -99,19 +99,17 @@ export const PrototypeSlotsPage = (): JSX.Element => { } + additionalContent={ + canEdit ? additionalContent :
+ } >
))} -
+
{canEdit ? ( -
+
@@ -134,6 +132,6 @@ export const PrototypeSlotsPage = (): JSX.Element => { )}
-
- ) +
+ ); };