enhance: add manipulation functionality (creation and editing) for ca…

…se-study elements (#4481)

apps/frontend-manage/src/components/questions/manipulation/ElementEditModal.tsx

@@ -5,6 +5,7 @@ import {
   GetSingleQuestionDocument,
   GetUserQuestionsDocument,
   GetUserTagsDocument,
+  ManipulateCaseStudyQuestionDocument,
   ManipulateChoicesQuestionDocument,
   ManipulateContentElementDocument,
   ManipulateFlashcardElementDocument,
@@ -29,6 +30,7 @@ import ElementTypeMonitor from './ElementTypeMonitor'
 import InstanceUpdateSwitch from './InstanceUpdateSwitch'
 import StudentElementPreview from './StudentElementPreview'
 import {
+  prepareCaseStudyArgs,
   prepareChoicesArgs,
   prepareContentArgs,
   prepareFlashcardArgs,
@@ -119,6 +121,9 @@ function ElementEditModal({
   const [manipulateSelectionQuestion] = useMutation(
     ManipulateSelectionQuestionDocument
   )
+  const [manipulateCaseStudyQuestion] = useMutation(
+    ManipulateCaseStudyQuestionDocument
+  )
   const [updateElementInstances] = useMutation(UpdateElementInstancesDocument)
 
   const initialValues = useElementFormInitialValues({
@@ -224,6 +229,7 @@ function ElementEditModal({
 
             break
           }
+
           case ElementType.Numerical: {
             const args = prepareNumericalArgs({
               elementId,
@@ -247,6 +253,7 @@ function ElementEditModal({
 
             break
           }
+
           case ElementType.FreeText: {
             const args = prepareFreeTextArgs({
               elementId,
@@ -270,6 +277,7 @@ function ElementEditModal({
 
             break
           }
+
           case ElementType.Selection: {
             const args = prepareSelectionArgs({
               elementId,
@@ -294,6 +302,30 @@ function ElementEditModal({
             break
           }
 
+          case ElementType.CaseStudy: {
+            const args = prepareCaseStudyArgs({
+              elementId,
+              isDuplication,
+              values,
+            })
+
+            const result = await manipulateCaseStudyQuestion({
+              variables: args,
+              refetchQueries: [
+                { query: GetUserQuestionsDocument },
+                { query: GetUserTagsDocument },
+              ],
+            })
+
+            const data = result.data?.manipulateCaseStudyQuestion
+            if (data?.__typename !== 'CaseStudyElement' || !data.id) {
+              setFailureToast(true)
+              return
+            }
+
+            break
+          }
+
           default:
             break
         }

apps/frontend-manage/src/components/questions/manipulation/helpers.ts

@@ -1,4 +1,5 @@
 import {
+  ElementFormTypesCaseStudy,
   ElementFormTypesChoices,
   ElementFormTypesContent,
   ElementFormTypesFlashcard,
@@ -85,6 +86,7 @@ export function prepareChoicesArgs({
         }
       }),
     },
+
     tags: values.tags,
   }
 }
@@ -153,6 +155,7 @@ export function prepareNumericalArgs({
             })
           : undefined,
     },
+
     tags: values.tags,
   }
 }
@@ -191,6 +194,7 @@ export function prepareFreeTextArgs({
       },
       solutions: values.options.solutions,
     },
+
     tags: values.tags,
   }
 }
@@ -222,6 +226,65 @@ export function prepareSelectionArgs({
       numberOfInputs: parseInt(values.options.numberOfInputs),
       correctAnswers: values.options.correctAnswers,
     },
+
+    tags: values.tags,
+  }
+}
+
+interface PrepareCaseStudyArgsProps {
+  elementId?: number
+  isDuplication: boolean
+  values: ElementFormTypesCaseStudy
+}
+export function prepareCaseStudyArgs({
+  elementId,
+  isDuplication,
+  values,
+}: PrepareCaseStudyArgsProps) {
+  return {
+    id: isDuplication ? undefined : elementId,
+    name: values.name,
+    status: values.status,
+    content: values.content,
+    explanation:
+      !values.explanation?.match(/^(<br>(\n)*)$/g) && values.explanation !== ''
+        ? values.explanation
+        : null,
+    pointsMultiplier: parseInt(values.pointsMultiplier),
+
+    options: {
+      hasSampleSolution: values.options.hasSampleSolution,
+      answerCollection: parseInt(values.options.answerCollection),
+      collectionItemIds: values.options.selectedItems,
+
+      criteria: values.options.criteria.map((criterion, index) => ({
+        id: criterion.id,
+        name: criterion.name,
+        order: index,
+        min: parseFloat(criterion.min),
+        max: parseFloat(criterion.max),
+        step: parseFloat(criterion.step),
+        unit:
+          criterion.unit && criterion.unit !== '' ? criterion.unit : undefined,
+      })),
+
+      cases: values.options.cases.map((c, index) => ({
+        title: c.title,
+        description: c.description,
+        order: index,
+        solutions: Object.entries(c.solutions ?? {}).map(([key, value]) => ({
+          itemId: parseInt(key.split('-')[1]),
+          criteriaSolutions: Object.entries(value).map(
+            ([criterionId, criterionValue]) => ({
+              criterionId,
+              min: parseFloat(criterionValue.min),
+              max: parseFloat(criterionValue.max),
+            })
+          ),
+        })),
+      })),
+    },
+
     tags: values.tags,
   }
 }

apps/frontend-manage/src/components/questions/manipulation/types.ts

@@ -75,6 +75,25 @@ export interface ElementFormTypesSelection extends SharedQuestionFormProps {
   }
 }
 
+// key of top level record is `itemId-${item.id}`, key of nested record is criterion id
+export type ElementFormTypesCaseStudySolution = Record<
+  string,
+  { min: string; max: string }
+>
+export type ElementFormTypesCaseStudySolutions = Record<
+  string,
+  ElementFormTypesCaseStudySolution
+>
+
+export type ElementFormTypesCaseStudyCriterion = {
+  id: string // short id
+  name: string
+  min: string
+  max: string
+  step: string
+  unit?: string | null
+}
+
 export interface ElementFormTypesCaseStudy extends SharedQuestionFormProps {
   type: ElementType.CaseStudy
   explanation?: string | null
@@ -85,17 +104,9 @@ export interface ElementFormTypesCaseStudy extends SharedQuestionFormProps {
     cases: {
       title: string
       description: string
-      // key of top level record is `itemId-${item.id}`, key of nested record is criterion id
-      solutions?: Record<string, Record<string, { min: string; max: string }>>
-    }[]
-    criteria: {
-      id: string // short id
-      name: string
-      min: string
-      max: string
-      step: string
-      unit?: string | null
+      solutions?: ElementFormTypesCaseStudySolutions
     }[]
+    criteria: ElementFormTypesCaseStudyCriterion[]
   }
 }
 

apps/frontend-manage/src/components/questions/manipulation/useElementFormInitialValues.ts

@@ -8,7 +8,11 @@ import { nanoid } from 'nanoid'
 import { useMemo } from 'react'
 import { sort } from 'remeda'
 import { ElementEditMode } from './ElementEditModal'
-import { ElementFormTypes } from './types'
+import {
+  ElementFormTypes,
+  ElementFormTypesCaseStudySolution,
+  ElementFormTypesCaseStudySolutions,
+} from './types'
 
 interface UseElementFormInitialValuesProps {
   mode: ElementEditMode
@@ -139,6 +143,54 @@ function useElementFormInitialValues({
           correctAnswers: options.answerCollectionSolutionIds ?? undefined,
         },
       }
+    } else if (question.__typename === 'CaseStudyElement') {
+      const options = question.options
+
+      return {
+        ...sharedAttributes,
+        type: ElementType.CaseStudy,
+        options: {
+          hasSampleSolution: options.hasSampleSolution ?? false,
+          answerCollection: options.answerCollection
+            ? String(options.answerCollection.id)
+            : '',
+          selectedItems: options.collectionItemIds ?? [],
+          criteria:
+            options.criteria?.map((criterion) => ({
+              ...criterion,
+              min: String(criterion.min),
+              max: String(criterion.max),
+              step: String(criterion.step),
+            })) ?? [],
+          cases:
+            options.cases?.map((caseItem) => ({
+              title: caseItem.title,
+              description: caseItem.description,
+              solutions: options.hasSampleSolution
+                ? caseItem.solutions!.reduce<ElementFormTypesCaseStudySolutions>(
+                    (acc, solution) => {
+                      const criteriaSolutions =
+                        solution.criteriaSolutions.reduce<ElementFormTypesCaseStudySolution>(
+                          (acc, sol) => {
+                            acc[sol.criterionId] = {
+                              min: String(sol.min),
+                              max: String(sol.max),
+                            }
+
+                            return acc
+                          },
+                          {}
+                        )
+
+                      acc[`itemId-${solution.itemId}`] = criteriaSolutions
+                      return acc
+                    },
+                    {}
+                  )
+                : undefined,
+            })) ?? [],
+        },
+      }
     } else if (question.__typename === 'FlashcardElement') {
       return {
         ...sharedAttributes,

cypress/cypress/e2e/K-resources-workflow.cy.ts

@@ -373,9 +373,6 @@ describe('Create, edit and share answer collections', function () {
     ).click()
 
     cy.get('[data-cy="select-answer-collection"]').should('not.exist')
-    cy.findByText(
-      'To create selection questions, you need access to at least one answer collection! You can either create one yourself under the "Resources" tab or import an existing collection from other users there.'
-    )
   })
 
   it("Verify that the private answer collection cannot be removed by user 'pro1' as it is used in a question", function () {
@@ -548,9 +545,6 @@ describe('Create, edit and share answer collections', function () {
       `[data-cy="select-question-type-${messages.shared.SELECTION.typeLabel}"]`
     ).click()
     cy.get('[data-cy="select-answer-collection"]').should('not.exist')
-    cy.findByText(
-      'To create selection questions, you need access to at least one answer collection! You can either create one yourself under the "Resources" tab or import an existing collection from other users there.'
-    )
   })
 
   it('Grant access to restricted answer collection (for user pro1)', function () {
@@ -613,9 +607,6 @@ describe('Create, edit and share answer collections', function () {
       `[data-cy="select-question-type-${messages.shared.SELECTION.typeLabel}"]`
     ).click()
     cy.get('[data-cy="select-answer-collection"]').should('not.exist')
-    cy.findByText(
-      'To create selection questions, you need access to at least one answer collection! You can either create one yourself under the "Resources" tab or import an existing collection from other users there.'
-    )
   })
 
   it('Verify that restricted answer collection can be used in selection question by user pro1 and create question', function () {
@@ -866,9 +857,6 @@ describe('Create, edit and share answer collections', function () {
       `[data-cy="select-question-type-${messages.shared.SELECTION.typeLabel}"]`
     ).click()
     cy.get('[data-cy="select-answer-collection"]').should('not.exist')
-    cy.findByText(
-      'To create selection questions, you need access to at least one answer collection! You can either create one yourself under the "Resources" tab or import an existing collection from other users there.'
-    )
   })
 
   it('Import (and copy) the public answer collection (for user pro2)', function () {

packages/graphql/src/graphql/ops/MDeleteQuestion.graphql

@@ -12,6 +12,9 @@ mutation DeleteQuestion($id: Int!) {
     ... on SelectionElement {
       id
     }
+    ... on CaseStudyElement {
+      id
+    }
     ... on FlashcardElement {
       id
     }