imports

src/common/icons/DefaultCheckBoxOutlineBlank/DefaultCheckBoxOutlineBlank.tsx

@@ -0,0 +1,3 @@
+import DefaultCheckBoxOutlineBlank from '@mui/icons-material/CheckBoxOutlineBlank'
+
+export { DefaultCheckBoxOutlineBlank as CheckBoxOutlineBlank }

src/common/icons/index.ts

@@ -33,6 +33,7 @@ export { Search } from './DefaultSearch/DefaultSearch'
 export { Forum } from './DefaultForum/DefaultForum'
 export { Flag } from './DefaultFlag/DefaultFlag'
 export { CheckBox } from './DefaultCheckBox/DefaultCheckBox'
+export { CheckBoxOutlineBlank } from './DefaultCheckBoxOutlineBlank/DefaultCheckBoxOutlineBlank'
 export * from './DefaultQuestionMark/DefaultQuestionMark'
 export { Save } from './DefaultSave/DefaultSave'
 export { MoreVert } from './DefaultMoreVert/DefaultMoreVert'

src/components/CreateTopic/Modal/TopicModal.tsx → src/components/CreateTopic/Modal/CreateTopicModal.tsx

@@ -3,20 +3,17 @@ import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import { Box, Button, Fab, Grid, Modal, Step, StepButton, Stepper } from '@common/components'
 import { Close } from '@common/icons'
-import { LearningPathTopic } from '@core'
+import {
+  CreateAlgorithmTable,
+  CreateAlgorithmTableNameProps,
+  CreateLearningElementClassificationTable,
+  CreateLearningElementTable,
+  CreateRemoteTopicsTable,
+  ExistingTopicsTable
+} from '@components'
+import { LearningPathTopic, RemoteLearningElement, RemoteTopic } from '@core'
+import { postCalculateLearningPath, postLearningElement, postLearningPathAlgorithm, postTopic } from '@services'
 import { usePersistedStore, useStore } from '@store'
-import RemoteLearningElement from '../../../core/RemoteLearningElement/RemoteLearningElement'
-import RemoteTopic from '../../../core/RemoteTopic/RemoteTopic'
-import { postLearningElement } from '../../../services/LearningElement/postLearningElement'
-import { postCalculateLearningPath } from '../../../services/LearningPath/postCalculateLearningPath'
-import { postLearningPathAlgorithm } from '../../../services/LearningPathAlgorithm/postLearningPathAlgorithm'
-import { postTopic } from '../../../services/Topic/postTopic'
-import TableAlgorithm from '../Table/TableAlgorithm'
-import type { TableAlgorithmNameProps } from '../Table/TableAlgorithm'
-import TableLearningElement from '../Table/TableLearningElement'
-import TableLearningElementClassification from '../Table/TableLearningElementClassification'
-import TableRemoteTopics from '../Table/TableRemoteTopics'
-import TableTopics from '../Table/TableTopics'
 
 type CourseModalProps = {
   open?: boolean
@@ -27,7 +24,7 @@ type LearningElementWithClassification = RemoteLearningElement & {
   classification: string
 }
 
-const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
+const CreateTopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
   const { t } = useTranslation()
   const { courseId } = useParams<{ courseId: string }>()
 
@@ -40,7 +37,7 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
   const [selectedLearningElementsClassification, setSelectedLearningElementsClassifiction] = useState<{
     [key: number]: LearningElementWithClassification[]
   }>({})
-  const [selectedAlgorithms, setSelectedAlgorithms] = useState<{ [key: number]: TableAlgorithmNameProps[] }>({})
+  const [selectedAlgorithms, setSelectedAlgorithms] = useState<{ [key: number]: CreateAlgorithmTableNameProps[] }>({})
   const [activeStep, setActiveStep] = useState<number>(0)
   const steps = ['Topics', 'Learning Elements', 'Classifications', 'Algorithms']
 
@@ -104,7 +101,7 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
     setSelectedLearningElementsClassifiction(learningElementClassifications)
   }
 
