Add mutation for adding highlights to client also
This commit is contained in:
parent
cba5705aee
commit
f41b43aa70
|
|
@ -13,6 +13,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
|
|||
* Therefore it is highly recommended to use the babel or swc plugin for production.
|
||||
*/
|
||||
const documents = {
|
||||
"\n fragment HighlightParts on HighlightNode {\n id\n contentIndex\n paragraphIndex\n selectionLength\n contentUuid\n startPosition\n text\n color\n }\n": types.HighlightPartsFragmentDoc,
|
||||
"\n fragment ContentBlockHighlightsFragment on ContentBlockNode {\n id\n __typename\n highlights {\n ...HighlightParts\n }\n }\n": types.ContentBlockHighlightsFragmentFragmentDoc,
|
||||
"\n mutation AddHighlight($input: AddHighlightInput!) {\n addHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n ": types.AddHighlightDocument,
|
||||
"\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,
|
||||
|
|
@ -47,6 +50,18 @@ const documents = {
|
|||
*/
|
||||
export function graphql(source: string): unknown;
|
||||
|
||||
/**
|
||||
* 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 HighlightParts on HighlightNode {\n id\n contentIndex\n paragraphIndex\n selectionLength\n contentUuid\n startPosition\n text\n color\n }\n"): (typeof documents)["\n fragment HighlightParts on HighlightNode {\n id\n contentIndex\n paragraphIndex\n selectionLength\n contentUuid\n startPosition\n text\n color\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 ContentBlockHighlightsFragment on ContentBlockNode {\n id\n __typename\n highlights {\n ...HighlightParts\n }\n }\n"): (typeof documents)["\n fragment ContentBlockHighlightsFragment on ContentBlockNode {\n id\n __typename\n highlights {\n ...HighlightParts\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 mutation AddHighlight($input: AddHighlightInput!) {\n addHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n "): (typeof documents)["\n mutation AddHighlight($input: AddHighlightInput!) {\n addHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n "];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -68,6 +68,28 @@ export type AddContentBlockPayload = {
|
|||
newContentBlock?: Maybe<ContentBlockNode>;
|
||||
};
|
||||
|
||||
export type AddHighlightArgument = {
|
||||
color: Scalars['String']['input'];
|
||||
contentBlockId: Scalars['String']['input'];
|
||||
contentIndex: Scalars['Int']['input'];
|
||||
contentUuid: Scalars['UUID']['input'];
|
||||
paragraphIndex: Scalars['Int']['input'];
|
||||
selectionLength: Scalars['Int']['input'];
|
||||
startPosition: Scalars['Int']['input'];
|
||||
text: Scalars['String']['input'];
|
||||
};
|
||||
|
||||
export type AddHighlightInput = {
|
||||
clientMutationId?: InputMaybe<Scalars['String']['input']>;
|
||||
highlight?: InputMaybe<AddHighlightArgument>;
|
||||
};
|
||||
|
||||
export type AddHighlightPayload = {
|
||||
__typename?: 'AddHighlightPayload';
|
||||
clientMutationId?: Maybe<Scalars['String']['output']>;
|
||||
highlight?: Maybe<HighlightNode>;
|
||||
};
|
||||
|
||||
export type AddModuleRoomEntryArgument = {
|
||||
contents?: InputMaybe<Array<InputMaybe<ContentElementInput>>>;
|
||||
roomSlug: Scalars['String']['input'];
|
||||
|
|
@ -1007,6 +1029,7 @@ export type Mutation = {
|
|||
_debug?: Maybe<DjangoDebug>;
|
||||
addComment?: Maybe<AddCommentPayload>;
|
||||
addContentBlock?: Maybe<AddContentBlockPayload>;
|
||||
addHighlight?: Maybe<AddHighlightPayload>;
|
||||
addModuleRoomEntry?: Maybe<AddModuleRoomEntryPayload>;
|
||||
addNote?: Maybe<AddNotePayload>;
|
||||
addObjective?: Maybe<AddObjectivePayload>;
|
||||
|
|
@ -1078,6 +1101,11 @@ export type MutationAddContentBlockArgs = {
|
|||
};
|
||||
|
||||
|
||||
export type MutationAddHighlightArgs = {
|
||||
input: AddHighlightInput;
|
||||
};
|
||||
|
||||
|
||||
export type MutationAddModuleRoomEntryArgs = {
|
||||
input: AddModuleRoomEntryInput;
|
||||
};
|
||||
|
|
@ -2595,6 +2623,23 @@ export type UserGroupBlockVisibility = {
|
|||
schoolClassId: Scalars['ID']['input'];
|
||||
};
|
||||
|
||||
export type HighlightPartsFragment = { __typename?: 'HighlightNode', id: string, contentIndex: number, paragraphIndex: number, selectionLength: number, contentUuid: any, startPosition: number, text: string, color: string } & { ' $fragmentName'?: 'HighlightPartsFragment' };
|
||||
|
||||
export type ContentBlockHighlightsFragmentFragment = { __typename: 'ContentBlockNode', id: string, highlights?: Array<(
|
||||
{ __typename?: 'HighlightNode' }
|
||||
& { ' $fragmentRefs'?: { 'HighlightPartsFragment': HighlightPartsFragment } }
|
||||
) | null> | null } & { ' $fragmentName'?: 'ContentBlockHighlightsFragmentFragment' };
|
||||
|
||||
export type AddHighlightMutationVariables = Exact<{
|
||||
input: AddHighlightInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type AddHighlightMutation = { __typename?: 'Mutation', addHighlight?: { __typename: 'AddHighlightPayload', highlight?: (
|
||||
{ __typename?: 'HighlightNode' }
|
||||
& { ' $fragmentRefs'?: { 'HighlightPartsFragment': HighlightPartsFragment } }
|
||||
) | null } | null };
|
||||
|
||||
export type LanguageQueryQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
|
|
@ -2702,10 +2747,13 @@ export type ModuleSolutionsQueryVariables = Exact<{
|
|||
|
||||
export type ModuleSolutionsQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', solutionsEnabled?: boolean | null, slug: string } | null };
|
||||
|
||||
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":"text"}},{"kind":"Field","name":{"kind":"Name","value":"color"}}]}}]} as unknown as DocumentNode<HighlightPartsFragment, 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":"text"}},{"kind":"Field","name":{"kind":"Name","value":"color"}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsFragmentFragment, 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>;
|
||||
export const SnapshotTitleFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitleFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragmentFragment, unknown>;
|
||||
export const SnapshotDetailsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<SnapshotDetailsFragmentFragment, unknown>;
|
||||
export const AddHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addHighlight"},"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":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlight"},"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":"text"}},{"kind":"Field","name":{"kind":"Name","value":"color"}}]}}]} as unknown as DocumentNode<AddHighlightMutation, AddHighlightMutationVariables>;
|
||||
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>;
|
||||
|
|
|
|||
|
|
@ -127,6 +127,8 @@ import type { Modal } from '@/plugins/modal.types';
|
|||
import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
|
||||
|
||||
import { getSelectionHandler } from '@/directives/highlight';
|
||||
import { graphql } from '@/__generated__';
|
||||
import log from 'loglevel';
|
||||
|
||||
export interface Props {
|
||||
contentBlock: ExtendedContentBlockNode;
|
||||
|
|
@ -245,7 +247,68 @@ const { mutate: doDeleteContentBlock } = useMutation(DELETE_CONTENT_BLOCK_MUTATI
|
|||
},
|
||||
}));
|
||||
|
||||
graphql(`
|
||||
fragment HighlightParts on HighlightNode {
|
||||
id
|
||||
contentIndex
|
||||
paragraphIndex
|
||||
selectionLength
|
||||
contentUuid
|
||||
startPosition
|
||||
text
|
||||
color
|
||||
}
|
||||
`);
|
||||
|
||||
const contentBlockHighlightsFragment = graphql(`
|
||||
fragment ContentBlockHighlightsFragment on ContentBlockNode {
|
||||
id
|
||||
__typename
|
||||
highlights {
|
||||
...HighlightParts
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
const { mutate: doCreateHighlight } = useMutation(
|
||||
graphql(`
|
||||
mutation AddHighlight($input: AddHighlightInput!) {
|
||||
addHighlight(input: $input) {
|
||||
__typename
|
||||
highlight {
|
||||
...HighlightParts
|
||||
}
|
||||
}
|
||||
}
|
||||
`),
|
||||
() => ({
|
||||
update: (cache, { data }) => {
|
||||
const id = cache.identify({ id: props.contentBlock.id, __typename: 'ContentBlockNode' });
|
||||
const contentBlockWithHighlights = cache.readFragment({
|
||||
id,
|
||||
fragment: contentBlockHighlightsFragment,
|
||||
fragmentName: 'ContentBlockHighlightsFragment',
|
||||
});
|
||||
const highlight = data?.addHighlight?.highlight;
|
||||
|
||||
if (highlight) {
|
||||
cache.writeFragment({
|
||||
id,
|
||||
fragment: contentBlockHighlightsFragment,
|
||||
fragmentName: 'ContentBlockHighlightsFragment',
|
||||
data: {
|
||||
...contentBlockWithHighlights,
|
||||
highlights: [...contentBlockWithHighlights.highlights, highlight],
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
log.debug('onMounted ContentBlock called');
|
||||
|
||||
const element = contentBlockDiv.value;
|
||||
|
||||
if (element !== null) {
|
||||
|
|
@ -261,9 +324,17 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
// add the listener from highlights
|
||||
element.addEventListener('mouseup', getSelectionHandler(element, props.contentBlock), (newHighlight) => {
|
||||
console.log(newHighlight);
|
||||
});
|
||||
element.addEventListener(
|
||||
'mouseup',
|
||||
getSelectionHandler(element, props.contentBlock, (newHighlight) => {
|
||||
console.log(newHighlight);
|
||||
doCreateHighlight({
|
||||
input: {
|
||||
highlight: newHighlight,
|
||||
},
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import popover from '@/helpers/popover';
|
|||
export interface Highlight {
|
||||
contentBlock: string; // the id
|
||||
contentIndex: number; // which content of the .contents array do I come from?
|
||||
contentUUID: string; // the wagtail UUID of the content element
|
||||
contentUuid: string; // the wagtail UUID of the content element
|
||||
paragraphIndex: number; // which paragraph inside the textBlock do I come from?
|
||||
startPosition: number; // start of the selection
|
||||
selectionLength: number; // length of the selection
|
||||
|
|
@ -125,7 +125,7 @@ export const getSelectionHandler =
|
|||
const highlightedText: Highlight = {
|
||||
contentBlock: contentBlock.id,
|
||||
contentIndex: position,
|
||||
contentUUID: uuid,
|
||||
contentUuid: uuid,
|
||||
startPosition: start,
|
||||
paragraphIndex: positionInTextBlock,
|
||||
selectionLength: end - start,
|
||||
|
|
@ -143,6 +143,7 @@ export const getSelectionHandler =
|
|||
onChooseColor: (color: string) => {
|
||||
console.log('chosenColor', color);
|
||||
highlightedText.color = color;
|
||||
onUpdateHighlight(highlightedText);
|
||||
// const newHighlight: Highlight = {
|
||||
// contentBlock: contentBlock.id,
|
||||
// contentIndex:
|
||||
|
|
@ -152,7 +153,6 @@ export const getSelectionHandler =
|
|||
})
|
||||
.then(() => {
|
||||
console.log('confirmed here');
|
||||
onUpdateHighlight();
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('canceled');
|
||||
|
|
|
|||
Loading…
Reference in New Issue