diff --git a/frontend/src/editor/Injects/Inject.tsx b/frontend/src/editor/Injects/Inject.tsx
index 9b3e50a586a361e81bab861897dc11cd564fe173..3f4a82892a50f707ba79bc4b4b401332bc15b6af 100644
--- a/frontend/src/editor/Injects/Inject.tsx
+++ b/frontend/src/editor/Injects/Inject.tsx
@@ -5,7 +5,7 @@ import { memo, useCallback } from 'react'
import InjectForm from '../InjectForm'
import { deleteInjectInfo } from '../indexeddb/operations'
import type { InjectInfo } from '../indexeddb/types'
-import { InjectType } from '../indexeddb/types'
+import { getInjectIcon } from '../utils'
interface InjectItemProps {
inject: InjectInfo
@@ -30,10 +30,7 @@ const InjectItem: FC<InjectItemProps> = ({ inject }) => {
return (
<Card style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ height: '100%', flexGrow: 1 }}>
- <Icon
- icon={inject.type === InjectType.EMAIL ? 'envelope' : 'clipboard'}
- style={{ marginRight: '1rem' }}
- />
+ <Icon icon={getInjectIcon(inject)} style={{ marginRight: '1rem' }} />
{inject.name}
</span>
<ButtonGroup>
diff --git a/frontend/src/editor/LearningActivities/LearningActivity.tsx b/frontend/src/editor/LearningActivities/LearningActivity.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..48bc53cd2f61af2c3fc3e851e0b65c78c2665bf5
--- /dev/null
+++ b/frontend/src/editor/LearningActivities/LearningActivity.tsx
@@ -0,0 +1,64 @@
+import { Button, ButtonGroup, Card, Icon } from '@blueprintjs/core'
+import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'
+import type { FC } from 'react'
+import { memo, useCallback } from 'react'
+import LearningActivityForm from '../LearningActivityForm'
+import { deleteLearningActivity } from '../indexeddb/operations'
+import { type LearningActivityInfo } from '../indexeddb/types'
+import { getLearningActivityIcon } from '../utils'
+
+interface LearningActivityProps {
+ learningActivity: LearningActivityInfo
+}
+
+const LearningActivityItem: FC<LearningActivityProps> = ({
+ learningActivity,
+}) => {
+ const { notify } = useNotifyContext()
+
+ const handleDeleteButton = useCallback(
+ async (activity: LearningActivityInfo) => {
+ try {
+ await deleteLearningActivity(activity.id)
+ } catch (err) {
+ notify(
+ `Failed to delete learning activity '${activity.name}': ${err}`,
+ {
+ intent: 'danger',
+ }
+ )
+ }
+ },
+ [notify]
+ )
+
+ return (
+ <Card style={{ display: 'flex', justifyContent: 'space-between' }}>
+ <span style={{ height: '100%', flexGrow: 1 }}>
+ <Icon
+ icon={getLearningActivityIcon(learningActivity)}
+ style={{ marginRight: '1rem' }}
+ />
+ {learningActivity.name}
+ </span>
+ <ButtonGroup>
+ <LearningActivityForm
+ learningActivity={learningActivity}
+ learningObjectiveId={learningActivity.learningObjectiveId}
+ buttonProps={{
+ minimal: true,
+ icon: 'edit',
+ style: { marginRight: '1rem' },
+ }}
+ />
+ <Button
+ minimal
+ icon='cross'
+ onClick={() => handleDeleteButton(learningActivity)}
+ />
+ </ButtonGroup>
+ </Card>
+ )
+}
+
+export default memo(LearningActivityItem)
diff --git a/frontend/src/editor/LearningActivities/index.tsx b/frontend/src/editor/LearningActivities/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1eeebbbeb84408b6da5be8da88aebb37f950078c
--- /dev/null
+++ b/frontend/src/editor/LearningActivities/index.tsx
@@ -0,0 +1,31 @@
+import LearningActivityItem from '@/editor/LearningActivities/LearningActivity'
+import { db } from '@/editor/indexeddb/db'
+import type { LearningActivityInfo } from '@/editor/indexeddb/types'
+import { CardList } from '@blueprintjs/core'
+import { useLiveQuery } from 'dexie-react-hooks'
+import type { FC } from 'react'
+import { memo } from 'react'
+
+interface LearningActivitiesProps {
+ learningObjectiveId: string
+}
+
+const LearningActivities: FC<LearningActivitiesProps> = ({
+ learningObjectiveId,
+}) => {
+ const learningActivities = useLiveQuery(
+ () => db.learningActivities.where({ learningObjectiveId }).toArray(),
+ [learningObjectiveId],
+ []
+ )
+
+ return (
+ <CardList>
+ {learningActivities?.map((activity: LearningActivityInfo) => (
+ <LearningActivityItem key={activity.id} learningActivity={activity} />
+ ))}
+ </CardList>
+ )
+}
+
+export default memo(LearningActivities)
diff --git a/frontend/src/editor/LearningActivityForm/index.tsx b/frontend/src/editor/LearningActivityForm/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..be724dd8c6ef209833c8553b3374f0a6d72ec742
--- /dev/null
+++ b/frontend/src/editor/LearningActivityForm/index.tsx
@@ -0,0 +1,172 @@
+import {
+ addLearningActivity,
+ updateLearningActivity,
+} from '@/editor/indexeddb/operations'
+import type { ButtonProps } from '@blueprintjs/core'
+import {
+ Button,
+ Dialog,
+ DialogBody,
+ DialogFooter,
+ HTMLSelect,
+ InputGroup,
+ Label,
+ TextArea,
+} from '@blueprintjs/core'
+import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'
+import type { FC } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
+import type { LearningActivityInfo } from '../indexeddb/types'
+import { LearningActivityType } from '../indexeddb/types'
+import { LEARNING_ACTIVITY_TYPES } from '../utils'
+
+interface LearningActivityFormProps {
+ learningActivity?: LearningActivityInfo
+ learningObjectiveId: string
+ buttonProps: ButtonProps
+}
+
+const LearningActivityForm: FC<LearningActivityFormProps> = ({
+ learningActivity,
+ learningObjectiveId,
+ buttonProps,
+}) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const [name, setName] = useState<string>('')
+ const [description, setDescription] = useState<string>('')
+ const [type, setType] = useState<LearningActivityType>(
+ LearningActivityType.TOOL
+ )
+
+ const { notify } = useNotifyContext()
+
+ const clearInput = useCallback(() => {
+ setName('')
+ setDescription('')
+ }, [])
+
+ const handleAddButton = useCallback(
+ async (activity: Omit<LearningActivityInfo, 'id'>) => {
+ try {
+ await addLearningActivity(activity)
+ clearInput()
+ setIsOpen(false)
+ } catch (err) {
+ notify(`Failed to add learning activity '${activity.name}': ${err}`, {
+ intent: 'danger',
+ })
+ }
+ },
+ [notify]
+ )
+
+ const handleUpdateButton = useCallback(
+ async (activity: LearningActivityInfo) => {
+ try {
+ await updateLearningActivity(activity)
+ setIsOpen(false)
+ } catch (err) {
+ notify(
+ `Failed to update learning activity '${activity.name}': ${err}`,
+ {
+ intent: 'danger',
+ }
+ )
+ }
+ },
+ [notify]
+ )
+
+ useEffect(() => {
+ setName(learningActivity?.name || '')
+ setDescription(learningActivity?.description || '')
+ setType(learningActivity?.type || LearningActivityType.TOOL)
+ }, [learningActivity])
+
+ return (
+ <>
+ <Button {...buttonProps} onClick={() => setIsOpen(true)} />
+ <Dialog
+ isOpen={isOpen}
+ onClose={() => setIsOpen(false)}
+ icon={learningActivity ? 'edit' : 'plus'}
+ title={
+ learningActivity ? 'Edit learning activity' : 'New learning activity'
+ }
+ >
+ <DialogBody>
+ <Label style={{ width: '100%' }}>
+ Title
+ <InputGroup
+ placeholder='Input text'
+ value={name}
+ onChange={e => setName(e.target.value)}
+ />
+ </Label>
+ <Label style={{ width: '100%' }}>
+ What is this activity about? (optional)
+ <TextArea
+ value={description}
+ style={{
+ width: '100%',
+ height: '5rem',
+ resize: 'none',
+ overflowY: 'auto',
+ }}
+ placeholder='Input text'
+ onChange={e => setDescription(e.target.value)}
+ />
+ </Label>
+ <Label style={{ width: '100%' }}>
+ Channel
+ <HTMLSelect
+ options={LEARNING_ACTIVITY_TYPES}
+ value={type}
+ onChange={event =>
+ setType(event.currentTarget.value as LearningActivityType)
+ }
+ />
+ </Label>
+ </DialogBody>
+ <DialogFooter
+ actions={
+ learningActivity ? (
+ <Button
+ disabled={!name}
+ onClick={() =>
+ handleUpdateButton({
+ id: learningActivity.id,
+ name,
+ description,
+ type,
+ learningObjectiveId,
+ })
+ }
+ intent='primary'
+ icon='edit'
+ text='Save changes'
+ />
+ ) : (
+ <Button
+ disabled={!name}
+ onClick={() =>
+ handleAddButton({
+ name,
+ description,
+ type,
+ learningObjectiveId,
+ })
+ }
+ intent='primary'
+ icon='plus'
+ text='Add'
+ />
+ )
+ }
+ />
+ </Dialog>
+ </>
+ )
+}
+
+export default memo(LearningActivityForm)
diff --git a/frontend/src/editor/LearningObjectiveForm/index.tsx b/frontend/src/editor/LearningObjectiveForm/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6404b67e9d40a12d6c36426c1196ae2b5511ba5
--- /dev/null
+++ b/frontend/src/editor/LearningObjectiveForm/index.tsx
@@ -0,0 +1,126 @@
+import {
+ addLearningObjective,
+ updateLearningObjective,
+} from '@/editor/indexeddb/operations'
+import type { ButtonProps } from '@blueprintjs/core'
+import {
+ Button,
+ Dialog,
+ DialogBody,
+ DialogFooter,
+ InputGroup,
+ Label,
+} from '@blueprintjs/core'
+import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'
+import type { FC } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
+import type { LearningObjectiveInfo } from '../indexeddb/types'
+
+interface LearningObjectiveFormProps {
+ learningObjective?: LearningObjectiveInfo
+ buttonProps: ButtonProps
+}
+
+const LearningObjectiveForm: FC<LearningObjectiveFormProps> = ({
+ learningObjective,
+ buttonProps,
+}) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const [name, setName] = useState<string>('')
+ const { notify } = useNotifyContext()
+
+ const clearInput = useCallback(() => {
+ setName('')
+ }, [])
+
+ const handleAddButton = useCallback(
+ async (objective: Omit<LearningObjectiveInfo, 'id'>) => {
+ try {
+ await addLearningObjective(objective)
+ clearInput()
+ setIsOpen(false)
+ } catch (err) {
+ notify(`Failed to add learning objective '${objective.name}': ${err}`, {
+ intent: 'danger',
+ })
+ }
+ },
+ [notify]
+ )
+
+ const handleUpdateButton = useCallback(
+ async (objective: LearningObjectiveInfo) => {
+ try {
+ await updateLearningObjective(objective)
+ setIsOpen(false)
+ } catch (err) {
+ notify(
+ `Failed to update learning objective '${objective.name}': ${err}`,
+ {
+ intent: 'danger',
+ }
+ )
+ }
+ },
+ [notify]
+ )
+
+ useEffect(() => {
+ setName(learningObjective?.name || '')
+ }, [learningObjective])
+
+ return (
+ <>
+ <Button {...buttonProps} onClick={() => setIsOpen(true)} />
+ <Dialog
+ isOpen={isOpen}
+ onClose={() => setIsOpen(false)}
+ icon={learningObjective ? 'edit' : 'plus'}
+ title={
+ learningObjective
+ ? 'Edit learning objective'
+ : 'New learning objective'
+ }
+ >
+ <DialogBody>
+ <Label style={{ width: '100%' }}>
+ Title
+ <InputGroup
+ placeholder='Input text'
+ value={name}
+ onChange={e => setName(e.target.value)}
+ />
+ </Label>
+ </DialogBody>
+ <DialogFooter
+ actions={
+ learningObjective ? (
+ <Button
+ disabled={!name}
+ onClick={() =>
+ handleUpdateButton({
+ id: learningObjective.id,
+ name,
+ })
+ }
+ intent='primary'
+ icon='edit'
+ text='Save changes'
+ />
+ ) : (
+ <Button
+ disabled={!name}
+ onClick={() => handleAddButton({ name })}
+ intent='primary'
+ icon='plus'
+ text='Add'
+ />
+ )
+ }
+ />
+ </Dialog>
+ </>
+ )
+}
+
+export default memo(LearningObjectiveForm)
diff --git a/frontend/src/editor/LearningObjectives/LearningObjective.tsx b/frontend/src/editor/LearningObjectives/LearningObjective.tsx
index 0e20d66d3f36447e5cd8b7eb134062fcec71bfb1..6ce0fbf02c001393cd03823bf130c035bbe9e4b1 100644
--- a/frontend/src/editor/LearningObjectives/LearningObjective.tsx
+++ b/frontend/src/editor/LearningObjectives/LearningObjective.tsx
@@ -1,15 +1,20 @@
-import { Button } from '@blueprintjs/core'
+import { Button, ButtonGroup, Card } from '@blueprintjs/core'
import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'
import type { FC } from 'react'
import { memo, useCallback } from 'react'
+import LearningActivities from '../LearningActivities'
+import LearningActivityForm from '../LearningActivityForm'
+import LearningObjectiveForm from '../LearningObjectiveForm'
import { deleteLearningObjective } from '../indexeddb/operations'
import type { LearningObjectiveInfo } from '../indexeddb/types'
interface LearningObjectiveProps {
- objective: LearningObjectiveInfo
+ learningObjective: LearningObjectiveInfo
}
-const LearningObjectiveItem: FC<LearningObjectiveProps> = ({ objective }) => {
+const LearningObjectiveItem: FC<LearningObjectiveProps> = ({
+ learningObjective,
+}) => {
const { notify } = useNotifyContext()
const handleDeleteButton = useCallback(
@@ -29,14 +34,49 @@ const LearningObjectiveItem: FC<LearningObjectiveProps> = ({ objective }) => {
)
return (
- <div>
- {objective.name}{' '}
- <Button
- type='button'
- icon='trash'
- onClick={() => handleDeleteButton(objective)}
- />
- </div>
+ <Card style={{ flexDirection: 'column' }}>
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ width: '100%',
+ padding: '0rem 1rem 1rem 0',
+ }}
+ >
+ <span style={{ height: '100%', flexGrow: 1 }}>
+ {learningObjective.name}
+ </span>
+ <ButtonGroup>
+ <LearningObjectiveForm
+ learningObjective={learningObjective}
+ buttonProps={{
+ minimal: true,
+ icon: 'edit',
+ style: { marginRight: '1rem' },
+ }}
+ />
+ <Button
+ minimal
+ icon='cross'
+ onClick={() => handleDeleteButton(learningObjective)}
+ />
+ </ButtonGroup>
+ </div>
+ <div style={{ width: '100%', paddingLeft: '2rem' }}>
+ <LearningActivities learningObjectiveId={learningObjective.id} />
+ <LearningActivityForm
+ learningObjectiveId={learningObjective.id}
+ buttonProps={{
+ minimal: true,
+ text: 'Add new learning activity',
+ alignText: 'left',
+ icon: 'plus',
+ style: { padding: '1rem', width: '100%' },
+ }}
+ />
+ </div>
+ </Card>
)
}
diff --git a/frontend/src/editor/LearningObjectives/index.tsx b/frontend/src/editor/LearningObjectives/index.tsx
index 6043dddd2ae5502f83627226bc340e0d36cd90ad..50d0d5121877ed8089881ec68886a40c8cd77e61 100644
--- a/frontend/src/editor/LearningObjectives/index.tsx
+++ b/frontend/src/editor/LearningObjectives/index.tsx
@@ -1,6 +1,7 @@
import LearningObjectiveItem from '@/editor/LearningObjectives/LearningObjective'
import { db } from '@/editor/indexeddb/db'
import type { LearningObjectiveInfo } from '@/editor/indexeddb/types'
+import { CardList } from '@blueprintjs/core'
import { useLiveQuery } from 'dexie-react-hooks'
import { memo } from 'react'
@@ -12,11 +13,14 @@ const LearningObjectives = () => {
)
return (
- <>
+ <CardList>
{learningObjectives?.map((objective: LearningObjectiveInfo) => (
- <LearningObjectiveItem key={objective.id} objective={objective} />
+ <LearningObjectiveItem
+ key={objective.id}
+ learningObjective={objective}
+ />
))}
- </>
+ </CardList>
)
}
diff --git a/frontend/src/editor/LearningObjectivesForm/index.tsx b/frontend/src/editor/LearningObjectivesForm/index.tsx
deleted file mode 100644
index f7cf5d3e7afe4f04b9895a62ac58b943bfeabf90..0000000000000000000000000000000000000000
--- a/frontend/src/editor/LearningObjectivesForm/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { addLearningObjective } from '@/editor/indexeddb/operations'
-import { Button, InputGroup } from '@blueprintjs/core'
-import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'
-import { memo, useCallback, useRef } from 'react'
-
-const LearningObjectivesForm = () => {
- const nameRef = useRef<HTMLInputElement>(null)
- const { notify } = useNotifyContext()
-
- const handleAddButton = useCallback(
- async (name: string) => {
- try {
- await addLearningObjective({ name })
- if (nameRef.current) {
- nameRef.current.value = ''
- }
- } catch (err) {
- notify(`Failed to add learning objective '${name}': ${err}`, {
- intent: 'danger',
- })
- }
- },
- [notify]
- )
-
- return (
- <>
- <InputGroup placeholder='Name' inputRef={nameRef} />
- <Button
- type='button'
- onClick={() => handleAddButton(nameRef.current?.value || '')}
- >
- Add
- </Button>
- </>
- )
-}
-
-export default memo(LearningObjectivesForm)
diff --git a/frontend/src/editor/indexeddb/db.tsx b/frontend/src/editor/indexeddb/db.tsx
index be0cb235bb08e746c048c0848ddfb8e8a9003cb5..99fa33249cdf6dc77815243a327007181d1b14f3 100644
--- a/frontend/src/editor/indexeddb/db.tsx
+++ b/frontend/src/editor/indexeddb/db.tsx
@@ -1,16 +1,22 @@
import Dexie, { type EntityTable } from 'dexie'
-import type { InjectInfo, LearningObjectiveInfo } from './types'
+import type {
+ InjectInfo,
+ LearningActivityInfo,
+ LearningObjectiveInfo,
+} from './types'
const dbName = 'EditorDatabase'
const dbVersion = 1
const db = new Dexie(dbName) as Dexie & {
learningObjectives: EntityTable<LearningObjectiveInfo, 'id'>
+ learningActivities: EntityTable<LearningActivityInfo, 'id'>
injectInfos: EntityTable<InjectInfo, 'id'>
}
db.version(dbVersion).stores({
learningObjectives: '++id, &name',
+ learningActivities: '++id, &name, description, type, learningObjectiveId',
injectInfos: '++id, &name, description, type',
})
diff --git a/frontend/src/editor/indexeddb/operations.tsx b/frontend/src/editor/indexeddb/operations.tsx
index 4ac05600c9b7150da8f2adbac74885bfea3747d5..cb2722819d4eae544963e38ad8e0d0f7f093ca78 100644
--- a/frontend/src/editor/indexeddb/operations.tsx
+++ b/frontend/src/editor/indexeddb/operations.tsx
@@ -1,5 +1,9 @@
import { db } from './db'
-import type { InjectInfo, LearningObjectiveInfo } from './types'
+import type {
+ InjectInfo,
+ LearningActivityInfo,
+ LearningObjectiveInfo,
+} from './types'
// learning objectives operations
export const addLearningObjective = async (
@@ -9,8 +13,34 @@ export const addLearningObjective = async (
await db.learningObjectives.add(objective)
})
+export const updateLearningObjective = async (
+ objective: LearningObjectiveInfo
+) => await db.learningObjectives.put(objective)
+
export const deleteLearningObjective = async (id: string) =>
- await db.learningObjectives.delete(id)
+ await db.transaction(
+ 'rw',
+ db.learningObjectives,
+ db.learningActivities,
+ async () => {
+ await db.learningObjectives.delete(id)
+ await db.learningActivities.where({ learningObjectiveId: id }).delete()
+ }
+ )
+
+// learning activities operations
+export const addLearningActivity = async (
+ activity: Omit<LearningActivityInfo, 'id'>
+) =>
+ await db.transaction('rw', db.learningActivities, async () => {
+ await db.learningActivities.add(activity)
+ })
+
+export const updateLearningActivity = async (activity: LearningActivityInfo) =>
+ await db.learningActivities.put(activity)
+
+export const deleteLearningActivity = async (id: number) =>
+ await db.learningActivities.delete(id)
// inject info operations
export const addInjectInfo = async (injectInfo: Omit<InjectInfo, 'id'>) =>
diff --git a/frontend/src/editor/indexeddb/types.tsx b/frontend/src/editor/indexeddb/types.tsx
index e5a58b70f2138c79901601197ffd1f712b0145f9..ebd203a39ab313f8a0a4d0f63eb03f21c8634baa 100644
--- a/frontend/src/editor/indexeddb/types.tsx
+++ b/frontend/src/editor/indexeddb/types.tsx
@@ -1,12 +1,26 @@
import type { LearningObjective } from '@inject/graphql/fragments/LearningObjective.generated'
-export type LearningObjectiveInfo = Pick<LearningObjective, 'id' | 'name'>
+export enum LearningActivityType {
+ CONFIRMATION = 'Confirmation',
+ TOOL = 'Tool',
+ EMAIL = 'Email',
+}
export enum InjectType {
INFORMATION = 'Information',
EMAIL = 'Email',
}
+export type LearningObjectiveInfo = Pick<LearningObjective, 'id' | 'name'>
+
+export type LearningActivityInfo = {
+ id: number
+ name: string
+ description: string
+ type: LearningActivityType
+ learningObjectiveId: string
+}
+
export type InjectInfo = {
id: number
name: string
diff --git a/frontend/src/editor/utils.tsx b/frontend/src/editor/utils.tsx
index 8c9629c81f422db00472059b6764647218b1441c..1d15e704076f802c04da9bf6e1fbbe4f1eb93b81 100644
--- a/frontend/src/editor/utils.tsx
+++ b/frontend/src/editor/utils.tsx
@@ -1,3 +1,20 @@
-import { InjectType } from './indexeddb/types'
+import type { InjectInfo, LearningActivityInfo } from './indexeddb/types'
+import { InjectType, LearningActivityType } from './indexeddb/types'
+
+export const LEARNING_ACTIVITY_TYPES = Object.values(LearningActivityType)
export const INJECT_TYPES = Object.values(InjectType)
+
+export const getLearningActivityIcon = (activity: LearningActivityInfo) => {
+ switch (activity.type) {
+ case LearningActivityType.EMAIL:
+ return 'envelope'
+ case LearningActivityType.TOOL:
+ return 'wrench'
+ default:
+ return 'tick-circle'
+ }
+}
+
+export const getInjectIcon = (inject: InjectInfo) =>
+ inject.type === InjectType.EMAIL ? 'envelope' : 'clipboard'
diff --git a/frontend/src/pages/editor/create/learning-objectives.tsx b/frontend/src/pages/editor/create/learning-objectives.tsx
index 47bde31b6b87d7a43d38234dff7cc67d84a57b4c..8b227f4478c6ef79ccf297748f4396d189d59fa5 100644
--- a/frontend/src/pages/editor/create/learning-objectives.tsx
+++ b/frontend/src/pages/editor/create/learning-objectives.tsx
@@ -1,14 +1,61 @@
+import LearningObjectiveForm from '@/editor/LearningObjectiveForm'
import LearningObjectives from '@/editor/LearningObjectives'
-import LearningObjectivesForm from '@/editor/LearningObjectivesForm'
+import { useNavigate } from '@/router'
+import { Button } from '@blueprintjs/core'
+import { css } from '@emotion/css'
import { memo } from 'react'
-const LearningObjectivesPage = () => (
- <>
- <h1>Expected outcomes</h1>
- <p>Description.</p>
- <LearningObjectivesForm />
- <LearningObjectives />
- </>
-)
+const objectivesPage = css`
+ display: grid;
+ grid-template-rows: auto auto 1fr auto;
+ height: 100vh;
+`
+
+const LearningObjectivesPage = () => {
+ const nav = useNavigate()
+
+ return (
+ <div className={objectivesPage}>
+ <h1>Define objectives and activities</h1>
+ <p style={{ marginBottom: '1rem' }}>Description.</p>
+ <div style={{ overflowY: 'auto' }}>
+ <LearningObjectives />
+ <LearningObjectiveForm
+ buttonProps={{
+ minimal: true,
+ text: 'Add new learning objective',
+ alignText: 'left',
+ icon: 'plus',
+ style: { padding: '1rem', width: '100%' },
+ }}
+ />
+ </div>
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'center',
+ padding: '0.5rem 0',
+ }}
+ >
+ <Button
+ type='button'
+ onClick={() => nav('/editor/create/participants')}
+ text='Back'
+ icon='arrow-left'
+ style={{
+ marginRight: '0.5rem',
+ }}
+ />
+ <Button
+ type='button'
+ onClick={() => nav('/editor/create/injects')}
+ text='Continue'
+ intent='primary'
+ rightIcon='arrow-right'
+ />
+ </div>
+ </div>
+ )
+}
export default memo(LearningObjectivesPage)