New report page ui

UniversityOfHelsinkiCS · Oct 22, 2024 · cb5cfc5 · cb5cfc5
1 parent f146575
commit cb5cfc5
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 441 deletions.
diff --git a/client/components/Generic/FacultyFilter.js b/client/components/Generic/FacultyFilter.js
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { clearLevelSpecificFilters, setFaculty } from 'Utilities/redux/filterReducer'
 import './Generic.scss'
 
-const FacultyFilter = ({ size, label }) => {
+const FacultyFilter = ({ label }) => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const lang = useSelector(state => state.language)
@@ -45,16 +45,17 @@ const FacultyFilter = ({ size, label }) => {
     )
   }
   return (
-    <div className={`faculty-filter-${size}`}>
+    <div>
       <label>{label}</label>
       <Dropdown
         data-cy="faculty-filter"
         fluid
-        selection
         multiple
+        selection
         options={faculties ? getOptions() : []}
         onChange={handleChange}
         value={selectedFaculties}
+        className="responsive-dropdown"
       />
     </div>
   )

diff --git a/client/components/Generic/FormFilter.js b/client/components/Generic/FormFilter.js
@@ -32,7 +32,7 @@ const FormFilter = ({ version = null }) => {
   }
 
   return (
-    <div className={filterForm !== 4 ? `form-filter-small` : `form-filter-small-${filterForm}`}>
+    <div className="form-filter-small">
       <label>{t('chooseForm')}</label>
       <Select
         className="button basic gray"

diff --git a/client/components/Generic/Generic.scss b/client/components/Generic/Generic.scss
@@ -103,12 +103,13 @@
 }
 
 @mixin filter-basics {
-  margin: 2em 0em 0.5em 0em;
-  > label {
-    font-size: 1.05em;
-    margin-bottom: 0.5em;
-    display: block;
-  }
+  // margin: 2em 0em 0.5em 0em;
+  //   > label {
+  //   font-size: 1.05em;
+  //   margin-bottom: 0.5em;
+     display: flex;
+     align-items: center;
+  // }
 }
 
 @mixin filter-no-margin-top {
@@ -140,8 +141,6 @@
     width: 300px;
   }
   &-large {
-    @include filter-basics;
-    width: 100%;
   }
 }
 

