- ชื่อ ประเภท เป็น string
- ชื่อ รายละเอียด เป็น string
- ชื่อ ค่าปรับ (บาท) เป็น number
- ช่ือ สถานะการจ่ายเงิน เป็น boolean สถานะเริ่มต้นคือ ยังไม่จ่าย
- มี ปุ่ม เพิ่ม และ ปุ่ม ยกเลิก
- ประเภท
- รายละเอียด
- ค่าปรับ (บาท)
- สถานะการจ่ายเงิน => แสดงเป็น จ่ายแล้ว หรือ ยังไม่จ่าย
- ปุ่ม แก้ไข
- ปุ่ม ปรับสถานะการจ่ายเงิน
- ปุ่ม ลบ
- เมื่อกรอกข้อมูลแล้วกด เพิ่ม แล้วจะเพิ่มข้อมูลใน table
- เมื่อกรอกข้อมูลแล้วกด ยกเลิก แล้วจะล้างข้อมูลใน form ทั้งหมด
- เมื่อกดปุ่ม แก้ไข ในตาราง จะแสดงข้อมูลข้อตารางนั้นๆ ใน form และปุ่ม เพิ่ม ใน form จะเปลี่ยนชื่อเป็นปุ่ม บันทึก
- เมื่อแก้ไขข้อมูล และกดปุ่ม บันทึก จะต้องนำข้อมูลกลับไปบันทึกที่ row นั้นๆ
- ถ้ากดปุ่ม ปรับสถานะการจ่ายเงิน ในตาราง โปรแกรมจะต้องปรับ สถานะการจ่ายเงิน ของ row นั้นๆ ให้เป็นนิเสธกันกับสถานะปัจจุบัน
- เมื่อกดปุ่ม delete ในตารางแล้วจะลบข้อมูลใน row นั้นๆ ออกไป
- CSS
- ป้องกันข้อมูลว่าง
- มี modal แสดงการยืนยันก่อนลบข้อมูล
- แสดงค่าปรับเป็นหน่วยเงิน เช่น 500.00 หรือ 1,000.00
- ค่าปรับติดลบไม่ได้
- บันทึกข้อมูลลง local storage เมื่อ refresh page แล้วข้อมูลจะไม่หายไป
- เขียน test
https://github.com/Oudy1st/vue-day1