From df6fc9853fde7e7562a3eeb421fc918d0b836cee Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Tue, 9 Jan 2024 12:11:58 +0000
Subject: [PATCH] Make dataset favouriting work on the new area page

---
 hub/static/css/_area.scss              | 22 +++++++++++
 hub/static/js/area.esm.js              | 26 ++++++------
 hub/templates/hub/area/_favourite.html |  4 +-
 hub/templates/hub/new_area_page.html   | 55 +++++++++++---------------
 4 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/hub/static/css/_area.scss b/hub/static/css/_area.scss
index 93e45010e..290ec8930 100644
--- a/hub/static/css/_area.scss
+++ b/hub/static/css/_area.scss
@@ -91,6 +91,14 @@
     grid-row: span 3;
 }
 
+.area-data-favourites {
+    display: none; // will be shown later on
+
+    svg {
+        margin: 0 0.33rem;
+    }
+}
+
 .area-data-more {
     display: none; // will be shown later on
     margin-top: map-get($spacers, 3);
@@ -130,3 +138,17 @@
         display: none;
     }
 }
+
+.area-content[data-section="favourites"] {
+    .area-data-favourites {
+        display: block;
+    }
+
+    .area-data-grid > :not(.dataset-card--favourite) {
+        display: none;
+    }
+
+    .area-section:not(:has(.dataset-card--favourite)) {
+        display: none;
+    }
+}
diff --git a/hub/static/js/area.esm.js b/hub/static/js/area.esm.js
index 9dc30f58f..f9d701478 100644
--- a/hub/static/js/area.esm.js
+++ b/hub/static/js/area.esm.js
@@ -63,19 +63,19 @@ function setUpAreaPage() {
         trackEvent('area_page_switch_section', { "section": section })
     })
 
-    // $('.js-favourite-this-dataset, .js-unfavourite-this-dataset').on('submit', function(e){
-    //     e.preventDefault();
-    //     var $form = $(this);
-    //     $.ajax({
-    //         url: $form.attr('action'),
-    //         type: $form.attr('method') || 'get',
-    //         data: $form.serialize(),
-    //         accepts: 'application/json; charset=utf-8',
-    //         dataType: 'json'
-    //     }).done(function(){
-    //         $form.parents('.dataset-card').toggleClass('dataset-card--favourite');
-    //     });
-    // });
+    $('.js-favourite-this-dataset, .js-unfavourite-this-dataset').on('submit', function(e){
+        e.preventDefault();
+        var $form = $(this);
+        $.ajax({
+            url: $form.attr('action'),
+            type: $form.attr('method') || 'get',
+            data: $form.serialize(),
+            accepts: 'application/json; charset=utf-8',
+            dataType: 'json'
+        }).done(function(){
+            $form.parents('.dataset-card').toggleClass('dataset-card--favourite');
+        });
+    });
 
     updateUI()
 }
diff --git a/hub/templates/hub/area/_favourite.html b/hub/templates/hub/area/_favourite.html
index bffce1c7a..7e05ea201 100644
--- a/hub/templates/hub/area/_favourite.html
+++ b/hub/templates/hub/area/_favourite.html
@@ -1,10 +1,10 @@
-<form action="{% url 'unfavourite_dataset' category.pk  %}" method="POST" class="js-unfavourite-this-dataset">
+<form action="{% url 'unfavourite_dataset' dataset.pk  %}" method="POST" class="js-unfavourite-this-dataset">
     {% csrf_token %}
     <button type="submit" title="Unfavourite this dataset">
         {% include 'hub/includes/icons/heart-full.html' %}
     </button>
 </form>
-<form action="{% url 'favourite_dataset' category.pk  %}" method="POST" class="js-favourite-this-dataset">
+<form action="{% url 'favourite_dataset' dataset.pk  %}" method="POST" class="js-favourite-this-dataset">
     {% csrf_token %}
     <button type="submit" title="Favourite this dataset">
         {% include 'hub/includes/icons/heart-empty.html' %}
diff --git a/hub/templates/hub/new_area_page.html b/hub/templates/hub/new_area_page.html
index e1b4a586d..4fcda55a2 100644
--- a/hub/templates/hub/new_area_page.html
+++ b/hub/templates/hub/new_area_page.html
@@ -53,6 +53,11 @@ <h1 class="mb-2">{{ area.name }}</h1>
 <div class="py-4 py-lg-5 bg-light area-content">
     <div class="container mb-n3 mb-lg-n4">
 
+        <aside class="area-data-favourites mb-5 mb-lg-6">
+            <h2 class="h5 text-muted">Easy access to the datasets that matter to you</h2>
+            <p class="d-flex flex-wrap align-items-center text-muted">Tap the {% include 'hub/includes/icons/heart-empty.html' %} icon on any dataset to add it to your {% include 'hub/includes/icons/heart-empty.html' %} Favourites tab.</p>
+        </aside>
+
         <section class="mb-5 mb-lg-6 area-section" id="mp">
             <h2 class="mb-3 text-primary">MP</h2>
             <div class="area-data-grid">
