صفحة قائمة الضيوف والفرز
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: صفحات الدعوة والواجهة الأمامية
مدخل إلى الدرس: صفحة قائمة الضيوف والفرز
صفحة قائمة الضيوف والفرز — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
أهداف هذا الدرس
- عرض قائمة ضيوف مناسبة مع حالات ردّهم وحضورهم.
- إضافة فلاتر بحث و (الكل/قبول/اعتذار/لم يرد).
- إدراج زر 'توليد QR' لكل ضيف لاحقاً.
مثال
// app/admin/guests/page.tsx (Server Component يقرأ query)
import { prisma } from "@/lib/prisma";
export default async function GuestListPage({
searchParams,
}: { searchParams: Promise<{ q?: string; status?: string }> }) {
const { q, status } = await searchParams;
const guests = await prisma.guest.findMany({
where: {
eventId: "EVENT_ID_HERE",
...(q ? { name: { contains: q, mode: "insensitive" } } : {}),
...(status === "accepted"
? { rsvp: { is: { status: "accepted" } } }
: status === "declined"
? { rsvp: { is: { status: "declined" } } }
: {}),
},
include: { rsvp: true, checkIns: true },
orderBy: { createdAt: "asc" },
});
const count = {
all: guests.length,
checked: guests.filter((g) => g.checkIns.length > 0).length,
};
const simple = guests.map((g) => ({
id: g.id, name: g.name, tableNo: g.tableNo, category: g.category,
rsvp: g.rsvp?.status ?? null,
checkedIn: g.checkIns.length > 0,
}));
return /* JSX يمرر simple فقط لمكوّن جدول عميل */ null;
}المخطط: تدفق فرز جدول الضيوف
flowchart TD
A["searchParams (q, status)"] --> F["findMany with where
contains name
rsvp is: status"]
F --> FO["format → مصفوفات بسيطة
بلا hash/secret"]
FO --> C["مكوّن جدول client
يعرض ويعيد الفلترة"]
تلميح أداء
استعمال contains + mode insensitive بحث نصي بسيط؛ للمقاييس الضخمة نوكل فهارس PG-Text أو بحثا خارجياً. في دورة بحجمنا يكفي contains مع فهرس eventId.
تمرين تطبيقي: أضف عداد «المقبولون» و«الحاضرون» في رأس الجدول، ثم نفّذ البحث عن اسم بحرفين وراقب الاستعلام في الصفحة.
أخطاء شائعة يجب تفاديها
- تمرير عنصر guest كاملا للمكوّن client فيتسرّب tokenHash.
- استخدام مضاعفة where بلا نعم تجريبي becomes بعدد فلاتر.
- إجراء فلترة في JS بدل قاعدة البيانات يبطئ القائمة الكبيرة.
معجم مصطلحات الدرس
- contains
- عامل LIKE في Prisma للبحث الفرعي في النص.
- mode insensitive
- جعل البحث لا يميز كبيس/صبيس.
- حقل متسلسل
- تمثيل صف القائمة بصافي حقول جاهز للعرض.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «صفحة قائمة الضيوف والفرز»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: لوحة الإحصائيات الحية. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
