Skip to content

Commit

Permalink
Feat/make this work (#22)
Browse files Browse the repository at this point in the history 
* fix: refresh block participants list after registration

* fix: can't sign up above the capacity

* feat: export at every subsection

* feat: copy admin link

* feat: implement new designs

* feat: lint and format

* fix: route pathname value

* feat: lint

* feat: add shadow to block

* feat: add Block to knip ignore

* feat: format code
  • Loading branch information
@dawidlinek
dawidlinek committed Sep 9, 2024
1 parent ec82df4 commit dd843c8
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 66 deletions.
2 changes: 1 addition & 1 deletion @types/nextjs-routes.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ declare module "nextjs-routes" {
| StaticRoute<"/">
| DynamicRoute<"/event/[slug]/preview", { "slug": string }>
| DynamicRoute<"/event/[slug]/settings", { "slug": string }>
| StaticRoute<"/object">;
| StaticRoute<"/object">
| DynamicRoute<"/rejestracja/[participationSlug]", { "participationSlug": string }>
| DynamicRoute<"/rejestracja/[participationSlug]/[blockId]/[reservationId]", { "participationSlug": string; "blockId": string; "reservationId": string }>
| DynamicRoute<"/rejestracja/[participationSlug]/[blockId]/formularz", { "participationSlug": string; "blockId": string }>;
Expand Down
1 change: 1 addition & 0 deletions knip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const config = {
"src/lib/types.ts",
"postcss.config.mjs",
"lint-staged.config.mjs",
"src/components/Block.tsx",
],
// sharp is used in nextjs image optimization
// slick carousel is used scss files
Expand Down
10 changes: 10 additions & 0 deletions src/pages/event/[slug]/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,16 @@ const Preview = ({
</ol>

<div className="ml-auto flex gap-4">
<Button
variant="ghost"
onClick={() =>
window.open(
`https://kmiyeqcynkremenbffvl.supabase.co/functions/v1/generate_excel?section_uuid=${blockId}`,
)
}
>
Export
</Button>
<BlockDialog
eventId={eventId}
blockId={blockId}
Expand Down
47 changes: 42 additions & 5 deletions src/pages/event/[slug]/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { z } from "zod";
import { Layout } from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { DateTimePicker } from "@/components/ui/datetime-picker-demo";
import {
Form,
FormControl,
Expand Down Expand Up @@ -109,8 +108,8 @@ export default function Dashboard({
<TabsList>
<TabsTrigger value="settings">Ogólne</TabsTrigger>
<TabsTrigger value="sharing">Udostępnianie</TabsTrigger>
<TabsTrigger value="customisation">Personalizacja</TabsTrigger>
<TabsTrigger value="other">Inne</TabsTrigger>
{/* <TabsTrigger value="customisation">Personalizacja</TabsTrigger> */}
{/* <TabsTrigger value="other">Inne</TabsTrigger> */}
</TabsList>
<TabsContent value="settings">
<Form {...form}>
Expand Down Expand Up @@ -303,8 +302,46 @@ export default function Dashboard({
</Button>
</div>
</div>
<hr />
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="email">Link administratora</Label>
<div className="flex w-full max-w-sm items-center space-x-2">
{isClient ? (
<Input
type="url"
disabled={true}
className="cursor-copy"
value={`${window.location.origin}${route({
pathname: "/event/[slug]/preview",
query: {
slug: encodeURIComponent(event.data?.ownersSlug ?? ""),
},
})}`}
/>
) : null}
<Button
onClick={() => {
void navigator.clipboard
.writeText(
`${window.location.origin}${route({
pathname: "/event/[slug]/preview",
query: {
slug: encodeURIComponent(
event.data?.ownersSlug ?? "",
),
},
})}`,
)
.then(() => {
toast("Link skopiowany do schowka");
});
}}
>
Skopiuj
</Button>
</div>
</div>
{/* <hr /> */}
{/* <div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="email">Data i godz. otwarcia zapisów</Label>
<DateTimePicker />
</div>
Expand Down Expand Up @@ -332,7 +369,7 @@ export default function Dashboard({
id="people-limit-per-sector"
placeholder="2"
/>
</div>
</div> */}
</div>
</TabsContent>
<TabsContent value="customisation">
Expand Down
6 changes: 3 additions & 3 deletions src/pages/object.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function Event() {
</h1>
{selectedObject === null ? (
<>
<div className="flex w-11/12 items-center justify-center rounded bg-solvroblue p-3 text-center text-xs font-bold">
<div className="bg-solvroblue flex w-11/12 items-center justify-center rounded p-3 text-center text-xs font-bold">
<div className="text-center">Wysiwyg</div>
</div>

Expand Down Expand Up @@ -65,7 +65,7 @@ export default function Event() {
</>
) : (
<>
<div className="flex w-11/12 items-center justify-center rounded bg-solvroblue p-3 text-center text-xs font-bold">
<div className="bg-solvroblue flex w-11/12 items-center justify-center rounded p-3 text-center text-xs font-bold">
<div className="flex-shrink-0 pl-2">
<div
onClick={() => {
Expand Down Expand Up @@ -133,7 +133,7 @@ export default function Event() {
<p className="text-xs">Odklinij, aby zobaczyć mniej</p>
</div>
<button
className="absolute bottom-0 left-0 h-10 w-full rounded-t-none bg-solvroblue text-black"
className="bg-solvroblue absolute bottom-0 left-0 h-10 w-full rounded-t-none text-black"
onClick={(e) => {
e.stopPropagation();
}}
Expand Down
1 change: 1 addition & 0 deletions src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ const Submit = ({
reservationId: data.reservationId,
},
});
router.reload();
},
});

Expand Down
156 changes: 99 additions & 57 deletions src/pages/rejestracja/[participationSlug]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ import Link from "next/link";
import type { GetServerSidePropsContext } from "nextjs-routes";
import { parseAsString, useQueryState } from "nuqs";
import * as React from "react";
import { useState } from "react";
import { FaArrowLeft } from "react-icons/fa6";
import { z } from "zod";

import { BlockCard, blockCardVariants } from "@/components/Block";
import { buttonVariants } from "@/components/ui/button";
import {
Card,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { supabase } from "@/lib/supabase";
import { createSSRClient } from "@/lib/supabaseSSR";
import { useUserEvent } from "@/lib/useUserEvent";
Expand Down Expand Up @@ -79,6 +85,11 @@ export default function Building({
);

const parentId = breadcrumbs?.[breadcrumbs.length - 2]?.blockId;
const [expandedCard, setExpandedCard] = useState<string | null>(null);

const toggleCard = (cardId: string) => {
setExpandedCard(expandedCard === cardId ? null : cardId);
};

return (
<div className="flex min-h-screen flex-col items-center">
Expand Down Expand Up @@ -110,70 +121,101 @@ export default function Building({
>
{currentBlocks?.map((block) =>
typeof block.capacity === "number" ? (
<div
className={blockCardVariants({
className: "flex h-auto w-auto min-w-60 flex-col px-4",
})}
<Card
onClick={() => {
toggleCard(block.blockId);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
toggleCard(block.blockId);
}
}}
tabIndex={0}
key={block.blockId}
className="flex aspect-square flex-shrink-0 cursor-pointer flex-col items-center justify-center rounded-lg border-black transition-all duration-300 ease-in-out hover:shadow-md"
>
<div className="mt-12 w-full text-center">
<h2 className="text-xl font-bold">{block.name}</h2>
{typeof block.capacity === "number" ? (
<p className="text-sm text-gray-500">
{block.reservations.length}/{block.capacity}
</p>
) : null}
</div>
<ol className="mx-2 mb-4 mt-4 list-inside list-disc">
{block.reservations.map((reservation) => (
<li key={reservation.reservationId}>
{reservation.firstName} {reservation.lastName}
</li>
))}
</ol>
<Link
href={{
pathname:
"/rejestracja/[participationSlug]/[blockId]/formularz",
query: {
participationSlug: participantsSlug,
blockId: block.blockId,
},
}}
className={buttonVariants({
className: "mb-4 mt-auto w-full self-end justify-self-end",
})}
onClick={(e) => {
e.stopPropagation();
}}
>
Zapisz się
</Link>
</div>
<CardHeader className="text-center">
<CardTitle className="text-base">{block.name}</CardTitle>
<p className="text-sm">
{" "}
{typeof block.capacity === "number" ? (
<p className="text-sm text-gray-500">
Miejsca: {block.reservations.length}/{block.capacity}
</p>
) : null}
</p>
<CardDescription className="text-center text-xxs">
<span>
{" "}
{expandedCard !== block.blockId
? "Kliknij w sekcję, aby wyświetlić szczegóły"
: "Odklinij, aby wyświetlić mniej szczegółów"}{" "}
</span>

<div
className={` absolute inset-0 flex flex-col items-center justify-center bg-white ${
expandedCard === block.blockId
? "translate-y-0 opacity-100"
: "translate-y-full opacity-0"
}
${
expandedCard === block.blockId
? "relative"
: "absolute"
}`}
>
<div className="cursor-pointer text-center">
<ul className="mb-2 max-h-20 list-inside list-decimal overflow-y-auto p-2 text-xs">
{block.reservations.map((reservation) => (
<li key={reservation.reservationId}>
{reservation.firstName} {reservation.lastName}
</li>
))}
</ul>
</div>

{block.reservations.length < block.capacity ? (
<Link
href={{
pathname:
"/rejestracja/[participationSlug]/[blockId]/formularz",
query: {
participationSlug: participantsSlug,
blockId: block.blockId,
},
}}
className={buttonVariants({
className:
"mt-auto w-full self-end justify-self-end",
})}
onClick={(e) => {
e.stopPropagation();
}}
>
Zapisz się
</Link>
) : (
<p className="text-center">Brak miejsc</p>
)}
</div>
</CardDescription>
</CardHeader>
</Card>
) : (
<BlockCard
className="flex h-44 w-44 flex-col"
<Card
onClick={() => {
void setBlockId(block.blockId);
}}
key={block.blockId}
className="flex aspect-square flex-shrink-0 cursor-pointer flex-col items-center justify-center rounded-lg border-black transition-all duration-300 ease-in-out hover:shadow-md"
>
<div className="text-center">
<h2 className="text-xl font-bold">{block.name}</h2>
{typeof block.capacity === "number" ? (
<p className="text-sm text-gray-500">
Liczba miejsc: {block.capacity}
</p>
) : null}
</div>
<ul className="list-inside list-disc text-sm">
{block.reservations.map((reservation) => (
<li key={reservation.reservationId}>
{reservation.firstName} {reservation.lastName}
</li>
))}
</ul>
</BlockCard>
<CardHeader className="text-center">
<CardTitle className="text-base">{block.name}</CardTitle>
<CardDescription className="text-xxs">
Kliknij w sekcję, aby wyświetlić szczegóły
</CardDescription>
</CardHeader>
</Card>
),
)}
</motion.div>
Expand Down

0 comments on commit dd843c8

Please sign in to comment.