LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@mosuma(mosuma)

タスク管理ツールをReact + ASP.Coreで作る 014詳細画面(削除)

Last updated at Posted at 2022-11-03

前回の続きです

今回から、登録済みタスクの削除機能を作っていこうと思います

ガイド

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

流れ

構築の流れは以下になります

  • コントローラーを修正してサーバーサイドに削除用のapiを作成
  • クライアントに削除機能を追加

コントローラーを修正してサーバーサイドに削除用のapiを作成

まずコントローラーに、削除用の入力を受け取る関数を定義します。
削除したいタスクのIDを取得したらそれをDBから削除し、結果を返す内容です。

TaskController.cs


+        [HttpPost("delete/{id}")]
+        public async Task<ActionResult<bool>> Delete(Guid id)
+        {
+            var task = await _context.t_tasks.FindAsync(id);
+
+            if(task == null) return null;
+
+            _context.Remove(task);
+
+            var result = await _context.SaveChangesAsync()>0;
+
+            return result;
+        }
    }
}
参考：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);
        }
        [HttpPost("update")]
        public async Task<ActionResult<t_task>> Update([FromBody] t_task task)
        {
            var temp = await _context.t_tasks.FindAsync(task.id_task);
            temp.title = task.title;
            temp.is_finish = task.is_finish;
            temp.description = task.description;
            temp.end_date_scheduled = task.end_date_scheduled;
            temp.end_date_actual = task.end_date_actual;

            await _context.SaveChangesAsync();

            return await _context.t_tasks.FindAsync(task.id_task);
        }
        [HttpPost("create")]
        public async Task<ActionResult<t_task>> Create([FromBody] t_task task)
        {
            var new_task = new t_task
            {
                id_task = task.id_task,
                title = task.title,
                is_finish = task.is_finish,
                description = task.description,
                end_date_scheduled = task.end_date_scheduled,
                end_date_actual = task.end_date_actual,
            };

            await _context.t_tasks.AddAsync(new_task);
            await _context.SaveChangesAsync();

            return await _context.t_tasks.FindAsync(task.id_task);
        }
        [HttpPost("delete/{id}")]
        public async Task<ActionResult<bool>> Delete(Guid id)
        {
            var task = await _context.t_tasks.FindAsync(id);

            if(task == null) return null;

            _context.Remove(task);

            var result = await _context.SaveChangesAsync()>0;

            return result;
        }
    }
}

クライアントの仕様検討

基本動作

クライアント側の動作は以下のようになります。

  • 既存レコード編集モードの場合は「TaskEdit」画面に削除ボタンを出す
  • ボタンを押したらapiに削除を問い合わせる
  • 削除が成功したら何も選択しないモードになる

これまでのタスク追加や編集でもそうなのですが、「削除が成功した」などのメッセージがなく、結果が分からず不親切な動作になっているのが今更気になります。
それらについては一通り作り終えた後に検討していこうと思います。

クライアント側の追加パッケージ

今回はありません

クライアントサイドのコード変更

コードを変更していきます。

TaskOperationMain

「TaskEdit」を呼ぶときに「setSelectedId_task」も渡すようにしました。

これによって、削除成功後にselectedId_taskを空にすることで編集画面をいったんクリアすることが目的です。

TaskOperationMain.tsx
+                            <TaskEdit isModeAddnew={isModeAddnew} id_task={selectedId_task} setSelectedId_task={setSelectedId_task} />

TaskEdit

削除ボタン・削除ボタン押下時用にデータ検証、apiの呼び出しを追加しました

TaskEdit.tsx
import { Form, Formik } from "formik";
import { useEffect, useState } from "react";
import { Col, Row } from "react-bootstrap";
import * as Yup from 'yup';
import CheckBoxGeneral from "../app/common/CheckBoxGeneral";
import DateInputGeneral from "../app/common/DateInputGeneral";
import TextAreaGeneral from "../app/common/TextAreaGeneral";
import TextInputGeneral from "../app/common/TextInputGeneral";
import {v4} from 'uuid';

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


