(ui): add server creation/view/edit, add ui alerts

nexgenlabs · Nov 2, 2024 · 416352c · 416352c
1 parent edd6641
commit 416352c
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 6 deletions.
diff --git a/app/Http/Controllers/ServersController.php b/app/Http/Controllers/ServersController.php
@@ -25,4 +25,64 @@ public function index(Request $request): Response
             'servers' => Server::all(),
         ]);
     }
+
+    /**
+     * Store a new server request.
+     */
+    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'],
+            'public' => ['required'],
+        ]);
+
+        $validated['public'] = $validated['public'] === 'on' ? true : false;
+
+        $server= Server::create($validated);
+
+        return Inertia::render('Servers/Edit', [
+            'server' => $server,
+            'alert' => [
+                'type' => 'success',
+                'message' => 'Your new server has been created.',
+            ],
+        ]);
+    }
+
+    /**
+     * View a server already on the system.
+     */
+    public function view(Request $request, int $id): Response
+    {
+        return Inertia::render('Servers/Edit', [
+            'server' => Server::findOrFail($id),
+        ]);
+    }
+
+    /**
+     * Store a new server request.
+     */
+    public function update(Request $request, int $id): Response
+    {
+        $validated = $request->validate([
+            'name' => ['required', 'max:50'],
+            'address' => ['required', 'url'],
+            'owner_id' => ['nullable', 'exists:users,id'],
+            'public' => ['required'],
+        ]);
+
+        $validated['public'] = $validated['public'] === 'on' ? true : false;
+
+        $server = Server::findOrFail($id)->forceFill($validated)->saveOrFail();
+
+        return Inertia::render('Servers/Edit', [
+            'server' => $server,
+            'alert' => [
+                'type' => 'success',
+                'message' => 'Server details have been changed.',
+            ],
+        ]);
+    }
 }
diff --git a/app/Models/Server.php b/app/Models/Server.php
@@ -20,9 +20,9 @@ class Server extends Model
      * Rules to validate when modifying data.
      */
     public static array $validationRules = [
-        'owner_id' => 'required|int',
+        'owner_id' => 'nullable|int|exists:users,id',
         'public' => 'nullable|bool',
-        'name' => 'required|string|min:3|max:30',
+        'name' => 'required|string|min:3|max:30|unique:servers,name',
         'address' => 'required|string', // /[A-Za-z]+://[A-Za-z0-9]+\\.[A-Za-z][A-Za-z][A-Za-z]:[0-9]+/i
     ];
 }
