Feature/allow supervisors to draft theses (#781)

Author: rampecke

client/src/components/TopicsFilters/TopicsFilters.tsx

@@ -1,11 +1,11 @@
-import { Center, Checkbox, Grid, Stack } from '@mantine/core'
+import { Center, Checkbox, Grid, Group, SegmentedControl, Stack } from '@mantine/core'
 import { GLOBAL_CONFIG } from '../../config/global'
-import React from 'react'
 import { useTopicsContext } from '../../providers/TopicsProvider/hooks'
-import { formatThesisType } from '../../utils/format'
+import { TopicState } from '../../requests/responses/topic'
+import { formatThesisType, formatTopicState } from '../../utils/format'
 
 interface ITopicsFiltersProps {
-  visible: Array<'type' | 'closed'>
+  visible: Array<'type' | 'states'>
 }
 
 const TopicsFilters = (props: ITopicsFiltersProps) => {
@@ -15,17 +15,24 @@ const TopicsFilters = (props: ITopicsFiltersProps) => {
 
   return (
     <Stack>
-      {visible.includes('closed') && (
-        <Checkbox
-          label='Show Closed Topics'
-          checked={!!filters.includeClosed}
-          onChange={(e) => {
-            setFilters((prev) => ({
-              ...prev,
-              includeClosed: e.target.checked,
-            }))
-          }}
-        />
+      {visible.includes('states') && (
+        <Group>
+          <SegmentedControl
+            data={Object.values(TopicState).map((state) => ({
+              label: formatTopicState(state),
+              value: state,
+            }))}
+            onChange={(e) => {
+              setFilters((prev) => ({
+                ...prev,
+                states: [e],
+              }))
+            }}
+            size='sm'
+            transitionDuration={300}
+            transitionTimingFunction='linear'
+          />
+        </Group>
       )}
       {visible.includes('type') && (
         <Grid grow>

client/src/components/TopicsTable/TopicsTable.tsx

@@ -1,11 +1,10 @@
 import { DataTable, DataTableColumn } from 'mantine-datatable'
 import { formatDate } from '../../utils/format'
 import { useTopicsContext } from '../../providers/TopicsProvider/hooks'
-import { ITopic } from '../../requests/responses/topic'
+import { ITopic, TopicState } from '../../requests/responses/topic'
 import { useNavigate } from 'react-router'
 import { Badge, Center, Stack, Text } from '@mantine/core'
 import AvatarUserList from '../AvatarUserList/AvatarUserList'
-import React from 'react'
 import ThesisTypeBadge from '../../pages/LandingPage/components/ThesisTypBadge/ThesisTypBadge'
 
 type TopicColumn =
@@ -35,6 +34,19 @@ const TopicsTable = (props: ITopicsTableProps) => {
 
   const { topics, page, setPage, limit, isLoading } = useTopicsContext()
 
+  const getTopicColor = (state: TopicState) => {
+    switch (state) {
+      case TopicState.OPEN:
+        return 'green'
+      case TopicState.CLOSED:
+        return 'red'
+      case TopicState.DRAFT:
+        return 'yellow'
+      default:
+        return 'gray'
+    }
+  }
+
   const columnConfig: Record<TopicColumn, DataTableColumn<ITopic>> = {
     state: {
       accessor: 'state',
@@ -43,7 +55,9 @@ const TopicsTable = (props: ITopicsTableProps) => {
       width: 100,
       render: (topic) => (
         <Center>
-          {topic.closedAt ? <Badge color='red'>Closed</Badge> : <Badge color='gray'>Open</Badge>}
+          <Badge color={getTopicColor(topic.state)} radius='sm'>
+            {topic.state}
+          </Badge>
         </Center>
       ),
     },

client/src/pages/ManageTopicsPage/ManageTopicsPage.tsx

@@ -4,7 +4,7 @@ import { Button, Group, Stack, Title } from '@mantine/core'
 import TopicsProvider from '../../providers/TopicsProvider/TopicsProvider'
 import TopicsTable from '../../components/TopicsTable/TopicsTable'
 import { ITopic } from '../../requests/responses/topic'
-import { Pencil } from '@phosphor-icons/react'
+import { PencilIcon } from '@phosphor-icons/react'
 import CloseTopicButton from './components/CloseTopicButton/CloseTopicButton'
 import ReplaceTopicModal from './components/ReplaceTopicModal/ReplaceTopicModal'
 import TopicsFilters from '../../components/TopicsFilters/TopicsFilters'
@@ -33,7 +33,7 @@ const ManageTopicsPage = () => {
         <Button ml='auto' onClick={() => setCreateTopicModal(true)} hiddenFrom='md'>
           Create Topic
         </Button>
-        <TopicsFilters visible={['closed']} />
+        <TopicsFilters visible={['states']} />
         <TopicsTable
           columns={['state', 'title', 'types', 'supervisor', 'advisor', 'createdAt', 'actions']}
           extraColumns={{
@@ -52,7 +52,7 @@ const ManageTopicsPage = () => {
                 >
                   {!topic.closedAt && (
                     <Button size='xs' onClick={() => setEditingTopic(topic)}>
-                      <Pencil />
+                      <PencilIcon />
                     </Button>
                   )}
                   <CloseTopicButton size='xs' topic={topic} />

client/src/pages/ManageTopicsPage/components/CloseTopicButton/CloseTopicButton.tsx

@@ -1,4 +1,4 @@
-import { ITopic } from '../../../../requests/responses/topic'
+import { ITopic, TopicState } from '../../../../requests/responses/topic'
 import { X } from '@phosphor-icons/react'
 import React, { useEffect, useState } from 'react'
 import { useTopicsContext } from '../../../../providers/TopicsProvider/hooks'
@@ -40,10 +40,12 @@ const CloseTopicButton = (props: ICloseTopicButtonProps) => {
     return null
   }
 
+  const titleName = topic.state === TopicState.DRAFT ? 'Draft' : 'Topic'
+
   return (
     <Button onClick={() => setConfirmationModal(true)} size={size}>
       <Modal
-        title='Close Topic'
+        title={`Close ${titleName}`}
         opened={confirmationModal}
         onClose={() => setConfirmationModal(false)}
         onClick={(e) => e.stopPropagation()}
@@ -76,24 +78,28 @@ const CloseTopicButton = (props: ICloseTopicButtonProps) => {
         >
           <Stack>
             <Text>
-              Are you sure you want to close this topic? This will reject all applications for it.
+              {`Are you sure you want to close this ${titleName.toLowerCase()}? ${topic.state === TopicState.DRAFT ? '' : 'This will reject all applications for the topic.'}`}
             </Text>
-            <Select
-              label='Reason'
-              required
-              data={[
-                { value: 'TOPIC_FILLED', label: 'Topic was filled' },
-                { value: 'TOPIC_OUTDATED', label: 'Topic is outdated' },
-              ]}
-              {...form.getInputProps('reason')}
-            />
-            <Checkbox
-              label='Notify Students'
-              required
-              {...form.getInputProps('notifyUser', { type: 'checkbox' })}
-            />
+            {topic.state !== TopicState.DRAFT && (
+              <>
+                <Select
+                  label='Reason'
+                  required
+                  data={[
+                    { value: 'TOPIC_FILLED', label: 'Topic was filled' },
+                    { value: 'TOPIC_OUTDATED', label: 'Topic is outdated' },
+                  ]}
+                  {...form.getInputProps('reason')}
+                />
+                <Checkbox
+                  label='Notify Students'
+                  required
+                  {...form.getInputProps('notifyUser', { type: 'checkbox' })}
+                />
+              </>
+            )}
             <Button type='submit' loading={loading} fullWidth>
-              Close Topic
+              {`Close ${titleName}`}
             </Button>
           </Stack>
         </form>

client/src/pages/ManageTopicsPage/components/ReplaceTopicModal/ReplaceTopicModal.tsx

@@ -1,5 +1,5 @@
-import { Button, Modal, MultiSelect, Select, Stack, TextInput } from '@mantine/core'
-import { ITopic } from '../../../../requests/responses/topic'
+import { Button, Group, Modal, MultiSelect, Select, Stack, TextInput } from '@mantine/core'
+import { ITopic, TopicState } from '../../../../requests/responses/topic'
 import { isNotEmpty, useForm } from '@mantine/form'
 import { isNotEmptyUserList } from '../../../../utils/validation'
 import { useEffect, useState } from 'react'
@@ -144,7 +144,7 @@ const ReplaceTopicModal = (props: ICreateTopicModalProps) => {
     )
   }, [opened])
 
-  const onSubmit = async () => {
+  const onSubmit = async (isDraft = false) => {
     setLoading(true)
 
     try {
@@ -163,6 +163,7 @@ const ReplaceTopicModal = (props: ICreateTopicModalProps) => {
           researchGroupId: form.values.researchGroupId,
           intendedStart: form.values.intendedStart ?? null,
           applicationDeadline: form.values.applicationDeadline ?? null,
+          isDraft: isDraft,
         },
       })
 
@@ -191,7 +192,7 @@ const ReplaceTopicModal = (props: ICreateTopicModalProps) => {
       opened={opened}
       onClose={onClose}
     >
-      <form onSubmit={form.onSubmit(onSubmit)}>
+      <form onSubmit={form.onSubmit(() => onSubmit(false))}>
         <Stack gap='md'>
           <TextInput label='Title' required {...form.getInputProps('title')} />
           <MultiSelect
@@ -266,9 +267,25 @@ const ReplaceTopicModal = (props: ICreateTopicModalProps) => {
             editMode={true}
             {...form.getInputProps('references')}
           />
-          <Button type='submit' fullWidth disabled={!form.isValid()} loading={loading}>
-            {topic ? 'Save changes' : 'Create topic'}
-          </Button>
+          <Group>
+            {(!props.topic || props.topic.state === TopicState.DRAFT) && (
+              <Button
+                variant='default'
+                onClick={() => onSubmit(true)}
+                disabled={!form.isValid()}
+                loading={loading}
+              >
+                {props.topic ? 'Save Changes' : 'Create Draft'}
+              </Button>
+            )}
+            <Button type='submit' flex={1} disabled={!form.isValid()} loading={loading}>
+              {topic
+                ? topic.state === TopicState.DRAFT
+                  ? 'Save & Create Topic'
+                  : 'Save Changes'
+                : 'Create Topic'}
+            </Button>
+          </Group>
         </Stack>
       </form>
     </Modal>

client/src/providers/TopicsProvider/TopicsProvider.tsx

@@ -1,39 +1,39 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { doRequest } from '../../requests/request'
 import { showSimpleError } from '../../utils/notification'
-import { ITopic } from '../../requests/responses/topic'
+import { ITopic, TopicState } from '../../requests/responses/topic'
 import { ITopicsContext, ITopicsFilters, TopicsContext } from './context'
 import { PaginationResponse } from '../../requests/responses/pagination'
 
 interface ITopicsProviderProps {
-  includeClosedTopics?: boolean
   limit: number
   hideIfEmpty?: boolean
   researchSpecific?: boolean
   initialFilters?: Partial<ITopicsFilters>
+  states?: TopicState[]
 }
 
 const TopicsProvider = (props: PropsWithChildren<ITopicsProviderProps>) => {
   const {
     children,
-    includeClosedTopics = false,
     limit,
     hideIfEmpty = false,
     researchSpecific = true,
     initialFilters,
+    states = [],
   } = props
 
   const [topics, setTopics] = useState<PaginationResponse<ITopic>>()
   const [page, setPage] = useState(0)
   const [filters, setFilters] = useState<ITopicsFilters>({
-    includeClosed: includeClosedTopics,
+    states: states,
     researchSpecific: researchSpecific,
     ...initialFilters,
   })
 
   const [isLoading, setIsLoading] = useState(false)
 
-  useEffect(() => {
+  const fetchTopics = async () => {
     setIsLoading(true)
 
     return doRequest<PaginationResponse<ITopic>>(
@@ -45,7 +45,7 @@ const TopicsProvider = (props: PropsWithChildren<ITopicsProviderProps>) => {
           page,
           limit,
           type: filters.types?.join(',') || '',
-          includeClosed: filters.includeClosed ? 'true' : 'false',
+          states: filters.states?.join(',') || '',
           onlyOwnResearchGroup: filters.researchSpecific ? 'true' : 'false',
           search: filters.search ?? '',
           researchGroupIds: filters.researchGroupIds?.join(',') || '',
@@ -70,12 +70,16 @@ const TopicsProvider = (props: PropsWithChildren<ITopicsProviderProps>) => {
         setTopics(res.data)
       },
     )
+  }
+
+  useEffect(() => {
+    fetchTopics()
   }, [filters, page, limit])
 
   useEffect(() => {
     setFilters((prev) => ({
       ...prev,
-      includeClosed: includeClosedTopics,
+      states: states,
       researchSpecific: researchSpecific,
       ...initialFilters,
     }))
@@ -99,10 +103,18 @@ const TopicsProvider = (props: PropsWithChildren<ITopicsProviderProps>) => {
 
           const index = prev.content.findIndex((x) => x.topicId === newTopic.topicId)
 
+          let newFetchRequired = false
+
           if (index >= 0) {
+            newFetchRequired = newTopic.state !== prev.content[index].state
             prev.content[index] = newTopic
           }
 
+          if (newFetchRequired) {
+            // If state changed, refetch to update based on filters
+            fetchTopics()
+          }
+
           return { ...prev }
         })
       },
@@ -112,9 +124,14 @@ const TopicsProvider = (props: PropsWithChildren<ITopicsProviderProps>) => {
             return undefined
           }
 
-          prev.content = [newTopic, ...prev.content].slice(-limit)
-          prev.totalElements += 1
-          prev.totalPages = Math.ceil(prev.totalElements / limit)
+          const states = filters.states ?? [TopicState.OPEN.toString()]
+          const newHasState = states.includes(newTopic.state)
+
+          if (newHasState) {
+            prev.content = [newTopic, ...prev.content].slice(-limit)
+            prev.totalElements += 1
+            prev.totalPages = Math.ceil(prev.totalElements / limit)
+          }
 
           return { ...prev }
         })

client/src/providers/TopicsProvider/context.ts

@@ -4,7 +4,7 @@ import { PaginationResponse } from '../../requests/responses/pagination'
 
 export interface ITopicsFilters {
   types?: string[]
-  includeClosed?: boolean
+  states?: string[]
   researchSpecific?: boolean
   search?: string
   researchGroupIds?: string[]

client/src/requests/responses/topic.ts

@@ -10,12 +10,20 @@ export interface ITopic {
   goals: string
   references: string
   closedAt: string | null
+  publishedAt: string | null
   updatedAt: string
   createdAt: string
   intendedStart: string | null
   applicationDeadline: string | null
+  state: TopicState
   createdBy: ILightUser
   researchGroup: ILightResearchGroup
   advisors: ILightUser[]
   supervisors: ILightUser[]
 }
+
+export enum TopicState {
+  OPEN = 'OPEN',
+  DRAFT = 'DRAFT',
+  CLOSED = 'CLOSED',
+}