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

Fix problem with the types generation of wagtail image

This commit is contained in:
Lorenz Padberg 2024-04-25 15:33:01 +02:00
parent f3f00f472f
commit 4ecd99a7b0
6 changed files with 61 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,8 @@ const documents = {
"\n fragment SchoolClassParts on SchoolClassNode {\n id\n name\n }\n": types.SchoolClassPartsFragmentDoc,
"\n fragment UserParts on PrivateUserNode {\n id\n pk\n username\n email\n firstName\n lastName\n avatarUrl\n expiryDate\n readOnly\n lastModuleLevel {\n id\n name\n filterAttributeType\n }\n lastModule {\n id\n slug\n }\n lastTopic {\n id\n slug\n }\n selectedClass {\n id\n readOnly\n }\n recentModules(orderBy: \"-visited\") {\n edges {\n node {\n ...ModuleParts\n }\n }\n }\n schoolClasses {\n ...SchoolClassParts\n }\n }\n": types.UserPartsFragmentDoc,
"\n fragment TeamParts on TeamNode {\n name\n code\n id\n members {\n firstName\n lastName\n id\n isMe\n }\n }\n": types.TeamPartsFragmentDoc,
"\n fragment ModuleParts on ModuleNode {\n id\n title\n metaTitle\n teaser\n intro\n slug\n heroImage\n heroSource\n solutionsEnabled\n highlights {\n ...HighlightParts\n }\n language\n inEditMode @client\n level {\n id\n name\n }\n category {\n id\n name\n }\n topic {\n slug\n title\n }\n bookmark {\n note {\n id\n text\n }\n }\n }\n": types.ModulePartsFragmentDoc,
"\nfragment WagtailImageParts on WagtailImageNode {\n id\n src\n alt\n width\n height\n title\n }\n": types.WagtailImagePartsFragmentDoc,
"\n fragment ModuleParts on ModuleNode {\n id\n title\n metaTitle\n teaser\n intro\n slug\n heroImage { ...WagtailImageParts }\n heroSource\n solutionsEnabled\n highlights {\n ...HighlightParts\n }\n language\n inEditMode @client\n level {\n id\n name\n }\n category {\n id\n name\n }\n topic {\n slug\n title\n }\n bookmark {\n note {\n id\n text\n }\n }\n }\n": types.ModulePartsFragmentDoc,
"\n query MeQuery {\n me {\n ...UserParts\n team {\n ...TeamParts\n }\n isTeacher\n permissions\n onboardingVisited\n }\n }\n ": types.MeQueryDocument,
"\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n ": types.InstrumentHighlightsWithIdOnlyFragmentFragmentDoc,
"\n fragment ChapterHighlightsWithIdOnlyFragment on ChapterNode {\n highlights {\n id\n }\n }\n ": types.ChapterHighlightsWithIdOnlyFragmentFragmentDoc,
@ -194,7 +195,11 @@ export function graphql(source: "\n fragment TeamParts on TeamNode {\n name\
/**
* 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 ModuleParts on ModuleNode {\n id\n title\n metaTitle\n teaser\n intro\n slug\n heroImage\n heroSource\n solutionsEnabled\n highlights {\n ...HighlightParts\n }\n language\n inEditMode @client\n level {\n id\n name\n }\n category {\n id\n name\n }\n topic {\n slug\n title\n }\n bookmark {\n note {\n id\n text\n }\n }\n }\n"): (typeof documents)["\n fragment ModuleParts on ModuleNode {\n id\n title\n metaTitle\n teaser\n intro\n slug\n heroImage\n heroSource\n solutionsEnabled\n highlights {\n ...HighlightParts\n }\n language\n inEditMode @client\n level {\n id\n name\n }\n category {\n id\n name\n }\n topic {\n slug\n title\n }\n bookmark {\n note {\n id\n text\n }\n }\n }\n"];
export function graphql(source: "\nfragment WagtailImageParts on WagtailImageNode {\n id\n src\n alt\n width\n height\n title\n }\n"): (typeof documents)["\nfragment WagtailImageParts on WagtailImageNode {\n id\n src\n alt\n width\n height\n title\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 ModuleParts on ModuleNode {\n id\n title\n metaTitle\n teaser\n intro\n slug\n heroImage { ...WagtailImageParts }\n heroSource\n solutionsEnabled\n highlights {\n ...HighlightParts\n }\n language\n inEditMode @client\n level {\n id\n name\n }\n category {\n id\n name\n }\n topic {\n slug\n title\n }\n bookmark {\n note {\n id\n text\n }\n }\n }\n"): (typeof documents)["\n fragment ModuleParts on ModuleNode {\n id\n title\n metaTitle\n teaser\n intro\n slug\n heroImage { ...WagtailImageParts }\n heroSource\n solutionsEnabled\n highlights {\n ...HighlightParts\n }\n language\n inEditMode @client\n level {\n id\n name\n }\n category {\n id\n name\n }\n topic {\n slug\n title\n }\n bookmark {\n note {\n id\n text\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

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

File diff suppressed because one or more lines are too long

8
client/src/components/ui/WagtailImage.vue
View File

@ -47,7 +47,6 @@ const modifiedUrl = computed(() => {
});
const updateDimensions = () => {
console.log(imgElement);
if (imgElement.value && imgElement.value.parentElement) {
const { clientWidth, clientHeight } = imgElement.value.parentElement;
width.value = clientWidth;
@ -75,7 +74,6 @@ const placeholderStyle = computed(() => {
if (props.originalHeight) {
styles.height = `${scaledHeight}px`;
}
console.log(styles);
return styles;
}
});
@ -101,18 +99,18 @@ onMounted(updateDimensions);
@import 'styles/helpers';
.wagtail-image {
overflow: hidden;
overflow: hidden;
&__image {
width: 100%;
//height: 100%;
height: auto; /* Keep the image's aspect ratio intact */
}
&__placeholder {
background-color: $color-silver-light;
width: 100%;
height: 100%;
}
}
</style>

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

@ -1,5 +1,5 @@
#import "./highlightParts.gql"
#import "./wagtailIMageParts.gql"
#import "./wagtailImageParts.gql"
fragment ModuleLegacyParts on ModuleNode {
id

15
client/src/graphql/queries.ts
View File

@ -1,5 +1,6 @@
import MODULE_DETAILS_QUERY from './gql/queries/modules/moduleDetailsQuery.gql';
import ME_QUERY from './gql/queries/meQuery.gql';
import WagWAtailImageFragnent from './gql/queries/meQuery.gql';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { useQuery } from '@vue/apollo-composable';
@ -90,6 +91,18 @@ graphql(`
}
}
`);
graphql(`
fragment WagtailImageParts on WagtailImageNode {
id
src
alt
width
height
title
}
`);
graphql(`
fragment ModuleParts on ModuleNode {
id
@ -98,7 +111,7 @@ graphql(`
teaser
intro
slug
heroImage
heroImage { ...WagtailImageParts }
heroSource
solutionsEnabled
highlights {

15
server/schema.graphql
View File

@ -108,7 +108,7 @@ type ModuleNode implements ModuleInterface {
metaTitle: String!
level: ModuleLevelNode
category: ModuleCategoryNode
heroImage: String!
heroImage: WagtailImageNode
"""e.g. 'Reuters', 'Wikipedia'"""
heroSource: String!
@ -140,10 +140,21 @@ interface ModuleInterface {
"""The ID of the object"""
id: ID!
pk: Int
heroImage: String!
heroImage: WagtailImageNode
topic: TopicNode
}
type WagtailImageNode implements Node {
title: String!
width: Int!
height: Int!
"""The ID of the object"""
id: ID!
src: String
alt: String
}
type TopicNode implements Node {
"""Der Seitentitel, der öffentlich angezeigt werden soll"""
title: String!