diff --git a/shop/app/admin/users/page.tsx b/shop/app/admin/users/page.tsx index cd5f40b..41bcbe8 100644 --- a/shop/app/admin/users/page.tsx +++ b/shop/app/admin/users/page.tsx @@ -8,6 +8,8 @@ import { Suspense } from 'react' export const dynamic = 'force-dynamic' export default async function AdminUsersPage() { + const companies = await getCompanies() + return (
@@ -21,7 +23,7 @@ export default async function AdminUsersPage() {

- +
}> diff --git a/shop/components/admin/user-dialog.tsx b/shop/components/admin/user-dialog.tsx index 36053b8..837095e 100644 --- a/shop/components/admin/user-dialog.tsx +++ b/shop/components/admin/user-dialog.tsx @@ -1,6 +1,4 @@ -'use client' - -import { useState } from 'react' +import { useState, useRef, useEffect } from 'react' import { useRouter } from 'next/navigation' import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' @@ -25,36 +23,53 @@ import { import { Input } from '@/components/ui/input' import { Button } from '@/components/ui/button' import { createUser } from '@/lib/actions/users' -import { Plus } from 'lucide-react' +import { Plus, Building2 } from 'lucide-react' const userSchema = z.object({ email: z.string().email('Ungültige E-Mail-Adresse'), - password: z.string().min(6, 'Passwort muss mindestens 6 Zeichen lang sein').optional().or(z.literal('')), role: z.enum(['admin', 'partner']), + company_id: z.string().optional().or(z.literal('')), }) type UserFormValues = z.infer -export function UserDialog() { +interface UserDialogProps { + companies: { id: string; name: string }[] +} + +export function UserDialog({ companies }: UserDialogProps) { const [open, setOpen] = useState(false) + const [dropdownOpen, setDropdownOpen] = useState(false) + const [search, setSearch] = useState('') + const dropdownRef = useRef(null) const router = useRouter() + useEffect(() => { + function handleClickOutside(e: MouseEvent) { + if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { + setDropdownOpen(false) + setSearch('') + } + } + document.addEventListener('mousedown', handleClickOutside) + return () => document.removeEventListener('mousedown', handleClickOutside) + }, []) + const form = useForm({ resolver: zodResolver(userSchema) as any, defaultValues: { email: '', - password: '', role: 'partner', + company_id: '', }, }) async function onSubmit(values: UserFormValues) { try { - // If password is empty string, omit it const payload = { email: values.email, role: values.role, - ...(values.password ? { password: values.password } : {}) + company_id: values.company_id || undefined, } await createUser(payload) setOpen(false) @@ -66,7 +81,14 @@ export function UserDialog() { } return ( - + { + setOpen(val) + if (!val) { + form.reset() + setDropdownOpen(false) + setSearch('') + } + }}> + + {dropdownOpen && ( +
+
+ setSearch(e.target.value)} + className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50" + autoFocus + /> +
+
+ + {companies + .filter((c) => c.name.toLowerCase().includes(search.toLowerCase())) + .map((c) => ( + + ))} +
+
+ )} + + + + + ) + }} />