Add doctoral toggle + doctoral questions

UniversityOfHelsinkiCS · Sep 26, 2024 · c6d5477 · c6d5477
1 parent 679fd8a
commit c6d5477
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 172 deletions.
diff --git a/client/components/FacultyMonitoringView/FacultyDegreeDropdown.js b/client/components/FacultyMonitoringView/FacultyDegreeDropdown.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { MenuItem, Dropdown } from 'semantic-ui-react'
+import { useSelector, useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { setLevel } from '../../util/redux/degreeReducer'
+
+const FacultyDegreeDropdown = () => {
+  const { t } = useTranslation()
+  const { selectedLevel } = useSelector(state => state.degree)
+  const dispatch = useDispatch()
+
+  return (
+    <MenuItem>
+      <Dropdown data-cy="degreeDropdown" className="button basic gray" direction="left" text={t(selectedLevel)}>
+        <Dropdown.Menu>
+          <Dropdown.Item
+            onClick={() => {
+              dispatch(setLevel('bachelorMasterToggle'))
+            }}
+          >
+            <p data-cy="bachelorOptionText">{t('bachelorMasterToggle')}</p>
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() => {
+              dispatch(setLevel('doctoral'))
+            }}
+          >
+            <p data-cy="doctoralOptionText">{t('doctoral')}</p>
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </MenuItem>
+  )
+}
+
+export default FacultyDegreeDropdown
diff --git a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/MonitoringOverview.js b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/MonitoringOverview.js
@@ -20,8 +20,9 @@ import { useDispatch, useSelector } from 'react-redux'
 import CustomModal from 'Components/Generic/CustomModal'
 import { getTempAnswersByForm } from 'Utilities/redux/tempAnswersReducer'
 import { formKeys } from '@root/config/data'
-import { facultyMonitoringQuestions } from '@root/client/questionData/index'
+import { facultyMonitoringQuestions as questions } from '@root/client/questionData/index'
 import Answer from '../FacultyTrackingView/Answer'
