Added draw methods page

gapidobri · Aug 14, 2024 · c07a46f · c07a46f
1 parent 6d2b557
commit c07a46f
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 26 deletions.
diff --git a/src/lib/api/schemas.gen.ts b/src/lib/api/schemas.gen.ts
@@ -1,5 +1,25 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
+export const $DrawMethod = {
+    properties: {
+        data: {
+            type: 'string'
+        },
+        draw_method_id: {
+            type: 'string'
+        },
+        method: {
+            enum: ['first_n', 'chance'],
+            type: 'string'
+        },
+        name: {
+            type: 'string'
+        }
+    },
+    required: ['draw_method_id', 'name', 'method', 'data'],
+    type: 'object'
+} as const;
+
 export const $ErrorResponse = {
     properties: {
         code: {
@@ -51,6 +71,12 @@ export const $FieldConfig = {
 
 export const $Game = {
     properties: {
+        google_sheet_id: {
+            type: 'string'
+        },
+        google_sheet_tab_name: {
+            type: 'string'
+        },
         id: {
             type: 'string'
         },
@@ -62,6 +88,13 @@ export const $Game = {
     type: 'object'
 } as const;
 
+export const $GetDrawMethodsResponse = {
+    items: {
+        '$ref': '#/definitions/DrawMethod'
+    },
+    type: 'array'
+} as const;
+
 export const $GetGameResponse = {
     '$ref': '#/definitions/Game'
 } as const;
@@ -188,6 +221,9 @@ export const $Prize = {
         id: {
             type: 'string'
         },
+        image_url: {
+            type: 'string'
+        },
         name: {
             type: 'string'
         }
@@ -201,6 +237,9 @@ export const $PublicPrize = {
         description: {
             type: 'string'
         },
+        image_url: {
+            type: 'string'
+        },
         name: {
             type: 'string'
         }
@@ -231,7 +270,7 @@ export const $User = {
             type: 'string'
         }
     },
-    required: ['id', 'game_id', 'email', 'address', 'phone', 'additional_fields'],
+    required: ['id', 'game_id', 'additional_fields'],
     type: 'object'
 } as const;
 

diff --git a/src/lib/api/services.gen.ts b/src/lib/api/services.gen.ts
@@ -1,10 +1,15 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import { createClient, createConfig, type Options } from '@hey-api/client-fetch';
-import type { GetGamesError, GetGamesResponse2, GetGameData, GetGameError, GetGameResponse2, GetParticipationMethodsData, GetParticipationMethodsError, GetParticipationMethodsResponse2, GetPrizesData, GetPrizesError, GetPrizesResponse2, GetUsersData, GetUsersError, GetUsersResponse2, GetUserData, GetUserError, GetUserResponse2, GetWonPrizesData, GetWonPrizesError, GetWonPrizesResponse2 } from './types.gen';
+import type { GetDrawMethodsData, GetDrawMethodsError, GetDrawMethodsResponse2, GetGamesError, GetGamesResponse2, GetGameData, GetGameError, GetGameResponse2, GetParticipationMethodsData, GetParticipationMethodsError, GetParticipationMethodsResponse2, GetPrizesData, GetPrizesError, GetPrizesResponse2, GetUsersData, GetUsersError, GetUsersResponse2, GetUserData, GetUserError, GetUserResponse2, GetWonPrizesData, GetWonPrizesError, GetWonPrizesResponse2 } from './types.gen';
 
 export const client = createClient(createConfig());
 
+export const getDrawMethods = <ThrowOnError extends boolean = false>(options?: Options<GetDrawMethodsData, ThrowOnError>) => { return (options?.client ?? client).get<GetDrawMethodsResponse2, GetDrawMethodsError, ThrowOnError>({
+    ...options,
+    url: '/draw-methods'
+}); };
+
 export const getGames = <ThrowOnError extends boolean = false>(options?: Options<unknown, ThrowOnError>) => { return (options?.client ?? client).get<GetGamesResponse2, GetGamesError, ThrowOnError>({
     ...options,
     url: '/games'

diff --git a/src/lib/api/types.gen.ts b/src/lib/api/types.gen.ts
@@ -1,5 +1,12 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
+export type DrawMethod = {
+    data: string;
+    draw_method_id: string;
+    method: 'first_n' | 'chance';
+    name: string;
+};
+
 export type ErrorResponse = {
     code: string;
     error: string;
@@ -21,10 +28,14 @@ export type FieldConfig = {
 };
 
 export type Game = {
+    google_sheet_id?: string;
+    google_sheet_tab_name?: string;
     id: string;
     name: string;
 };
 
+export type GetDrawMethodsResponse = Array<DrawMethod>;
+
 export type GetGameResponse = Game;
 
 export type GetGamesResponse = Array<Game>;
@@ -72,23 +83,25 @@ export type Prize = {
     description: string;
     gameId: string;
     id: string;
+    image_url?: string;
     name: string;
 };
 
 export type PublicPrize = {
     description: string;
+    image_url?: string;
     name: string;
 };
 
 export type User = {
     additional_fields: {
         [key: string]: unknown;
     };
-    address: string;
-    email: string;
+    address?: string;
+    email?: string;
     game_id: string;
     id: string;
-    phone: string;
+    phone?: string;
 };
 
 export type WonPrize = {
@@ -97,6 +110,17 @@ export type WonPrize = {
     user: User;
 };
 
+export type GetDrawMethodsData = {
+    query?: {
+        gameId?: string;
+        participationMethodId?: string;
+    };
+};
+
+export type GetDrawMethodsResponse2 = GetDrawMethodsResponse;
+
+export type GetDrawMethodsError = ErrorResponse;
+
 export type GetGamesResponse2 = GetGamesResponse;
 
 export type GetGamesError = ErrorResponse;
@@ -164,6 +188,29 @@ export type GetWonPrizesResponse2 = GetWonPrizesResponse;
 export type GetWonPrizesError = ErrorResponse;
 
 export type $OpenApiTs = {
+    '/draw-methods': {
+        get: {
+            req: GetDrawMethodsData;
+            res: {
+                /**
+                 * GetDrawMethodsResponse
+                 */
+                '200': GetDrawMethodsResponse;
+                /**
+                 * ErrorResponse
+                 */
+                '400': ErrorResponse;
+                /**
+                 * ErrorResponse
+                 */
+                '403': ErrorResponse;
+                /**
+                 * ErrorResponse
+                 */
+                '500': ErrorResponse;
+            };
+        };
+    };
     '/games': {
         get: {
             res: {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -65,26 +65,29 @@
 						<House class="h-4 w-4" />
 						Dashboard
 					</NavItem>
-					<NavItem href="/games/{data.selectedGameId}/prizes" active={path === 'prizes'}>
-						<Gift class="h-4 w-4" />
-						Prizes
-					</NavItem>
-					<NavItem href="/games/{data.selectedGameId}/won-prizes" active={path === 'won-prizes'}>
-						<PartyPopper class="h-4 w-4" />
-						Won Prizes
-					</NavItem>
-					<NavItem href="/games/{data.selectedGameId}/users" active={path === 'users'}>
-						<Users class="h-4 w-4" />
-						Users
-					</NavItem>
-					<NavItem href="/games/{data.selectedGameId}/participation-methods" active={path === 'participation-methods'}>
-						<Users class="h-4 w-4" />
-						Participation Methods
-					</NavItem>
-					<NavItem href="/games/{data.selectedGameId}/draw-methods" active={path === 'draw-methods'}>
-						<Users class="h-4 w-4" />
-						Draw Methods
-					</NavItem>
+					{#if data.selectedGameId}
+						<NavItem href="/games/{data.selectedGameId}/prizes" active={path === 'prizes'}>
+							<Gift class="h-4 w-4" />
+							Prizes
+						</NavItem>
+						<NavItem href="/games/{data.selectedGameId}/won-prizes" active={path === 'won-prizes'}>
+							<PartyPopper class="h-4 w-4" />
+							Won Prizes
+						</NavItem>
+						<NavItem href="/games/{data.selectedGameId}/users" active={path === 'users'}>
+							<Users class="h-4 w-4" />
+							Users
+						</NavItem>
+						<NavItem href="/games/{data.selectedGameId}/participation-methods"
+										 active={path === 'participation-methods'}>
+							<Users class="h-4 w-4" />
+							Participation Methods
+						</NavItem>
+						<NavItem href="/games/{data.selectedGameId}/draw-methods" active={path === 'draw-methods'}>
+							<Users class="h-4 w-4" />
+							Draw Methods
+						</NavItem>
+					{/if}
 				</nav>
 			</div>
 		</div>

diff --git a/src/routes/games/[gameId]/draw-methods/+page.server.ts b/src/routes/games/[gameId]/draw-methods/+page.server.ts
@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+import { getDrawMethods } from '$lib/api';
+
+export const load: PageServerLoad = async () => {
+	const res = await getDrawMethods();
+	return { drawMethods: res.data! };
+};
diff --git a/src/routes/games/[gameId]/draw-methods/+page.svelte b/src/routes/games/[gameId]/draw-methods/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Title from '$lib/components/Title.svelte';
+	import DataTable from './DataTable.svelte';
+	import type { PageServerData } from './$types';
+
+	export let data: PageServerData;
+</script>
+
+<Title>Draw Methods</Title>
+
+<DataTable drawMethods={data.drawMethods} />
diff --git a/src/routes/games/[gameId]/draw-methods/DataTable.svelte b/src/routes/games/[gameId]/draw-methods/DataTable.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { createTable, Subscribe, Render } from 'svelte-headless-table';
+	import { readable } from 'svelte/store';
+	import * as Table from '$lib/components/ui/table';
+	import type { DrawMethod } from '$lib/api';
+
+
+	export let drawMethods: DrawMethod[];
+
+	const table = createTable(readable(drawMethods));
+
+	const columns = table.createColumns([
+		table.column({
+			accessor: 'name',
+			header: 'Name',
+		}),
+		table.column({
+			accessor: 'method',
+			header: 'Method',
+			cell: ({ value }) => {
+				if (!value) return '';
+				return value.split('_').map((v) => v.charAt(0).toUpperCase() + v.substring(1)).join(' ');
+			},
+		}),
+		table.column({
+			accessor: 'data',
+			header: 'Data',
+		}),
+	]);
+
+	const { headerRows, pageRows, tableAttrs, tableBodyAttrs } = table.createViewModel(columns);
+</script>
+
+<div class="rounded-md border">
+	<Table.Root {...$tableAttrs}>
+		<Table.Header>
+			{#each $headerRows as headerRow}
+				<Subscribe rowAttrs={headerRow.attrs()}>
+					<Table.Row>
+						{#each headerRow.cells as cell (cell.id)}
+							<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()}>
+								<Table.Head {...attrs}>
+									<Render of={cell.render()} />
+								</Table.Head>
+							</Subscribe>
+						{/each}
+					</Table.Row>
+				</Subscribe>
+			{/each}
+		</Table.Header>
+		<Table.Body {...$tableBodyAttrs}>
+			{#each $pageRows as row (row.id)}
+				<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+					<Table.Row {...rowAttrs}>
+						{#each row.cells as cell (cell.id)}
+							<Subscribe attrs={cell.attrs()} let:attrs>
+								<Table.Cell {...attrs}>
+									<Render of={cell.render()} />
+								</Table.Cell>
+							</Subscribe>
+						{/each}
+					</Table.Row>
+				</Subscribe>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
diff --git a/src/routes/games/[gameId]/participation-methods/EditParticipationMethod.svelte b/src/routes/games/[gameId]/participation-methods/EditParticipationMethod.svelte
@@ -15,7 +15,7 @@
 	<Sheet.Trigger asChild let:builder>
 		<Button builders={[builder]} variant="outline">Edit</Button>
 	</Sheet.Trigger>
-	<Sheet.Content>
+	<Sheet.Content class="overflow-y-scroll">
 		<Sheet.Header>
 			<Sheet.Title>Edit {participationMethod.name}</Sheet.Title>
 		</Sheet.Header>
@@ -32,6 +32,10 @@
 				<span class="text-lg font-semibold">User Fields</span>
 				<Fields bind:fields={participationMethod.fields.user} />
 			</div>
+			<div class="flex flex-col gap-2">
+				<span class="text-lg font-semibold">Participation Fields</span>
+				<Fields bind:fields={participationMethod.fields.participation} />
+			</div>
 		</form>
 		<Sheet.Footer>
 			<Sheet.Close asChild let:builder>