diff --git a/database/migrations/2024_10_21_153409_create_servers_table.php b/database/migrations/2024_10_21_153409_create_servers_table.php
@@ -13,7 +13,7 @@ public function up(): void
     {
         Schema::create('servers', function (Blueprint $table) {
             $table->id();
-            $table->unsignedInteger('owner_id');
+            $table->unsignedInteger('owner_id')->nullable();
             $table->boolean('public')->default(false);
             $table->string('name');
             $table->string('address');

diff --git a/resources/js/Components/Alert.tsx b/resources/js/Components/Alert.tsx
@@ -0,0 +1,47 @@
+import colors from 'tailwindcss/colors';
+
+export type AlertType = 'success' | 'info' | 'warning' | 'danger';
+
+interface Props {
+    message: string;
+    type: AlertType;
+}
+
+function getAlertStyle({ type }: { type: AlertType }): string {
+    let color: string = colors.white;
+
+    switch (type) {
+        case 'success':
+            color = colors.green[500];
+            break;
+        case 'info':
+            color = colors.blue[500];
+            break;
+        case 'warning':
+            color = colors.orange[500];
+            break;
+        case 'danger':
+            color = colors.red[500];
+            break;
+    }
+
+    return color
+}
+
+export default function Alert({ message, type }: Props) {
+    const color = getAlertStyle({ type });
+
+
+    return (
+        <div className={'absolute bottom-4 right-4'}>
+            <div
+                style={{ borderColor: color, color: color }}
+                className="flex items-center py-3 px-4 text-sm border rounded-lg bg-zinc-800">
+                <div>
+                    <span className="font-bold px-2 py-1 text-xs bg-white/10 rounded-full uppercase mr-1">{type}</span>
+                    <span className={'text-gray-400 font-normal text-sm'}>{message}</span>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -1,3 +1,4 @@
+import Alert from '@/Components/Alert';
 import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';
@@ -12,13 +13,15 @@ export default function Authenticated({
     children,
 }: PropsWithChildren<{ header?: ReactNode; title?: string }>) {
     const user = usePage().props.auth.user;
+    const alert = usePage().props.alert;
 
     const [showingNavigationDropdown, setShowingNavigationDropdown] =
         useState(false);
 
     return (
         <div className="min-h-screen bg-black font-semibold">
             <Head title={title ?? '404'} />
+            {alert && <Alert type={alert.type} message={alert.message} />}
             <nav className="border-b border-gray-700 bg-zinc-950">
                 <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                     <div className="flex h-16 justify-between">

diff --git a/resources/js/Pages/Servers/Edit.tsx b/resources/js/Pages/Servers/Edit.tsx
@@ -0,0 +1,31 @@
+import Card from '@/Components/Card';
+import Authenticated from '@/Layouts/AuthenticatedLayout';
+import { PageProps, Server } from '@/types';
+import Avatar from 'boring-avatars';
+import ServerForm from './ServerForm';
+
+export default function Edit({ server }: PageProps<{ server: Server }>) {
+    return (
+        <Authenticated title={'Edit server: ' + server.name}>
+            <Card
+                header={'Edit Server'}
+                description={
+                    'Update server details or remove the server from the system.'
+                }
+            >
+                <div className={'grid gap-6 lg:grid-cols-3'}>
+                    <div className={'grid items-center justify-center'}>
+                        <div>
+                            <Avatar
+                                name={server.name}
+                                className={'h-24'}
+                                variant={'beam'}
+                            />
+                        </div>
+                    </div>
+                    <ServerForm server={server} />
+                </div>
+            </Card>
+        </Authenticated>
+    );
+}
diff --git a/resources/js/Pages/Servers/New.tsx b/resources/js/Pages/Servers/New.tsx
@@ -1,7 +1,7 @@
 import Card from '@/Components/Card';
+import ServerForm from './ServerForm';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
 import { ServerStackIcon } from '@heroicons/react/24/outline';
-import ServerForm from './ServerForm';
 
 export default function New() {
     return (

diff --git a/resources/js/Pages/Servers/ServerForm.tsx b/resources/js/Pages/Servers/ServerForm.tsx
@@ -7,6 +7,8 @@ export default function ServerForm({ server }: { server?: Server }) {
     const [values, setValues] = useState({
         name: server?.name ?? '',
         address: server?.address ?? '',
+        owner_id: server?.ownerId ?? null,
+        public: server?.public ?? false,
     });
 
     function handleChange(e: {
@@ -74,9 +76,7 @@ export default function ServerForm({ server }: { server?: Server }) {
                         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"
-                        placeholder=" "
                         onChange={handleChange}
-                        required
                     />
                     <label
                         htmlFor="name"

diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
@@ -1,3 +1,5 @@
+import { AlertType } from "@/Components/Alert";
+
 export interface User {
     id: number;
     name: string;
@@ -14,10 +16,16 @@ export interface Server {
     public: boolean;
 }
 
+export interface Alert {
+    type: AlertType;
+    message: string;
+}
+
 export type PageProps<
     T extends Record<string, unknown> = Record<string, unknown>,
 > = T & {
     auth: {
         user: User;
     };
+    alert?: Alert;
 };
diff --git a/routes/web.php b/routes/web.php
@@ -31,6 +31,11 @@
 
     Route::prefix('/servers')->group(function () {
         Route::get('/', [ServersController::class, 'index'])->name('servers.index');
+
+        Route::post('/new', [ServersController::class, 'store'])->name('servers.store');
+
+        Route::get('/{server:id}', [ServersController::class, 'view'])->name('servers.view');
+        Route::put('/{server:id}', [ServersController::class, 'update'])->name('servers.update');
     });
 
     Route::prefix('/profile')->group(function () {