Commit d9b8e48a authored by Filip Šenk's avatar Filip Šenk
Browse files

Merge branch '1043-fix-editor-bugs' into 'main' 

Editor bugs

Closes #1043, #1048, #1047, #1045, #1044, #1042, #1041, #1040, #1035, and #1034

See merge request inject/frontend!886
parents 653a9bbf 23a25cba

editor/src/components/EmailTemplateFormDialog/EmailTemplateForm.tsx

+2 −2
Original line number Diff line number Diff line
@@ -50,7 +50,7 @@ export const EmailTemplateForm: FC<EmailTemplateFormProps> = ({ state }) => ( 
      >

        {(content, set) => (

          <TextArea

            value={content.content}

            value={content?.content ?? ''}

            style={{

              width: '100%',

              height: '10rem',
@@ -73,7 +73,7 @@ export const EmailTemplateForm: FC<EmailTemplateFormProps> = ({ state }) => ( 
      {(content, set) => (

        <FileSelectorLabel

          label={EMAIL_TEMPLATE_FORM.file}

          selectedFiles={content.attachments ?? []}

          selectedFiles={content?.attachments ?? []}

          onChange={newFiles =>

            set('content', { ...content, attachments: newFiles })

          }

editor/src/components/ExerciseInformationForm/Goals.tsx

+1 −2
Original line number Diff line number Diff line
@@ -8,7 +8,6 @@ import { 
} from '@blueprintjs/core'

import { css } from '@emotion/css'

import { TooltipLabel } from '@inject/shared'

import type { Dispatch, SetStateAction } from 'react'

import { useState, type FC } from 'react'

import { EXERCISE_INFORMATION_FORM } from '../../assets/pageContent/exerciseInformation'

import { GoalDialog } from './GoalDialog'
@@ -77,7 +76,7 @@ const Goal: FC<GoalProps> = ({ index, goal, onSubmit, onDelete }) => { 


type GoalsProps = {

  goals: string[]

  setGoals: Dispatch<SetStateAction<string[]>>

  setGoals: (newGoals: string[]) => void

}

export const Goals: FC<GoalsProps> = ({ goals, setGoals }) => {

  const [dialogOpened, setDialogOpened] = useState(false)

editor/src/components/ExerciseInformationForm/index.tsx

+69 −94
Original line number Diff line number Diff line 
import { Button, InputGroup, TextArea } from '@blueprintjs/core'

import { InputGroup, TextArea } from '@blueprintjs/core'

import { css } from '@emotion/css'

import { TooltipLabel } from '@inject/shared'

import { memo, useCallback, useEffect, useState } from 'react'

import { useLiveQuery } from 'dexie-react-hooks'

import { memo } from 'react'

import { EXERCISE_INFORMATION_FORM } from '../../assets/pageContent/exerciseInformation'

import { getConfig, setConfig } from '../../indexeddb/operations'

import { TagSelect } from '../TagSelect'
@@ -9,91 +10,34 @@ import TooltipCheckbox from '../Tooltips/TooltipCheckbox' 
import { Goals } from './Goals'



const ExerciseInformationForm = () => {

  const [name, setName] = useState('')

  const [description, setDescription] = useState('')

  const [language, setLanguage] = useState('')

  const [type, setType] = useState('')

  const [audience, setAudience] = useState('')

  const [instructorRequired, setInstructorRequired] = useState(false)

  const [goals, setGoals] = useState<string[]>([])

  const [prerequisites, setPrerequisites] = useState<string[]>([])



  useEffect(() => {

    getConfig('name').then(v => setName(v?.value || ''))

    getConfig('description').then(v => setDescription(v?.value || ''))

    getConfig('language').then(v => setLanguage(v?.value || ''))

    getConfig('exercise_type').then(v => setType(v?.value ?? ''))

    getConfig('target_audience').then(v => setAudience(v?.value ?? ''))

    getConfig('instructor_required').then(v =>

      setInstructorRequired(v?.value ?? false)

  const name = useLiveQuery(() => getConfig('name'))

  const description = useLiveQuery(() => getConfig('description'))

  const language = useLiveQuery(() => getConfig('language'))

  const type = useLiveQuery(() => getConfig('exercise_type'))

  const audience = useLiveQuery(() => getConfig('target_audience'))

  const instructorRequired = useLiveQuery(() =>

    getConfig('instructor_required')

  )

    getConfig('prerequisites').then(v => setPrerequisites(v?.value ?? []))

    getConfig('goals').then(e => setGoals(e?.value ?? []))

  }, [])



  const saveCb = useCallback(async () => {

    await Promise.all([

      setConfig({

        key: 'name',

        value: name,

      }),

      setConfig({

        key: 'description',

        value: description,

      }),

      setConfig({

        key: 'exercise_type',

        value: type,

      }),

      setConfig({

        key: 'instructor_required',

        value: instructorRequired,

      }),

      setConfig({

        key: 'goals',

        value: goals,

      }),

      setConfig({

        key: 'language',

        value: language,

      }),

      setConfig({

        key: 'target_audience',

        value: audience,

      }),

      setConfig({

        key: 'prerequisites',

        value: prerequisites,

      }),

    ])

  }, [

    audience,

    description,

    goals,

    instructorRequired,

    language,

    name,

    prerequisites,

    type,

  ])

  const goals = useLiveQuery(() => getConfig('goals'))

  const prerequisites = useLiveQuery(() => getConfig('prerequisites'))



  return (

    <form

      onSubmit={e => {

        e.preventDefault()

        saveCb()

      }}

    >

    <div>

      <TooltipLabel label={EXERCISE_INFORMATION_FORM.name}>

        <InputGroup

          placeholder='Input name - e.g. 2025_01_Energy_Crisis'

          value={name}

          onChange={e => setName(e.target.value)}

          value={name?.value ?? ''}

          onChange={async e =>

            await setConfig({

              key: 'name',

              value: e.target.value,

            })

          }

        />

      </TooltipLabel>

      <TooltipLabel label={EXERCISE_INFORMATION_FORM.description}>

        <TextArea

          value={description}

          value={description?.value ?? ''}

          style={{

            width: '100%',

            minHeight: '5rem',
@@ -102,34 +46,56 @@ const ExerciseInformationForm = () => { 
          }}

          autoResize

          placeholder='Input text'

          onChange={e => setDescription(e.target.value)}

          onChange={async e =>

            await setConfig({

              key: 'description',

              value: e.target.value,

            })

          }

        />

      </TooltipLabel>

      <TooltipLabel label={EXERCISE_INFORMATION_FORM.language}>

        <InputGroup

          placeholder='Input text'

          value={language}

          onChange={e => setLanguage(e.target.value)}

          value={language?.value ?? ''}

          onChange={async e =>

            await setConfig({

              key: 'language',

              value: e.target.value,

            })

          }

        />

      </TooltipLabel>

      <TooltipLabel label={EXERCISE_INFORMATION_FORM.exercise_type}>

        <InputGroup

          placeholder='Input text'

          value={type}

          onChange={e => setType(e.target.value)}

          value={type?.value ?? ''}

          onChange={async e =>

            await setConfig({

              key: 'exercise_type',

              value: e.target.value,

            })

          }

        />

      </TooltipLabel>

      <TooltipLabel label={EXERCISE_INFORMATION_FORM.target_audience}>

        <InputGroup

          placeholder='Input text'

          value={audience}

          onChange={e => setAudience(e.target.value)}

          value={audience?.value ?? ''}

          onChange={async e =>

            await setConfig({

              key: 'target_audience',

              value: e.target.value,

            })

          }

        />

      </TooltipLabel>

      <TooltipLabel label={EXERCISE_INFORMATION_FORM.prerequisites}>

        <TagSelect

          tags={prerequisites}

          setTags={newPrerequisites => setPrerequisites(newPrerequisites)}

          tags={prerequisites?.value ?? []}

          onChange={newPrerequisites =>

            setConfig({ key: 'prerequisites', value: newPrerequisites })

          }

          placeholder='Add a prerequisite'

        />

      </TooltipLabel>
@@ -138,16 +104,25 @@ const ExerciseInformationForm = () => { 
          className: css`

            margin-bottom: 1rem !important;

          `,

          checked: instructorRequired,

          onChange: () => setInstructorRequired(!instructorRequired),

          checked: instructorRequired?.value ?? false,

          onChange: () =>

            setConfig({

              key: 'instructor_required',

              value: !(instructorRequired?.value ?? false),

            }),

        }}

        label={EXERCISE_INFORMATION_FORM.instructor_required}

      />

      <Goals goals={goals} setGoals={setGoals} />

      <Button intent='primary' type='submit'>

        Submit

      </Button>

    </form>

      <Goals

        goals={goals?.value ?? []}

        setGoals={newGoals =>

          setConfig({

            key: 'goals',

            value: newGoals,

          })

        }

      />

    </div>

  )

}

editor/src/components/FinalInformationForm/TagsSetting.tsx

+1 −1
Original line number Diff line number Diff line
@@ -25,7 +25,7 @@ export const TagsSetting: FC<TagsSettingProps> = ({ 
        <TagSelect

          placeholder={tagSelectPlaceholder}

          tags={tags}

          setTags={setTags}

          onChange={setTags}

        />



        <Button

editor/src/components/InjectSpecification/store.ts

+1 −0
Original line number Diff line number Diff line
@@ -24,6 +24,7 @@ export const initInjectStore = () => 
      {

        control: defaultControl,

        content: defaultContent,

        name: '',

      },

    ],

    set: (item, value) => set({ [item]: value }),