feature: added teachers table

src/components/pages/admin/teachers-admin-page/TeachersAdminPage.styles.ts

@@ -0,0 +1 @@
+import { SxProps, Theme } from '@mui/material/styles';

src/components/pages/admin/teachers-admin-page/TeachersAdminPage.tsx

@@ -0,0 +1,32 @@
+import { FC, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+
+import TeachersTable from '@/components/pages/admin/teachers-admin-page/components/teachers-table';
+import teachersApi from '@/lib/api/teacher/TeacherAPI';
+import { GetTeachersResponse } from '@/lib/api/teacher/types/GetTeachersResponse';
+
+import * as styles from './TeachersAdminPage.styles';
+
+const TeachersAdminPage: FC = () => {
+  const [teachers, setTeachers] = useState<GetTeachersResponse>();
+
+  useEffect(() => {
+    try {
+      const result = teachersApi.getAll();
+      result.then(data => setTeachers(data));
+      console.log(teachers);
+    } catch (error) {
+      console.log(error);
+    }
+  }, [teachers]);
+
+  console.log(teachers);
+
+  return (
+    <Box sx={{ p: '20px 16px 0 16px' }}>
+      <TeachersTable teachers={teachers?.teachers} />
+    </Box>
+  );
+};
+
+export default TeachersAdminPage;

src/components/pages/admin/teachers-admin-page/components/teachers-table/TeachersTable.styles.ts

@@ -0,0 +1,31 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const headItem: SxProps<Theme> = {
+  typography: 'body1Bold',
+  color: 'white.main',
+  borderBottom: '1px solid',
+  borderColor: 'backgroundDark.400',
+};
+
+export const bodyItem: SxProps<Theme> = {
+  typography: 'body1Medium',
+  color: 'white.main',
+  borderBottom: '1px solid',
+  borderColor: 'backgroundDark.400',
+};
+
+export const tag: SxProps<Theme> = {
+  typography: 'body1Medium',
+  color: 'white.main',
+};
+
+export const tableColumn: SxProps<Theme> = {
+  flexDirection: 'row',
+  gap: '8px',
+  alignItems: 'center',
+};
+
+export const button: SxProps<Theme> = {
+  borderRadius: '8px',
+  width: '157px',
+};

src/components/pages/admin/teachers-admin-page/components/teachers-table/TeachersTable.tsx

@@ -0,0 +1,133 @@
+import React, { FC } from 'react';
+import { PencilSquareIcon } from '@heroicons/react/24/solid';
+import {
+  Avatar,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+
+import Button from '@/components/common/ui/button-mui';
+import {
+  ButtonSize,
+  ButtonVariant,
+} from '@/components/common/ui/button-mui/types';
+import { TrashBucketButton } from '@/components/common/ui/icon-button-mui/variants';
+import Tag from '@/components/common/ui/tag';
+import {
+  TagColor,
+  TagSize,
+  TagVariant,
+} from '@/components/common/ui/tag/types';
+import TeacherAPI from '@/lib/api/teacher/TeacherAPI';
+import mergeSx from '@/lib/utils/MergeSxStylesUtil';
+import { Teacher } from '@/types/teacher';
+
+import * as styles from './TeachersTable.styles';
+
+interface TeachersAdminSearchProps {
+  teachers?: Omit<Teacher, 'role'>[];
+}
+
+const TeachersTable: FC<TeachersAdminSearchProps> = ({ teachers }) => {
+  const deleteTeacher = async (id: string) => {
+    try {
+      await TeacherAPI.delete(id);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    <Table>
+      <TableHead>
+        <TableCell sx={mergeSx(styles.headItem, { minWidth: '574px' })}>
+          Викладач
+        </TableCell>
+        <TableCell sx={styles.headItem}>Кафедри</TableCell>
+        <TableCell sx={styles.headItem}>Теги</TableCell>
+        <TableCell sx={styles.headItem} />
+      </TableHead>
+      <TableBody>
+        {teachers &&
+          teachers.map((teacher, index) => (
+            <TableRow key={index}>
+              <TableCell sx={styles.bodyItem}>
+                <Stack sx={styles.tableColumn}>
+                  <Avatar src={teacher.avatar} sx={{ width: 36, height: 36 }} />
+                  <Typography sx={{ ml: '16px' }}>
+                    {teacher.lastName} {teacher.firstName[0]}.{' '}
+                    {teacher.middleName[0]}.
+                  </Typography>
+                </Stack>
+              </TableCell>
+              <TableCell sx={styles.bodyItem}>
+                <Stack sx={styles.tableColumn}>
+                  <Tag
+                    text="ОТ"
+                    variant={TagVariant.OUTLINE}
+                    color={TagColor.VIOLET}
+                    size={TagSize.SMALL}
+                    sx={styles.tag}
+                  />
+                  <Tag
+                    text="ІПІ"
+                    variant={TagVariant.OUTLINE}
+                    color={TagColor.ORANGE}
+                    size={TagSize.SMALL}
+                    sx={styles.tag}
+                  />
+                </Stack>
+              </TableCell>
+              <TableCell sx={styles.bodyItem}>
+                <Stack sx={styles.tableColumn}>
+                  <Tag
+                    text="Лекції"
+                    variant={TagVariant.FILL}
+                    color={TagColor.VIOLET}
+                    size={TagSize.SMALL}
+                    sx={styles.tag}
+                  />
+                  <Tag
+                    text="Практики"
+                    variant={TagVariant.FILL}
+                    color={TagColor.ORANGE}
+                    size={TagSize.SMALL}
+                    sx={styles.tag}
+                  />
+                  <Tag
+                    text="Лабораторні"
+                    variant={TagVariant.FILL}
+                    color={TagColor.INDIGO}
+                    size={TagSize.SMALL}
+                    sx={styles.tag}
+                  />
+                </Stack>
+              </TableCell>
+              <TableCell sx={styles.bodyItem}>
+                <Stack sx={styles.tableColumn}>
+                  <Button
+                    href={`/admin/teachers/${teacher.id}`}
+                    text="Редагувати"
+                    variant={ButtonVariant.OUTLINE}
+                    startIcon={<PencilSquareIcon />}
+                    size={ButtonSize.SMALL}
+                    sx={styles.button}
+                  />
+                  <TrashBucketButton
+                    onClick={() => deleteTeacher(teacher.id)}
+                  />
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default TeachersTable;

src/components/pages/admin/teachers-admin-page/components/teachers-table/index.ts

@@ -0,0 +1 @@
+export { default } from './TeachersTable';

src/components/pages/admin/teachers-admin-page/index.ts

@@ -0,0 +1 @@
+export { default } from './TeachersAdminPage';

src/lib/api/teacher/TeacherAPI.ts

@@ -107,6 +107,10 @@ class TeacherAPI {
       getAuthorizationHeader(),
     );
   }
+
+  async delete(teacherId: string): Promise<void> {
+    await client.delete(`/teachers/${teacherId}`, getAuthorizationHeader());
+  }
 }
 
 export default new TeacherAPI();

src/pages/admin/teachers/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
+import TeachersAdminPage from '@/components/pages/admin/teachers-admin-page';
 
 const Index = () => {
   return (
     <AdminPanelLayout>
-      <div></div>
+      <TeachersAdminPage />
     </AdminPanelLayout>
   );
 };