ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor Assignment component, add highlights 

Relates to MS-896
This commit is contained in:
Ramon Wenger 2024-03-12 16:04:35 +01:00
parent 370a391966
commit d13f889131
11 changed files with 159 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/__generated__/gql.ts generated
View File

@ -19,6 +19,8 @@ const documents = {
"\n query LanguageQuery {\n me {\n language @client\n }\n }\n ": types.LanguageQueryDocument,
"\n mutation SetLanguage($language: String!) {\n setLanguage(language: $language) @client {\n language\n }\n }\n ": types.SetLanguageDocument,
"\n query ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n ": types.ReadOnlyQueryDocument,
"\n fragment AssignmentParts on AssignmentNode {\n id\n title\n assignment\n solution\n submission {\n id\n text\n final\n document\n submissionFeedback {\n id\n text\n teacher {\n firstName\n lastName\n }\n }\n }\n }\n": types.AssignmentPartsFragmentDoc,
"\n query AssignmentQuery($id: ID!) {\n assignment(id: $id) {\n ...AssignmentParts\n }\n }\n ": types.AssignmentQueryDocument,
"\n fragment ModuleHighlightsFragment on ModuleNode {\n id\n __typename\n slug\n highlights {\n ...HighlightParts\n }\n }\n": types.ModuleHighlightsFragmentFragmentDoc,
"\n fragment ModuleLevelFragment on ModuleLevelNode {\n name\n id\n filterAttributeType\n }\n": types.ModuleLevelFragmentFragmentDoc,
"\n query ModuleFilterQuery {\n moduleLevels {\n ...ModuleLevelFragment\n }\n moduleCategories {\n name\n id\n filterAttributeType\n }\n me {\n language @client\n }\n }\n ": types.ModuleFilterQueryDocument,
@ -87,6 +89,14 @@ export function graphql(source: "\n mutation SetLanguage($language: String!)
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n "): (typeof documents)["\n query ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment AssignmentParts on AssignmentNode {\n id\n title\n assignment\n solution\n submission {\n id\n text\n final\n document\n submissionFeedback {\n id\n text\n teacher {\n firstName\n lastName\n }\n }\n }\n }\n"): (typeof documents)["\n fragment AssignmentParts on AssignmentNode {\n id\n title\n assignment\n solution\n submission {\n id\n text\n final\n document\n submissionFeedback {\n id\n text\n teacher {\n firstName\n lastName\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query AssignmentQuery($id: ID!) {\n assignment(id: $id) {\n ...AssignmentParts\n }\n }\n "): (typeof documents)["\n query AssignmentQuery($id: ID!) {\n assignment(id: $id) {\n ...AssignmentParts\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

14
client/src/__generated__/graphql.ts generated
View File

@ -2695,6 +2695,18 @@ export type ReadOnlyQueryQueryVariables = Exact<{ [key: string]: never; }>;
export type ReadOnlyQueryQuery = { __typename?: 'Query', me?: { __typename?: 'PrivateUserNode', readOnly?: boolean | null, selectedClass?: { __typename?: 'SchoolClassNode', readOnly?: boolean | null } | null } | null };
export type AssignmentPartsFragment = { __typename?: 'AssignmentNode', id: string, title: string, assignment: string, solution?: string | null, submission?: { __typename?: 'StudentSubmissionNode', id: string, text: string, final: boolean, document: string, submissionFeedback?: { __typename?: 'SubmissionFeedbackNode', id: string, text: string, teacher: { __typename?: 'PrivateUserNode', firstName: string, lastName: string } } | null } | null } & { ' $fragmentName'?: 'AssignmentPartsFragment' };
export type AssignmentQueryQueryVariables = Exact<{
id: Scalars['ID']['input'];
}>;
export type AssignmentQueryQuery = { __typename?: 'Query', assignment?: (
{ __typename?: 'AssignmentNode' }
& { ' $fragmentRefs'?: { 'AssignmentPartsFragment': AssignmentPartsFragment } }
) | null };
export type ModuleHighlightsFragmentFragment = { __typename: 'ModuleNode', id: string, slug: string, highlights?: Array<(
{ __typename?: 'HighlightNode' }
& { ' $fragmentRefs'?: { 'HighlightPartsFragment': HighlightPartsFragment } }
@ -2869,6 +2881,7 @@ export type ModuleSolutionsQuery = { __typename?: 'Query', module?: { __typename
export const HighlightPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<HighlightPartsFragment, unknown>;
export const ChapterHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ChapterHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<ChapterHighlightsFragmentFragment, unknown>;
export const ContentBlockHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ContentBlockHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsFragmentFragment, unknown>;
export const AssignmentPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AssignmentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AssignmentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"assignment"}},{"kind":"Field","name":{"kind":"Name","value":"solution"}},{"kind":"Field","name":{"kind":"Name","value":"submission"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"final"}},{"kind":"Field","name":{"kind":"Name","value":"document"}},{"kind":"Field","name":{"kind":"Name","value":"submissionFeedback"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"teacher"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}}]}}]}}]}}]}}]} as unknown as DocumentNode<AssignmentPartsFragment, unknown>;
export const ModuleHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModuleHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<ModuleHighlightsFragmentFragment, unknown>;
export const ModuleLevelFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModuleLevelFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleLevelNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}}]} as unknown as DocumentNode<ModuleLevelFragmentFragment, unknown>;
export const SnapshotListItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shared"}}]}}]} as unknown as DocumentNode<SnapshotListItemFragment, unknown>;
@ -2883,6 +2896,7 @@ export const InstrumentHighlightsFragmentFragmentDoc = {"kind":"Document","defin
export const LanguageQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LanguageQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<LanguageQueryQuery, LanguageQueryQueryVariables>;
export const SetLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SetLanguage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"language"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setLanguage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"language"},"value":{"kind":"Variable","name":{"kind":"Name","value":"language"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}}]}}]}}]} as unknown as DocumentNode<SetLanguageMutation, SetLanguageMutationVariables>;
export const ReadOnlyQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadOnlyQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}},{"kind":"Field","name":{"kind":"Name","value":"selectedClass"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]}}]}}]} as unknown as DocumentNode<ReadOnlyQueryQuery, ReadOnlyQueryQueryVariables>;
export const AssignmentQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AssignmentQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"assignment"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AssignmentParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AssignmentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AssignmentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"assignment"}},{"kind":"Field","name":{"kind":"Name","value":"solution"}},{"kind":"Field","name":{"kind":"Name","value":"submission"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"final"}},{"kind":"Field","name":{"kind":"Name","value":"document"}},{"kind":"Field","name":{"kind":"Name","value":"submissionFeedback"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"teacher"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}}]}}]}}]}}]}}]} as unknown as DocumentNode<AssignmentQueryQuery, AssignmentQueryQueryVariables>;
export const ModuleFilterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleFilterQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"moduleLevels"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ModuleLevelFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"moduleCategories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModuleLevelFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleLevelNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}}]} as unknown as DocumentNode<ModuleFilterQueryQuery, ModuleFilterQueryQueryVariables>;
export const UpdateLastModuleLevelMutationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateLastModuleLevelMutation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateLastModuleLevelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateLastModuleLevel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"clientMutationId"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"lastModuleLevel"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ModuleLevelFragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModuleLevelFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleLevelNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}}]} as unknown as DocumentNode<UpdateLastModuleLevelMutationMutation, UpdateLastModuleLevelMutationMutationVariables>;
export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleTitleQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<ModuleTitleQueryQuery, ModuleTitleQueryQueryVariables>;

