Feat/make this work (#22)

* 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
Solvro · Sep 9, 2024 · dd843c8 · dd843c8
1 parent ec82df4
commit dd843c8
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 66 deletions.
diff --git a/@types/nextjs-routes.d.ts b/@types/nextjs-routes.d.ts
@@ -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 }>;

diff --git a/knip.ts b/knip.ts
@@ -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

diff --git a/src/pages/event/[slug]/preview.tsx b/src/pages/event/[slug]/preview.tsx
@@ -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}

diff --git a/src/pages/event/[slug]/settings.tsx b/src/pages/event/[slug]/settings.tsx
@@ -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,
@@ -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}>
@@ -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>
@@ -332,7 +369,7 @@ export default function Dashboard({
                 id="people-limit-per-sector"
                 placeholder="2"
               />
-            </div>
+            </div> */}
           </div>
         </TabsContent>
         <TabsContent value="customisation">

diff --git a/src/pages/object.tsx b/src/pages/object.tsx
@@ -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>
 
@@ -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={() => {
@@ -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();
                     }}

diff --git a/src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx b/src/pages/rejestracja/[participationSlug]/[blockId]/formularz.tsx
@@ -66,6 +66,7 @@ const Submit = ({
           reservationId: data.reservationId,
         },
       });
+      router.reload();
     },
   });
 

diff --git a/src/pages/rejestracja/[participationSlug]/index.tsx b/src/pages/rejestracja/[participationSlug]/index.tsx
@@ -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";
@@ -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">
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,6 +66,7 @@ const Submit = ({ @@
               reservationId: data.reservationId,
             },
           });
+          router.reload();
         },
       });
@@ Expand Down @@