Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

タスク画面、タスク詳細画面の一新 #64

Open
15 of 25 tasks
fujjima opened this issue Apr 9, 2022 · 1 comment
Open
15 of 25 tasks

タスク画面、タスク詳細画面の一新 #64

fujjima opened this issue Apr 9, 2022 · 1 comment

Comments

@fujjima
Copy link
Owner

fujjima commented Apr 9, 2022

What?

Trello, notion, github上に存在するTODOアプリ等を見ても基本的にはkanban形式を取っており、なんだかんだkanban形式が最も扱いやすいtodoアプリな気がする。

そこで、本issueにてタスク一覧及び詳細画面のkanban形式への移行を行う。

仕様について

kanban

  • list同士の移動が可能
  • list内での移動は縦方向
  • list間での移動は横方向

Goal

  • list内で縦方向の移動ができるようになっている
  • タスクに、list内の位置の概念が追加されている
  • タスクに、どのlistにいるかの概念が追加されている
  • タスクの新規追加ができるようになっている
  • listが作れるようになっている

やらないこと

  • UI調整
  • サブタスクの概念の実装

TODO

Back側

  • boardモデルの追加
  • listモデルの追加
  • タスクの順番更新用のエンドポイントの追加

FE側

  • タスク一覧画面のkanban化

    • react-beautiful-dndでkanban化する
      • 順番を変更した際に、バック側に配列の位置についても送信するようにする
      • バック側で順番を保存できるようにする
      • フロント側に変更後のタスク一覧をレスポンスする
      • 縦に移動した際に、移動後の順番が反映されるようにする
      • カードを追加でカードを追加できるようにする
      • 横方向にリストを追加できるようにする
    • back側で各タスクに positionカラムを追加する
  • kanbanのスタイル周り

    • 今のテーブル形式のレイアウトを廃止する
    • カードのスタイルの各種調整を行う
    • リスト内のカード間に隙間を空ける
    • リストの色
    • カードの色を調整する
    • これらのスタイル用のコンポーネント配置を最適化する
  • タスク詳細画面をタスク一覧画面上のモーダルに移行する

@fujjima
Copy link
Owner Author

fujjima commented Apr 9, 2022

タスク一覧画面のkanban化についての仕様まとめ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant