ใบงาน
ปล่อยใบงานให้นักเรียนผ่านระบบ D-DoGrade — แนบไฟล์โจทย์ ตั้งกำหนดส่ง ได้ แล้วเปิดหน้าใบงานเพื่อดูว่าใครส่งแล้ว · ใครส่งสาย · ใครยังไม่ส่ง ในที่เดียว
ภาพรวมหน้ารายการใบงาน
header + AssignmentStatsBar + รายการใบงานทั้งหมดของห้อง
หน้าจอเมื่อยังไม่มีใบงาน
เปิดหน้าครั้งแรก ห้องที่ยังไม่มีใบงานจะเห็น empty state กลางจอ พร้อมปุ่ม เพิ่มใบงาน มุมขวาบนเดียวกัน
แถบ "สรุปการส่ง" (AssignmentStatsBar) จะขึ้นทันทีหลังเพิ่มใบงานใบแรก — บอกค่ารวมของห้อง: "ใบงานทั้งหมด N · ส่งแล้ว X% · เลยกำหนด Y ใบ"
รายการเมื่อมีใบงานแล้ว
แถวใบงานแต่ละแถวแสดง:
- ชื่อใบงาน — คลิกเข้าหน้าตรวจการส่ง
- กำหนดส่ง — badge สีพีช "ส่ง [วัน เวลา]" หรือสีพิงค์ "เลยกำหนด"
- สรุปการส่ง — เช่น "ส่งแล้ว 22 / 30" + progress bar
- ปุ่มแก้ไข (ไอคอนดินสอ) + ปุ่มลบ (ไอคอนถังขยะ)
เพิ่มใบงานใหม่
Dialog เดียว 4 ฟิลด์ — รองรับแนบไฟล์โจทย์ (PDF / Word / Excel / รูป)
คลิก 'เพิ่มใบงาน' มุมขวาบน
ระบบจะเปิด AssignmentFormDialog โหมดสร้าง — ribbon ด้านบน ของกล่องจะเป็นสีพีช + หัวข้อ "เพิ่มใบงาน"
กรอกฟิลด์ 4 ช่อง
- ชื่อใบงาน (บังคับ) — ≤ 200 ตัวอักษร เช่น "แบบฝึกหัดบทที่ 3"
- รายละเอียด (ไม่บังคับ) — ≤ 5,000 ตัวอักษร ใส่คำชี้แจง วิธีทำ หรือ rubric ก็ได้ (แปะลิงก์ภายนอก เช่น Google Docs ใส่ตรงนี้ได้)
- กำหนดส่ง (ไม่บังคับ) — กดเลือกวัน+เวลาแบบ datetime-local ระบบใช้ เวลาไทย (Asia/Bangkok) เป็นมาตรฐาน
- แนบไฟล์โจทย์ (ไม่บังคับ) — รายละเอียดดูขั้นถัดไป
แนบไฟล์โจทย์ (R2 storage)
กฎรับไฟล์ที่ระบบกำหนด:
- ขนาดสูงสุด 10 MB ต่อไฟล์
- ชนิดที่อนุญาต: PDF · Word (.doc/.docx) · Excel (.xls/.xlsx) · รูป PNG/JPEG/WebP
- ระบบ ตรวจ MIME ซ้อนนามสกุล — ไฟล์ .exe เปลี่ยนชื่อเป็น .pdf จะถูกตีกลับ
หลังเลือกไฟล์ ระบบจะโชว์ ชื่อไฟล์ + ขนาด ใต้ช่อง upload — ยังไม่อัปโหลด จนกว่าจะกด "เพิ่มใบงาน" จริง
กดปุ่ม 'เพิ่มใบงาน' ที่มุมขวาล่างของ Dialog
ระบบจะส่งฟอร์ม (multipart/form-data) ขึ้น backend → อัปโหลดไฟล์เข้า R2 storage ของ Cloudflare → บันทึก row ใบงาน → ปิด Dialog → แสดง toast เขียว "เพิ่มใบงานแล้ว"
รายการใบงานจะรีเฟรชใหม่ (invalidateAll) ให้เห็นใบงานใหม่ขึ้นด้านบนสุดทันที
แก้ไข / ลบใบงาน
ปุ่ม edit/delete ในแถว — ribbon ของ Dialog จะเปลี่ยนสีบอกโหมด
แก้ไขใบงาน (ดินสอ)
คลิกไอคอนดินสอในแถวใบงาน → เปิด AssignmentFormDialog โหมดแก้ไข — ribbon เปลี่ยนเป็นสีลาเวนเดอร์ + หัวข้อ "แก้ไขใบงาน"
ฟอร์มจะถูก pre-fill ด้วยค่าเดิม รวมถึงไฟล์แนบเดิม ถ้ามี — เห็นชื่อไฟล์ + ขนาด + ปุ่ม "เปลี่ยนไฟล์" / "ลบไฟล์ที่แนบ"
ถ้าอยากเก็บไฟล์เดิม ไม่ต้องเลือกไฟล์ใหม่ — แค่แก้ฟิลด์อื่นแล้วกดบันทึก
ลบใบงาน (ถังขยะ)
คลิกไอคอนถังขยะ → ระบบขึ้น confirm dialog ยืนยันก่อนลบจริง (กันพลาดมือ)
ใบงานที่ถูกลบเป็นแบบ soft-delete — row ในฐานข้อมูลถูก mark ว่า "deleted" ไม่ได้หายจริง ส่วนการส่งของนักเรียน ที่ส่งไว้แล้วจะคงอยู่ในฐานข้อมูล (เพื่อ audit + กู้คืนได้ภายหลัง)
จากมุมครูกับนักเรียน — ใบงานนั้นจะหายจากทุกหน้า หลังลบ
หน้าตรวจการส่ง (Submission Detail)
คลิกชื่อใบงานในรายการ → เห็นใครส่งแล้ว/สาย/ไม่ส่ง + ดาวน์โหลดไฟล์ที่นักเรียนส่ง
เปิดหน้าตรวจการส่ง
ในรายการใบงาน → คลิกที่ชื่อใบงาน → ระบบพาเข้าหน้า submission detail
หัวหน้า (page-head) ของหน้านี้ประกอบด้วย:
- ชื่อใบงาน + ห้อง/วิชา
- Badge กำหนดส่ง 2 สี: สีพีช "ส่ง [วันเวลา]" (ยังไม่ถึงกำหนด) หรือ สีพิงค์ "เลยกำหนด" (พ้นกำหนดแล้ว)
- รายละเอียดของใบงาน (multi-line, preserve newline)
- ปุ่มดาวน์โหลดไฟล์โจทย์ (ถ้ามี) — สีน้ำเงิน + ชื่อไฟล์ + ขนาด
แถบสรุปการส่ง (chips bar)
ใต้รายละเอียด มีแถบ "สรุปการส่ง" 5 chip บอกตัวเลข:
- 🟦 ทั้งหมด N — จำนวนนักเรียนในห้อง (chip-total ครีม)
- 🟢 ส่งแล้ว X — ส่งก่อนกำหนด (chip-submitted มินต์)
- 🟠 ส่งสาย Y — ส่งหลังกำหนด (chip-late พีช)
- 🔴 ไม่ส่ง Z — เลยกำหนดและยังไม่ส่ง (chip-missing พิงค์เข้ม)
- ⚪ ยังไม่ถึงกำหนด P — chip นี้ขึ้นเฉพาะตอน due ยังไม่ถึง
ตารางรายนักเรียน (SubmissionTable)
ตารางแสดงแถวละ 1 นักเรียน — คอลัมน์ที่ครูเห็น:
- เลขที่ + ชื่อ ของนักเรียน
- SubmissionStatusBadge — แท็กสีบอกสถานะ (4 แบบเหมือน chip บน)
- ไฟล์ที่ส่ง — ถ้ามี จะเป็น chip ดาวน์โหลด คลิกเปิด/บันทึกไฟล์ที่นักเรียนอัปโหลดมา (ผ่าน
/files/...) - คอมเมนต์ของนักเรียน — ข้อความที่นักเรียนเขียนตอนส่ง (clip ไม่เกิน 2 บรรทัด — hover ดูเต็มได้)
- เวลาที่ส่ง — timestamp ตามเวลาไทย
วิธีระบบตัดสินสถานะ submitted / late / missing / pending
กฎคำนวณจาก submittedAt เทียบ dueAt
ตารางกฎ
| สถานะ | เงื่อนไข |
|---|---|
| ส่งแล้ว (submitted) | นักเรียนส่ง และ submittedAt ≤ dueAt (หรือไม่มี dueAt) |
| ส่งสาย (late) | นักเรียนส่ง แต่ submittedAt > dueAt |
| ไม่ส่ง (missing) | ยังไม่ส่ง และ Date.now() > dueAt (เลยกำหนดแล้ว) |
| ยังไม่ถึงกำหนด (pending) | ยังไม่ส่ง และ Date.now() ≤ dueAt |
สรุปขั้นใช้งานใบงานครบรอบ
- เพิ่มใบงาน + แนบไฟล์โจทย์ (ถ้ามี) + ตั้งกำหนดส่ง
- (ไม่บังคับ) ไปหน้า แจ้งเตือนผ่าน LINE เลือก template "การบ้านใหม่" → กดส่ง — นักเรียนทุกคนได้แจ้งเตือนภายในวินาที
- รอนักเรียนส่งงาน (ผ่าน /dashboard/student/.../assignments)
- เปิดหน้า submission detail เป็นระยะ → ดู chips สรุป → ดาวน์โหลดไฟล์ตรวจ
- (ไม่บังคับ) ใกล้กำหนดส่ง — ส่ง template "เตือนใกล้หมดเวลาส่ง" เพื่อกระตุ้นนักเรียนที่ยังไม่ส่ง