• Due date เป็น date picker
  • เพื่อเลือกกำหนดวันเสร็จงาน
  • แสดงผลใน ToDo list เป็น (due by yyyy-mm-dd)
• Flag เป็น checkbox
  • เพื่อระบุว่า task นี้เป็นงานสำคัญ
  • แสดงผลใน ToDo list เป็น icon รูปธงตามหลังชื่อ task ดังรูป
• Color เป็นปุ่ม icon 3 ปุ่ม
  • เพื่อเลือกสีของ task โดยจะมีให้เลือก 3 สีได้แก่ ดำ (เลือกโดย default) แดง เขียว
  • แสดงผลสีของชื่อ task ตามกำหนด

1. Form - add task (5 คะแนน)

• มีการ validate ดังนี้
  • ชื่อ task ห้ามเป็นค่าว่าง
  • วันที่จะต้องเป็น format "yyyy-mm-dd" (เป็นค่าว่างได้)
  • ต้องเลือก icon สี ได้ 1 สีเท่านั้น จะไม่เลือกไม่ได้ หรือ เลือกมากกว่า 1 สีไม่ได้

2. Modal - edit task (3 คะแนน)

• มีการ validate ดังนี้
  • ชื่อ task ห้ามเป็นค่าว่าง
  • วันที่จะต้องเป็น format "yyyy-mm-dd" (เป็นค่าว่างได้)
  • ต้องเลือก icon สี ได้ 1 สีเท่านั้น จะไม่เลือกไม่ได้ หรือ เลือกมากกว่า 1 สีไม่ได้

• "Hide completed tasks" เป็น checkbox เมื่อติ้กจะทำการซ่อน task ที่มีสถานะ "Complete" (1 คะแนน)
• "Show only flagged tasks" เป็น checkbox เมื่อติ้กจะทำการซ่อน task ที่ไม่มี Flag (1 คะแนน)

• "Sort alphabetically" เป็น radio - เรียงลำดับ task ตามลำดับตัวอักษร (เลือกโดย default) (1 คะแนน)
• "Sort incomplete tasks" เป็น radio - เรียงลำดับ task โดยเอารายการที่มีสถานะ "Incomplete" ขึ้นไว้ด้านบน (1 คะแนน) - ที่เหลือเรียงลำดับตามตัวอักษร
• "Sort flagged task first" เป็น radio - เรียงลำดับ task โดยเอารายการที่มี "Flag" ขึ้นไว้ด้านบน (1 คะแนน) - ที่เหลือเรียงลำดับตามตัวอักษร
• "Sort by due date (ascending)" radio - เรียงลำดับ task ตามวัน due date โดยเอารายการที่วัน due date ถึงก่อนไว้ด้านบน (1 คะแนน) - ที่เหลือเรียงลำดับตามตัวอักษร

• เพิ่มปุ่ม + ด้านบนของหน้า เมื่อกดจะแสดง modal สำหรับสร้าง list ใหม่ได้ (2 คะแนน)
  • มีการ validate ชื่อ list ห้ามเป็นค่าว่าง
• สามารถแก้ไขชื่อ list (2 คะแนน)
  • มีการ validate ชื่อ list ห้ามเป็นค่าว่าง
• สามารถลบ list ได้ (1 คะแนน)
• การเพิ่มและแก้ไข task สามารถเลือก list ที่ task นั้นอยู่ได้ (1 คะแนน)

กำหนดให้ data ของ รายการ todo list เป็นในรูปแบบด้านล่าง

todoLists: [
      { id: 1, name: "ToDo List" },
      { id: 2, name: "Not ToDo List" },
    ],
tasks: [
      { id: 1, name: "Go shopping", isComplete: false, listId: 1 },
      { id: 2, name: "Doing chores", isComplete: false, listId: 1 },
      { id: 3, name: "Doing homework", isComplete: false, listId: 1 },
      { id: 4, name: "Coding program", isComplete: false, listId: 1 },
      { id: 5, name: "Work too hard", isComplete: false, listId: 2 },
      { id: 6, name: "Play harder", isComplete: false, listId: 2 },
    ],

หมายเหตุ: กรอง และ เรียงลำดับ แยกแต่ละ ToDo list

• Filter รายการ task แยกแต่ละ list (5 คะแนน)
• Sort รายการ task แยกแต่ละ list (5 คะแนน)