-  const handleAlgorithmChange = (algorithms: { [key: number]: TableAlgorithmNameProps[] }) => {
+  const handleAlgorithmChange = (algorithms: { [key: number]: CreateAlgorithmTableNameProps[] }) => {
     setSelectedAlgorithms(algorithms)
   }
 
@@ -255,7 +252,7 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
           </Stepper>
           {activeStep === 0 ? (
             <>
-              <TableRemoteTopics
+              <CreateRemoteTopicsTable
                 onTopicChange={handleTopicChange}
                 selectedTopicsModal={selectedTopics}
                 remoteTopics={remoteTopics}>
@@ -274,14 +271,14 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
                     </Button>
                   </Grid>
                 </Box>
-              </TableRemoteTopics>
+              </CreateRemoteTopicsTable>
               {alreadyCreatedTopics != undefined && alreadyCreatedTopics.topics.length > 0 && (
-                <TableTopics topics={alreadyCreatedTopics} />
+                <ExistingTopicsTable topics={alreadyCreatedTopics} />
               )}
             </>
           ) : activeStep === 1 ? (
             <Grid container item>
-              <TableLearningElement
+              <CreateLearningElementTable
                 selectedTopicsModal={selectedTopics}
                 onLearningElementChange={handleLearningElementChange}
                 selectedLearningElements={selectedLearningElements}>
@@ -312,11 +309,11 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
                     </Button>
                   </Grid>
                 </Box>
-              </TableLearningElement>
+              </CreateLearningElementTable>
             </Grid>
           ) : activeStep === 2 ? (
             <Grid container item>
-              <TableLearningElementClassification
+              <CreateLearningElementClassificationTable
                 selectedTopicsModal={selectedTopics}
                 LearningElements={selectedLearningElements}
                 LearningElementsClassification={selectedLearningElementsClassification}
@@ -350,11 +347,11 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
                     </Button>
                   </Grid>
                 </Box>
-              </TableLearningElementClassification>
+              </CreateLearningElementClassificationTable>
             </Grid>
           ) : activeStep === 3 ? (
             <Grid container item>
-              <TableAlgorithm
+              <CreateAlgorithmTable
                 selectedTopicsModal={selectedTopics}
                 selectedLearningElementClassification={selectedLearningElementsClassification}
                 onAlgorithmChange={handleAlgorithmChange}
@@ -398,7 +395,7 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
                     </Button>
                   </Grid>
                 </Box>
-              </TableAlgorithm>
+              </CreateAlgorithmTable>
             </Grid>
           ) : null}
         </Box>
@@ -407,5 +404,5 @@ const TopicModal = memo(({ open = false, handleClose }: CourseModalProps) => {
   )
 })
 // eslint-disable-next-line immutable/no-mutation
-TopicModal.displayName = 'TopicModal'
-export default TopicModal
+CreateTopicModal.displayName = 'TopicModal'
+export default CreateTopicModal

src/components/CreateTopic/Table/TableAlgorithm.tsx → src/components/CreateTopic/Table/CreateAlgorithmTable.tsx

@@ -1,32 +1,30 @@
-import { Box, FormGroup, Grid, InputLabel, MenuItem, Paper, Select, Typography } from '@mui/material'
-import { ReactNode, useCallback, useEffect, useMemo } from 'react'
-import { memo } from 'react'
+import { ReactNode, memo, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SkeletonList } from '@components'
-import RemoteTopic from '../../../core/RemoteTopic/RemoteTopic'
-import type { LearningElementWithClassification } from '../Table/TableLearningElementClassification'
+import { Box, FormGroup, Grid, InputLabel, MenuItem, Paper, Select, Typography } from '@common/components'
+import { LearningElementWithClassification, SkeletonList } from '@components'
+import { RemoteTopic } from '@core'
 
