タスク管理ツールをReact + ASP.Coreで作る 009詳細画面構築(表示領域の設計と整備)

前回の続きです

ガイド

全体Index：タスク管理ツールをReact + ASP.Coreで作る - Index

概要

次作っていくのは、個々のタスクの詳細を閲覧したり、編集したりする機能です。
想定では、以下みたいな感じです。

とにかくまず、絵で言うIssueのゾーンを作ってみようと思います。

構想は以下です

• Row/Colで構造を作る
• タスクを選択したらIssueが飛び出してくるという構造を目指すが、いきなりそこに行くのは大変なのでまずは固定にする
• 列の構造はタスクが選択されている/されていないで変えない(Due Dateは隠さない)

こんな風に領域分けしてみます

全部一気に構築するのは大変なので、今回もまずこの構造を先に作ってみようと思います

App.tsx

- import React from 'react';
- import logo from './logo.svg';
import './App.css';
- import { WeatherForecast } from './WeatherForecast';
- import { TaskList } from './TaskList';
+ import { TaskOperationMain } from './TaskOperationMain';

function App() {
  return (
    <div>
-        <TaskList />
;       <TaskOperationMain />
     </div>
  );
}

export default App;

TaskEdit.tsx

interface Props {
    id_task: string
}


export const TaskEdit = ({id_task}: Props) => {    
    

    return (
        <div>
            <h3>Task Detail</h3>
            <p>{id_task} : selected</p>
        </div>
    )
}

TaskOperationMain.tsx

import { Col, Row } from "react-bootstrap"
import { TaskEdit } from "./TaskEdit"
import { TaskList } from "./TaskList"


export const TaskOperationMain = () => {
    
    

    return (
        <div>
            <Row>
                <Col>
                    <TaskList />
                </Col>
                <Col>
                    <TaskEdit id_task="dammy" />
                </Col>
            </Row>
        </div>
    )
}

3ファイル作って呼び出します。
これで実行してみると、以下の様になります。

これで、後はリストにリンクを仕込んで、リンクを踏むとそれに従ってdetail部分を少しずつ作りこんでいけばよさそうです。

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