Add create exam page.

Signed-off-by: Aliwoto <[email protected]>
ALiwoto · Aug 23, 2024 · 8992d01 · 8992d01
1 parent 03db8fc
commit 8992d01
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "@mui/x-date-pickers": "^7.14.0",
     "@openapitools/openapi-generator-cli": "^2.13.4",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
@@ -16,6 +17,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.4",
+    "moment-jalaali": "^0.10.1",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -56,7 +58,8 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@types/moment-jalaali": "^0.7.9"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,6 +14,7 @@ import ConfirmAccountRedirectPage from './pages/confirmAccountRedirectPage';
 import CreateCoursePage from './pages/createCoursePage';
 import CourseInfoPage from './pages/courseInfoPage';
 import SearchCoursePage from './pages/searchCoursePage';
+import CreateExamPage from './pages/createExamPage';
 
 const App: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(apiClient.isLoggedIn());
@@ -112,7 +113,7 @@ const App: React.FC = () => {
         />
         <Route
           path="/createExam"
-          element={apiClient.canCreateTopics() ? <CreateCoursePage /> : <Navigate to="/dashboard" />}
+          element={apiClient.canCreateTopics() ? <CreateExamPage /> : <Navigate to="/dashboard" />}
         />
         <Route
           path="/examInfo"

diff --git a/src/apiClient.ts b/src/apiClient.ts
@@ -29,6 +29,9 @@ import {
     EditCourseData,
     SearchCourseData,
     SearchCourseResult,
+    CreateExamData,
+    CreateExamResult,
+    ExamApi,
 } from './api';
 import { canParseAsNumber } from './utils/textUtils';
 
@@ -52,6 +55,7 @@ class ExamSphereAPIClient extends UserApi {
 
     private topicApi: TopicApi;
     private courseApi: CourseApi;
+    private examApi: ExamApi;
 
     constructor() {
         super();
@@ -61,6 +65,7 @@ class ExamSphereAPIClient extends UserApi {
 
         this.topicApi = new TopicApi(this.configuration);
         this.courseApi = new CourseApi(this.configuration);
+        this.examApi = new ExamApi(this.configuration);
     }
 
     /**
@@ -422,6 +427,21 @@ class ExamSphereAPIClient extends UserApi {
         return createCourseResult;
     }
 
+    public async createExam(data: CreateExamData): Promise<CreateExamResult> {
+        if (!this.isLoggedIn()) {
+            throw new Error("Not logged in");
+        }
+
+        let createExamResult = (await this.examApi.createExamV1(`Bearer ${this.accessToken}`, data))?.data.result;
+        if (!createExamResult) {
+            // we shouldn't reach here, because if there is an error somewhere,
+            // it should have already been thrown by the API client
+            throw new Error("Failed to create exam");
+        }
+
+        return createExamResult;
+    }
+
     /**
      * Returns true if we are considered as "logged in" by the API client,
      * This method only checks if the access token is present, it doesn't

diff --git a/src/components/date/ModernDatePicker.tsx b/src/components/date/ModernDatePicker.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { TextField, ThemeProvider, createTheme } from '@mui/material';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import moment from 'moment-jalaali';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';
+
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: '#2196f3',
+        },
+    },
+});
+
+const ModernDateTimePicker: React.FC = () => {
+    moment.loadPersian({ dialect: 'persian-modern' });
+    const [selectedDateTime, setSelectedDateTime] = React.useState<Date | null>(null);
+
+    return (
+        <ThemeProvider theme={theme}>
+            {/* <LocalizationProvider dateAdapter={AdapterDateFns}> */}
+            <LocalizationProvider dateAdapter={AdapterMomentJalaali}>
+                <DateTimePicker
+                    label="Exam Start Time"
+                    value={selectedDateTime as any}
+                    onChange={(newValue) => {
+                        setSelectedDateTime(newValue);
+                    }}
+                />
+            </LocalizationProvider>
+        </ThemeProvider>
+    );
+};
+
+export default ModernDateTimePicker;
diff --git a/src/components/menus/sideMenu.tsx b/src/components/menus/sideMenu.tsx
@@ -51,7 +51,7 @@ const RenderManageUserMenu = () => {
       </MenuItem>
       <MenuItem
         label={CurrentAppTranslation.ChangeUserPasswordText}
-        href='/changeUser'
+        href='/changeUserPassword'
       >
       </MenuItem>
     </MenuItem>
@@ -61,11 +61,11 @@ const RenderManageUserMenu = () => {
 const RenderManageTopicsMenu = () => {
   return (
     <MenuItem label={CurrentAppTranslation.ManageTopicsText}>
-      <MenuItem 
+      <MenuItem
         label={CurrentAppTranslation.AddTopicText}
         href='/createTopic'
       ></MenuItem>
-      <MenuItem 
+      <MenuItem
         label={CurrentAppTranslation.SearchTopicsText}
         href='/searchTopic'
       ></MenuItem>
@@ -76,17 +76,17 @@ const RenderManageTopicsMenu = () => {
 const RenderManageCoursesMenu = () => {
   return (
     <MenuItem label={CurrentAppTranslation.ManageCoursesText}>
-      <MenuItem 
+      <MenuItem
         label={CurrentAppTranslation.AddCourseText}
         href='/createCourse'
       ></MenuItem>
-      <MenuItem 
+      <MenuItem
         label={CurrentAppTranslation.SearchCoursesText}
         href='/searchCourse'
       ></MenuItem>
-      <MenuItem 
+      <MenuItem
         label={CurrentAppTranslation.EditCourseText}
-        href='/editCourse'
+        href='/searchCourse'
       ></MenuItem>
     </MenuItem>
   )
@@ -95,8 +95,14 @@ const RenderManageCoursesMenu = () => {
 const RenderManageExamsMenu = () => {
   return (
     <MenuItem label={CurrentAppTranslation.ManageExamsText}>
-      <MenuItem label={CurrentAppTranslation.AddExamText}></MenuItem>
-      <MenuItem label={CurrentAppTranslation.EditExamText}></MenuItem>
+      <MenuItem
+        label={CurrentAppTranslation.AddExamText}
+        href='/createExam'
+      ></MenuItem>
+      <MenuItem 
+        label={CurrentAppTranslation.EditExamText}
+        href='/searchExam'
+        ></MenuItem>
     </MenuItem>
   )
 };