-export type TableAlgorithmNameProps = {
+export type CreateAlgorithmTableNameProps = {
   topicName: string
   algorithmShortName: string
 }
 
-type TableAlgorithmProps = {
+type CreateAlgorithmTableProps = {
   selectedTopicsModal: RemoteTopic[]
   selectedLearningElementClassification: { [key: number]: LearningElementWithClassification[] }
-  onAlgorithmChange: (selectedAlgorithms: { [key: number]: TableAlgorithmNameProps[] }) => void
-  selectedAlgorithms: { [key: number]: TableAlgorithmNameProps[] }
+  onAlgorithmChange: (selectedAlgorithms: { [key: number]: CreateAlgorithmTableNameProps[] }) => void
+  selectedAlgorithms: { [key: number]: CreateAlgorithmTableNameProps[] }
   children?: ReactNode
 }
 
-const TableAlgorithm = memo(
+const CreateAlgorithmTable = memo(
   ({
     selectedTopicsModal = [],
     selectedLearningElementClassification,
     onAlgorithmChange,
     selectedAlgorithms,
     children
-  }: TableAlgorithmProps) => {
+  }: CreateAlgorithmTableProps) => {
     const { t } = useTranslation()
 
     const topicAlgorithmOptions = useMemo(() => {
@@ -153,5 +151,5 @@ const TableAlgorithm = memo(
   }
 )
 // eslint-disable-next-line immutable/no-mutation
-TableAlgorithm.displayName = 'TableAlgorithm'
-export default TableAlgorithm
+CreateAlgorithmTable.displayName = 'TableAlgorithm'
+export default CreateAlgorithmTable

src/components/CreateTopic/Table/TableLearningElementClassification.tsx → src/components/CreateTopic/Table/CreateLearningElementClassificationTable.tsx

@@ -12,8 +12,7 @@ import {
   Typography
 } from '@common/components'
 import { SkeletonList } from '@components'
-import RemoteLearningElement from '../../../core/RemoteLearningElement/RemoteLearningElement'
-import RemoteTopic from '../../../core/RemoteTopic/RemoteTopic'
+import { RemoteLearningElement, RemoteTopic } from '@core'
 
 export type LearningElementWithClassification = RemoteLearningElement & {
   classification: string
@@ -27,7 +26,7 @@ type TableLearningElementClassificationProps = {
   children?: ReactNode
 }
 
-const TableLearningElementClassification = memo(
+const CreateLearningElementClassificationTable = memo(
   ({
     selectedTopicsModal,
     LearningElements,
@@ -150,5 +149,5 @@ const TableLearningElementClassification = memo(
   }
 )
 // eslint-disable-next-line immutable/no-mutation
-TableLearningElementClassification.displayName = 'TableLearningElementClassification'
-export default TableLearningElementClassification
+CreateLearningElementClassificationTable.displayName = 'TableLearningElementClassification'
+export default CreateLearningElementClassificationTable

src/components/CreateTopic/Table/TableLearningElement.tsx → src/components/CreateTopic/Table/CreateLearningElementTable.tsx

@@ -1,11 +1,9 @@
-import CheckBoxIcon from '@mui/icons-material/CheckBox'
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
 import { ReactNode, memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, Checkbox, Fab, FormControlLabel, FormGroup, Grid, Paper, Typography } from '@common/components'
+import { CheckBox, CheckBoxOutlineBlank } from '@common/icons'
 import { SkeletonList } from '@components'
-import RemoteLearningElement from '../../../core/RemoteLearningElement/RemoteLearningElement'
-import RemoteTopic from '../../../core/RemoteTopic/RemoteTopic'
+import { RemoteLearningElement, RemoteTopic } from '@core'
 
 type TableLearningElementProps = {
   selectedTopicsModal: RemoteTopic[]
@@ -14,7 +12,7 @@ type TableLearningElementProps = {
   children?: ReactNode
 }
 
-const TableLearningElement = memo(
+const CreateLearningElementTable = memo(
   ({ selectedTopicsModal, onLearningElementChange, selectedLearningElements, children }: TableLearningElementProps) => {
     const { t } = useTranslation()
     const handleCheckboxChange = (topicId: number, element: RemoteLearningElement, checked: boolean) => {
@@ -77,10 +75,10 @@ const TableLearningElement = memo(
               sx={{ mt: '1rem', mr: '0.5rem', color: '#f2852b', bgcolor: 'white' }}
               onClick={handleSelectAll}
               size="medium">
-              <CheckBoxIcon />
+              <CheckBox />
             </Fab>
             <Fab sx={{ mt: '1rem', color: '#f2852b', bgcolor: 'white' }} onClick={handleDeselectAll} size="medium">
-              <CheckBoxOutlineBlankIcon />
+              <CheckBoxOutlineBlank />
             </Fab>
           </Grid>
         </Grid>
@@ -126,5 +124,5 @@ const TableLearningElement = memo(
   }
 )
 // eslint-disable-next-line immutable/no-mutation
-TableLearningElement.displayName = 'TableLearningElement'
-export default TableLearningElement
+CreateLearningElementTable.displayName = 'TableLearningElement'
+export default CreateLearningElementTable

src/components/CreateTopic/Table/CreateRemoteTopicsTable.tsx

@@ -0,0 +1,68 @@
+import { ReactNode, memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Checkbox, FormControlLabel, FormGroup, Grid, Paper, Typography } from '@common/components'
+import { SkeletonList } from '@components'
+import { RemoteTopic } from '@core'
+
+type TableTopicProps = {
+  onTopicChange: (selectedTopics: RemoteTopic[]) => void
+  selectedTopicsModal: RemoteTopic[]
+  remoteTopics: RemoteTopic[]
+  children?: ReactNode
+}
+
+const CreateRemoteTopicsTable = memo(
+  ({ onTopicChange, selectedTopicsModal, remoteTopics, children }: TableTopicProps) => {
+    const { t } = useTranslation()
+    const handleTopicChange = useCallback(
+      (topic: RemoteTopic, checked: boolean) => {
+        const updatedTopics = checked
+          ? [...selectedTopicsModal, topic]
+          : selectedTopicsModal.filter((t) => t.topic_lms_id !== topic.topic_lms_id)
+        onTopicChange(updatedTopics)
+      },
+      [onTopicChange, selectedTopicsModal]
+    )
+
+    return (
+      <Grid container direction="column" alignItems="center" spacing={3}>
+        <Grid item>
+          <Typography variant="h6" sx={{ mt: '1rem' }}>
+            {t('components.TableRemoteTopics')}
+          </Typography>
+        </Grid>
+        <Grid item container alignItems="stretch" direction="row">
+          {remoteTopics.length === 0 ? (
+            <Grid container direction="column" alignItems="center">
+              <SkeletonList />
+            </Grid>
+          ) : (
+            <Grid item container direction="column" alignItems="center">
+              <Paper sx={{ padding: '1rem', width: '95%' }}>
+                <FormGroup>
+                  {remoteTopics.map((LmsTopic) => (
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={selectedTopicsModal.some((topic) => topic.topic_lms_id === LmsTopic.topic_lms_id)}
+                          onChange={(event) => handleTopicChange(LmsTopic, event.target.checked)}
+                          id={'topic-modal-available-topics-checkbox-' + LmsTopic.topic_lms_name}
+                        />
+                      }
+                      label={LmsTopic.topic_lms_name}
+                      key={LmsTopic.topic_lms_id}
+                    />
+                  ))}
+                </FormGroup>
+              </Paper>
+              {children}
+            </Grid>
+          )}
+        </Grid>
+      </Grid>
+    )
+  }
+)
+// eslint-disable-next-line immutable/no-mutation
+CreateRemoteTopicsTable.displayName = 'TableRemoteTopics'
+export default CreateRemoteTopicsTable

src/components/CreateTopic/Table/TableTopics.tsx → src/components/CreateTopic/Table/ExistingTopicsTable.tsx

@@ -7,7 +7,7 @@ type TableTopicsProps = {
   topics: LearningPathTopic
 }
 
-const TableTopics = memo(({ topics }: TableTopicsProps) => {
+const ExistingTopicsTable = memo(({ topics }: TableTopicsProps) => {
   const { t } = useTranslation()
   return (
     <Grid container direction="column" alignItems="center" spacing={3}>
@@ -34,5 +34,5 @@ const TableTopics = memo(({ topics }: TableTopicsProps) => {
   )
 })
 // eslint-disable-next-line immutable/no-mutation
-TableTopics.displayName = 'TableTopics'
-export default TableTopics
+ExistingTopicsTable.displayName = 'TableTopics'
+export default ExistingTopicsTable