feat: user dropdown

src/lib/apis/user/list-users-dropdown.ts

@@ -0,0 +1,36 @@
+import { config } from '$lib/public-config';
+import type { ListResponse } from '../types';
+import type { ListUserQuery } from './list-users';
+
+export interface UserDropdown {
+	id: number;
+	name: string;
+	avatar_img: string;
+}
+
+export async function listUsersDropdown(
+	variables: undefined | ListUserQuery = { offset: 0, limit: 10 }
+): Promise<ListResponse<UserDropdown>> {
+	const operationName = 'listUserDropdown';
+
+	const operationsDoc = `
+    query ${operationName}($name: String, $limit: Int = 1000, $offset: Int = 0) {
+      ipscan_ipscan_user(where: {name: {_ilike: $name}}, limit: $limit, offset: $offset, order_by: {name: asc}) {
+        id
+        avatar_img
+        name
+			}
+		}
+  `;
+
+	return fetch(config.graphqlEndpoint, {
+		method: 'POST',
+		body: JSON.stringify({
+			query: operationsDoc,
+			variables: variables,
+			operationName: operationName
+		})
+	})
+		.then((response) => response.json())
+		.then((response) => ({ items: response.data.ipscan_ipscan_user }));
+}

src/routes/(sidebar)/crud/products/+page.ts

@@ -3,9 +3,11 @@ import type { ListWithPagingResponse } from '$lib/apis/types.js';
 import * as _ from 'underscore';
 
 import { type ProductGetResponseData } from '$lib/apis/product/get-product';
+import type { UserDropdown } from '$lib/apis/user/list-users-dropdown';
 
 export interface ProductPageData {
 	product: ProductGetResponseData;
+	users: UserDropdown[];
 	statuses: string[];
 	selected_statuses?: string[];
 	genres: string[];

src/routes/(sidebar)/crud/products/Product.svelte

@@ -181,15 +181,19 @@
 						value={data.product.description}
 						textareaProps={{ name: 'about', disabled: isViewMode }}
 					/>
-					<Input
+					<Select
 						name="Creator"
-						placeholder="e.g. Robert Perez"
-						class="w-22 mb-2 me-4 mt-3"
-						value={data.product.owner?.name}
-						inputProps={{ name: 'creator', disabled: isViewMode }}
+						class="w-22 mb-2 me-4 mt-3 w-full"
+						items={data.users.map((u) => ({ name: u.name, value: u.id.toString() }))}
+						selected={data.users.find((u) => u.id === data.product.owner.id)?.id?.toString() || ''}
+						selectProps={{
+							name: 'creator',
+							disabled: isViewMode
+						}}
 					/>
 					<ImageInput
 						name="Overview pictures/media"
+						class="w-22 mb-2 me-4 mt-3"
 						selectedFiles={data.product.metadata?.previews?.map((p) => ({ src: p }))}
 						inputProps={{ name: 'previews', disabled: isViewMode }}
 					/>

src/routes/(sidebar)/crud/products/[id]/+page.ts

@@ -2,18 +2,22 @@ import { getProductById } from '$lib/apis/product/get-product';
 import { listProductAttributes } from '$lib/apis/product/list-product-attributes.js';
 import _ from 'underscore';
 import type { ProductPageData } from '../+page';
+import { listUser } from '$lib/apis/user/list-users';
+import { listUsersDropdown } from '$lib/apis/user/list-users-dropdown';
 
 export async function load(pageLoadEvent): Promise<ProductPageData> {
-	const [product, productAttributes] = await Promise.all([
+	const [product, productAttributes, users] = await Promise.all([
 		getProductById(parseInt(pageLoadEvent.params.id)),
-		listProductAttributes()
+		listProductAttributes(),
+		listUsersDropdown({ limit: 1000, offset: 0 })
 	]);
 
 	const nameToValues = _.groupBy(productAttributes.items, 'name');
 	const selectedNameToValues = _.groupBy(product.attributes, 'name');
 
 	return {
 		product,
+		users: users.items,
 		statuses: nameToValues['status']?.map((v) => v.value),
 		selected_statuses: selectedNameToValues['status']?.map((v) => v.value),
 		genres: nameToValues['genre']?.map((v) => v.value),

src/routes/(sidebar)/crud/products/create/+page.ts

@@ -1,9 +1,13 @@
 import { listProductAttributes } from '$lib/apis/product/list-product-attributes';
 import _ from 'underscore';
 import type { ProductPageData } from '../+page';
+import { listUsersDropdown } from '$lib/apis/user/list-users-dropdown';
 
 export async function load(): Promise<ProductPageData> {
-	const [productAttributes] = await Promise.all([listProductAttributes()]);
+	const [productAttributes, users] = await Promise.all([
+		listProductAttributes(),
+		listUsersDropdown({ limit: 1000, offset: 0 })
+	]);
 
 	const nameToValues = _.groupBy(productAttributes.items, 'name');
 
@@ -22,6 +26,7 @@ export async function load(): Promise<ProductPageData> {
 			attributes: [],
 			metadata: undefined
 		},
+		users: users.items,
 		statuses: nameToValues['status']?.map((v) => v.value),
 		genres: nameToValues['genre']?.map((v) => v.value),
 		player_supports: nameToValues['player support']?.map((v) => v.value),