server selector wip

app/Http/Controllers/EnvironmentController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Enums\ServerStatus;
 use App\Models\Environment;
 use Illuminate\Http\Request;
 
@@ -10,9 +11,13 @@ class EnvironmentController extends Controller
     public function show(Request $request)
     {
         $id = $request->route('environment');
+        $environment = Environment::with('application')->findOrFail($id);
 
         return inertia('environments/Show', [
-            'environment' => Environment::with('application')->findOrFail($id),
+            'environment' => $environment,
+            'servers' => inertia()->optional(function () use ($environment) {
+                return $environment->application?->organisation?->servers->where('status', ServerStatus::ACTIVE)?->values() ?? [];
+            }),
         ]);
     }
 }

resources/js/components/ServerSelector.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Deferred, router } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import { Card } from './ui/card';
+import { LoaderCircleIcon } from 'lucide-vue-next';
+
+const props = defineProps({
+    servers: {
+        type: Array,
+        required: false,
+    },
+});
+
+const isOpen = ref(false);
+
+watch(isOpen, () => {
+    if (isOpen.value && props.servers === undefined) {
+        router.reload({
+            only: ['servers'],
+            async: true,
+        });
+    }
+});
+</script>
+<template>
+    <Dialog v-model:open="isOpen">
+        <DialogTrigger class="block w-full">
+            <slot name="trigger" />
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Servers</DialogTitle>
+                <DialogDescription>Select an active server to install the gateway on.</DialogDescription>
+                <div class="my-2 max-h-80 overflow-y-auto">
+                    <Deferred data="servers">
+                        <template #fallback>
+                            <div class="flex justify-center py-4">
+                                <LoaderCircleIcon class="text-muted-foreground size-6 animate-spin" />
+                            </div>
+                        </template>
+                        <Card
+                            v-for="(server, serverIndex) in servers"
+                            :key="`serverPicker-${server.id}`"
+                            :data-index="serverIndex"
+                            class="flex gap-4 p-2"
+                            :class="{
+                                'rounded-b-none': serverIndex !== servers.length - 1,
+                                'rounded-t-none': serverIndex !== 0,
+                                'border-b-0': serverIndex !== servers.length - 1,
+                            }"
+                        >
+                            <div>{{ server.name }}</div>
+                            <div></div>
+                        </Card>
+                        <Card v-if="servers.length === 0" class="p-2 text-sm text-muted-foreground"> No servers available </Card>
+                    </Deferred>
+                </div>
+            </DialogHeader>
+            <DialogFooter> Dismiss </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>

resources/js/pages/environments/Show.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import ServiceCard from '@/components/environments/ServiceCard.vue';
+import ServerSelector from '@/components/ServerSelector.vue';
 import { Card } from '@/components/ui/card';
-import ServiceCategory from '@/enums/ServiceCategory';
-import ServiceStatus from '@/enums/ServiceStatus';
-import ServiceType from '@/enums/ServiceType';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { Head } from '@inertiajs/vue3';
-import { AppWindowIcon, DatabaseIcon, DatabaseZap, DoorOpenIcon, PlusIcon } from 'lucide-vue-next';
+import { PlusIcon } from 'lucide-vue-next';
 
 const props = defineProps({
     environment: {
         type: Object,
         required: true,
     },
+    servers: {
+        type: Array,
+        required: false,
+    }
 });
 </script>
 
@@ -48,16 +49,20 @@ const props = defineProps({
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
             <Card class="pattern-graph-paper grid grid-cols-3 gap-6 p-6">
                 <div class="space-y-2">
-                    <Card class="flex select-none items-center gap-2 bg-card/30 p-4 backdrop-blur-sm text-sm group">
-                        <PlusIcon class="size-4 opacity-50" />
-                        <span class="opacity-50 group-hover:opacity-100 transition">Install a gateway</span>
-                    </Card>
+                    <ServerSelector :servers="servers">
+                        <template #trigger>
+                            <Card class="group flex select-none items-center gap-2 bg-card/30 p-4 text-sm backdrop-blur-sm">
+                                <PlusIcon class="size-4 opacity-50" />
+                                <span class="opacity-50 transition group-hover:opacity-100">Install a gateway</span>
+                            </Card>
+                        </template>
+                    </ServerSelector>
                     <!-- <ServiceCard :icon="DoorOpenIcon" :service-type="ServiceType.CADDY" :service-category="ServiceCategory.GATEWAY" :status="ServiceStatus.NOT_INSTALLED" /> -->
                 </div>
                 <div class="space-y-2">
-                    <Card class="flex select-none items-center gap-2 bg-card/30 p-4 backdrop-blur-sm text-sm group">
+                    <Card class="group flex select-none items-center gap-2 bg-card/30 p-4 text-sm backdrop-blur-sm">
                         <PlusIcon class="size-4 opacity-50" />
-                        <span class="opacity-50 group-hover:opacity-100 transition">Install your application on a server</span>
+                        <span class="opacity-50 transition group-hover:opacity-100">Install your application on a server</span>
                     </Card>
                     <!-- <ServiceCard
                         :icon="AppWindowIcon"
@@ -65,17 +70,17 @@ const props = defineProps({
                         :service-category="ServiceCategory.APPLICATION"
                         :status="ServiceStatus.NOT_INSTALLED"
                     /> -->
-                </div> 
+                </div>
                 <div class="space-y-2">
                     <!-- <ServiceCard :icon="DatabaseIcon" :service-type="ServiceType.POSTGRES" :service-category="ServiceCategory.DATABASE" :status="ServiceStatus.NOT_INSTALLED" /> -->
                     <!-- <ServiceCard :icon="DatabaseZap" :service-type="ServiceType.REDIS" :service-category="ServiceCategory.CACHE" :status="ServiceStatus.NOT_INSTALLED" /> -->
-                    <Card class="flex select-none items-center gap-2 bg-card/30 p-4 backdrop-blur-sm text-sm group">
+                    <Card class="group flex select-none items-center gap-2 bg-card/30 p-4 text-sm backdrop-blur-sm">
                         <PlusIcon class="size-4 opacity-50" />
-                        <span class="opacity-50 group-hover:opacity-100 transition">Add a database</span>
+                        <span class="opacity-50 transition group-hover:opacity-100">Add a database</span>
                     </Card>
-                    <Card class="flex select-none items-center gap-2 bg-card/30 p-4 backdrop-blur-sm text-sm group">
+                    <Card class="group flex select-none items-center gap-2 bg-card/30 p-4 text-sm backdrop-blur-sm">
                         <PlusIcon class="size-4 opacity-50" />
-                        <span class="opacity-50 group-hover:opacity-100 transition">Add cache</span>
+                        <span class="opacity-50 transition group-hover:opacity-100">Add cache</span>
                     </Card>
                 </div>
             </Card>