Feature impact discover (#300)

* 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 5d93afa) * 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 5d93afa) * 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 5ae0c2d. * 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 5ae0c2d. * 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>
GoteoFoundation · Nov 26, 2021 · a868d6a · a868d6a
1 parent 5d94693
commit a868d6a
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 118 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+    }
 
 }