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

# 環境
laravel10

# これまで
[laravel breezeでマルチログインのタスク管理ツールを作る⓪_laravel Sailでdocker立上げ ※Windows版](https://qiita.com/forever---searcher/items/1321590cb6af4c4383d9)
[laravel breezeでマルチログインのタスク管理ツールを作る①_下準備（seederでダミーデータ作成まで）](
https://qiita.com/forever---searcher/items/34ef1827314c1756f9d0)


# 学びたいこと
- laravel breezeでの表示画面（view）の増やし方

# この章のゴール
ユーザー一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/91658759-2fc4-55b3-60dd-79c84155f387.png)
タスク一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/06130f31-e9f0-af7a-3a0e-cabd6cfc1ff5.png)
残タスク一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/3cea3a93-7fb4-a417-7847-6de46ac5b6ea.png)



# 手順

### ユーザー一覧作成（`dashboard.blade.php`の修正）
1. controller作成、indexメソッド記述：`artisan make:controller UserController`
1. view作成、見た目整える
1. ルーティングに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');
```

ログイン後画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1563301/0ec36572-39cd-78f7-014e-72a048f2765a.png)

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

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

tailwindのコンパイルがすぐに反映されない場合は、下記を追記、モード変更して`npm run dev`しなおすと反映します。
```tailwind.config.js
export default {
    mode: 'jit', //ここを追加
```

<br>

●修正後コード
```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`
1. view`task.blade.php`作成。（dashboard.blade.phpの中身コピペしておく。ユーザー一覧の使いまわし）
1. ルーティングにcontrollerのメソッドをバインド
1. viewの中身、変数と見た目整える
1. \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を使う
1. view作成
1. ルーティングにcontrollerのメソッドをバインド
1. ナビゲーションの修正



```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>
```