@@ -109,9 +114,6 @@ <h3 class="h5">MP profiles</h3>
                 <div class="card dataset-card area-data--md area-data--featured">
                     <div class="card-header">
                         <h3 class="h5">MP memberships</h3>
-                        <form>
-                            <button title="Favourite these datasets">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
                     </div>
                     <div class="card-body">
                       {% if mp.cen_member or mp.nzsg_member %}
@@ -150,9 +152,6 @@ <h4 class="h6 text-muted fw-bold">APPGs</h4>
                 <div class="card dataset-card area-data--md area-data--featured">
                     <div class="card-header">
                         <h3 class="h5">Relevant votes &amp; amendments</h3>
-                        <form>
-                            <button title="Favourite these datasets">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
                     </div>
                     <div class="card-body">
                         <table class="table mb-0">
@@ -183,12 +182,10 @@ <h3 class="h5">Relevant votes &amp; amendments</h3>
                    </div>
                 </div>
 
-                <div class="card dataset-card area-data--sm area-data--featured">
+                <div class="card dataset-card area-data--sm {% comment %} TODO: dataset-card--favourite? {% endcomment %} area-data--featured">
                     <div class="card-header">
                         <h3 class="h5">{{ mp.mp_last_elected|date:"Y"}} majority</h3>
-                        <form>
-                            <button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
+                        {% comment %} TODO: "Favourite" button {% endcomment %}
                     </div>
                     <div class="card-body">
                         <p class="card-text mb-0 display-6 lh-1 text-primary">
@@ -200,12 +197,10 @@ <h3 class="h5">{{ mp.mp_last_elected|date:"Y"}} majority</h3>
                     </div>
                 </div>
 
-                <div class="card dataset-card area-data--sm">
+                <div class="card dataset-card area-data--sm {% comment %} TODO: dataset-card--favourite? {% endcomment %}">
                     <div class="card-header">
                         <h3 class="h5">Date elected</h3>
-                        <form>
-                            <button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
+                        {% comment %} TODO: "Favourite" button {% endcomment %}
                     </div>
                     <div class="card-body">
                         <p class="card-text mb-0 display-6 lh-1 text-primary">
@@ -233,17 +228,15 @@ <h2 class="mb-3 text-primary">Public opinion</h2>
 
               {% for dataset in categories.opinion %}
                 {% if dataset.is_range and dataset.data|length > 9 %}
-                <div class="card dataset-card area-data--lg{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--lg {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% elif dataset.is_range and dataset.data|length > 2 or dataset.data_type == "json" %}
-                <div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% else %}
-                <div class="card dataset-card area-data--sm{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--sm {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% endif %}
                     <div class="card-header">
                       <h3 class="h5">{{ dataset.label }}</h3>
-                        <form>
-                            <button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
+                      {% include "hub/area/_favourite.html" with dataset=dataset %}
                     </div>
                     <div class="card-body">
                       {% if dataset.data_type == "json" %}
@@ -297,17 +290,15 @@ <h2 class="mb-3 text-primary">Place</h2>
 
               {% for dataset in categories.place %}
                 {% if dataset.is_range and dataset.data|length > 9 %}
-                <div class="card dataset-card area-data--lg{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--lg {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %} area-data--featured{% endif %}">
                 {% elif dataset.is_range or dataset.data_type == "json" %}
-                <div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %} area-data--featured{% endif %}">
                 {% else %}
-                <div class="card dataset-card area-data--sm{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--sm {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %} area-data--featured{% endif %}">
                 {% endif %}
                     <div class="card-header">
                       <h3 class="h5">{{ dataset.label }}</h3>
-                        <form>
-                            <button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
+                      {% include "hub/area/_favourite.html" with dataset=dataset %}
                     </div>
                     <div class="card-body">
                       {% if dataset.data_type == "json" %}
@@ -368,19 +359,17 @@ <h2 class="mb-3 text-primary">Movement</h2>
 
               {% for dataset in categories.movement %}
                 {% if dataset.is_range and dataset.data|length > 9 %}
-                <div class="card dataset-card area-data--lg{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--lg {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% elif dataset.is_range or dataset.data_type == "json" %}
-                <div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% elif dataset.related_category and dataset.related_category.data.value|length > 6 %}
-                <div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% else %}
-                <div class="card dataset-card area-data--sm{% if dataset.featured %} area-data--featured{% endif %}">
+                <div class="card dataset-card area-data--sm {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
                 {% endif %}
                     <div class="card-header">
                       <h3 class="h5">{{ dataset.label }}</h3>
-                        <form>
-                            <button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
-                        </form>
+                      {% include "hub/area/_favourite.html" with dataset=dataset %}
                     </div>
                     <div class="card-body">
                       {% if dataset.data_type == "json" %}