From cd0eb081538902147c8064c995942b9fc8902fc5 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 25 Apr 2024 11:24:40 +0200
Subject: [PATCH] Use WagtailImageNode for Module hero Image

---
 .../components/content-blocks/ImageBlock.vue  |  2 +-
 client/src/components/modules/Module.vue      |  8 +++--
 client/src/components/ui/WagtailImage.vue     | 13 ---------
 .../src/graphql/gql/fragments/moduleParts.gql |  7 +++++
 server/api/graphene_wagtail.py                | 24 +++++++++++++--
 server/books/schema/interfaces/module.py      | 10 +++++++
 server/books/schema/nodes/__init__.py         |  1 +
 server/books/schema/nodes/module.py           |  6 ++++
 server/books/schema/nodes/wagtail_image.py    | 29 +++++++++++++++++++
 server/books/tests/queries.py                 |  6 ++++
 server/core/wagtail_image.py                  |  0
 11 files changed, 86 insertions(+), 20 deletions(-)
 create mode 100644 server/books/schema/nodes/wagtail_image.py
 delete mode 100644 server/core/wagtail_image.py

diff --git a/client/src/components/content-blocks/ImageBlock.vue b/client/src/components/content-blocks/ImageBlock.vue
index 351b381f..59683de4 100644
--- a/client/src/components/content-blocks/ImageBlock.vue
+++ b/client/src/components/content-blocks/ImageBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <wagtail-image
-    :src="value.url"
+    :src="value.src"
     alt=""
     :original-height="value.height"
     :original-width="value.width"
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 83cb0008..18042735 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -29,9 +29,11 @@
     </h1>
     <div class="module__hero">
 
-
-      <wagtail-image  class="module__hero-image" :src="module.heroImage"></wagtail-image>
-
+      <wagtail-image  class="module__hero-image"
+                      :src="module.heroImageJson.src"
+                      :original-width="module.heroImageJson.width"
+                      :original-height="module.heroImageJson.height"></wagtail-image>
+      <pre></pre>
       <h5
         class="module__hero-source"
         v-if="module.heroSource"
diff --git a/client/src/components/ui/WagtailImage.vue b/client/src/components/ui/WagtailImage.vue
index 4aaaf929..5e67d443 100644
--- a/client/src/components/ui/WagtailImage.vue
+++ b/client/src/components/ui/WagtailImage.vue
@@ -94,19 +94,6 @@ const isHighDensity = () => {
   );
 };
 
-const isRetina = () => {
-  return (
-    ((window.matchMedia &&
-      (window.matchMedia(
-        'only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)'
-      ).matches ||
-        window.matchMedia(
-          'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)'
-        ).matches)) ||
-      (window.devicePixelRatio && window.devicePixelRatio >= 2)) &&
-    /(iPad|iPhone)/g.test(navigator.userAgent)
-  );
-};
 
 onMounted(updateDimensions);
 </script>