+import FacultyDegreeDropdown from '../FacultyDegreeDropdown'
 
 const squareStyles = {
   boxShadow: '0px 0px 1px 1px rgba(0, 0, 0, 0.1)',
@@ -71,6 +72,10 @@ const MonitoringOverview = ({ t, lang, faculties }) => {
   const form = formKeys.FACULTY_MONITORING
   const [questionModal, setQuestionModal] = useState(null)
   const [accordion, setAccordion] = useState(false)
+  const { selectedLevel } = useSelector(state => state.degree)
+
+  const questionLevel = selectedLevel === 'doctoral' ? 'doctoral' : 'kandimaisteri'
+  const questionData = questions.filter(q => q.level === questionLevel)
 
   const filteredFaculties = useMemo(
     () =>
@@ -225,6 +230,9 @@ const MonitoringOverview = ({ t, lang, faculties }) => {
         <MenuItem header className="menu-item-header">
           <h2>{t('facultymonitoring').toUpperCase()}</h2>
         </MenuItem>
+        <MenuItem>
+          <FacultyDegreeDropdown />
+        </MenuItem>
       </Menu>
 
       {questionModal && (
@@ -252,7 +260,7 @@ const MonitoringOverview = ({ t, lang, faculties }) => {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {facultyMonitoringQuestions.map((section, index) => (
+          {questionData.map((section, index) => (
             <React.Fragment key={section.id}>
               {' '}
               <TableRow>

diff --git a/client/components/FacultyMonitoringView/FacultyTrackingView/Answer.js b/client/components/FacultyMonitoringView/FacultyTrackingView/Answer.js
@@ -111,7 +111,7 @@ const Answer = ({ question, faculty, modify = true }) => {
 
   return (
     <>
-      <h4>{`${parseInt(question.id, 10)}. ${question.label[lang]}`}</h4>
+      <h4>{`${question.index}. ${question.label[lang]}`}</h4>
       <div className="answer-container">
         <div>
           <i>{t(`formView:monitoringTrackingLabel`)}</i>

diff --git a/client/components/FacultyMonitoringView/FacultyTrackingView/index.js b/client/components/FacultyMonitoringView/FacultyTrackingView/index.js
@@ -13,6 +13,7 @@ import { clearFormState, setViewOnly } from 'Utilities/redux/formReducer'
 import { getTempAnswersByForm } from 'Utilities/redux/tempAnswersReducer'
 import Answer from './Answer'
 import QuestionPicker from './QuestionPicker'
+import FacultyDegreeDropdown from '../FacultyDegreeDropdown'
 import './FacultyTrackingView.scss'
 
 const FacultyTrackingView = ({ faculty }) => {
@@ -29,10 +30,14 @@ const FacultyTrackingView = ({ faculty }) => {
   const [questionPickerModalData, setQuestionPickerModalData] = useState(null)
   const [activeAccordions, setActiveAccordions] = useState({})
   const viewOnly = useSelector(({ form }) => form.viewOnly)
+  const { selectedLevel } = useSelector(state => state.degree)
 
   const hasReadRights = user.access[faculty]?.read || user.specialGroup?.evaluationFaculty || isAdmin(user)
   const hasWriteRights = (user.access[faculty]?.write && user.specialGroup?.evaluationFaculty) || isAdmin(user)
 
+  const questionLevel = selectedLevel === 'doctoral' ? 'doctoral' : 'kandimaisteri'
+  const questionData = questions.filter(q => q.level === questionLevel)
+
   useEffect(() => {
     document.title = `${t('facultymonitoring')} – ${faculty}`
 
@@ -50,7 +55,7 @@ const FacultyTrackingView = ({ faculty }) => {
       dispatch(wsJoinRoom(faculty, form))
       dispatch(setViewOnly(false))
     }
-  }, [faculty, lang])
+  }, [faculty, lang, selectedLevel])
 
   useEffect(() => {
     return () => {
@@ -62,7 +67,19 @@ const FacultyTrackingView = ({ faculty }) => {
 
   useEffect(() => {
     setActiveAccordions({})
-  }, [lang])
+  }, [lang, selectedLevel])
+
+  const filteredQuestions = useMemo(
+    () =>
+      questionData
+        .map((object, index) => ({
+          ...object,
+          groupId: `group-${index}`,
+          parts: object.parts.filter(part => selectedQuestions.includes(part.id)),
+        }))
+        .filter(object => object.parts.length > 0),
+    [questionData, selectedQuestions],
+  )
 
   if (!user || !faculty) return <Redirect to="/" />
 
@@ -82,17 +99,6 @@ const FacultyTrackingView = ({ faculty }) => {
     }))
   }
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const filteredQuestions = useMemo(() =>
-    questions
-      .map((object, index) => ({
-        ...object,
-        groupId: `group-${index}`,
-        parts: object.parts.filter(part => selectedQuestions.includes(part.id)),
-      }))
-      .filter(object => object.parts.length > 0),
-  )
-
   return (
     <>
       <Menu size="large" className="filter-row" secondary>
@@ -108,12 +114,15 @@ const FacultyTrackingView = ({ faculty }) => {
           {!viewOnly && (
             <Button
               secondary
-              onClick={() => setQuestionPickerModalData(questions)}
+              onClick={() => setQuestionPickerModalData(questionData)}
               className="select-questions-button"
               content={t('formView:selectQuestions')}
             />
           )}
         </MenuItem>
+        <MenuItem>
+          <FacultyDegreeDropdown />
+        </MenuItem>
       </Menu>
 
       {questionPickerModalData && (
@@ -122,8 +131,7 @@ const FacultyTrackingView = ({ faculty }) => {
           title={`${t('formView:selectQuestions')} – ${facultyName}`}
         >
           <div className="question-picker-container">
-            {questions.map((group, index) => (
-              // eslint-disable-next-line react/no-array-index-key
+            {questionData.map((group, index) => (
               <div className="question-group" key={`group-${index}`}>
                 <QuestionPicker label={group.title[lang]} questionsList={group.parts} form={form} />
               </div>