流れ

テーブル定義の更新
DBを更新
個別データを取得する様にcontrollerを変更

構築

テーブル定義の更新

これまで、リストに表示できる最低限の情報のみを表示できるようなテーブル定義になっていました。
これから、詳細画面に情報を表示していくにあたって、いくつか情報を増やそうと思います。

新しいデータモデルの定義は以下です

タスクの詳細な内容を定義する"description"と、完了した実績日を入れる"end_date_actual"を増やしました。

t_task.cs


using System;

+ #nullable enable

namespace server_app.Models.EDM
{
    public partial class t_task
    {
        public Guid id_task { get; set; }
        public string title { get; set; }
        public bool is_finish { get; set; }
+       public string? description { get; set; }
        public DateTime? end_date_scheduled { get; set; }
+       public DateTime? end_date_actual { get; set; }
    }
}

TaskOperationMain関数に、選択しているタスクのID番号を格納する「selectedId_task」というstateを導入します。
「selectedId_task」とselectedId_taskの値をセットする「setSelectedId_task」関数を「TaskList」コンポーネントに渡し、Listの操作によって「selectedId_task」の変更を行えるようにします。

DBを更新する

データモデルを更新したので、再度マイグレーションを実施します。

>dotnet ef migrations add update
>dotnet ef database update

ちなみにTerminalでの表示は↓のような感じです

SQLiteで見てみるとテーブルが増えているのが分かります

TaskController.cs


        [HttpGet]
        public async Task<ActionResult<List<t_task>>> Get()
        {
            return await _context.t_tasks.ToListAsync();
        }
+        [HttpGet("{id}")]
+        public async Task<ActionResult<t_task>> Details(Guid id)
+        {
+            return await _context.t_tasks.FindAsync(id);
+        }

参考：TaskController.cs(開くと表示)

TaskController.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Logging;
using server_app.Models.EDM;

namespace server_app.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TaskController : ControllerBase
    {
        private readonly DataContext _context;
        public TaskController(DataContext context)
        {
            _context = context;
        }
        [HttpGet]
        public async Task<ActionResult<List<t_task>>> Get()
        {
            return await _context.t_tasks.ToListAsync();
        }
        [HttpGet("{id}")]
        public async Task<ActionResult<t_task>> Details(Guid id)
        {
            return await _context.t_tasks.FindAsync(id);
        }
    }
}

この状態でAPIを実行すると個別のデータが表示されるはず・・・なのですが、うまく表示されません。
調べていった結果、GUIDは大文字である必要があるとのことで、最初に入れたGUIDは規格に沿っていない内容だった模様です。
以下の様に修正しました。

DBの登録データを修正した結果、APIは機能する様になりました。
(urlに打つときは小文字でもサーバーサイドで処理してくれる模様です。
DB側では小文字のデータを大文字に直すというような補正はしないということのようです)

クライアントサイドを修正

TaskEditを以下の様に修正します。

TaskEdit.tsx


import { useEffect, useState } from "react";

interface Task {
    id_task: string;
    title: string;
    is_finish: boolean;
    description: string;
    end_date_scheduled: Date;
    end_date_actual: Date;
  }


interface Props {
    id_task: string
}


export const TaskEdit = ({id_task}: Props) => {    
    
    const [task, setTask] = useState<Task>();

    useEffect(() => {
        id_task !== "" && loadTaskDetails();
    }, [id_task]);
  
    const loadTaskDetails = async () => {
        const response = await fetch(`https://localhost:5001/task/${id_task}`);
        const data = await response.json();
        setTask(data);
    };

    return (
        <div>
            <h3>Task Detail : {task && task.title}</h3>
            { task &&
            <div>
                <input type="checkbox" defaultChecked={task.is_finish} disabled />
                <label>Finished</label>

                <br />

                <label>Description</label>
                <p>{task.description}</p>

                <label>Due date</label>
                <p>{task.end_date_scheduled && (new Date(task.end_date_scheduled).toDateString())}</p>

                <label>Completion Date</label>
                <p>{task.end_date_actual && (new Date(task.end_date_actual).toDateString())}</p>

            </div>
            }
        </div>
    )
}

実行してみる

上記の変更を盛り込んで実行してみると、以下の様な結果になります。
クリックすると切り替わっているのですが、情報が乏しいうえに何も入力されていない欄もあるので、イマイチまだ変化が分からないですね。
次回で、編集機能などを作りこんでいこうと思います。

今回は以上です。
続きは次回です