laravel breezeでマルチログインのタスク管理ツールを作る②_ユーザー一覧とタスク一覧、残タスク数一覧の作成

環境

laravel10

これまで

laravel breezeでマルチログインのタスク管理ツールを作る⓪_laravel Sailでdocker立上げ ※Windows版
laravel breezeでマルチログインのタスク管理ツールを作る①_下準備（seederでダミーデータ作成まで）

学びたいこと

• laravel breezeでの表示画面（view）の増やし方

この章のゴール

ユーザー一覧

タスク一覧

残タスク一覧

手順

ユーザー一覧作成（dashboard.blade.phpの修正）

1. controller作成、indexメソッド記述：artisan make:controller UserController
2. view作成、見た目整える
3. ルーティングにcontrollerのメソッドをバインド

UserController.php

namespace App\Http\Controllers;

use App\Models\User;

class UserController extends Controller
{
    public function index()
    {
        $users = User::all(); // すべてのユーザーを取得します
        return view('dashboard', ['users' => $users]); // ビューにユーザーデータを渡します
    }
}

dashboard.blade.php

//tailwindはheaderのh2ものをパクッテます

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="container max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div class="content">
            @foreach($users as $user)
                <p>{{ $user->name }}</p>
                <p>{{ $user->email }}</p>
            @endforeach
        </div>
    </div>
</x-app-layout>

web.php

//function消してcontrollerのメソッドを渡す

// Route::get('/dashboard', function () {
//     return view('dashboard');
// })->middleware(['auth', 'verified'])->name('dashboard');

Route::get('/dashboard',  [UserController::class, 'index'])
    ->middleware(['auth', 'verified'])
    ->name('dashboard');

ログイン後画面

管理画面でよくあるテーブル形式に修正

※tailwind含め常に変更を反映させたいので、
npm run devコマンドで開発サーバーを起動しておくといいかも。

tailwindのコンパイルがすぐに反映されない場合は、下記を追記、モード変更してnpm run devしなおすと反映します。

tailwind.config.js

export default {
    mode: 'jit', //ここを追加

●修正後コード

dashboard.blade.php

    <div class="container max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div class="content">
            <table class="shadow-lg border-separate w-full">
                <thead class="bg-blue-100">
                    <tr>
                    <th class="bg-blue-100 border text-left px-8 py-4">
                        Name
                    </th>
                    <th class="bg-blue-100 border text-left px-8 py-4">
                        Email
                    </th>
                    <!-- Add more table headers for other user data -->
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($users as $user)
                    <tr>
                    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                        {{ $user->name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                        {{ $user->email }}
                    </td>
                    <!-- Add more table cells for other user data -->
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

---

タスク一覧作成

1. controller作成、indexメソッド記述：artisan make:controller TaskController
2. viewtask.blade.php作成。（dashboard.blade.phpの中身コピペしておく。ユーザー一覧の使いまわし）
3. ルーティングにcontrollerのメソッドをバインド
4. viewの中身、変数と見た目整える
5. \new/ナビゲーションの修正

TaskController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::join('users', 'tasks.user_id', '=', 'users.id')
                     ->select('tasks.*', 'users.name')
                     ->get();
        return view('tasks', ['tasks' => $tasks]); // ビューにユーザーデータを渡します
    }
}

tasks.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Tasks') }}
        </h2>
    </x-slot>

    <div class="container max-w-3xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div class="content">
            <table class="shadow-lg border-separate w-full">
                <thead class="bg-blue-100">
                    <tr>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            Task-Title
                        </th>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            Charge
                        </th>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            Due Date
                        </th>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            Completed
                        </th>   
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            Overtime
                        </th>                   
                        <!-- Add more table headers for other user data -->
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($tasks as $task)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            {{ $task->title }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            {{ $task->name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            {{ $task->due_date }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            @if($task->completed == 1)
                            済
                            @else
                            
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            @if($task->overtime < date('Y-m-d') && $task->completed == 0)
                            遅れ
                            @else
                            
                            @endif
                        <!-- Add more table cells for other user data -->
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</x-app-layout>

web.php

Route::get('/tasks',  [TaskController::class, 'index'])
    ->middleware(['auth', 'verified'])
    ->name('tasks');

これで、/tasksにはアクセスできるようになる
最後にナビゲーションの追加（dashboardのものをコピペ修正）

navigation.blade.php

<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
    <x-nav-link :href="route('tasks')" :active="request()->routeIs('tasks')">
        {{ __('Tasks') }}
    </x-nav-link>
</div>

残タスク数一覧作成（taskcounts.blade.phpの修正）

1. controller作成、indexメソッド記述：artisan make:controller TaskController
   作成済みのTaskControllerを使う
2. view作成
3. ルーティングにcontrollerのメソッドをバインド
4. ナビゲーションの修正

taskcounts.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('TaskCounts') }}
        </h2>
    </x-slot>

    <div class="container max-w-3xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div class="content">
            <table class="shadow-lg border-separate w-full">
                <thead class="bg-blue-100">
                    <tr>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            name
                        </th>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            RemainingTaskCounts
                        </th>
                        <th class="bg-blue-100 border text-left px-8 py-4">
                            CompletedTaskCounts
                        </th>                
                        <!-- Add more table headers for other user data -->
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($taskCountsData as $name => $taskCount )
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            {{ $name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            {{ $taskCount['remaining_tasks'] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
                            {{ $taskCount['completed_tasks'] }}
                        </td>
                        <!-- Add more table cells for other user data -->
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</x-app-layout>

TaskController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::join('users', 'tasks.user_id', '=', 'users.id')
                     ->select('tasks.*', 'users.name')
                     ->get();
        return view('tasks', ['tasks' => $tasks]); // ビューにユーザーデータを渡します
    }

//task_countsを追記
    public function task_counts()
    {
        $tasks = Task::join('users', 'tasks.user_id', '=', 'users.id')
                     ->select('tasks.*', 'users.name')
                     ->get();
           

        $taskCountsData = [];
        foreach ($tasks as $task) {
            $taskCountsData[$task->name] = [
                'remaining_tasks' => Task::where('user_id', $task->user_id)
                                            ->where('completed', '!=', '1')
                                            ->count(),
                'completed_tasks' => Task::where('user_id', $task->user_id)
                                            ->where('completed', '!=', '0')
                                            ->count()
            ];
        }
        //dd($taskCountsData); 渡した後のデータ見たいときはコメントアウト外す
        return view('taskcounts', ['taskCountsData' => $taskCountsData]);
    }

}

web.php

Route::get('/taskcounts',  [TaskController::class, 'task_counts'])
    ->middleware(['auth', 'verified'])
    ->name('taskcounts')

navigation.blade.php

<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
    <x-nav-link :href="route('taskcounts')" :active="request()->routeIs('taskcounts')">
        {{ __('TaskCounts') }}
    </x-nav-link>
</div>