From a868d6aa1cfa400978d1ca26b6e6af57bda71cba Mon Sep 17 00:00:00 2001
From: David <david.igon@riseup.net>
Date: Fri, 26 Nov 2021 14:35:30 +0100
Subject: [PATCH] Feature impact discover (#300)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add project name to project translate overview

* fix route of poster in project dashboard

* Upgraded Symfony packages to v2.8.30 (last working version)

* Fix call to render method since it was renamed

(cherry picked from commit 5d93afab554e8211c59ed1f1ab21a2eb4ac75ad2)

* add composer.lock

* restore a early die if misconfiguration

* Updated Dockerfile to use an Ubuntu image that's not deprecated (#181)

* Updated Dockerfile to use an Ubuntu image that's not deprecated

* Removed Docker image based on date in favour of one that won't change

* fix/composer lock (#185)

* Fix call to render method since it was renamed

(cherry picked from commit 5d93afab554e8211c59ed1f1ab21a2eb4ac75ad2)

* remove lock to force deploy

Co-authored-by: Carlos Alberto Martínez Gadea <carlosmartinezgadea@gmail.com>

* Twitter card meta description fix

* change projects to be shown in map when a matcher is selected to use node configuration if available

* improve filters in discover and fix ajax query

(cherry picked from commit 0432ebb325b99d68c42e300493fca974a6142c0f)

* fix use of query parameters when they are not being used

* fix project filters in discover and use of inner joins in project get list function

* Create impact discover layout

* Test msg sass and js

* first steps for layout

* add filters js

* add ods icons behaviour

* fix grid

* add infinite scroll

* add ods images

* add icons

* fix desktop filters toggle

* move html to template

* add tab background images

* add home values module

* fix mobile layout for values module in home

* differentiate tabs backgrounds and fix mobile issues

* add class to tint images

* add home images

* support for short titles at project slider

* move lateral border in mobile to bottom

* fix layout to show footprint link at last block in mobile

* add real images of the real projects for impact discover and home values modules

* add last project home values images for testing

* add padding bottom to impact-discover

* update package-lock.json

* restore HTML & CSS

* delete comment

* Revert "update package-lock.json"

This reverts commit 5ae0c2d9e4d1de876a2c2deaf84fbe10830123f0.

* change use of footprint and sdgs assets from png to svg

* Add matcher completed status

* Fix icons size

* Fix user leave exceptions

* remove comment on sql project name selects

* fix missing ) on fallback lang in Project published

* create partials for impact discover three views

* rename all sdg assets from ods to sdg

* add copies to impact_discover

* create new partials to use in impact discover project list

* rework impact-discover to use the three views (mosaic, list projects and map)

* fix small bug when the map pops in, so that it is correctly centered when adding projects

* add new mapAction to ImpactDiscoverController to separate the three views in three functions

* fix on docker-settings to be used on testsgst

* rework impact discover views to have three endpoints

* add channel filter to ImpactDiscover and actions to ChannelController

* restore a early die if misconfiguration

* change projects to be shown in map when a matcher is selected to use node configuration if available

* fix project filters in discover and use of inner joins in project get list function

* Create impact discover layout

* Test msg sass and js

* first steps for layout

* add filters js

* add ods icons behaviour

* fix grid

* add infinite scroll

* add ods images

* add icons

* fix desktop filters toggle

* move html to template

* add tab background images

* add home values module

* fix mobile layout for values module in home

* differentiate tabs backgrounds and fix mobile issues

* add class to tint images

* add home images

* support for short titles at project slider

* move lateral border in mobile to bottom

* fix layout to show footprint link at last block in mobile

* add real images of the real projects for impact discover and home values modules

* add last project home values images for testing

* add padding bottom to impact-discover

* update package-lock.json

* restore HTML & CSS

* delete comment

* Revert "update package-lock.json"

This reverts commit 5ae0c2d9e4d1de876a2c2deaf84fbe10830123f0.

* change use of footprint and sdgs assets from png to svg

* create partials for impact discover three views

* rename all sdg assets from ods to sdg

* add copies to impact_discover

* create new partials to use in impact discover project list

* rework impact-discover to use the three views (mosaic, list projects and map)

* fix small bug when the map pops in, so that it is correctly centered when adding projects

* add new mapAction to ImpactDiscoverController to separate the three views in three functions

* Fix user leave exceptions

* add project name to project translate overview

* remove comment on sql project name selects

* fix on docker-settings to be used on testsgst

* rework impact discover views to have three endpoints

* add channel filter to ImpactDiscover and actions to ChannelController

* add missing View import

* improve filter by channel in impact discover

* adapt channel select to mobile filter

* add missing project location import in project api controller

* improve impact landing editorial view

* improve filters in impact discover mobile view

* fix links in project name in landing impact

* show projects in campaing and successful in impact discover

* make impact discover filter chexkboxes clickable

* fix project getByFootprintOrSdgs missing where

* improve filters and ux in impact discover

* improve channel select and ods select behaviour

* fix channel filter in impact discover when changing views

* apply filter changes in impact discover url query

* remove code

* remove duplicated routes

* reworks based on review in #300

Co-authored-by: Carlos Alberto Martínez Gadea <carlosmartinezgadea@gmail.com>
Co-authored-by: Ivan Vergés <ivan@platoniq.net>
Co-authored-by: Javier <javicarrillo83@gmail.com>
Co-authored-by: Javier Carrillo <javier@goteo.org>
Co-authored-by: Jordi Galobart <github@galu.cat>
---
 .../impact_discover/partials/filters.php      |  20 ++--
 .../js/impact_discover/impact_discover.js     |  48 +++++---
 public/assets/sass/layouts/_home.scss         |  19 +--
 .../Controller/Api/ProjectsApiController.php  | 109 ++++++++++--------
 .../Controller/ImpactDiscoverController.php   |  40 +++----
 src/routes.php                                |   6 -
 6 files changed, 124 insertions(+), 118 deletions(-)

diff --git a/Resources/templates/responsive/impact_discover/partials/filters.php b/Resources/templates/responsive/impact_discover/partials/filters.php
index 3ca2a58026..09940ac1e2 100644
--- a/Resources/templates/responsive/impact_discover/partials/filters.php
+++ b/Resources/templates/responsive/impact_discover/partials/filters.php
@@ -8,7 +8,7 @@
         <div class="col-xs-12 col-sm-6 col-md-6" id="filters-footprints">
           <p><?= $this->t('impact-discover-filter-by-footprints') ?></p>
           <ul>
-            <li><a href="" data-footprint="all" class="<?  ('all' == $this->footprintSelected)? 'active' : '' ?>">Todas</a></li>
+            <li><a href="" data-footprint="all" class="<?= ('all' == $this->footprintSelected)? 'active' : '' ?>">Todas</a></li>
             <?php foreach($this->footprints as $footprint): ?>
               <li>
                 <a href="" data-footprint="<?= $footprint->id ?>" class="<?= in_array($footprint->id, $this->footprintsSelected)? 'active' : '' ?>">
@@ -37,19 +37,13 @@
           </p>
         </div>
         <div class="col-xs-12 col-sm-3 col-md-4 text-center" id="filters-channel">
-          <?php if ($this->selectedChannel) : ?>
-            <select class="form-control" name="channel" disabled>
-              <option value="<?= $this->selectedChannel ?>" selected> <?= $this->channels[$this->selectedChannel] ?> </option>
-            </select>
-          <?php else: ?>
-            <select class="form-control" name="channel" >
-              <option value="" selected disabled hidden><?= $this->t('regular-channel') ?></option>
+          <select class="form-control" name="channel" >
+            <option value="" selected disabled hidden><?= $this->t('regular-channel') ?></option>
 
-              <?php foreach($this->channels as $cid => $cname): ?>
-                <option value="<?= $cid ?>"> <?= $cname ?></option>
-              <?php endforeach; ?>
-            </select>
-          <?php endif; ?>
+            <?php foreach($this->channels as $channel): ?>
+              <option value="<?= $channel->id ?>" <?= ($this->channelSelected == $channel->id)? 'selected' : '' ?>> <?= $channel->name ?></option>
+            <?php endforeach; ?>
+          </select>
         </div>
         <div class="col-xs-12 col-sm-3 col-md-4 text-center" id="filters-sdg-select">
           <select class="form-control" name="footprints">
diff --git a/public/assets/js/impact_discover/impact_discover.js b/public/assets/js/impact_discover/impact_discover.js
index 512ee6cfca..59bb61d624 100644
--- a/public/assets/js/impact_discover/impact_discover.js
+++ b/public/assets/js/impact_discover/impact_discover.js
@@ -26,23 +26,23 @@ for the JavaScript code in this page.
 $(function(){
 
     const view = document.querySelector('.section[id^=impact-discover]').dataset.view;
-    let $channel = document.querySelector('select[name=channel]');
+    const $channel = document.querySelector('select[name=channel]');
 
     var query = {
         view: view,
         page: 0,
         limit: 9,
         sdg: '',
-        channel: ''
+        channel: $channel.value ?? ''
     };
 
-    function resetQuery() {
-        query = {
-            page: 0,
-            limit: 9,
-            sdg: '',
-            channel: ''
-        };
+    function resetQuery()  {
+        setQuery({
+                page: 0,
+                limit: 9,
+                sdg: '',
+                channel: $channel.value ?? ''
+            });
     }
 
     function setQuery(new_query) {
@@ -52,7 +52,23 @@ $(function(){
             limit: "limit" in new_query? new_query.limit : query.limit,
             sdg: "sdg" in new_query? new_query.sdg : query.sdg,
             channel: "channel" in new_query? new_query.channel : query.channel
-        }
+        };
+
+        updateURL();
+    }
+
+    function updateURL() {
+
+        const sdgs = getActiveSDG().map((sdg) => sdg.id).join(',');
+        const footprints = getActiveFootprints().join(',');
+        const channel = getActiveChannel();
+
+        url = new URL(window.location.href);
+        url.searchParams.set('sdgs', sdgs);
+        url.searchParams.set('footprints', footprints);
+        url.searchParams.set('channel', channel);
+        url.search = url.searchParams.toString();
+        history.pushState(null, null, url.search);
     }
     
     let sdgList = [];
@@ -81,11 +97,9 @@ $(function(){
     function redirectView(event) {
         event.preventDefault();
 
-        const sdgs = getActiveSDG().map((sdg) => sdg.id).join(',');
-        const footprints = getActiveFootprints().join(',');
-        const channel = getActiveChannel();
-
-        window.document.location.href = event.target.parentElement.href + '?sdgs=' + sdgs + '&footprints=' + footprints + '&channel=' + channel ;
+        const url = new URL(window.location.href);
+        url.search = url.searchParams.toString();
+        window.document.location.href = event.target.parentElement.href + url.search;
     }
 
     document.getElementById('activate-mosaic').onclick = redirectView;
@@ -309,7 +323,7 @@ $(function(){
     // activate footprints by sdg selected
     function activateFootprints(footprints) {
         $.each(footprints, function(key, footprint){
-            $('a[data-footprint="'+footprint+'"]').addClass("active");
+            $('a[data-footprint="'+footprint+'"]').trigger('click');
         })
     }
 
@@ -321,7 +335,7 @@ $(function(){
     }
 
     function getActiveChannel() {
-        return $('select[name=channel]').val();
+        return $('select[name=channel]').val() || '';
     }
 
     // filter SDG select options by footprint
diff --git a/public/assets/sass/layouts/_home.scss b/public/assets/sass/layouts/_home.scss
index 5483505484..33458ab250 100644
--- a/public/assets/sass/layouts/_home.scss
+++ b/public/assets/sass/layouts/_home.scss
@@ -90,7 +90,7 @@ body.home {
                     font-weight: 500;
                     width: 47%;
                 }
-                @media(max-width: $breakpoint-xs - 1) {
+                @media(max-width: ($breakpoint-xs - 1)) {
                     .btn-fashion, .btn-light-black {
                         width: 100%;
                         display: block;
@@ -395,8 +395,6 @@ body.home {
                 font-weight: bold;
 
                 .title{
-                    img{
-                    }
                     span.text{
                         border: 1px solid #CAD7D8;
                         font-size: 12px;
@@ -757,7 +755,7 @@ body.home {
         }
     }
 
-    @media (max-width: $breakpoint-sm - 1) {
+    @media (max-width: ($breakpoint-sm - 1)) {
         div.goteo-values {
 
             div[id^="goteo-values-"] {
@@ -791,11 +789,6 @@ body.home {
                     height:290px;
                 }
 
-                img {
-                    width:100px;
-                    height:290px;
-                }
-
                 h2 {
                     margin-top:3rem;
                 }
@@ -1008,7 +1001,7 @@ body.home {
 
     }
 
-    @media (max-width: $breakpoint-sm - 1) {
+    @media (max-width: ($breakpoint-sm - 1)) {
         .section.search{
             .inner-addon{
                 margin-top:10px;
@@ -1049,7 +1042,7 @@ body.home {
     }
 
 
-    @media (max-width: $breakpoint-sm - 1) {
+    @media (max-width: ($breakpoint-sm - 1)) {
         .section.search{
             .inner-addon{
                 margin-top:10px;
@@ -1111,7 +1104,7 @@ body.home {
 
     // Tablets customization
 
-    @media (max-width: $breakpoint-md + 1) {
+    @media (max-width: ($breakpoint-md + 1)) {
         .section.advantages .advantages-container{
             .row.details{
                 display: block;
@@ -1140,7 +1133,7 @@ body.home {
     }
 
 
-    @media (max-width: $breakpoint-sm - 1) {
+    @media (max-width: ($breakpoint-sm - 1)) {
 
         .section.search{
             .inner-addon{
diff --git a/src/Goteo/Controller/Api/ProjectsApiController.php b/src/Goteo/Controller/Api/ProjectsApiController.php
index b541503371..2e38b72f32 100644
--- a/src/Goteo/Controller/Api/ProjectsApiController.php
+++ b/src/Goteo/Controller/Api/ProjectsApiController.php
@@ -660,55 +660,74 @@ public function projectsFootprintsOrSDGs(Request $request)
 
         View::setTheme('responsive');
 
-        if ($view == 'list_projects') {
-            $response = [
-                'total' => $total,
-                'page' => $page,
-                'limit' => $limit,
-                'result_total' => count($projects),
-                'html' => View::render( 
-                    'impact_discover/partials/list_project_rows', [
-                        'projects' => $projects
-                    ]
-                )
-            ];
-        }
-        else if ($view == 'mosaic') {
-            $response = [
-                'total' => $total,
-                'page' => $page,
-                'limit' => $limit,
-                'result_total' => count($projects),
-                'html' => View::render( 
-                    'dashboard/partials/projects_widgets_list', [
-                        'projects' => $projects
-                    ]
-                )
-            ];
-        }
-        else {
-            $list_projects = [];
-            foreach($projects as $project) {
-                $ob = ['id' => $project->id,
-                   'name' => $project->name,
-                   'amount' => $project->amount,
-                   'invested' => $project->invested,
-                   'num_investors' => $project->num_investors,
-                   'image' => Image::get($project->image)->getLink(120,120),
-                   'project_location' => ProjectLocation::get($project->id),
-                   'popup' => View::render('map/partials/project_popup.php', array('project' => $project))];
-                $list_projects[] = $ob;
-            }
-
-            $response = [
-                'total' => $total,
-                'result_total' => count($projects),
-                'projects' => $list_projects
-            ];
+        switch ($view) {
+            case 'list_projects':
+                $response = $this->getListProjectViewResponse($projects, $total, $page, $limit);
+                break;
+            case 'mosaic':
+                $response = $this->getMosaicViewResponse($projects, $total, $page, $limit);
+                break;
+            case 'map':
+                $response = $this->getJsonViewResponse($projects, $total, $page, $limit);
+                break;
+            default:
+                $response = $this->getJsonViewResponse($projects, $total, $page, $limit);
+                break;
         }
 
         return $this->jsonResponse($response);
     }
 
+    private function getListProjectViewResponse(array $projects, int $total, int $page, int $limit): array {
+        return [
+            'total' => $total,
+            'page' => $page,
+            'limit' => $limit,
+            'result_total' => count($projects),
+            'html' => View::render(
+                'impact_discover/partials/list_project_rows', [
+                    'projects' => $projects
+                ]
+            )
+        ];
+    }
+
+    private function getMosaicViewResponse(array $projects, int $total, int $page, int $limit): array {
+        return [
+            'total' => $total,
+            'page' => $page,
+            'limit' => $limit,
+            'result_total' => count($projects),
+            'html' => View::render(
+                'dashboard/partials/projects_widgets_list', [
+                    'projects' => $projects
+                ]
+            )
+        ];
+    }
+
+    private function getJsonViewResponse(array $projects, int $total, int $page, int $limit): array {
+
+        $list_projects = [];
+        foreach($projects as $project) {
+            $ob = ['id' => $project->id,
+                'name' => $project->name,
+                'amount' => $project->amount,
+                'invested' => $project->invested,
+                'num_investors' => $project->num_investors,
+                'image' => Image::get($project->image)->getLink(120,120),
+                'project_location' => ProjectLocation::get($project->id),
+                'popup' => View::render('map/partials/project_popup.php', array('project' => $project))];
+            $list_projects[] = $ob;
+        }
+
+        $response = [
+            'total' => $total,
+            'result_total' => count($projects),
+            'projects' => $list_projects
+        ];
+
+        return $response;
+    }
 
 }
diff --git a/src/Goteo/Controller/ImpactDiscoverController.php b/src/Goteo/Controller/ImpactDiscoverController.php
index 0871fcaf23..f75955f006 100644
--- a/src/Goteo/Controller/ImpactDiscoverController.php
+++ b/src/Goteo/Controller/ImpactDiscoverController.php
@@ -33,6 +33,19 @@ public function __construct() {
         View::setTheme('responsive');
     }
 
+    private function setImpactDiscoverContext() {
+        $footprints = Footprint::getList();
+        $sdgs_count = Sdg::getList([],0,0,true);
+        $sdgs = Sdg::getList([],0,$sdgs_count);
+        $channels = Node::getAll(['status' => 'active']);
+
+        $this->contextVars([
+            'footprints' => $footprints,
+            'sdgs' => $sdgs,
+            'channels' => $channels,
+        ]);
+    }
+
     private function getQueryParameters(Request $request):array {
 
         $filters = [];
@@ -56,29 +69,22 @@ private function getQueryParameters(Request $request):array {
      */
     public function indexAction (Request $request) {
         
+        $this->setImpactDiscoverContext();
         $filters = $this->getQueryParameters($request);
 
         $sdgSelected = $filters['sdgs'] ?? [];
         $channelSelected = $filters['channel'] ?? '';
         $footprintsSelected = $filters['footprints'] ?? [];
 
-        $footprints = Footprint::getList();
-        $sdgs_count = Sdg::getList([],0,0,true);
-        $sdgs = Sdg::getList([],0,$sdgs_count);
-        $channels = Node::getList();
-
         $total = Project::getByFootprintOrSDGs($filters, 0, 0, true);
         $projects = Project::getByFootprintOrSDGs($filters, 0, 9);
 
         return $this->viewResponse('impact_discover/index', [
-            'footprints' => $footprints,
-            'sdgs' => $sdgs,
             'sdgSelected' => $sdgSelected,
             'footprintsSelected' => $footprintsSelected,
             'channelSelected' => $channelSelected,
             'projects' => $projects,
             'total' => $total,
-            'channels' => $channels,
             'view' => 'list_projects'
         ]);
 
@@ -86,6 +92,7 @@ public function indexAction (Request $request) {
 
     public function mapAction(Request $request) {
 
+        $this->setImpactDiscoverContext();
         $filters = $this->getQueryParameters($request);
 
         $sdgSelected = $filters['sdgs'] ?? [];
@@ -93,52 +100,37 @@ public function mapAction(Request $request) {
         $footprintsSelected = $filters['footprints'] ?? [];
 
         $map = new MapOSM('100%');
-        $footprints = Footprint::getList();
-        $sdgs_count = Sdg::getList([],0,0,true);
-        $sdgs = Sdg::getList([],0,$sdgs_count);
-        $channels = Node::getList();
-
         $total = Project::getByFootprintOrSDGs($filters, 0, 0, true);
         $projects = Project::getByFootprintOrSDGs($filters, 0, 9);
 
         return $this->viewResponse('impact_discover/map', [
-            'footprints' => $footprints,
-            'sdgs' => $sdgs,
             'sdgSelected' => $sdgSelected,
             'footprintsSelected' => $footprintsSelected,
             'channelSelected' => $channelSelected,
             'map' => $map,
             'projects' => $projects,
             'total' => $total,
-            'channels' => $channels,
             'view' => 'map'
         ]);
     }
 
     public function mosaicAction(Request $request) {
+        $this->setImpactDiscoverContext();
         $filters = $this->getQueryParameters($request);
 
         $sdgSelected = $filters['sdgs'] ?? [];
         $channelSelected = $filters['channel'] ?? '';
         $footprintsSelected = $filters['footprints'] ?? '';
 
-        $footprints = Footprint::getList();
-        $sdgs_count = Sdg::getList([],0,0,true);
-        $sdgs = Sdg::getList([],0,$sdgs_count);
-        $channels = Node::getList();
-
         $total = Project::getByFootprintOrSDGs($filters, 0, 0, true);
         $projects = Project::getByFootprintOrSDGs($filters, 0, 9);
 
         return $this->viewResponse('impact_discover/mosaic', [
-            'footprints' => $footprints,
-            'sdgs' => $sdgs,
             'sdgSelected' => $sdgSelected,
             'footprintsSelected' => $footprintsSelected,
             'channelSelected' => $channelSelected,
             'projects' => $projects,
             'total' => $total,
-            'channels' => $channels,
             'view' => 'mosaic'
         ]);
     }
diff --git a/src/routes.php b/src/routes.php
index 4f06a54db0..b3cadad610 100644
--- a/src/routes.php
+++ b/src/routes.php
@@ -267,11 +267,6 @@
     )
 ));
 
-// $map_routes = include __DIR__ . '/Routes/map_routes.php';
-// $map_routes->addPrefix('/map');
-// $routes->addCollection($map_routes);
-
-
 // Discover impact
 $routes->add('impact-discover', new Route(
     '/impact-discover',
@@ -294,5 +289,4 @@
     )
 ));
 
-
 return $routes;