use new route for dash and project

app/Livewire/Dashboard.php

@@ -8,6 +8,7 @@ use App\Models\Project;
 use App\Models\Server;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Facades\Redirect;
 use Livewire\Component;
 
 class Dashboard extends Component
@@ -49,6 +50,11 @@ class Dashboard extends Component
         ])->sortBy('id')->groupBy('server_name')->toArray();
     }
 
+    public function navigateToProject($projectUuid)
+    {
+        return Redirect::route('project.show', ['project_uuid' => $projectUuid]);
+    }
+
     public function render()
     {
         return view('livewire.dashboard');

app/Livewire/Project/Index.php

@@ -5,6 +5,7 @@ namespace App\Livewire\Project;
 use App\Models\PrivateKey;
 use App\Models\Project;
 use App\Models\Server;
+use Illuminate\Support\Facades\Redirect;
 use Livewire\Component;
 
 class Index extends Component
@@ -30,4 +31,9 @@ class Index extends Component
     {
         return view('livewire.project.index');
     }
+
+    public function navigateToProject($projectUuid)
+    {
+        return Redirect::route('project.show', ['project_uuid' => $projectUuid]);
+    }
 }

resources/views/livewire/dashboard.blade.php

@@ -25,7 +25,7 @@
             <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
                 @foreach ($projects as $project)
                     <div class="gap-2 border border-transparent cursor-pointer box group"
-                        onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
+                        wire:click="navigateToProject('{{ $project->uuid }}')">
                         <div class="flex flex-1 mx-6">
                             <div class="flex flex-col justify-center flex-1">
                                 <div class="box-title">{{ $project->name }}</div>
@@ -34,10 +34,15 @@
                                 </div>
                             </div>
                             <div class="flex items-center justify-center gap-2 text-xs font-bold">
-                                <a class="hover:underline"
+                                @if($project->environments->first())
-                                    href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_name' => data_get($project, 'default_environment', 'production')]) }}">
+                                    <a class="hover:underline"
-                                    <span class="p-2 font-bold">+ Add Resource</span>
+                                        href="{{ route('project.resource.create', [
-                                </a>
+                                            'project_uuid' => $project->uuid,
+                                            'environment_uuid' => $project->environments->first()->uuid
+                                        ]) }}">
+                                        <span class="p-2 font-bold">+ Add Resource</span>
+                                    </a>
+                                @endif
                                 <a class="hover:underline"
                                     href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
                                     Settings
@@ -167,15 +172,4 @@
             </div>
         </section>
     @endif
-
-
-    <script>
-        function gotoProject(uuid, environment) {
-            if (environment) {
-                window.location.href = '/project/' + uuid + '/' + environment;
-            } else {
-                window.location.href = '/project/' + uuid;
-            }
-        }
-    </script>
 </div>

resources/views/livewire/project/index.blade.php

@@ -12,21 +12,21 @@
     <div x-data="searchComponent()">
         <x-forms.input placeholder="Search for name, description..." x-model="search" id="null" />
         <div class="grid grid-cols-2 gap-4 pt-4">
-            <template x-if="allFilteredItems.length === 0">
+            <template x-if="filteredProjects.length === 0">
                 <div>No project found with the search term "<span x-text="search"></span>".</div>
             </template>
 
-            <template x-for="item in allFilteredItems" :key="item.uuid">
+            <template x-for="project in filteredProjects" :key="project.uuid">
-                <div class="box group" @click="gotoProject(item)">
+                <div class="box group cursor-pointer" @click="$wire.navigateToProject(project.uuid)">
                     <div class="flex flex-col justify-center flex-1 mx-6">
-                        <div class="box-title" x-text="item.name"></div>
+                        <div class="box-title" x-text="project.name"></div>
-                        <div class="box-description ">
+                        <div class="box-description">
-                            <div x-text="item.description"></div>
+                            <div x-text="project.description"></div>
                         </div>
                     </div>
                     <div class="flex items-center justify-center gap-2 pt-4 pb-2 mr-4 text-xs lg:py-0 lg:justify-normal">
                         <a class="mx-4 font-bold hover:underline"
-                           :href="item.settingsRoute">
+                           :href="project.settingsRoute">
                             Settings
                         </a>
                     </div>
@@ -36,38 +36,21 @@
     </div>
 
     <script>
-        function sortFn(a, b) {
-            return a.name.localeCompare(b.name)
-        }
-
         function searchComponent() {
             return {
                 search: '',
-                projects: @js($projects),
+                get filteredProjects() {
-                filterAndSort(items) {
+                    const projects = @js($projects);
                     if (this.search === '') {
-                        return Object.values(items).sort(sortFn);
+                        return projects;
                     }
                     const searchLower = this.search.toLowerCase();
-                    return Object.values(items).filter(item => {
+                    return projects.filter(project => {
-                        return (item.name?.toLowerCase().includes(searchLower) ||
+                        return (project.name?.toLowerCase().includes(searchLower) ||
-                            item.description?.toLowerCase().includes(searchLower))
+                            project.description?.toLowerCase().includes(searchLower))
-                    }).sort(sortFn);
+                    });
-                },
-                get allFilteredItems() {
-                    return [
-                        this.projects,
-                    ].flatMap((items) => this.filterAndSort(items));
                 }
             }
         }
-
-        function gotoProject(item) {
-            if (item.default_environment) {
-                window.location.href = '/project/' + item.uuid + '/' + item.default_environment;
-            } else {
-                window.location.href = '/project/' + item.uuid;
-            }
-        }
     </script>
 </div>