feat(project): enhance project index with resource creation capabilities

- Added logic to determine if the user can create resources for each project and generate the corresponding route for adding resources based on the project's first environment.
- Updated the project index view to display the new resource creation option alongside existing project settings.
- Adjusted various views to include a margin-top adjustment for better layout consistency.
This commit is contained in:
Andras Bacsai 2025-10-07 17:17:31 +02:00
parent 618378714a
commit 201e30e849
9 changed files with 29 additions and 41 deletions

View file

@ -21,6 +21,14 @@ public function mount()
$this->projects = Project::ownedByCurrentTeam()->get()->map(function ($project) {
$project->settingsRoute = route('project.edit', ['project_uuid' => $project->uuid]);
$project->canUpdate = auth()->user()->can('update', $project);
$project->canCreateResource = auth()->user()->can('createAnyResource');
$firstEnvironment = $project->environments->first();
$project->addResourceRoute = $firstEnvironment
? route('project.resource.create', [
'project_uuid' => $project->uuid,
'environment_uuid' => $firstEnvironment->uuid,
])
: null;
return $project;
});

View file

@ -14,7 +14,7 @@
</div>
@endif
<section>
<section class="-mt-2">
<h3 class="pb-2">Projects</h3>
@if ($projects->count() > 0)
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">

View file

@ -13,7 +13,7 @@
@endif
</div>
<div class="subtitle">Network endpoints to deploy your resources.</div>
<div class="grid gap-4 lg:grid-cols-2">
<div class="grid gap-4 lg:grid-cols-2 -mt-1">
@forelse ($servers as $server)
@forelse ($server->destinations() as $destination)
@if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')

View file

@ -3,7 +3,7 @@
Profile | Coolify
</x-slot>
<h1>Profile</h1>
<div class="subtitle ">Your user profile settings.</div>
<div class="subtitle -mt-2">Your user profile settings.</div>
<form wire:submit='submit' class="flex flex-col">
<div class="flex items-center gap-2">
<h2>General</h2>

View file

@ -11,49 +11,29 @@
@endcan
</div>
<div class="subtitle">All your projects are here.</div>
<div x-data="searchComponent()" class="-mt-1">
<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="filteredProjects.length === 0">
<div>No project found with the search term "<span x-text="search"></span>".</div>
</template>
<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="grid grid-cols-1 gap-4 xl:grid-cols-2 -mt-1" x-data="{ projects: @js($projects) }">
<template x-for="project in projects" :key="project.uuid">
<div class="box group cursor-pointer" @click="$wire.navigateToProject(project.uuid)">
<div class="flex flex-1 mx-6">
<div class="flex flex-col justify-center flex-1">
<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"
x-show="project.canUpdate">
<a class="mx-4 font-bold hover:underline" wire:click.stop
<div class="relative z-10 flex items-center justify-center gap-4 text-xs font-bold"
x-show="project.canUpdate || project.canCreateResource">
<a class="hover:underline" wire:click.stop x-show="project.addResourceRoute"
:href="project.addResourceRoute">
+ Add Resource
</a>
<a class="hover:underline" wire:click.stop x-show="project.canUpdate"
:href="`/project/${project.uuid}/edit`">
Settings
</a>
</div>
</div>
</template>
</div>
</div>
</template>
</div>
<script>
function searchComponent() {
return {
search: '',
get filteredProjects() {
const projects = @js($projects);
if (this.search === '') {
return projects;
}
const searchLower = this.search.toLowerCase();
return projects.filter(project => {
return (project.name?.toLowerCase().includes(searchLower) ||
project.description?.toLowerCase().includes(searchLower))
});
}
}
}
</script>
</div>

View file

@ -11,7 +11,7 @@
@endcan
</div>
<div class="subtitle">All your servers are here.</div>
<div class="grid gap-4 lg:grid-cols-2">
<div class="grid gap-4 lg:grid-cols-2 -mt-1">
@forelse ($servers as $server)
<a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
@class([

View file

@ -7,7 +7,7 @@
</div>
<div class="subtitle">Set Team / Project / Environment wide variables.</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 -mt-1">
<a class="box group" href="{{ route('shared-variables.team.index') }}">
<div class="flex flex-col justify-center mx-6">
<div class="box-title">Team wide</div>

View file

@ -11,7 +11,7 @@
@endcan
</div>
<div class="subtitle">S3 storages for backups.</div>
<div class="grid gap-4 lg:grid-cols-2">
<div class="grid gap-4 lg:grid-cols-2 -mt-1">
@forelse ($s3 as $storage)
<a href="/storages/{{ $storage->uuid }}" @class(['gap-2 border cursor-pointer box group'])>
<div class="flex flex-col justify-center mx-6">

View file

@ -11,7 +11,7 @@
@endcan
</div>
<div class="subtitle">Git sources for your applications.</div>
<div class="grid gap-4 lg:grid-cols-2">
<div class="grid gap-4 lg:grid-cols-2 -mt-1">
@forelse ($sources as $source)
@if ($source->getMorphClass() === 'App\Models\GithubApp')
<a class="flex gap-2 text-center hover:no-underline box group"