3
client/src/components/AssignmentWithSubmissions.vue
View File

@ -1,9 +1,10 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div class="assignment-with-submissions">
<p
<div
class="assignment-with-submissions__text"
data-cy="assignment-main-text"
v-if="assignment.assignment > ''"
v-html="assignment.assignment"
/>

15
client/src/components/content-blocks/ContentComponent.vue
View File

@ -18,6 +18,7 @@
<component
v-bind="component"
:parent="parent"
:highlights="filteredHighlights"
class="content-component__content"
:is="componentType"
/>
@ -147,9 +148,17 @@ const componentClass = computed(() => {
}
return classes;
});
const childElements = computed(() => {
if (contentComponentDiv.value) {
const parent = contentComponentDiv.value.querySelector('.content-component__content');
// todo: this is almost the same as the one in Assignment.vue, refactor and make one function
let highlightParentSelector;
if (props.component.type === 'assignment') {
highlightParentSelector = '.assignment-text';
} else {
highlightParentSelector = '.content-component__content';
}
const parent = contentComponentDiv.value.querySelector(highlightParentSelector);
if (!parent) {
console.warn('Parent does not exist, this should not be possible');
// or can it be, if the children did not load yet, e.g. with a dynamic component?
@ -216,6 +225,10 @@ const bookmarkContent = (bookmarked: boolean) => {
};
const markHighlights = () => {
if (props.component.type === 'assignment') {
// we handle that inside of the assignment component, as it is probably not loaded yet
return;
}
for (const highlight of filteredHighlights.value) {
const element = childElements.value[highlight.paragraphIndex];
markHighlight(highlight, element, contentComponentDiv.value as HTMLElement);

133
client/src/components/content-blocks/assignment/Assignment.vue
View File

@ -5,9 +5,10 @@
class="assignment"
ref="assignmentDiv"
>
<p
class="assignment__main-text"
<div
class="assignment__main-text assignment-text"
data-cy="assignment-main-text"
v-if="assignment.assignment > ''"
v-html="assignment.assignment"
/>
@ -57,11 +58,18 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { nextTick, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useQuery } from '@vue/apollo-composable';
import { graphql } from '@/__generated__';
import { HighlightNode } from '@/__generated__/graphql';
import { computed } from '@vue/reactivity';
import { markHighlight } from '@/helpers/highlight';
import Mark from 'mark.js';
export interface Props {
value: any;
highlights: HighlightNode[];
}
const route = useRoute();
@ -69,6 +77,47 @@ const assignmentDiv = ref<HTMLElement | null>(null);
const props = defineProps<Props>();
const initialSubmission = {
text: '',
document: '',
final: false,
};
const assignment = ref({ submission: initialSubmission });
graphql(`
fragment AssignmentParts on AssignmentNode {
id
title
assignment
solution
submission {
id
text
final
document
submissionFeedback {
id
text
teacher {
firstName
lastName
}
}
}
}
`);
const { result, onResult } = useQuery(
graphql(`
query AssignmentQuery($id: ID!) {
assignment(id: $id) {
...AssignmentParts
}
}
`),
{ id: props.value.id }
);
onMounted(() => {
if (assignmentDiv.value !== null) {
if (route.hash === `#${props.value.id}`) {
@ -83,6 +132,64 @@ onMounted(() => {
}
}
});
const childElements = computed(() => {
// todo: refactor and merge with the one in ContentComponent.vue
if (assignmentDiv.value) {
const highlightParentSelector = '.assignment-text';
const parent = assignmentDiv.value.querySelector(highlightParentSelector);
if (!parent) {
console.warn('Parent does not exist, this should not be possible');
// or can it be, if the children did not load yet, e.g. with a dynamic component?
return [];
}
const elements = Array.from(parent.children).reduce((acc: Element[], current: Element) => {
if (current.tagName.toLowerCase() === 'ul') {
return [...acc, ...current.children];
}
return [...acc, current];
}, []);
return elements as HTMLElement[];
}
return [];
});
const markHighlights = () => {
for (const highlight of props.highlights) {
const element = childElements.value[highlight.paragraphIndex];
markHighlight(highlight, element, assignmentDiv.value as HTMLElement);
}
};
const unmark = () => {
// todo: refactor, this is used in multiple files
for (const paragraph of childElements.value) {
const instance = new Mark(paragraph);
instance.unmark();
}
};
onResult(async () => {
const { assignment: loadedAssignment } = result.value;
assignment.value = {
...loadedAssignment,
};
assignment.value.submission = Object.assign(initialSubmission, assignment.value.submission);
if (assignmentDiv.value) {
await nextTick();
unmark();
markHighlights();
}
});
watch(
() => props.highlights.map((h) => h.color),
() => {
unmark();
markHighlights();
}
);
</script>
<script lang="ts">
@ -93,7 +200,6 @@ import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignment
import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
import debounce from 'lodash/debounce';
import cloneDeep from 'lodash/cloneDeep';
import { sanitize } from '@/helpers/text';
import { defineAsyncComponent } from 'vue';
import { matomoTrackEvent } from '@/helpers/matomo-client';
@ -112,9 +218,6 @@ export default {
data() {
return {
assignment: {
submission: this.initialSubmission(),
},
me: {
permissions: [],
},
@ -293,22 +396,6 @@ export default {
},
apollo: {
assignment: {
query: ASSIGNMENT_QUERY,
variables() {
return {
id: this.value.id,
};
},
result(response) {
const data = response.data;
this.assignment = cloneDeep(data.assignment);
this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
this.$nextTick(() => this.scrollToAssignmentReady(true));
}
},
},
me: {
query: ME_QUERY,
},

2
client/src/graphql/gql/fragments/assignmentParts.gql
View File

@ -1,4 +1,4 @@
fragment AssignmentParts on AssignmentNode {
fragment AssignmentLegacyParts on AssignmentNode {
id
title
assignment

2
client/src/graphql/gql/mutations/updateAssignmentMutation.gql
View File

@ -2,7 +2,7 @@
mutation UpdateAssignment($input: UpdateAssignmentInput!) {
updateAssignment(input: $input) {
updatedAssignment {
...AssignmentParts
...AssignmentLegacyParts
}
}
}

2
client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql
View File

@ -3,7 +3,7 @@ mutation UpdateAssignmentWithSuccess($input: UpdateAssignmentInput!) {
updateAssignment(input: $input) {
successful
updatedAssignment {
...AssignmentParts
...AssignmentLegacyParts
}
}
}

4
client/src/graphql/gql/queries/assignmentQuery.gql
View File

@ -1,6 +1,6 @@
#import "../fragments/assignmentParts.gql"
query AssignmentQuery($id: ID!) {
query LegacyAssignmentQuery($id: ID!) {
assignment(id: $id) {
...AssignmentParts
...AssignmentLegacyParts
}
}

2
client/src/graphql/gql/queries/assignmentsQuery.gql
View File

@ -1,6 +1,6 @@
#import "../fragments/assignmentParts.gql"
query AssignmentsQuery {
assignments {
...AssignmentParts
...AssignmentLegacyParts
}
}

4
client/src/helpers/highlight.ts
View File

@ -410,6 +410,8 @@ const getCacheProperties = (cache, page, typename, identifier) => {
[identifier]: page[identifier],
});
log.debug(`id found: ${id}`);
log.debug(`fragment: ${fragment}`);
log.debug(fragment);
return { fragment, id };
};
@ -452,7 +454,7 @@ export const deleteHighlightCurry = (highlight: HighlightNode) => () => {
const page = highlight.page;
log.debug(page.__typename);
const { fragment, id, foundFragment } = getFragment(cache, page);
log.debug(foundFragment);
log.debug(foundFragment, id, fragment);
if (foundFragment) {
const data = {
...foundFragment,