Refactor Task view to add comments & comment input

app/Http/Controllers/CommentController.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Utils\AuthUtil;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\Request;
+use App\Models\Comment;
+class CommentController extends Controller {
+    // ...
+
+    public function store(Request $request, $id)
+    {
+        // Validate the request data
+        $validatedData = $request->validate([
+            'content' => 'required|string',
+        ]);
+
+        $user = AuthUtil::getAuthUser();
+
+        // Create a new comment
+        $comment = new Comment();
+        $comment->content = $validatedData['content'];
+        $comment->user_id = $user->id;
+        $comment->task_id = $id;
+
+        // Save the comment
+        $comment->save();
+
+        // Redirect or return a response
+        return redirect()->back();
+    }
+}

app/Http/Controllers/TaskController.php

@@ -49,6 +49,7 @@ public function updateStatus($id, $status) {
             $task->status = $status;
             $task->save();
         }
+
         return redirect()->back();
     }
 

database/migrations/2024_01_01_142834_create_comments_table.php

@@ -13,7 +13,7 @@ public function up(): void
     {
         Schema::create('comments', function (Blueprint $table) {
             $table->id();
-            $table->string('content');
+            $table->longText('content');
             $table->unsignedBigInteger('user_id');
             $table->unsignedBigInteger('task_id');
             $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');

resources/views/app/project.blade.php

@@ -22,8 +22,8 @@
             <p class="text-sm text-dark-gray">{{$project->description}}</p>
             <div class="flex justify-start items-center gap-3">
                 <x-project-card.people id="{{$project->id}}" nbDisplayed=10 />
-                <x-project-card.date type="creation" date="{{date('M. d, Y',$creation)}}" />
-                <x-project-card.date type="deadline" date="{{date('M. d, Y',$deadline)}}" />
+                <x-ui.boxIcon type="creation" content="{{date('M. d, Y',$creation)}}" />
+                <x-ui.boxIcon type="deadline" content="{{date('M. d, Y',$deadline)}}" />
             </div>
         </div>
     </div>

resources/views/app/task.blade.php

@@ -20,9 +20,9 @@
                 <x-ui.title>{{$task->name}}</x-ui.title>
             </div>
             <p class="text-sm text-dark-gray">{{$task->description}}</p>
-            <div class="flex justify-start items-center gap-3">
-                <x-project-card.date type="deadline" date="{{$project->name}}" />
-                <x-project-card.date type="deadline" date="{{date('M. d, Y',$deadline)}}" />
+            <div class="flex justify-start items-center gap-3 mt-4">
+                <x-ui.boxIcon type="project" content="{{$project->name}}" />
+                <x-ui.boxIcon type="deadline" content="{{date('M. d, Y',$deadline)}}" />
             </div>
         </div>
     </div>
@@ -38,9 +38,30 @@
             </div>
         </x-task.button>
     </div>
-    <div class="flex flex-col gap-2 justify-start items-start mt-10">
-        <p class="font-semibold">Commentaires :</p>
-        <div class="w-full flex flex-col justify-center items-start gap-4 overflow-hidden">
+    <div>
+        <p class="font-semibold mb-2 mt-8">Add a comment :</p>
+        <div class="p-3">
+            <div class="flex flex-col rounded-xl w-[38rem] min-h-32 p-3 gap-1 shadow-project">
+                <form action="{{ route('comment.store',["id" => $task->id])}}" method="post">
+                    @csrf
+                    <textarea class="w-full outline-none bg-gray-100 min-h-25 resize-none rounded-2xl p-2 " id="content" name="content" rows="3" placeholder="Write your comment here..."></textarea>
+
+                    <div class="flex flex-row justify-end items-center">
+                        <button class="bg-red rounded-xl px-4 py-1 font-semibold text-white">
+                            <div class="flex justify-center items-center gap-2">
+                                <x-icons.send size=20/>
+                                <p>Publish</p>
+                            </div>  
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+    </div>
+    <div class="flex w-[42rem] flex-col gap-2 justify-start items-start mt-4">
+        <p class="font-semibold">Comments :</p>
+        <div class="w-full flex flex-col justify-start p-3 items-start gap-4 max-h-80 overflow-y-auto">
             @foreach ($comments as $comment)
             <x-task.commentary :comment="$comment"></x-task.commentary>
             @endforeach

resources/views/components/icons/send.blade.php

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{$size}}" height="{{$size}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>

resources/views/components/project-card/project-card.blade.php

@@ -22,7 +22,7 @@
         <p class="font-bold text-black text-xl">{{$name}}</p>
         <p class="text-dark-gray text-sm min-h-10 line-clamp-2">{{$description}}</p>
 
-        <x-project-card.date date="{{date('M. d, Y', $date)}}" type="deadline" />
+        <x-ui.boxIcon content="{{date('M. d, Y', $date)}}" type="deadline" />
         <x-ui.divider />
 
         <div class="w-full flex justify-start items-center gap-3">

resources/views/components/task/commentary.blade.php

@@ -5,7 +5,7 @@
     $is_admin = app(ProjectController::class)->isAdmin($comment->task->project->id, $comment->user->id);
 @endphp
 
-<div class="w-[38rem] flex flex-col justify-start items-start bg-gray-100  rounded-xl p-4 min-h-24 gap-3">
+<div class="w-[38rem] flex flex-col justify-start items-start bg-gray-100  rounded-xl p-4 gap-3 shadow-project">
     <div class="flex justify-start items-center gap-2">
         <x-project-card.circle name="{{$full_name}}" url="{{$comment->user->profile_photo_path}}"/>
         <div class="flex flex-col justify-start items-start">

resources/views/components/ui/boxIcon.blade.php

@@ -0,0 +1,12 @@
+@props([
+    'type' => '',
+    'content' => null
+])
+
+@php
+    $type = 'icons.' . $type;
+@endphp
+<div class="px-2 h-8 flex flex-row justify-center items-center border border-dark-gray rounded-lg gap-2 text-dark-gray">
+    <x-dynamic-component :component="$type" size=16 />
+    <p class="text-sm">{{$content}}</p>
+</div>

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\CommentController;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -34,7 +35,7 @@
 Route::get("/task/{id}", [TaskController::class, "show"])->name("task")->middleware("auth");
 Route::post('/task/{id}/update-status/{status}', [TaskController::class, 'updateStatus'])->name('update.status')->middleware("auth");
 
-
+Route::post('/task/{id}/addComment',[CommentController::class,'store'])->name('comment.store')->middleware('auth');
 
 Route::redirect("/", "/dashboard");
 Route::get("/dashboard", [DashboardController::class, "show"])->name("dashboard")->middleware("auth");