- add delete project page

app/Http/Controllers/Dashboard/ProjectController.php

@@ -6,7 +6,6 @@ use App\Http\Requests\ProjectRequest;
 use App\Models\Project;
 use App\Repository\Interfaces\ProjectRepository;
 use Illuminate\Http\RedirectResponse;
-use Illuminate\View\View;
 use Inertia\Response as InertiaResponse;
 
 class ProjectController
@@ -49,9 +48,9 @@ class ProjectController
         return back()->withError(['message_error', 'Wystąpił błąd podczas tworzenia!']);
     }
 
-    public function delete(Project $project): View
+    public function delete(Project $project): InertiaResponse
     {
-        return view('dashboard.projects.delete', compact('project'));
+        return inertia('Projects/ConfirmDelete', compact('project'));
     }
 
     public function destroy(Project $project): RedirectResponse

resources/js/Pages/Projects/ConfirmDelete.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    project: {
+        type: Object,
+        required: true,
+    },
+});
+
+function confirmDelete() {
+    router.delete(`/dashboard/project/${props.project.id}/delete`);
+}
+</script>
+
+<template>
+    <InertiaHead title="Nowy projekt" />
+    <div class="p-4">
+        <header class="pb-4">
+            <h1 class="text-3xl font-roboto font-light">Usuwanie projektu</h1>
+        </header>
+        <div class="max-w-[600px]">
+            <p class="mb-4">Na pewno usunąć projekt o nazwie {{ project.title }}?</p>
+            <div class="grid grid-cols-3 gap-2">
+                <InertiaLink
+                    as="button"
+                    href="/dashboard"
+                    class="col-span-1 flex justify-center items-center gap-3 w-full px-2 py-1 border-t-4 border-b-4 border-transparent hover:border-b-black"
+                    ><FontAwesomeIcon :icon="['fas', 'backward']" />Anuluj</InertiaLink>
+                <button
+                    @click.prevent="confirmDelete"
+                    class="col-span-2 flex justify-center items-center gap-3 w-full px-2 py-1 rounded-md bg-red-600 border-4 border-red-600 text-white text-lg hover:bg-transparent hover:text-red-600"
+                    ><FontAwesomeIcon :icon="['fas', 'trash']" />Usuń projekt {{ project.title }}</button>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Share/ProjectsList.vue

@@ -18,13 +18,19 @@ defineProps({
                 v-for="(project, key) in projects"
                 :key="key"
             >
-                <div class="flex items-center justify-between px-3 py-2 bg-white hover:bg-zinc-300 cursor-pointer">
+                <div class="flex items-center justify-between px-3 py-2 bg-white hover:bg-neutral-200">
                     <InertiaLink :href="`/dashboard/project/${project.id}`">{{ project.title }}</InertiaLink>
-                    <div>
+                    <div class="flex items-center gap-2">
                         <InertiaLink
                             as="button"
-                            class="px-2 py-1 bg-green-200"
-                            :href="`/dashboard/project/${project.id}`">Edit</InertiaLink>
+                            class="px-2 py-1 text-lime-600 hover:text-lime-800 border-t-2 border-b-2 border-transparent hover:border-b-lime-600"
+                            :href="`/dashboard/project/${project.id}`"
+                            title="Edytuj projekt"><FontAwesomeIcon :icon="['fas', 'pen-to-square']" /></InertiaLink>
+                        <InertiaLink
+                            as="button"
+                            class="px-2 py-1 text-red-600 hover:text-red-800"
+                            :href="`/dashboard/project/${project.id}/delete`"
+                            title="Usuń projekt z listy"><FontAwesomeIcon :icon="['fas', 'trash']" /></InertiaLink>
                     </div>
                 </div>
             </li>

resources/js/app.js

@@ -11,9 +11,9 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 
-library.add(fas)
-    .add(far)
-    .add(fab);
+library.add(fas);
+library.add(far);
+library.add(fab);
 
 import './css/app.css';
 import App from '@/Share/Layout/App.vue';