Students Filters

بعد أن أصبح لديك:

  • عرض الطلاب
  • إضافة
  • تعديل
  • حذف
  • صفحة تفاصيل

فالفلترة هي الخطوة الطبيعية التالية.

🎯 الهدف

نريد في صفحة الطلاب:

[كل الصفوف ▼]
JSX

وعند اختيار:

الصف الأول
JSX

يظهر فقط الطلاب المنتمون لهذا الصف.

🧠 أول سؤال مهم

كيف نصل للصف؟

أنت الآن لديك:

Student
 └─ Section
      └─ Classroom
           └─ Grade
JSX

إذن اسم الصف موجود في:

student.section?.classroom?.name
JSX

🚀 الخطوة 1

إنشاء State للفلتر

const [selectedClassroom, setSelectedClassroom] = useState("");
JSX

🚀 الخطوة 2

جلب الصفوف

إذا كنت تملك Slice للصفوف:

const { classrooms } = useSelector(
  (state) => state.classrooms
);
JSX

🚀 الخطوة 3

إضافة Select

فوق الجدول مباشرة

<div className="mb-3">

  <select
    className="form-select"
    value={selectedClassroom}
    onChange={(e) =>
      setSelectedClassroom(e.target.value)
    }
  >

    <option value="">
      جميع الصفوف
    </option>

    {
      classrooms?.map((classroom) => (

        <option
          key={classroom.documentId}
          value={classroom.documentId}
        >

          {classroom.name}

        </option>

      ))
    }

  </select>

</div>
JSX

🎯 ماذا سيحمل selectedClassroom ؟

مثلاً:

"abc123"
JSX

وهو documentId الخاص بالصف.

🚀 الخطوة 4

إنشاء الطلاب المفلترين

قبل return

const filteredStudents = students.filter(
  (student) => {

    // لا يوجد فلتر
    if (!selectedClassroom) {

      return true;

    }

    return (
      student.section?.classroom?.documentId ===
      selectedClassroom
    );

  }
);
JSX

🧠 كيف تعمل؟

إذا لم يختر المستخدم صفاً:

selectedClassroom === ""
JSX

فنرجع:

true
JSX

أي:

أظهر كل الطلاب
JSX

إذا اختار صفاً

نفحص:

student.section.classroom.documentId
JSX

ونقارنه مع:

selectedClassroom
JSX

🚀 الخطوة 5

استبدال students بـ filteredStudents

بدلاً من:

{
  students.map((student) => (
JSX

اجعلها:

{
  filteredStudents.map((student) => (
JSX

🎯 النتيجة

عند اختيار:

الصف الأول
JSX

سيظهر فقط طلاب الصف الأول.

🔥 خطوة أكثر احترافية

غالباً المستخدم يريد:

فلتر حسب المرحلة
ثم الصف
JSX

مثل:

المرحلة الابتدائية
     ↓
الصف الأول
     ↓
إظهار الطلاب
JSX

وهذا يسمى:

Dependent Filters
JSX

وهو أفضل من فلتر الصف وحده إذا كان لديك عدد كبير من الصفوف.

🔥 خطوة أكثر احترافية أيضاً

يمكن دمج:

بحث بالاسم
+
فلتر الصف
JSX

مثلاً:

const filteredStudents = students.filter(
  (student) => {

    const matchesSearch =
      student.name
        ?.toLowerCase()
        .includes(search.toLowerCase());

    const matchesClassroom =
      !selectedClassroom ||
      student.section?.classroom?.documentId ===
      selectedClassroom;

    return (
      matchesSearch &&
      matchesClassroom
    );

  }
);
JSX

فتصبح الفلاتر قابلة للتجميع مع بعضها، وهي الطريقة المستخدمة في الأنظمة الاحترافية. 🚀