前回の続きです
ガイド
全体Index：タスク管理ツールをReact + ASP.Coreで作る - Index
流れ
- テーブル定義の更新
- DBを更新
- 個別データを取得する様にcontrollerを変更
構築
テーブル定義の更新
これまで、リストに表示できる最低限の情報のみを表示できるようなテーブル定義になっていました。
これから、詳細画面に情報を表示していくにあたって、いくつか情報を増やそうと思います。
新しいデータモデルの定義は以下です
タスクの詳細な内容を定義する"description"と、完了した実績日を入れる"end_date_actual"を増やしました。
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で見てみるとテーブルが増えているのが分かります
[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(開くと表示)
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を以下の様に修正します。
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>
)
}
実行してみる
上記の変更を盛り込んで実行してみると、以下の様な結果になります。
クリックすると切り替わっているのですが、情報が乏しいうえに何も入力されていない欄もあるので、イマイチまだ変化が分からないですね。
次回で、編集機能などを作りこんでいこうと思います。
今回は以上です。
続きは次回です