วิชา / หัวข้อประเมิน

ห้องที่เพิ่งสร้างจะยังไม่มีหัวข้อ — ระบบขึ้น empty state "🗂️ ยังไม่มีหัวข้อประเมิน" พร้อมปุ่ม เพิ่มรายการ

Panel ของแต่ละแถวประกอบด้วย:

• drag_indicator Drag Handle — ใช้ลากเรียงลำดับใหม่
• ชื่อหัวข้อ — เช่น "ใบงานบทที่ 1"
• คะแนนเต็ม — ตัวเลข (รองรับทศนิยม)
• Category Badge — ป้ายหมวด ปพ.5 (ถ้าตั้งไว้)
• ปุ่ม edit แก้ + delete ลบ

ส่วนหัวของ panel แสดง "รวมคะแนนเต็ม [xxx] คะแนน" — sum ของ maxScore ทุกหัวข้อ ใช้ตรวจว่าครบ 100 แล้วหรือยัง

ปุ่ม เพิ่มรายการ สีมินต์อยู่มุมขวาบน panel เปิด dialog "เพิ่มรายการประเมิน" (ribbon mint)

• ชื่อหัวข้อ — เช่น "ใบงานบทที่ 2 — ระบบนิเวศ" (จำเป็น)
• คะแนนเต็ม — ตัวเลข เช่น 20 หรือ 12.5 (รองรับทศนิยม จำเป็น)
• หมวด ปพ.5 — เลือก 1 ใน 5 ตัวเลือก (ไม่จำเป็น):
  • ทั่วไป (เก็บ) — default ถ้าไม่เลือก
  • เก็บก่อนกลางภาค (pre_mid)
  • กลางภาค (midterm)
  • เก็บหลังกลางภาค (post_mid)
  • ปลายภาค (final)

หลังบันทึก Toast เขียว "เพิ่มรายการสำเร็จ" และหัวข้อใหม่ขึ้นที่ ท้ายสุด ของรายการ (ใช้ drag-drop ย้ายตำแหน่งทีหลังได้)

คลิกไอคอน edit ที่แถว — เปิด dialog โหมดแก้ไข (ribbon ลาเวนเดอร์) แก้ทั้ง 3 ช่องได้

Toast เขียว "บันทึกการแก้ไขแล้ว" และค่าใหม่ขึ้นในรายการ

คลิกไอคอน delete → confirm "ลบ [name] ออก?" พร้อมข้อความว่าคะแนนของหัวข้อนี้ทั้งหมดจะกลายเป็น orphaned (ยังเก็บใน DB ไว้เพื่อตรวจสอบย้อนหลัง แต่ไม่ปรากฏในตารางคะแนน/สรุป)

Toast "ลบรายการแล้ว"

จับ drag_indicator ที่ซ้ายของแถว ลากขึ้น/ลงเพื่อย้าย — ระบบ update optimistically (UI เปลี่ยนทันที) แล้วส่ง JSON array ลำดับใหม่ทั้งชุด ไป backend

ถ้า save ล้มเหลว Toast แดง "จัดเรียงไม่สำเร็จ" และ UI revert กลับเป็นลำดับเดิม

บนหน้าจอ ≤768px การลากยากเพราะนิ้วต้องค้างไว้ — กดที่ปุ่ม drag จะเปิด ReorderDialog ที่ให้พิมพ์ตำแหน่งใหม่เป็นตัวเลข (เช่น "3" = ย้ายไปอันดับ 3)

กด ย้าย ระบบรับค่าและ submit แบบเดียวกับ drag desktop