interface Props {
    isModeAddnew: boolean;
    id_task: string;
+   setSelectedId_task: React.Dispatch<React.SetStateAction<string>>;
}

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

    useEffect(() => {
        if(id_task !== ""){
            loadTaskDetails();
        } else {
            setTask({id_task : "", title : "", is_finish: false, description:"", end_date_scheduled : null, end_date_actual : null})
        }
    }, [id_task]);
  
    const loadTaskDetails = async () => {
        const response = await fetch(`https://localhost:5001/task/${id_task}`);
        const data = await response.json();
        setTask(data);
    };


    const updateTaskDetails = async (value : Task) => {

        if(value.id_task===""){
            const newTask = value;
            newTask.id_task=v4();

            const response = await fetch("https://localhost:5001/task/create", { 
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(newTask)  
            });
            const data = await response.json();
            setTask(data);

        } else {
            const response = await fetch("https://localhost:5001/task/update", { 
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(value)  
            });
            const data = await response.json();
            setTask(data);
        }
    };


+    const deleteTask = async (value : Task) => {
+
+        if(value.id_task!==""){
+
+            const response = await fetch(`https://localhost:5001/task/delete/${value.id_task}`, { 
+                method: "POST",
+            });
+            const data = await response.json();
+            setSelectedId_task("");
+
+        }
+    };
    
    const validationSchema = Yup.object({
        title: Yup.string().required(),
        is_finish: Yup.bool().required(),
        description: Yup.string().nullable(),
        end_date_scheduled: Yup.date().nullable(),
        end_date_actual: Yup.date().nullable(),
    });
    
+    const validationSchemaDel = Yup.object({
+        id_task: Yup.string().required(),
+    });



    return (
        <div>
            {
                isModeAddnew ?
                    <h3>Add New Task</h3>
                    :
                    <h3>Task Detail : {task?.title}</h3>
            }
            { task &&
            <div>
                <Formik
                validationSchema={validationSchema}
                enableReinitialize 
                initialValues={task} 
                onSubmit={values => updateTaskDetails(values)}>
                {({ handleSubmit, isValid, isSubmitting, dirty }) => (
                    <Form className="ui form" onSubmit = {handleSubmit} autoComplete='off'>

                        <Row>
                            <Col><TextInputGeneral label='Title' name='title' placeholder='Title' /></Col>
                        </Row>

                        <hr />
                        
                        <Row>
                            <Col ><TextAreaGeneral label='Description' placeholder='Description' name='description' rows={3}   /></Col>
                        </Row>
                        
                        <Row>
                            <Col ><DateInputGeneral placeholderText='Due Date' name = 'end_date_scheduled' dateFormat='MM d, yyyy' /></Col>
                            <Col ><DateInputGeneral placeholderText='Completion Date' name = 'end_date_actual' dateFormat='MM d, yyyy' /></Col>
                        </Row>


                        
                        <Row>
                            <Col xs={4}><CheckBoxGeneral label='Finished' name='is_finish'  /></Col>
                        </Row>
                        
                        <hr />
                        
                        <button disabled={!isValid || !dirty || isSubmitting} type = 'submit' className='btn btn-primary'>
                            {isSubmitting ? "Processing" : "submit"}
                        </button>
                    </Form>
                )}

                </Formik>

+                {
+                !isModeAddnew &&
+                <Formik
+                validationSchema={validationSchemaDel}
+                enableReinitialize 
+                initialValues={task} 
+                onSubmit={values => deleteTask(values)}>
+                {({ handleSubmit, isValid, isSubmitting, dirty }) => (
+                    <Form className="ui form" onSubmit = {handleSubmit} autoComplete='off'>                        
+                        <button disabled={!isValid || isSubmitting} type = 'submit' className='btn btn-danger'>
+                            {isSubmitting ? "Processing" : "Delete"}
+                        </button>
+                    </Form>
+                )}
+                </Formik>
+                }
            </div>

            }
        </div>

        

    )
}

変更は以上です

動作させてみる

上記の状態で、サーバー・クライアント双方を更新すると、以下の様になります。

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?