use new route for dash and project

This commit is contained in:
peaklabs-dev
2024-11-22 15:28:06 +01:00
parent 3e2e24dcca
commit e776302a25
4 changed files with 36 additions and 47 deletions

View File

@@ -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');

View File

@@ -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]);
}
}

View File

@@ -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"
href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_name' => data_get($project, 'default_environment', 'production')]) }}">
<span class="p-2 font-bold">+ Add Resource</span>
</a>
@if($project->environments->first())
<a class="hover:underline"
href="{{ route('project.resource.create', [
'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>

View File

@@ -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">
<div class="box group" @click="gotoProject(item)">
<template x-for="project in filteredProjects" :key="project.uuid">
<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-description ">
<div x-text="item.description"></div>
<div class="box-title" x-text="project.name"></div>
<div class="box-description">
<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),
filterAndSort(items) {
get filteredProjects() {
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 (item.name?.toLowerCase().includes(searchLower) ||
item.description?.toLowerCase().includes(searchLower))
}).sort(sortFn);
},
get allFilteredItems() {
return [
this.projects,
].flatMap((items) => this.filterAndSort(items));
return projects.filter(project => {
return (project.name?.toLowerCase().includes(searchLower) ||
project.description?.toLowerCase().includes(searchLower))
});
}
}
}
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>