Trelloダミー作ってみた！！

この記事【トップデベロッパーになるために作成したいアプリ8選】に触発されて、Trelloダミーなるものを作ってみました。
作品はこちら→TODOdo?

Trelloって何？

TODOリストです。
タスクを自由に作成し、ドラッグ&ドロップで並び替えもできます。
Trello

開発環境

バック: Laravel 6.5
フロント: Vue.js
DBは使用してません。
使ったライブラリ: Vue.Draggable

仕組み

localStorageを使用し、曜日単位でTODOリストを管理しています。
ちなみにlocalStorageへ保存するときはkey: valueの形なので
[key]: [valiue]
[曜日]: [TODOリスト]
と言った形で保存しています。
なので、タスクの保存や並び替え時の順番保持なども全てlocalStorageへ保存しています。

工夫点

・上記の記事のサンプルは消去ができなかったこと、Trelloでは消去の方法が分かりにくかったので、タスクの消去を直感的にできるようにしました。

・Trelloでもサンプルでも大枠を自由に作ることができますが、今回作成したものの大枠は、月から日曜日の一週間のみとし利便性を追求してみました。

・どの曜日を選んでも
するべきこと
作業中
完成
と言ったものをテンプレートで表示させるようにし、最初のリスト作成する手間を減らしました。

流れ

メインのシステムのや工夫した点を一部載せていきいます。
作品→TODOdo?

1,home画面

曜日の表示

こちらは見たままです。
vue-routerを使い曜日に対する画面を切り替えるために、定義した配列の中で曜日に応じたパスも定義しております。

sample.vue

<script>
import draggable from 'vuedraggable'
export default {
  name: 'App',
  components: { draggable },
  data() {
    return {
      weeks: [
        {path: 'mon', week: '月'},
        {path: 'tue', week: '火'},
        {path: 'wed', week: '水'},
        {path: 'thu', week: '木'},
        {path: 'fri', week: '金'},
        {path: 'sat', week: '土'},
        {path: 'sun', week: '日'}
      ],
    }
  },
}
</script>

こんな感じ〜

2,メイン画面

左上の「新しくリストを作る」で新規のカードを作成し、その中の「するべきことを追加」「作業中を追加」「完了を追加」でリストを追加できます。
そして、ゴミ箱にリストを持っていくと削除することができます。

並び替えしたときの順番の保持

このカードが追加されたり、リストが追加or削除されたりするとlocalStorageに保存されるようになっています。
ちなみに、並び替えはVue.Draggableで行なっています。

ここで工夫した点は、並び替え時の順番は保存する点です。
Vue.Draggableの機能で、並び替えしたときの順番も保持できるのですが、それを使うとゴミ箱にリストを捨てる際、選択していないリストも一緒にゴミ箱に捨てられるといった挙動になってしまいました。

なので、Vue.Draggableに備わっているeventのendを使い並び替えしたときの順番を保持させました。
endは選択したリストを掴んで、離したときに発火するイベントです。

選択したリストの情報はeventobjectで取得できるので、その中からいろんなデータを引っ張り出しあーだこーだして並び替えしたときの順番を保持しlocalStorageへ保存しました。

trash

リストをゴミ箱に移動させた際もeventobjectでDOMを抜き出して、display: none;を付与し消えたように見せています。
今後はゴミ箱をクリックするとゴミ箱の中身が見れるようにし、そこから削除をできるようにしていきたいと思っています。

まとめ

実際作ってみてどうだった？

実はTODOリストを作成するのが初めてなのもあって「まぁこんな感じかな〜」とシステムを頭の中で思い描いていたのですが、記述した並び替えの保持やtrash機能などについては少し悩みました。
「どうやって選択したDOMの情報を取得するんだ？？」と。
結果的にeventobjectを見つけてからは早かったのですが、documentをよく読まねばなと思いました。

そして、何より楽しかったです。
普段TODOリストは使わないのですが、Trelloにしろ参考にした記事のDEMOにしろ、「凄いな〜」と思う反面「こうだったらもっと使いやすくなるのにな〜」とか思いついてそのアイディアを実装していく過程がとても楽しかったです。

この後も機能追加したり、他の作品を作っていきます。

おまけ

今後追加していきたい機能
・レスポンシブ化
・携帯と同期させられるようにする
・作業中から完了までの時間を可視化させる
・スケジュール張と同期させるようにする。
作品はこちら→TODOdo?
至らぬ点もありますが、良かったら使ってみてください。
そして、アドバイス等頂ければ幸いです。