(ui): allow server owner to be selected during creation

nexgenlabs · Nov 2, 2024 · 79e4cbe · 79e4cbe
1 parent bf087b0
commit 79e4cbe
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 28 deletions.
diff --git a/app/Http/Controllers/ServersController.php b/app/Http/Controllers/ServersController.php
@@ -4,6 +4,7 @@
 
 use Inertia\Inertia;
 use Inertia\Response;
+use Influx\Models\User;
 use Influx\Models\Server;
 use Illuminate\Http\Request;
 
@@ -26,6 +27,16 @@ public function index(Request $request): Response
         ]);
     }
 
+    /**
+     * Display the table holding all servers.
+     */
+    public function new(Request $request): Response
+    {
+        return Inertia::render('Servers/New', [
+            'users' => User::all(),
+        ]);
+    }
+
     /**
      * Store a new server request.
      */
@@ -34,13 +45,17 @@ public function store(Request $request): Response
         $validated = $request->validate([
             'name' => ['required', 'max:50', 'unique:servers,name'],
             'address' => ['required', 'url'],
-            'owner_id' => ['nullable', 'exists:users,id'],
+            'owner_id' => ['nullable'],
             'public' => ['required'],
         ]);
 
         $validated['public'] = $validated['public'] === 'on' ? true : false;
 
-        $server= Server::create($validated);
+        if ($request['owner_id'] != 0 && !User::where('id', $request['owner_id'])->exists()) {
+            throw new \Exception('This user does not exist.');
+        };
+
+        $server = Server::create($validated);
 
         return Inertia::render('Servers/Edit', [
             'server' => $server,
@@ -56,8 +71,13 @@ public function store(Request $request): Response
      */
     public function view(Request $request, int $id): Response
     {
+        $users = User::all();
+        $server = Server::findOrFail($id);
+
         return Inertia::render('Servers/Edit', [
-            'server' => Server::findOrFail($id),
+            'users' => $users,
+            'server' => $server,
+            'owner' => $users->where('id', $server->owner_id)->first(),
         ]);
     }
 

diff --git a/resources/js/Pages/Servers/Edit.tsx b/resources/js/Pages/Servers/Edit.tsx
@@ -1,10 +1,10 @@
 import Card from '@/Components/Card';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
-import { PageProps, Server } from '@/types';
+import { PageProps, Server, User } from '@/types';
 import Avatar from 'boring-avatars';
 import ServerForm from './ServerForm';
 
-export default function Edit({ server }: PageProps<{ server: Server }>) {
+export default function Edit({ server, owner }: PageProps<{ server: Server, owner?: User }>) {
     return (
         <Authenticated title={'Edit server: ' + server.name}>
             <Card
@@ -23,7 +23,7 @@ export default function Edit({ server }: PageProps<{ server: Server }>) {
                             />
                         </div>
                     </div>
-                    <ServerForm server={server} />
+                    <ServerForm server={server} owner={owner} />
                 </div>
             </Card>
         </Authenticated>

diff --git a/resources/js/Pages/Servers/Index.tsx b/resources/js/Pages/Servers/Index.tsx
@@ -6,15 +6,9 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { Link } from '@inertiajs/react';
 import Avatar from 'boring-avatars';
 import { useState } from 'react';
-import New from './New';
 
 export default function Index({ servers }: PageProps<{ servers: Server[] }>) {
     const [filter, setFilter] = useState<string>('');
-    const [showForm, setShowForm] = useState(false);
-
-    if (showForm) {
-        return <New />;
-    };
 
     return (
         <Authenticated title={'All Servers'}>
@@ -37,12 +31,12 @@ export default function Index({ servers }: PageProps<{ servers: Server[] }>) {
                         required
                     />
                 </div>
-                <div className={'ml-auto'}>
-                    <PrimaryButton onClick={() => setShowForm(true)}>New Server</PrimaryButton>
-                </div>
+                <Link href={'/servers/new'} className={'ml-auto'}>
+                    <PrimaryButton>New Server</PrimaryButton>
+                </Link>
             </div>
             <table className="w-full text-left text-sm text-gray-400">
-                <Head columns={['Name', 'Position', 'Status', 'Action']} />
+                <Head columns={['Name', 'Owner', 'Visibility', 'Status', 'Action']} />
                 <Body>
                     {servers
                         .filter((x) => x.name.startsWith(filter))
@@ -70,7 +64,14 @@ export default function Index({ servers }: PageProps<{ servers: Server[] }>) {
                                     </div>
                                 </th>
                                 <td className="px-6 py-4">
-                                    {server.public ? 'Public' : 'Private'}
+                                    {server.ownerId ?? 'None'}
+                                </td>
+                                <td className="px-6 py-4">
+                                    {server.public ? (
+                                        <span className={'text-green-700'}>Public</span>
+                                    ) : (
+                                        <span className={'text-orange-700'}>Private</span>
+                                    )}
                                 </td>
                                 <td className="px-6 py-4">
                                     <div className="flex items-center">

diff --git a/resources/js/Pages/Servers/New.tsx b/resources/js/Pages/Servers/New.tsx
@@ -2,8 +2,9 @@ import Card from '@/Components/Card';
 import ServerForm from './ServerForm';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
 import { ServerStackIcon } from '@heroicons/react/24/outline';
+import { PageProps, User } from '@/types';
 
-export default function New() {
+export default function New({ users }: PageProps<{ users: User[] }>) {
     return (
         <Authenticated title={'New Server'}>
             <Card
@@ -16,7 +17,7 @@ export default function New() {
                             <ServerStackIcon className={'h-24 text-green-600'} />
                         </div>
                     </div>
-                    <ServerForm />
+                    <ServerForm users={users} />
                 </div>
             </Card>
         </Authenticated>

diff --git a/resources/js/Pages/Servers/ServerForm.tsx b/resources/js/Pages/Servers/ServerForm.tsx
@@ -1,18 +1,18 @@
 import PrimaryButton from '@/Components/PrimaryButton';
-import { Server } from '@/types';
+import { Server, User } from '@/types';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
-export default function ServerForm({ server }: { server?: Server }) {
+export default function ServerForm({ server, users, owner }: { server?: Server, users?: User[], owner?: User }) {
     const [values, setValues] = useState({
         name: server?.name ?? '',
         address: server?.address ?? '',
-        owner_id: server?.ownerId ?? null,
+        owner_id: server?.ownerId ?? 0,
         public: server?.public ?? false,
     });
 
     function handleChange(e: {
-        target: { id: string; value: string | boolean };
+        target: { id: string; value: string | boolean | number };
     }) {
         const key = e.target.id;
         const value = e.target.value;
@@ -25,7 +25,7 @@ export default function ServerForm({ server }: { server?: Server }) {
     function handleSubmit(e: { preventDefault: () => void }) {
         e.preventDefault();
 
-        if (server!.id) {
+        if (server?.id) {
             router.put(`/servers/${server!.id}`, values);
         } else {
             router.post('/servers/new', values);
@@ -70,14 +70,24 @@ export default function ServerForm({ server }: { server?: Server }) {
             </div>
             <div className="grid md:grid-cols-2 md:gap-6">
                 <div className="group relative z-0 mb-5 w-full">
-                    <input
-                        type="text"
+                    <select
                         name="owner_id"
                         id="owner_id"
                         defaultValue={server?.ownerId}
                         className="peer block w-full appearance-none border-0 border-b-2 border-gray-300 bg-transparent px-0 py-2.5 text-sm text-gray-900 focus:border-green-600 focus:outline-none focus:ring-0 dark:border-gray-600 dark:text-white dark:focus:border-green-500"
-                        onChange={handleChange}
-                    />
+                        onChange={(e) => setValues({ ...values, owner_id: parseInt(e.currentTarget.value) })}
+                    >
+                        {server && owner ? (
+                            <option value={server.ownerId}>
+                                {owner?.name} ({owner?.email})
+                            </option>
+                        ) : (
+                            <option value={0}></option>
+                        )}
+                        {users?.filter(x => x.id !== owner?.id).map((user) => (
+                            <option key={user.id} value={user.id}>{user.name} ({user.email})</option>
+                        ))}
+                    </select>
                     <label
                         htmlFor="name"
                         className="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:font-medium peer-focus:text-green-600 rtl:peer-focus:translate-x-1/4 dark:text-gray-400 peer-focus:dark:text-green-500"

diff --git a/routes/web.php b/routes/web.php
@@ -32,6 +32,7 @@
     Route::prefix('/servers')->group(function () {
         Route::get('/', [ServersController::class, 'index'])->name('servers.index');
 
+        Route::get('/new', [ServersController::class, 'new'])->name('servers.new');
         Route::post('/new', [ServersController::class, 'store'])->name('servers.store');
 
         Route::get('/{server:id}', [ServersController::class, 'view'])->name('servers.view');