diff --git a/client/src/graphql/gql/fragments/moduleParts.gql b/client/src/graphql/gql/fragments/moduleParts.gql
index 2d96b1cf..7e3c1ff8 100644
--- a/client/src/graphql/gql/fragments/moduleParts.gql
+++ b/client/src/graphql/gql/fragments/moduleParts.gql
@@ -8,6 +8,13 @@ fragment ModuleLegacyParts on ModuleNode {
   slug
   heroImage
   heroSource
+  heroImageJson{
+    src
+    alt
+    width
+    height
+    title
+  }
   solutionsEnabled
   highlights {
     ...HighlightLegacyParts
diff --git a/server/api/graphene_wagtail.py b/server/api/graphene_wagtail.py
index 3f00156d..b39a152c 100644
--- a/server/api/graphene_wagtail.py
+++ b/server/api/graphene_wagtail.py
@@ -12,7 +12,6 @@ from wagtail.images.models import Image
 from assignments.models import Assignment
 from basicknowledge.models import BasicKnowledge
 from books.models import CustomDocument
-from core.wagtail_image import get_image_json
 from surveys.models import Survey
 
 logger = logging.getLogger(__name__)
@@ -43,14 +42,33 @@ def get_document_json(document_id):
         return None
 
 
+def get_wagtail_image_dict(image_id: int) -> dict | None:
+    """"""
+    try:
+        image = Image.objects.get(id=image_id)
+        value = {
+            'value': image_id,
+            'id': image.id,
+            'src': generate_image_url(image, 'original'),
+            'alt': image.title,
+            'title': image.title,
+            'width': image.width,
+            'height': image.height,
+        }
+        return value
+    except Image.DoesNotExist:
+        logger.error('Image {} does not exist'.format(image_id))
+        return None
+
+
+
 def augment_fields(raw_data):
     for data in raw_data:
         if isinstance(data, dict):
             _type = data['type']
             if _type == 'image_block':
                 _value = data['value']
-                image = Image.objects.get(id=_value)
-                value = get_image_json(image.id)
+                value = get_wagtail_image_dict(_value)
                 data['value'] = value
             if _type == 'assignment':
                 _value = data['value']
diff --git a/server/books/schema/interfaces/module.py b/server/books/schema/interfaces/module.py
index b323c39d..55b49b97 100644
--- a/server/books/schema/interfaces/module.py
+++ b/server/books/schema/interfaces/module.py
@@ -7,6 +7,7 @@ class ModuleInterface(relay.Node):
     pk = graphene.Int()
     hero_image = graphene.String(required=True)
     topic = graphene.Field('books.schema.nodes.TopicNode')
+    hero_image_json = graphene.Field('books.schema.nodes.WagtailImageNode')
 
     @staticmethod
     def resolve_pk(parent, info, **kwargs):
@@ -17,3 +18,12 @@ class ModuleInterface(relay.Node):
         if parent.hero_image:
             image = Image.objects.get(id=parent.hero_image.id)
             return generate_image_url(image, 'original')
+
+    @staticmethod
+    def resolve_hero_image_json(parent, info, **kwargs):
+        if parent.hero_image:
+            return Image.objects.get(id=parent.hero_image.id)
+
+
+
+
diff --git a/server/books/schema/nodes/__init__.py b/server/books/schema/nodes/__init__.py
index 0ef86466..53efd539 100644
--- a/server/books/schema/nodes/__init__.py
+++ b/server/books/schema/nodes/__init__.py
@@ -3,4 +3,5 @@ from .module import *
 from .content import *
 from .snapshot import *
 from .topic import *
+from .wagtail_image import *
 
diff --git a/server/books/schema/nodes/module.py b/server/books/schema/nodes/module.py
index 523d078b..41edac3c 100644
--- a/server/books/schema/nodes/module.py
+++ b/server/books/schema/nodes/module.py
@@ -10,6 +10,7 @@ from django.db.models import Q
 from graphene import relay
 from graphene_django import DjangoObjectType
 from graphene_django.filter import DjangoFilterConnectionField
+
 from notes.models import Highlight, ModuleBookmark
 from objectives.schema import ObjectiveGroupNode
 from surveys.models import Answer
@@ -57,6 +58,7 @@ class ModuleNode(DjangoObjectType):
     level = graphene.Field(ModuleLevelNode)
     category = graphene.Field(ModuleCategoryNode)
     language = graphene.String()
+    hero_image_json = graphene.Field("books.schema.nodes.WagtailImageNode")
     highlights = graphene.List("notes.schema.HighlightNode")
     my_highlights = graphene.List(
         graphene.NonNull("notes.schema.HighlightNode"), required=True
@@ -168,6 +170,10 @@ class ModuleNode(DjangoObjectType):
     def resolve_path(root: Module, info, **kwargs):
         return root.route
 
+    @staticmethod
+    def resolve_hero_image_json(root: Module, info, **kwargs):
+        return root.hero_image
+
 
 class RecentModuleNode(DjangoObjectType):
     class Meta:
diff --git a/server/books/schema/nodes/wagtail_image.py b/server/books/schema/nodes/wagtail_image.py
new file mode 100644
index 00000000..9f3802e6
--- /dev/null
+++ b/server/books/schema/nodes/wagtail_image.py
@@ -0,0 +1,29 @@
+import graphene
+from graphene_django import DjangoObjectType
+from graphene import relay
+
+from wagtail.images.models import Image
+
+from wagtail.images.views.serve import generate_image_url
+
+
+class WagtailImageNode(DjangoObjectType):
+
+    class Meta:
+        model = Image
+        fields = [
+            "title",
+            "width",
+            "height",
+        ]
+        interfaces = (relay.Node,)
+
+    src = graphene.String()
+    alt = graphene.String()
+
+
+    def resolve_src(self, info):
+        return generate_image_url(self, 'original')
+
+    def resolve_alt(self, info):
+        return ""
diff --git a/server/books/tests/queries.py b/server/books/tests/queries.py
index e500bdd4..62ede5ff 100644
--- a/server/books/tests/queries.py
+++ b/server/books/tests/queries.py
@@ -3,6 +3,12 @@ query ModulesQuery($slug: String, $id: ID) {
   module(slug: $slug, id: $id) {
     id
     title
+    heroImageJson {
+        id
+        src
+        height
+        width
+    }
     objectiveGroups {
         objectives {
             id
diff --git a/server/core/wagtail_image.py b/server/core/wagtail_image.py
deleted file mode 100644
index e69de29b..00000000