Skip to content

Commit

Permalink
better navigation + ticket dropdown
Browse files Browse the repository at this point in the history
Co-Authored-By: Bloxs <[email protected]>
  • Loading branch information
quick007 and Blocksnmore committed Feb 17, 2024
1 parent a080d7a commit 7ef69c1
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 55 deletions.
4 changes: 4 additions & 0 deletions fresh.gen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ import * as $events_editing_settings from "./islands/events/editing/settings.tsx
import * as $events_editing_showtimeSelector from "./islands/events/editing/showtimeSelector.tsx";
import * as $events_editing_showtimesettings from "./islands/events/editing/showtimesettings.tsx";
import * as $events_editing_ticketSettings from "./islands/events/editing/ticketSettings.tsx";
import * as $events_list_exportTicketData from "./islands/events/list/exportTicketData.tsx";
import * as $events_list_filters from "./islands/events/list/filters.tsx";
import * as $events_list_ticketDropdown from "./islands/events/list/ticketDropdown.tsx";
import * as $events_scanning from "./islands/events/scanning.tsx";
import * as $events_teams_filters from "./islands/events/teams/filters.tsx";
import * as $events_teams_invite from "./islands/events/teams/invite.tsx";
Expand Down Expand Up @@ -186,7 +188,9 @@ const manifest = {
$events_editing_showtimesettings,
"./islands/events/editing/ticketSettings.tsx":
$events_editing_ticketSettings,
"./islands/events/list/exportTicketData.tsx": $events_list_exportTicketData,
"./islands/events/list/filters.tsx": $events_list_filters,
"./islands/events/list/ticketDropdown.tsx": $events_list_ticketDropdown,
"./islands/events/scanning.tsx": $events_scanning,
"./islands/events/teams/filters.tsx": $events_teams_filters,
"./islands/events/teams/invite.tsx": $events_teams_invite,
Expand Down
4 changes: 3 additions & 1 deletion islands/components/pickers/dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default function Dropdown({
options,
children,
className,
dropdownClassName,
isOpen,
}: {
options: {
Expand All @@ -18,6 +19,7 @@ export default function Dropdown({
}[];
children: ComponentChild;
className?: string;
dropdownClassName?: string;
isOpen?: Signal<boolean>;
}) {
const open = isOpen || useSignal(false);
Expand All @@ -36,7 +38,7 @@ export default function Dropdown({
<div
className={`${
open.value ? "block" : "hidden"
} absolute p-2 bg-white border rounded-md shadow-xl grid gap-2 top-10 select-none transition z-50 grow`}
} absolute p-2 bg-white border rounded-md shadow-xl grid gap-2 top-10 select-none transition z-50 grow ${dropdownClassName}`}
>
{options.map((option) => {
const btn = (
Expand Down
33 changes: 27 additions & 6 deletions islands/components/pieces/navDropDown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,27 @@ import UserCircle from "$tabler/user-circle.tsx";
import Logout from "$tabler/logout-2.tsx";
import { useSignal } from "@preact/signals";

const NavbarDropDown = ({ user }: { user: User }) => {
const NavbarDropDown = ({
user,
translucent,
}: {
user: User;
translucent?: boolean;
}) => {
const open = useSignal(false);

const openStyle = translucent
? "bg-gray-200/75 backdrop-blur border-transparent border"
: "bg-gray-200";
const closedStyle = translucent
? "hover:bg-gray-200/75 bg-black/20 backdrop-blur border-gray-300/20 hover:border-transparent border"
: "hover:bg-gray-200";

return (
<Dropdown
isOpen={open}
className="ml-auto mr-3 md:mr-2 z-30 focus:outline-none my-auto"
dropdownClassName={translucent ? "bg-white/90 backdrop-blur" : undefined}
options={[
{
content: (
Expand Down Expand Up @@ -68,14 +82,21 @@ const NavbarDropDown = ({ user }: { user: User }) => {
>
<button
class={`${
open.value ? "bg-gray-200" : "hover:bg-gray-200"
} flex p-1 md:px-3 md:py-1.5 items-center transition md:rounded-md rounded-full`}
open.value ? openStyle : closedStyle
} flex p-1 md:px-3 md:py-1.5 items-center transition md:rounded-md rounded-full group focus:outline-none`}
>
<p class="font-medium hidden md:block max-w-sm truncate">
<p
class={`font-medium hidden md:block max-w-sm truncate transition ${
translucent &&
(open.value
? "text-gray-900"
: "text-gray-100 group-hover:text-gray-900")
}`}
>
{user.email.split("@")[0]}
</p>
<Selector class="size-5 ml-1 hidden md:block text-gray-600" />
<UserCircle class="size-6 block md:hidden" />
<Selector class={`size-5 ml-1 hidden md:block ${(translucent && !open.value) ? "text-gray-300 group-hover:text-gray-600 " : "text-gray-600 "}`} />
<UserCircle class={`size-6 block md:hidden ${(translucent && !open.value) ? "text-gray-300 group-hover:text-gray-900 " : "text-gray-900 "}`} />
</button>
</Dropdown>
);
Expand Down
31 changes: 31 additions & 0 deletions islands/events/list/exportTicketData.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Field, Ticket } from "@/utils/db/kv.types.ts";

export default function ExportTicketData({
tickets,
fields,
}: {
tickets: [string, Ticket][];
fields: Field[];
}) {
const exportTickets = (showtime?: string) => {
const filteredTickets = tickets.filter(([showtimeID]) =>
showtime == undefined || showtimeID === showtime
);

// Use “ in replacement for " to avoid breaking csv

const data = [
`"Showtime ID","Ticket ID","Email","Last Name","First Name","Acquired Tickets","Ticket Uses"${
fields.length > 0
? `,"${fields.map((f) => `"${f.name.replace(/"/g, "“")}"`).join(",")}`
: ""
}`,
];
};

return (
<>
<button type="button">Exeporte zee tix</button>
</>
);
}
68 changes: 68 additions & 0 deletions islands/events/list/ticketDropdown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import Dropdown from "@/islands/components/pickers/dropdown.tsx";
import DotsVertical from "$tabler/dots-vertical.tsx";
import { Ticket, Field } from "@/utils/db/kv.types.ts";

export default function TicketDropdown({
ticketID,
key,
value,
fields,
}: {
ticketID: string;
key: string;
value: Ticket;
fields: Field[];
}) {
return (
<Dropdown
options={[
{
content: "See Ticket",
link: `./tickets/${ticketID}?s=${key}`,
},
{
content: "Delete Ticket",
},
{
content: "View Additional Responses",
onClick: () => {
const formattedObject: {
type: string;
prompt: string;
value: unknown;
}[] = [];

for (const field of fields) {
const object: {
type: string;
prompt: string;
value: unknown;
} = {
type: field.type,
prompt: field.name,
value: undefined,
};

for (const response of value.fieldData) {
if (response.id === field.id) {
object.value = response.value;
break;
}
}

formattedObject.push(object);
}

console.log(formattedObject);
},
},
]}
>
<div
className={`w-8 grid place-items-center border h-8 rounded-md hover:bg-gray-200 transition`}
>
<DotsVertical class="h-5 w-5" />
</div>
</Dropdown>
);
}
46 changes: 18 additions & 28 deletions routes/events/[id]/(no-layout)/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import CTA from "@/components/buttons/cta.tsx";
import { useEffect } from "preact/hooks";
import ImagekitImage from "@/components/imagekitimg.tsx";
import { ClientDate } from "@/islands/events/viewing/dates.tsx";
import NavbarDropDown from "@/islands/components/pieces/navDropDown.tsx";

export default defineRoute((req, ctx: RouteContext<void, EventContext>) => {
const { event, eventID, user } = ctx.state.data;
Expand Down Expand Up @@ -152,7 +153,24 @@ export default defineRoute((req, ctx: RouteContext<void, EventContext>) => {
/>
{/* <meta name="theme-color" content="#DC6843" /> */}
</Head>

<div className="flex flex-col min-h-screen">
{user && (
<>
<div class="flex absolute top-0 h-14 z-30 w-full items-center justify-between px-3 py-1">
{user.role != undefined && user.role <= 2 && (
<a
href={`/events/${eventID}/editing`}
class="rounded-md bg-black/20 border border-gray-300/20 backdrop-blur font-medium text-white px-1.5 text-sm flex items-center"
>
Edit Event
</a>
)}

<NavbarDropDown user={user.data} translucent={true} />
</div>
</>
)}
<div class="flex flex-col">
{event.banner.path ? (
<ImagekitImage
Expand All @@ -171,34 +189,6 @@ export default defineRoute((req, ctx: RouteContext<void, EventContext>) => {
alt="Placeholder Image"
/>
)}

{user &&
(user.role != undefined ? (
user.role <= 2 && (
<>
<a
href="/events/organizing"
class="group pl-0.5 rounded-md bg-black/20 border border-gray-300/20 backdrop-blur font-medium text-white pr-1.5 absolute top-3 left-3 text-sm flex items-center"
>
<Left class="size-4 mr-1 group transition group-hover:-translate-x-0.5" />{" "}
All Events
</a>
<a
href={`/events/${eventID}/editing`}
class="rounded-md bg-black/20 border border-gray-300/20 backdrop-blur font-medium text-white px-1.5 absolute top-3 right-3 text-sm flex items-center"
>
Edit Event
</a>
</>
)
) : (
<a
href={`/events/attending`}
class="rounded-md bg-black/20 border border-gray-300/20 backdrop-blur font-medium text-white px-1.5 absolute top-3 right-3 text-sm flex items-center"
>
Your tickets
</a>
))}
</div>
<div className="max-w-2xl mx-auto w-full mb-36 md:mb-16 mt-4 md:-mt-28 flex flex-col px-4 static grow">
<Header />
Expand Down
8 changes: 8 additions & 0 deletions routes/events/[id]/(no-layout)/tickets/[tixid].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Footer from "@/components/layout/footer.tsx";
import TicketComponent from "../../../../../islands/components/pieces/ticket.tsx";
import CTA from "@/components/buttons/cta.tsx";
import TicketActions from "@/islands/events/viewing/ticketActions.tsx";
import NavbarDropDown from "@/islands/components/pieces/navDropDown.tsx";

export default defineRoute(
async (req, ctx: RouteContext<void, EventContext>) => {
Expand Down Expand Up @@ -90,6 +91,13 @@ export default defineRoute(
</Head>

<div className="flex flex-col min-h-screen ">
{user && (
<>
<div class="flex absolute top-0 h-14 z-30 w-full items-center justify-end px-3 py-1">
<NavbarDropDown user={user.data} />
</div>
</>
)}
<main className="px-4 max-w-screen-md w-full mx-auto flex flex-col gap-8 grow mb-10 items-center mt-4 md:mt-16 print:justify-center print:gap-12">
<h1 class="font-extrabold text-2xl text-center print:block">
{ticket.value.firstName}'s Ticket
Expand Down
36 changes: 16 additions & 20 deletions routes/events/[id]/tickets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import {
EventContext,
} from "@/routes/events/[id]/_layout.tsx";
import EventHeader from "@/components/layout/eventEditNavbar.tsx";
import Dropdown from "@/islands/components/pickers/dropdown.tsx";
import DotsVertical from "$tabler/dots-vertical.tsx";
import TicketsFilters from "@/islands/tickets/filters.tsx";
import { signal } from "@preact/signals";
import ShowtimeSelector from "@/islands/events/editing/showtimeSelector.tsx";
import { kv, Ticket } from "@/utils/db/kv.ts";
import { fmtDate } from "@/utils/dates.ts";
import { NotFound } from "@/components/svgs/not-found.tsx";
import TicketDropdown from "@/islands/events/list/ticketDropdown.tsx";
import ExportTicketData from "@/islands/events/list/exportTicketData.tsx";

export default defineRoute(
async (req, ctx: RouteContext<void, EventContext>) => {
Expand Down Expand Up @@ -59,6 +59,13 @@ export default defineRoute(
defaultShowTime={showTimeID}
showTimes={event.showTimes}
/>
<ExportTicketData
tickets={tickets.map(
({ key, value }) =>
[(key[3] as string).split("_")[2], value] as [string, Ticket],
)}
fields={event.additionalFields}
/>
<TicketsFilters query={query} sort={sort} />

<h2 class="font-medium text-sm mb-0.5 mt-8">Tickets</h2>
Expand Down Expand Up @@ -94,28 +101,17 @@ export default defineRoute(
<p class="text-xs text-gray-700">{value.userEmail}</p>
</div>

<Dropdown
options={[
{
content: "See Ticket",
link: `./tickets/${ticketID}?s=${key[2] as string}`,
},
{
content: "Delete Ticket",
},
]}
>
<div
className={`w-8 grid place-items-center border h-8 rounded-md hover:bg-gray-200 transition`}
>
<DotsVertical class="h-5 w-5" />
</div>
</Dropdown>
<TicketDropdown
key={key[2] as string}
value={value}
ticketID={ticketID}
fields={event.additionalFields}
/>
</div>
<div class="flex gap-2 flex-wrap">
{/* need some */}
<div class="rounded-md border text-sm font-semibold px-1 text-gray-700 bg-gray-100">
2/2 tickets
{value.tickets} tickets
</div>
{showTimeID === "0" && (
<div class="rounded-md border text-sm font-semibold px-1 text-gray-700 bg-gray-100">
Expand Down

0 comments on commit 7ef69c1

Please sign in to comment.