teachers in Attendance

src/__data__/model.ts

@@ -53,10 +53,17 @@ export interface Lesson {
   id: string;
   name: string;
   students: User[];
+  teachers: Teacher[];
   date: string;
   created: string;
 }
 
+interface Teacher {
+  sub: string;
+  email_verified: boolean;
+  preferred_username: string;
+}
+
 export interface AccessCode {
   expires: string;
   lesson: Lesson;

src/pages/attendance/attendance.tsx

@@ -21,8 +21,15 @@ export const Attendance = () => {
     if (!attendance) return null
 
     const studentsMap = new Map()
+    const teachersMap = new Map()
 
     attendance.forEach((lesson) => {
+      lesson.teachers?.map((teacher: any) => {
+        teachersMap.set(teacher.sub, {  id: teacher.sub, ...teacher, value: teacher.value || (teacher.family_name && teacher.given_name
+          ? `${teacher.family_name} ${teacher.given_name}`
+          : teacher.name || teacher.email || teacher.preferred_username || teacher.family_name || teacher.given_name), })
+      })
+
       lesson.students.forEach((student) => {
         const current = studentsMap.get(student.sub) || {}
 
@@ -39,11 +46,13 @@ export const Attendance = () => {
     const compare = Intl.Collator('ru').compare
 
     const students = [...studentsMap.values()]
+    const taechers = [...teachersMap.values()]
     students.sort(({ family_name: name }, { family_name: nname }) =>
       compare(name, nname),
     )
     return {
       students,
+      taechers,
     }
   }, [attendance])
 
@@ -60,6 +69,9 @@ export const Attendance = () => {
         <table>
           <thead>
             <tr>
+              {data.taechers.map(teacher => (
+                <th id={teacher.id} key={teacher.id}>{teacher.value}</th>
+              ))}
               <th>Дата</th>
               <th>Название занятия</th>
               {data.students.map((student) => (
@@ -70,6 +82,22 @@ export const Attendance = () => {
           <tbody>
             {attendance.map((lesson, index) => (
               <tr key={lesson.name}>
+                {data?.taechers?.map((teacher) => {
+
+                  const wasThere = Boolean(lesson.teachers) &&
+                    lesson?.teachers?.findIndex((u) => u.sub === teacher.sub) !== -1
+                  return (
+                    <td
+                      style={{
+                        textAlign: 'center',
+                        backgroundColor: wasThere ? '#8ef78a' : '#e09797',
+                      }}
+                      key={teacher.sub}
+                    >
+                      {wasThere ? '+' : '-'}
+                    </td>
+                  )
+                })}
                 <td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
                 <td>{<ShortText text={lesson.name} />}</td>
 

stubs/mocks/lessons/list/success.json

@@ -4,6 +4,13 @@
     {
       "_id": "65e2e5fbec37fec650f28489",
       "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+      "teachers": [
+        {
+          "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
+          "email_verified": true,
+          "preferred_username": "primakov"
+        }
+      ],
       "students": [
         {
           "sub": "fcde3f22-d9ba-412a-a572-c59e515a290f",