Fix problem with the types generation of wagtail image

client/src/__generated__/gql.ts

@@ -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.
  */

client/src/components/ui/WagtailImage.vue

@@ -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>

client/src/graphql/gql/fragments/moduleParts.gql

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

client/src/graphql/queries.ts

@@ -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 {

server/schema.graphql

@@ -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!