Merge pull request #25 from hotosm/feat/ind-impact-area-page

individual impact area page should be ready to go

app/impact_areas/migrations/0011_individualimpactareapage.py

@@ -0,0 +1,46 @@
+# Generated by Django 4.2.7 on 2024-05-23 19:31
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('wagtailcore', '0089_log_entry_data_json_null_to_object'),
+        ('impact_areas', '0010_alter_impactareaspage_impact_area_blocks'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='IndividualImpactAreaPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('header_text', wagtail.fields.RichTextField(blank=True)),
+                ('intro', wagtail.fields.RichTextField(blank=True)),
+                ('description', wagtail.fields.RichTextField(blank=True)),
+                ('use_cases_title', models.CharField(default='Use Cases')),
+                ('use_cases', wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link_url', wagtail.blocks.URLBlock(blank=True))]))], blank=True, null=True, use_json_field=True)),
+                ('projects_title', models.CharField(default='Projects')),
+                ('view_all_projects_text', models.CharField(default='View all projects')),
+                ('view_all_projects_link', models.URLField(blank=True)),
+                ('load_more_projects_text', models.CharField(blank=True)),
+                ('explore_impact_areas_text', models.CharField(default='Explore Other Impact Areas')),
+                ('red_dogear_box_title', models.CharField(blank=True)),
+                ('red_dogear_box_link_text', models.CharField(blank=True)),
+                ('red_dogear_box_link_url', models.URLField(blank=True)),
+                ('black_dogear_box_title', models.CharField(blank=True)),
+                ('black_dogear_box_link_text', models.CharField(blank=True)),
+                ('black_dogear_box_link_url', models.URLField(blank=True)),
+                ('header_image', models.ForeignKey(blank=True, help_text='Header image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+                ('intro_image', models.ForeignKey(blank=True, help_text='Intro image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]

app/impact_areas/migrations/0012_alter_individualimpactareapage_use_cases.py

@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-05-23 20:38
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('impact_areas', '0011_individualimpactareapage'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='individualimpactareapage',
+            name='use_cases',
+            field=wagtail.fields.StreamField([('blocks', wagtail.blocks.StructBlock([('description', wagtail.blocks.RichTextBlock()), ('link_text', wagtail.blocks.CharBlock()), ('link_url', wagtail.blocks.URLBlock(blank=True, null=True))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]

app/impact_areas/migrations/0013_individualimpactareapage_external_icon_and_more.py

@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2024-05-23 21:58
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('impact_areas', '0012_alter_individualimpactareapage_use_cases'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='individualimpactareapage',
+            name='external_icon',
+            field=models.ForeignKey(blank=True, help_text='The icon representing this page which is shown for previews of this page on other pages.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image'),
+        ),
+        migrations.AlterField(
+            model_name='individualimpactareapage',
+            name='load_more_projects_text',
+            field=models.CharField(default='Load More Projects'),
+        ),
+    ]

app/impact_areas/models.py

@@ -1,21 +1,140 @@
 from django.db import models
+from django.db.models import Q
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
 from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
 from wagtail.blocks import StreamBlock, CharBlock, URLBlock, RichTextBlock, StructBlock
 from wagtail.images.blocks import ImageChooserBlock
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 
+from app.projects.models import IndividualProjectPage
 
-class IndividualBlock(StructBlock):
+
+class UseCaseStructBlock(StructBlock):
+    description = RichTextBlock()
+    link_text = CharBlock()
+    link_url = URLBlock(blank=True, null=True)
+
+
+class UseCaseBlock(StreamBlock):
+    blocks = UseCaseStructBlock()
+
+
+class IndividualImpactAreaPage(Page):
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        projects_list = IndividualProjectPage.objects.live().filter(
+            Q(impact_area_list__contains=[{'type': 'impact_area', 'value': context['page'].id}])
+        )
+        # print(IndividualProjectPage.objects.first().impact_area_list[0].value.id)
+        # print(context['page'].id)
+        # print(IndividualProjectPage.objects.first().impact_area_list.__contains__([{'value__id': context['page'].id}]))
+        # print(dir(IndividualProjectPage.objects.first().impact_area_list))
+        page = request.GET.get('page', 1)
+        paginator = Paginator(projects_list, 4)
+        try:
+            projects = paginator.page(page)
+        except PageNotAnInteger:
+            projects = paginator.page(1)
+        except EmptyPage:
+            projects = paginator.page(paginator.num_pages)
+
+        context['projects'] = projects
+        other_impact_areas = IndividualImpactAreaPage.objects.live()
+        context['other_impact_areas'] = other_impact_areas
+        return context
+
+    header_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Header image"
+    )
+    header_text = RichTextField(blank=True)
+
+    external_icon = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="The icon representing this page which is shown for previews of this page on other pages."
+    )
+    intro_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="Intro image"
+    )
+    intro = RichTextField(blank=True)
+    description = RichTextField(blank=True)
+
+    use_cases_title = models.CharField(default="Use Cases")
+    use_cases = StreamField(UseCaseBlock(), use_json_field=True, blank=True, null=True)
+
+    projects_title = models.CharField(default="Projects")
+    view_all_projects_text = models.CharField(default="View all projects")
+    view_all_projects_link = models.URLField(blank=True)
+    load_more_projects_text = models.CharField(default="Load More Projects")
+
+    explore_impact_areas_text = models.CharField(default="Explore Other Impact Areas")
+
+    red_dogear_box_title = models.CharField(blank=True)
+    red_dogear_box_link_text = models.CharField(blank=True)
+    red_dogear_box_link_url = models.URLField(blank=True)
+
+    black_dogear_box_title = models.CharField(blank=True)
+    black_dogear_box_link_text = models.CharField(blank=True)
+    black_dogear_box_link_url = models.URLField(blank=True)
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel([
+            FieldPanel('header_image'),
+            FieldPanel('header_text'),
+        ], heading="Header"),
+        MultiFieldPanel([
+            FieldPanel('external_icon'),
+            FieldPanel('intro_image'),
+            FieldPanel('intro'),
+            FieldPanel('description'),
+        ], heading="Body"),
+        MultiFieldPanel([
+            FieldPanel('use_cases_title'),
+            FieldPanel('use_cases'),
+        ], heading="Use Cases"),
+        MultiFieldPanel([
+            FieldPanel('projects_title'),
+            FieldPanel('view_all_projects_text'),
+            FieldPanel('view_all_projects_link'),
+            FieldPanel('load_more_projects_text'),
+        ], heading="Projects"),
+        FieldPanel('explore_impact_areas_text'),
+        MultiFieldPanel([
+            FieldPanel('red_dogear_box_title'),
+            FieldPanel('red_dogear_box_link_text'),
+            FieldPanel('red_dogear_box_link_url'),
+            FieldPanel('black_dogear_box_title'),
+            FieldPanel('black_dogear_box_link_text'),
+            FieldPanel('black_dogear_box_link_url'),
+        ], heading="Dogear Boxes"),
+    ]
+
+
+class ImpactAreaStructBlock(StructBlock):
     image = ImageChooserBlock()
     title = CharBlock()
     description = RichTextBlock()
     link = URLBlock(required=False)
 
 
 class ImpactAreaBlock(StreamBlock):
-    impact_area_block = IndividualBlock()
+    impact_area_block = ImpactAreaStructBlock()
 
 
 class ImpactAreasPage(Page):

app/impact_areas/templates/impact_areas/components/UseCaseBox.html

@@ -0,0 +1,14 @@
+<div class="bg-hot-off-white p-4 flex flex-col">
+    <h1 class="text-hot-red text-h4 font-bold">
+        {{ number }}.
+    </h1>
+    <div class="my-2">
+        {{ body }}
+    </div>
+    <a href={{ linkurl }} class="text-hot-red mt-auto font-medium py-2">
+        <p>
+            {{ linktext }}
+            {% include "ui/components/icon_svgs/LinkCaret.html" %}
+        </p>
+    </a>
+</div>

app/impact_areas/templates/impact_areas/individual_impact_area_page.html

@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+{% load static %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load compress %}
+{% block body_class %}template-individualmappinghubpage{% endblock %}
+{% block extra_css %}
+    {% compress css %}
+    {% endcompress css %}
+{% endblock extra_css %}
+
+{% block content %}
+    {% include "ui/components/PageHeaderWithBlur.html" with title=page.title subtitle=page.header_text image=page.header_image full_length=True %}
+
+    <div class="max-w-7xl mx-auto mb-20">
+        <div class="px-8 my-10">
+            {% comment %} MAIN BODY {% endcomment %}
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10">
+                <div class="base-article-m [&_p:first-child]:mt-0 lg:order-2">
+                    <div class="text-intro font-medium">
+                        {{ page.intro|safe }}
+                    </div>
+                    {{ page.description|safe }}
+                </div>
+                {% image page.intro_image original class="pb-8 lg:order-1" %}
+            </div>
+
+            {% comment %} USE CASES {% endcomment %}
+            {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.use_cases_title %}
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 my-10">
+                {% for case in page.use_cases %}
+                    {% include "./components/UseCaseBox.html" with number=forloop.counter body=case.value.description linktext=case.value.link_text linkurl=case.value.link_url %}
+                {% endfor %}
+            </div>
+
+            {% comment %} PROJECTS {% endcomment %}
+            <div class="my-20">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-4">
+                    <div>
+                        {% include "ui/components/SectionHeadingWithUnderline.html" with title=page.projects_title %}
+                    </div>
+                    <p class="md:text-right">
+                        {% include "ui/components/BaseLink.html" with linktext=page.view_all_projects_text linkurl=page.view_all_projects_link %}
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 mt-10" id="projects-list">
+                    {% for project in projects %}
+                        {% include "ui/components/projects/ProjectPreviewBlockNews.html" with project=project showimage=True %}
+                    {% endfor %}
+                </div>
+                <p class="text-center mt-10" id="next-project" class="{% if not projects.has_next %}hidden{% endif %}">
+                    {% if projects.has_next %}
+                            {% comment %} <a href="?page={{ projects.next_page_number }}"></a> {% endcomment %}
+                            <button hx-get="?page={{ projects.next_page_number }}"
+                                hx-trigger="click"
+                                hx-select="#projects-list, #next-project"
+                                hx-swap="beforeend"
+                                hx-select-oob="#projects-list:beforeend, #next-project:outerHTML"
+                            >
+                                <span class="border-b-hot-red border-b-2 pb-1 font-medium mr-4 text-intro">
+                                    Load More Projects
+                                </span>
+                                {% include "ui/components/icon_svgs/LinkCaret.html" with class="rotate-90 text-hot-red" %}
+                            </button>
+                    {% endif %}
+                </p>
+            </div>
+
+            {% comment %} OTHER IMPACT AREAS {% endcomment %}
+            <div class="my-20">
+                <h1 class="text-h2 font-bold">
+                    {{ page.explore_impact_areas_text }}
+                </h1>
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 mt-10">
+                    {% for area in other_impact_areas %}
+                        {% if area != page %}
+                            <a href="{{ area.url }}" class="rounded-2xl shadow-md">
+                                <div class="bg-hot-off-white p-6 text-center font-medium text-intro h-full">
+                                    {% image area.external_icon fill-200x200 class="px-10" %}
+                                    <p>
+                                        {{ area.title }}
+                                    </p>
+                                </div>
+                            </a>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            </div>
+
+
+            {% comment %} DOGEAR BOXES {% endcomment %}
+            <div class="grid grid-cols-1 md:grid-cols-2 text-white my-10 gap-8">
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearRed.html" with title=page.red_dogear_box_title linktext=page.red_dogear_box_link_text linkurl=page.red_dogear_box_link_url %}
+                </div>
+                <div>
+                    {% include "ui/components/dogear_boxes/DogearBlack.html" with title=page.black_dogear_box_title linktext=page.black_dogear_box_link_text linkurl=page.black_dogear_box_link_url %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

app/impact_areas/views.py

@@ -1,3 +1,3 @@
 from django.shortcuts import render
 
-# Create your views here.
+from projects.models import IndividualProjectPage

app/news/models.py

@@ -51,7 +51,7 @@ class IndividualNewsPage(Page):
 
     article_body = StreamField([
         ('text_block', RichTextBlock(features=[
-        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'link', 'document-link', 'image', 'embed', 'code', 'blockquote'
+        'h1', 'h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr', 'document-link', 'image', 'embed', 'code', 'blockquote'
         ]))
     ], use_json_field=True, null=True, blank=True)
 

app/programs/templates/programs/individual_program_page.html

@@ -14,13 +14,13 @@
 
     <div class="max-w-7xl mx-auto">
         <div class="grid grid-cols-1 lg:grid-cols-2 p-10 gap-x-10">
-            {% image page.intro_image original class="pb-8" %}
-            <div class="base-article-m [&_p:first-child]:mt-0">
+            <div class="base-article-m [&_p:first-child]:mt-0 lg:order-2">
                 <div class="text-intro font-medium">
                     {{ page.intro|safe }}
                 </div>
                 {{ page.description|safe }}
             </div>
+            {% image page.intro_image original class="pb-8 lg:order-1" %}
         </div>
 
         <h1 class="text-h2 px-10 font-bold">