feature/admin-teachers-flow

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: "[BUG] "
-labels: bugfix
+labels: ''
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature.md

@@ -1,7 +1,7 @@
 ---
 name: Feature
 about: New feature on the front-end site
-title: "[FEATURE]"
+title: ''
 labels: feature
 assignees: ''
 

src/components/common/ui/form/input-mui/Input.styles.ts

@@ -57,7 +57,7 @@ export const label = (state: InputState): SxProps<Theme> => ({
 export const remark = (state: InputState): SxProps<Theme> => ({
   margin: '2px 8px 0 16px',
   '&.MuiFormHelperText-root': {
-    textTransform: 'lowercase',
+    textTransform: 'none',
   },
 
   ...(state === InputState.ERROR && {

src/components/common/ui/form/text-area-mui/TextArea.tsx

@@ -23,6 +23,7 @@ interface TextAreaProps {
   disabled?: boolean;
   showRemark?: boolean;
   rowsNumber?: number;
+  value?: string;
   sx?: SxProps<Theme>;
 }
 const TextArea: React.FC<TextAreaProps> = ({
@@ -33,6 +34,7 @@ const TextArea: React.FC<TextAreaProps> = ({
   disabled = false,
   showRemark = false,
   rowsNumber = 4,
+  value = '',
   sx = {},
 }) => {
   const [field, { touched, error }] = useField(name);
@@ -58,6 +60,7 @@ const TextArea: React.FC<TextAreaProps> = ({
         rows={rowsNumber}
         inputProps={{ maxLength: MAX_LENGTH }}
         color="warning"
+        value={value}
         placeholder={placeholder}
       />
       {showRemark && (

src/components/pages/account-page/components/group-tab/components/table/grid.styles.ts

@@ -31,8 +31,7 @@ export const row: SxProps<Theme> = {
         mobile: '8px',
         desktop: '16px',
       },
-      '& img': {
-        borderRadius: '50%',
+      '& .MuiAvatar-root': {
         width: { mobile: '36px', desktop: '48px' },
         height: { mobile: '36px', desktop: '48px' },
       },

src/components/pages/account-page/components/group-tab/components/table/student-table/StudentsTable.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { PlusIcon } from '@heroicons/react/24/solid';
-import { Box, Grid, Typography, useMediaQuery } from '@mui/material';
+import { Avatar, Box, Grid, Typography, useMediaQuery } from '@mui/material';
 
 import { Captain } from '@/components/common/icons/Captain';
 import { Moderator } from '@/components/common/icons/Moderator';
@@ -87,7 +87,7 @@ const StudentsTable: React.FC<StudentsTableProps> = ({
           <Grid container key={index} sx={gridStyles.row}>
             {row.imgSrc && (
               <Grid item desktop={4} mobile={9}>
-                <img width={48} height={48} src={row.imgSrc} alt="avatar" />
+                <Avatar src={row.imgSrc} alt="avatar" />
                 {!isMobile && (
                   <Typography className="name">{row.fullName}</Typography>
                 )}

src/components/pages/account-page/components/security-tab/components/change-password-form/ChangePasswordForm.tsx

@@ -58,6 +58,7 @@ const ChangePasswordForm = () => {
               type={InputType.PASSWORD}
               name="oldPassword"
               isSuccessOnDefault={true}
+              showRemark={true}
             />
             {errors.oldPassword === 'Введений пароль недійсний' && (
               <Typography variant="body2">
@@ -77,6 +78,7 @@ const ChangePasswordForm = () => {
               name="newPassword"
               disabled={!!errors.oldPassword}
               isSuccessOnDefault={true}
+              showRemark={true}
             />
             <Input
               sx={styles.input}
@@ -86,6 +88,7 @@ const ChangePasswordForm = () => {
               name="confirmationPassword"
               disabled={!!errors.oldPassword || !!errors.newPassword}
               isSuccessOnDefault={true}
+              showRemark={true}
             />
             <Box sx={styles.confirmButton}>
               <Button

src/components/pages/account-page/components/security-tab/components/change-password-form/validation/index.ts

@@ -11,9 +11,11 @@ export const validationSchema = yup.object().shape({
   newPassword: yup
     .string()
     .required(`Обов'язкове поле`)
+    .min(8, 'Не коротше 8 символів')
+    .max(32, 'Не довше 32 символів')
     .matches(
-      /^(?=.*[A-Za-z])(?=.*\d)[\w\W]+$/,
-      'Мінімум одна латинська літера та одна цифра',
+      /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_])[\w\W]+$/,
+      'Мінімум одна велика латинська літера, одна цифра та один спеціальний символ',
     ),
   confirmationPassword: yup
     .string()

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

@@ -0,0 +1,25 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const pagination: SxProps<Theme> = {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  borderBottom: 'none',
+  color: 'backgroundDark.600',
+  '& .MuiTablePagination-selectLabel': {
+    typography: 'body1Bold',
+  },
+  '& .MuiTablePagination-select, & .MuiTablePagination-displayedRows': {
+    color: 'white.main',
+    typography: 'body1Medium',
+  },
+  '& .MuiTablePagination-selectIcon': {
+    color: 'backgroundDark.600',
+  },
+  '& .MuiTablePagination-actions': {
+    '& .Mui-disabled': {
+      color: 'backgroundDark.500',
+    },
+    color: 'backgroundDark.600',
+  },
+};

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

@@ -0,0 +1,71 @@
+import React, { FC, useState } from 'react';
+import { useQuery } from 'react-query';
+import { Box, TablePagination } from '@mui/material';
+import { isAxiosError } from 'axios';
+
+import TeachersAdminSearch from '@/components/pages/admin/teachers-admin-page/components/teachers-admin-search';
+import { initialValues } from '@/components/pages/admin/teachers-admin-page/components/teachers-admin-search/constants';
+import { AdminSearchFormFields } from '@/components/pages/admin/teachers-admin-page/components/teachers-admin-search/types';
+import TeachersTable from '@/components/pages/admin/teachers-admin-page/components/teachers-table';
+import { useToastError } from '@/hooks/use-toast-error/useToastError';
+import teachersApi from '@/lib/api/teacher/TeacherAPI';
+
+import * as styles from './TeachersAdminPage.styles';
+
+const TeachersAdminPage: FC = () => {
+  const [count, setCount] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [curPage, setCurPage] = useState(0);
+  const [params, setParams] = useState<AdminSearchFormFields>(initialValues);
+  const toast = useToastError();
+  const { data, isLoading, refetch } = useQuery(
+    [curPage, 'teachers', pageSize],
+    () => teachersApi.getAll(params, pageSize, curPage),
+    {
+      keepPreviousData: true,
+      refetchOnWindowFocus: false,
+      onSuccess: data => {
+        setCount(data?.pagination?.totalAmount || 0);
+      },
+      onError: error => {
+        if (isAxiosError(error)) {
+          toast.displayError(error.response?.data.message);
+        }
+      },
+    },
+  );
+
+  const handleChange = (values: AdminSearchFormFields) => {
+    setParams(values);
+    setCurPage(0);
+    refetch();
+  };
+
+  const handleRowsPerPageChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setPageSize(Number(event.target.value));
+    setCurPage(0);
+  };
+
+  return (
+    <Box sx={{ p: '20px 16px 0 16px' }}>
+      <TeachersAdminSearch onSubmit={handleChange} />
+      <TeachersTable
+        teachers={data?.teachers}
+        isLoading={isLoading}
+        count={pageSize}
+      />
+      <TablePagination
+        sx={styles.pagination}
+        count={count}
+        page={curPage}
+        rowsPerPage={pageSize}
+        onPageChange={(e, page) => setCurPage(page)}
+        onRowsPerPageChange={e => handleRowsPerPageChange(e)}
+      />
+    </Box>
+  );
+};
+
+export default TeachersAdminPage;

src/components/pages/admin/teachers-admin-page/components/teachers-admin-search/TeachersAdminSearch.styles.ts

@@ -0,0 +1,31 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const header: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+};
+
+export const form: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: '5px',
+};
+
+export const input: SxProps<Theme> = {
+  width: '344px',
+};
+
+export const divider: SxProps<Theme> = {
+  borderColor: 'backgroundDark.600',
+  height: '46px',
+};
+
+export const button: SxProps<Theme> = {
+  width: '135px',
+  height: '48px',
+  borderRadius: '8px',
+};

src/components/pages/admin/teachers-admin-page/components/teachers-admin-search/TeachersAdminSearch.tsx

@@ -0,0 +1,89 @@
+import React, { FC, useCallback, useState } from 'react';
+import {
+  BarsArrowDownIcon,
+  BarsArrowUpIcon,
+} from '@heroicons/react/24/outline';
+import { Box, Divider } from '@mui/material';
+import { Form, Formik } from 'formik';
+
+import Button from '@/components/common/ui/button-mui';
+import { ButtonSize } from '@/components/common/ui/button-mui/types';
+import { Input, InputSize, InputType } from '@/components/common/ui/form';
+import {
+  IconButtonColor,
+  IconButtonShape,
+} from '@/components/common/ui/icon-button';
+import IconButton from '@/components/common/ui/icon-button-mui';
+import { IconButtonSize } from '@/components/common/ui/icon-button-mui/types';
+import { initialValues } from '@/components/pages/admin/teachers-admin-page/components/teachers-admin-search/constants';
+import { AdminSearchFormFields } from '@/components/pages/admin/teachers-admin-page/components/teachers-admin-search/types';
+
+import * as styles from './TeachersAdminSearch.styles';
+
+export interface TeachersAdminSearchProps {
+  onSubmit: (values: AdminSearchFormFields) => void;
+}
+
+const TeachersAdminSearch: FC<TeachersAdminSearchProps> = ({ onSubmit }) => {
+  const [order, setOrder] = useState<'asc' | 'desc'>('asc');
+  const handleFormSubmit = useCallback(
+    (values: AdminSearchFormFields) => {
+      onSubmit({ ...values, order });
+    },
+    [onSubmit, order],
+  );
+
+  const handleOrderChange = (values: AdminSearchFormFields) => {
+    setOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));
+    handleFormSubmit(values);
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
+      {({ values }) => (
+        <Form>
+          <Box sx={styles.header}>
+            <Box sx={styles.form}>
+              <Box>
+                <Input
+                  value={values.search}
+                  onChange={() => onSubmit(values)}
+                  size={InputSize.LARGE}
+                  type={InputType.SEARCH}
+                  width={344}
+                  name="search"
+                  placeholder="Пошук"
+                  showRemark={false}
+                />
+              </Box>
+              <Divider orientation="vertical" sx={styles.divider} />
+              <Box>
+                <IconButton
+                  onClick={() => handleOrderChange(values)}
+                  shape={IconButtonShape.SQUARE}
+                  color={IconButtonColor.SECONDARY}
+                  size={IconButtonSize.LARGE}
+                  icon={
+                    values.order === 'asc' ? (
+                      <BarsArrowDownIcon />
+                    ) : (
+                      <BarsArrowUpIcon />
+                    )
+                  }
+                />
+              </Box>
+            </Box>
+            <Button
+              size={ButtonSize.MEDIUM}
+              sx={styles.button}
+              text="Створити"
+              href="/admin/teachers/create"
+            />
+          </Box>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default TeachersAdminSearch;

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

@@ -0,0 +1,23 @@
+import { DropDownOption } from '@/components/common/ui/form/dropdown/types';
+import { AdminSearchFormFields } from '@/components/pages/admin/teachers-admin-page/components/teachers-admin-search/types';
+
+export const initialValues: AdminSearchFormFields = {
+  search: '',
+  sort: 'lastName',
+  order: 'asc',
+};
+
+export const tags: DropDownOption[] = [
+  {
+    label: 'Лекції',
+    id: 'lecture',
+  },
+  {
+    label: 'Практики',
+    id: 'practice',
+  },
+  {
+    label: 'Лабораторні',
+    id: 'laboratory',
+  },
+];

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

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

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

@@ -0,0 +1,5 @@
+export interface AdminSearchFormFields {
+  search: string;
+  order: 'desc' | 'asc';
+  sort: string;
+}

src/components/pages/admin/teachers-admin-page/components/teachers-admin-select/TeachersAdminSelect.styles.ts

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