diff --git a/client/components/Generic/LevelFilter.js b/client/components/Generic/LevelFilter.js
@@ -31,10 +31,14 @@ const LevelFilter = ({ comparison }) => {
   }
 
   return (
-    <div className="level-filter">
-      <label>{comparison ? t('generic:compareLevel') : t('generic:levelFilter')}</label>
+    <div className="level-filter" style={{ display: 'flex', alignItems: 'center'}}>
+
       <Form>
         <Form.Group inline>
+        <Form.Field>
+      <label>{comparison ? t('generic:compareLevel') : t('generic:levelFilter')}</label>
+        </Form.Field>
+
           <Form.Field>
             <Radio
               label={t('allProgrammes')}

diff --git a/client/components/Generic/ProgrammeList.js b/client/components/Generic/ProgrammeList.js
@@ -1,6 +1,6 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { Button, Icon, Segment } from 'semantic-ui-react'
+import { Button, Icon, Accordion } from 'semantic-ui-react'
 import { useTranslation } from 'react-i18next'
 
 import { sortedItems } from 'Utilities/common'
@@ -10,7 +10,7 @@ import { formKeys } from '@root/config/data'
 const Programme = ({ p, lang, selectedFaculties, form }) => {
   return (
     <Fragment key={p.key}>
-      {p.name[lang]}
+      <span style={{ cursor: 'pointer' }}>{p.name[lang]}</span>
       {form &&
         form !== formKeys.EVALUATION_FACULTIES &&
         form !== formKeys.FACULTY_MONITORING &&
@@ -39,6 +39,7 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
   const lang = useSelector(state => state.language)
   const selectedFaculties = useSelector(({ filters }) => filters.faculty)
   const form = useSelector(state => state.filters.form)
+  const [isOpen, setIsOpen] = useState(false)
 
   const addToList = programme => {
     if (!picked.includes(programme)) {
@@ -47,11 +48,19 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
   }
 
   const labels =
-    form === formKeys.EVALUATION_FACULTIES || form == formKeys.FACULTY_MONITORING ? facultyLabels : programmeLabels
+    form === formKeys.EVALUATION_FACULTIES || form === formKeys.FACULTY_MONITORING ? facultyLabels : programmeLabels
+
   return (
-    <>
-      <Segment className="list-container" data-cy="report-programmes-list">
+    <Accordion styled active fluid data-cy="report-programmes-list" style={{ maxHeight: '400px', overflowY: 'auto' }}>
+      <Accordion.Title onClick={() => setIsOpen(!isOpen)}>
+        {t(labels.nowShowing)}
+        <span>
+          <Icon name={`caret ${isOpen ? 'down' : 'right'}`} />
+        </span>
+      </Accordion.Title>
+      <Accordion.Content active={isOpen}>
         <p className="list-header">{t(labels.nowShowing)}</p>
+
         {programmes.all.length > 0 ? (
           <Fragment key={programmes}>
             {sortedItems(programmes.all, 'name', lang).map(p => {
@@ -74,9 +83,7 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
               )
             })}
             <div className="ui divider" />
-            <p className={`list-header${programmes.chosen.length === 0 ? '-alert' : ''}`}>
-              {t(`${labels.chooseMore}`)}
-            </p>
+            <p className={`list-header${programmes.chosen.length === 0 ? '-alert' : ''}`}>{t(`${labels.chooseMore}`)}</p>
             {sortedItems(programmes.all, 'name', lang).map(p => {
               let pKey = p.key
               if (form === formKeys.EVALUATION_FACULTIES || form === formKeys.FACULTY_MONITORING) {
@@ -100,12 +107,12 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
         ) : (
           <h4>{t('noData')}</h4>
         )}
-      </Segment>
-      <Button color="blue" onClick={() => setPicked(programmes.all)} data-cy="report-select-all">
-        {t('selectAll')}
-      </Button>
-      <Button onClick={() => setPicked([])}>{t('clearSelection')}</Button>
-    </>
+        <Button color="blue" onClick={() => setPicked(programmes.all)} data-cy="report-select-all">
+          {t('selectAll')}
+        </Button>
+        <Button onClick={() => setPicked([])}>{t('clearSelection')}</Button>
+      </Accordion.Content>
+    </Accordion>
   )
 }
 

diff --git a/client/components/ReportPage/FilterTray.js b/client/components/ReportPage/FilterTray.js
@@ -1,11 +1,11 @@
 import React from 'react'
+import { Menu, Container } from 'semantic-ui-react'
 import { useSelector } from 'react-redux'
 import CompanionFilter from 'Components/Generic/CompanionFilter'
 import DoctoralSchoolFilter from 'Components/Generic/DoctoralSchoolFilter'
 import LevelFilter from 'Components/Generic/LevelFilter'
 import FacultyFilter from 'Components/Generic/FacultyFilter'
 import ProgrammeFilter from 'Components/Generic/ProgrammeFilter'
-import FormFilter from 'Components/Generic/FormFilter'
 import { useTranslation } from 'react-i18next'
 import '../Generic/Generic.scss'
 import { formKeys } from '@root/config/data'
@@ -29,15 +29,7 @@ const getLevelFilter = ({ filters }) => {
 
 const getProgrammeFilter = ({ form, filter, t, handleSearch, setFilter }) => {
   if (form !== formKeys.EVALUATION_FACULTIES && form !== formKeys.FACULTY_MONITORING)
-    return (
-      <ProgrammeFilter
-        handleChange={handleSearch}
-        label={t('programmeFilter')}
-        filter={filter}
-        onEmpty={() => setFilter('')}
-        t={t}
-      />
-    )
+    return <ProgrammeFilter handleChange={handleSearch} filter={filter} onEmpty={() => setFilter('')} t={t} />
   return null
 }
 
@@ -46,26 +38,33 @@ const FilterTray = ({ filter, setFilter }) => {
   const filters = useSelector(state => state.filters)
   const usersProgrammes = useSelector(state => state.studyProgrammes.usersProgrammes)
   const { faculty, level, form } = filters
-
+ 
   const handleSearch = ({ target }) => {
     const { value } = target
     setFilter(value)
   }
 
+  if (
+    !usersProgrammes ||
+    !usersProgrammes.length > 5 ||
+    form === formKeys.FACULTY_MONITORING ||
+    form === formKeys.EVALUATION_FACULTIES
+  )
+    return null
+
   return (
     <>
-      <FormFilter />
-      {usersProgrammes && usersProgrammes.length > 5 && (
-        <>
-          {form !== formKeys.EVALUATION_FACULTIES && form !== formKeys.FACULTY_MONITORING && (
-            <FacultyFilter size="small" label={t('report:facultyFilter')} />
-          )}
-          {getLevelFilter({ filters })}
-          {getCompanionFilter({ faculty, level })}
-          {getDoctoralSchoolFilter({ faculty, level })}
-          {getProgrammeFilter({ form, filter, t, handleSearch, setFilter })}
-        </>
-      )}
+        {form !== formKeys.EVALUATION_FACULTIES && form !== formKeys.FACULTY_MONITORING && (
+          <FacultyFilter size="large" label={t('report:facultyFilter')} />
+        )}
+      <Menu secondary>
+        <Menu.Item>{getLevelFilter({ filters })}</Menu.Item>
+      </Menu>
+      <Menu secondary>
+        <Menu.Item>{getProgrammeFilter({ form, filter, t, handleSearch, setFilter })}</Menu.Item>
+        <Menu.Item>{getDoctoralSchoolFilter({ faculty, level })}</Menu.Item>
+        <Menu.Item>{getCompanionFilter({ faculty, level })}</Menu.Item>
+      </Menu>
     </>
   )
 }