finalize structures screen style

ot_core/Classes/ViewHelpers/OtAbstractViewHelper.php

@@ -6,6 +6,7 @@ use FluidTYPO3\Vhs\Utility\ErrorUtility;
 use Opentalent\OtCore\Website\OtPageRepository;
 use Psr\Log\LoggerAwareInterface;
 use Psr\Log\LoggerAwareTrait;
+use TYPO3\CMS\Extbase\Utility\LocalizationUtility;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
 
 /**
@@ -47,4 +48,8 @@ class OtAbstractViewHelper  extends AbstractViewHelper implements LoggerAwareInt
     {
         return $GLOBALS['LANG'];
     }
+
+    protected function translate(string $id) {
+        return LocalizationUtility::translate($id, 'ot_templating');
+    }
 }

ot_templating/Classes/ViewHelpers/PaginationViewHelper.php

@@ -0,0 +1,103 @@
+<?php
+
+namespace Opentalent\OtTemplating\ViewHelpers;
+
+use Opentalent\OtCore\ViewHelpers\OtAbstractViewHelper;
+use TYPO3\CMS\Core\Resource\Exception\ResourceDoesNotExistException;
+use TYPO3\CMS\Fluid\ViewHelpers\TranslateViewHelper;
+
+/**
+ *
+ *     {namespace ot=Opentalent\OtTemplating\ViewHelpers}
+ *
+ *     {ot:pagination(collection:collection)}
+ *
+ * @package Opentalent\OtTemplating\ViewHelpers
+ */
+class PaginationViewHelper extends OtAbstractViewHelper
+{
+    /**
+     * >> Required to prevent typo3 to escape the html output
+     * @var boolean
+     */
+    protected $escapeOutput = false;
+
+    /**
+     * -- This method is expected by Fluid --
+     * Declares the viewhelper's parameters
+     */
+    public function initializeArguments()
+    {
+        $this->registerArgument(
+            'collection',
+            'object',
+            'The ApiPagedCollection object',
+            true
+        );
+    }
+
+    /**
+     * -- This method is expected by Fluid --
+     * Renders the content as html
+     *
+     * @return string Rendered tag
+     */
+    public function render() {
+        $collection = $this->arguments['collection'];
+        $lastPage = $collection->getLastPage();
+        $currentPage = $collection->getCurrentPage();
+
+        if (!$lastPage > 0) {
+            return "";
+        }
+
+        $divWrapper = '<div class="pagination-bar">%s</div>';
+
+        $goToFirst = '<a href="' . $this->getUriWithPage(1) . '" ' .
+            'title="' . $this->translate('go-to-first-page') . '">' .
+            '<i class="fa fa-angle-double-left"></i>' .
+            '</a>';
+        $goToLast = '<a href="' . $this->getUriWithPage($lastPage) . '"' .
+            'title="' . $this->translate('go-to-last-page') . '">' .
+            '<i class="fa fa-angle-double-right"></i>' .
+            '</a>';
+
+        $startAt = $currentPage > 6  ? $currentPage - 5 : 1;
+        $endAt = $currentPage < ($lastPage - 5) ? $currentPage + 5 : $lastPage;
+
+        $ul = '<ul>';
+        for ($i = $startAt; $i <= $endAt; $i++) {
+            $ul .= '<li class="' . ($i == $currentPage ? 'current' : '') . '">';
+            $ul .= '<a href="' . $this->getUriWithPage($i) . '" title="' . $this->translate('go-to-page') . $i .'">' . $i . '</a>';
+            $ul .= '</li>';
+        }
+        $ul .= '</ul>';
+
+        return sprintf($divWrapper, $goToFirst . $ul . $goToLast);
+    }
+
+    private function getUriWithPage(int $page, bool $nocache = true) {
+        $request = $GLOBALS['TYPO3_REQUEST'];
+        $uri = $request->getUri();
+        $query = $uri->getQuery();
+
+        if (preg_match("/.*page=\d+.*/", $query)) {
+            $query = preg_replace(
+                "/page=\d+/",
+                "page=" . $page,
+                $query
+            );
+        } elseif ($query != '') {
+            $query .= "&page=" . $page;
+        } else {
+            $query .= "page=" . $page;
+        }
+
+        $query = preg_replace("/&no_cache=1/", "", $query);
+        if ($nocache) {
+            $query .= '&no_cache=1';
+        }
+        return (string)$uri->withQuery($query);
+    }
+
+}

ot_templating/Resources/Private/Language/locallang.xlf

@@ -154,6 +154,12 @@
 			<trans-unit id="member-companies">
 				<source>Nos structures adhérentes</source>
 			</trans-unit>
+			<trans-unit id="map">
+				<source>Carte</source>
+			</trans-unit>
+			<trans-unit id="list">
+				<source>Liste</source>
+			</trans-unit>
 			<trans-unit id="no-result">
 				<source>Aucun résultat</source>
 			</trans-unit>
@@ -166,6 +172,15 @@
 			<trans-unit id="see-more">
 				<source>En savoir plus</source>
 			</trans-unit>
+			<trans-unit id="go-to-first-page">
+				<source>Aller à la première page</source>
+			</trans-unit>
+			<trans-unit id="go-to-last-page">
+				<source>Aller à la dernière page</source>
+			</trans-unit>
+			<trans-unit id="go-to-page">
+				<source>Aller à la page </source>
+			</trans-unit>
 			<trans-unit id="click-on-land-to-go-there">
 				<source>Cliquez sur une des régions ci-dessous pour centrer la carte sur elle</source>
 			</trans-unit>
@@ -1616,6 +1631,33 @@
 			<trans-unit id="CONDUCTOR" xml:space="preserve">
 			    <source>Directeur ou chef d'orchestre</source>
 			</trans-unit>
+			<trans-unit id="1MC" xml:space="preserve">
+			    <source>Musique</source>
+			</trans-unit>
+			<trans-unit id="2TH" xml:space="preserve">
+			    <source>Théatre</source>
+			</trans-unit>
+			<trans-unit id="3DA" xml:space="preserve">
+			    <source>Dance</source>
+			</trans-unit>
+			<trans-unit id="5FA" xml:space="preserve">
+			    <source>Art du spectacle </source>
+			</trans-unit>
+			<trans-unit id="OTAR" xml:space="preserve">
+			    <source>Arts de rue</source>
+			</trans-unit>
+			<trans-unit id="OTCI" xml:space="preserve">
+			    <source>École de cirque</source>
+			</trans-unit>
+			<trans-unit id="6AR" xml:space="preserve">
+			    <source>Musée</source>
+			</trans-unit>
+			<trans-unit id="8CI" xml:space="preserve">
+			    <source>Cinéma</source>
+			</trans-unit>
+			<trans-unit id="OTAU" xml:space="preserve">
+			    <source>Autres</source>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>

ot_templating/Resources/Private/Layouts/Classic/Structures.html

@@ -11,12 +11,12 @@
     <f:comment><!-- Central column --></f:comment>
     <div class="content">
         <f:comment><!-- All members --></f:comment>
-        <div class="ot-structures">
+        <div class="ot-structures map-view">
 
             <ot:organizations.getChildren as="structuresCollection"
                                           organizationId="{settings.organizationId}">
 
-                <div class="structure-col">
+                <div class="structure-col structure-col-map">
                     <div id="structure-map-wrapper">
                         <div id="structure-map">
                             <f:for each="{structuresCollection.members}" as="structure" iteration="it">
@@ -45,9 +45,12 @@
                     </div>
                 </div>
 
-                <div class="structure-col">
-                    <h2><f:translate key="member-companies"/></h2>
-
+                <div class="structure-col structure-col-results">
+                    <header>
+                        <h2><f:translate key="member-companies"/></h2>
+                        <a href="#" class="activate-map-view"><f:translate key="map"/></a>
+                        <a href="#" class="activate-list-view"><f:translate key="list"/></a>
+                    </header>
                     <div class="structure-search">
                         <form>
                             <div class="search-loc-wrapper">
@@ -69,12 +72,15 @@
                                 </select>
                                 <select class="search-province">
                                     <option value="-1">Région</option>
+                                    <option value="0">Alsace</option>
                                 </select>
                                 <select class="search-federation">
                                     <option value="-1">Fédération</option>
+                                    <option value="0">CMF</option>
                                 </select>
                                 <select class="search-distance-max">
                                     <option value="-1">Distance</option>
+                                    <option value="0">100</option>
                                 </select>
 
                                 <button class="reset-search">Réinitialiser</button>
@@ -95,39 +101,57 @@
 
                         <f:for each="{structuresCollection.members}" as="structure">
                             <div class="structure-card" data-id="{structure.id}">
-                                <div class="structure-preview">
-
-                                    <div class="structure-poster">
-                                        <f:if condition="{structure.logo}">
-                                            <f:then>
-                                                <img src='{structure.logo}' alt="poster" />
-                                            </f:then>
-                                            <f:else>
-                                                <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
-                                            </f:else>
-                                        </f:if>
+
+                                <div class="structure-poster">
+                                    <f:if condition="{structure.logo}">
+                                        <f:then>
+                                            <img src='{structure.logo}' alt="poster" />
+                                        </f:then>
+                                        <f:else>
+                                            <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
+                                        </f:else>
+                                    </f:if>
+                                </div>
+
+                                <div class="structure-details">
+                                    <div class="structure-categories">
+                                        <f:for each="{structure.categories}" as="category">
+                                            <span class="structure-category">
+                                                <f:translate key="{category}"/>
+                                            </span>
+                                        </f:for>
                                     </div>
 
-                                    <div class="structure-summary">
-                                        <span class="structure-name">
-                                            {structure.name}
-                                        </span>
-                                        <span class="structure-adress">
-                                            {structure.streetAdress}<br/>
-                                            {structure.postalCode} {structure.addressCity}
-                                        </span>
+                                    <div class="structure-name">
+                                        {structure.name}
                                     </div>
+                                    <table class="structure-details-table">
+                                        <tr class="structure-details-entry structure-address">
+                                            <td><i class="fas fa-map-marker-alt"></i></td>
+                                            <td>
+                                                <f:if condition="{structure.streetAddress}">
+                                                    {structure.streetAddress} -
+                                                </f:if>
+                                                {structure.postalCode} {structure.addressCity}
+                                            </td>
+                                        </tr>
+                                        <tr class="structure-details-entry structure-federation">
+                                            <td><i class="fas fa-project-diagram"></i></td>
+                                            <td>{structure.parentName}</td>
+                                        </tr>
+                                    </table>
                                 </div>
 
-                                <a href="https://{structure.subdomain}.opentalent.fr" class="btn structure-see">
+                                <div class="spacer"></div>
+
+                                <a target="_blank" class="btn structure-see" href="https://{structure.subdomain}.opentalent.fr">
                                     <span><f:translate key="see-more"/></span>
                                     <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
                                 </a>
                             </div>
                         </f:for>
 
-                        <f:render partial="Classic/Pagination" arguments="{collection: structuresCollection}"/>
-
+                        {ot:pagination(collection: structuresCollection)}
 
                     </div>
                 </div>

ot_templating/Resources/Private/Layouts/Modern/Structures.html

@@ -90,7 +90,7 @@
                                                     </div>
                                                 </div>
 
-                                                <a href="https://{structure.subdomain}.opentalent.fr" class="structure-see">
+                                                <a target="_blank" href="https://{structure.subdomain}.opentalent.fr" class="structure-see">
                                                     <i class="fa fa-plus" style="margin-right: 5px;"></i>
                                                     <span><f:translate key="see"/></span>
                                                 </a>

ot_templating/Resources/Public/assets/Classic/script/main.js

@@ -258,6 +258,41 @@ $(document).ready(function(){
         let bounds = L.latLngBounds(L.latLng(p1[0], p1[1]), L.latLng(p2[0], p2[1]));
         map.fitBounds(bounds);
     });
+
+
+    // Toggle structures list and map view
+    $('.activate-map-view').on('click', function(e) {
+
+        let div = $(this).closest('.ot-structures');
+        if (div.hasClass('map-view')) {
+            // already in map view
+            return;
+        }
+        e.preventDefault();
+        div.removeClass('list-view');
+        div.addClass('map-view');
+    })
+    $('.activate-list-view').on('click', function(e) {
+
+        let div = $(this).closest('.ot-structures');
+
+        if (div.hasClass('list-view')) {
+            // already in list view
+            return;
+        }
+        e.preventDefault();
+        div.removeClass('map-view');
+        div.addClass('list-view');
+    })
+
+    $('.reset-search').on('click', function(e) {
+        e.preventDefault();
+        let form = $(this).closest('form');
+        form.find('input[type="text"]').each(function () { $(this).val(''); });
+        form.find('select').each(function () { $(this).val(-1); });
+        form.submit();
+    });
+
 });
 
 

ot_templating/Resources/Public/assets/Classic/style/module/_menu.scss

@@ -140,7 +140,7 @@ $submenu-item-height: 30px;
 #menu-container.sticky {
   position: fixed;
   top: 0;
-  z-index: 999;
+  z-index: 9999;
   //max-width: 60vw;
 }
 

ot_templating/Resources/Public/assets/Classic/style/module/_pagination.scss

@@ -4,6 +4,7 @@ $content-a-color: $content-a-color;
   display: flex;
   flex-direction: row;
   margin: 12px auto;
+  align-items: center;
 }
 
 .pagination-bar p {
@@ -15,6 +16,8 @@ $content-a-color: $content-a-color;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  margin: 0;
+  padding: 0 16px;
 }
 
 .pagination-bar li {

ot_templating/Resources/Public/assets/Classic/style/module/_structures.scss

@@ -8,14 +8,28 @@ $input-border-color: #bfbfbf;
   @include flex;
   flex-direction: row;
 
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+    align-items: center;
+  }
+
   h2 {
     font-size: 21px;
     font-weight: 750;
-    width: 100%;
+    flex: 1;
     text-align: left;
     color: $btn-background-color;
   }
 
+  header a {
+    padding: 3px;
+    margin: 2px;
+    font-weight: 500;
+  }
+
   input, select {
     height: 36px;
     border: solid 1px $input-border-color;
@@ -40,6 +54,9 @@ $input-border-color: #bfbfbf;
     text-align: center;
   }
 
+  .spacer {
+    flex: 1;
+  }
 
   // The wrapper role is to maintain the map's height equal to its width
   // @see https://stackoverflow.com/a/14896313/4279120
@@ -94,7 +111,7 @@ $input-border-color: #bfbfbf;
   }
 
   .structure-search form {
-    width:100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
   }
@@ -133,6 +150,7 @@ $input-border-color: #bfbfbf;
   .structure-search .filters {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
   }
 
   .structure-search select {
@@ -163,20 +181,45 @@ $input-border-color: #bfbfbf;
   .structure-card {
     display: flex;
     flex-direction: column;
-    width: 250px;
-    max-width: 250px;
-    min-width: 250px;
-    border: solid 1px #999999;
+    width: 44%;
+    min-width: 240px;
+    border: solid 1px #cccccc;
     border-radius: 4px;
-    padding: 12px;
-    margin: 8px;
+    padding: 12px 8px;
+    margin: 8px 1%;
+    background-color: #f2f2f2;
   }
 
   .structure-poster {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-bottom: 6px;
+    margin: 8px;
+    min-width: 200px;
+  }
+
+  .structure-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .structure-details > * {
+    margin: 4px;
+  }
+
+  .structure-categories {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .structure-category {
+    background-color: #d9d9d9;
+    color: #262626;
+    font-size: 11px;
+    margin-right: 4px;
+    padding: 0 4px;
+    height: 16px;
+    border-radius: 6px;
   }
 
   .structure-name {
@@ -185,7 +228,91 @@ $input-border-color: #bfbfbf;
     width: 100%;
     text-align: left;
     color: $btn-background-color;
-    margin-bottom: 6px;
   }
 
+  .structure-details-table tr {
+    background-color: #eeeeee !important;
+  }
+
+  .structure-details-table td {
+    border:none;
+  }
+
+  .structure-details-entry {
+    color: #595959;
+  }
+
+  .structure-details-entry .fas {
+    color: $btn-background-color;
+  }
+
+  .structure-see {
+    width: 128px;
+    max-height: 28px;
+    padding: 4px;
+    font-weight: 500;
+    margin-top: 8px;
+  }
+
+  .structure-see:hover {
+    text-decoration: none;
+    color: white;
+  }
+
+  .pagination-bar {
+    li a {
+      color: #4d4d4d;
+      font-weight: 600;
+    }
+
+    li.current a {
+      color: $btn-background-color;
+    }
+  }
+}
+
+.ot-structures.list-view {
+  // List view changes
+
+  .structure-col-map {
+    display: none;
+  }
+
+  .structure-search form {
+    flex-direction: row;
+  }
+
+  .search-loc-wrapper {
+    flex: 1;
+    margin-right: 2%;
+  }
+
+  .filters select, .filters button {
+    height: 52px;
+  }
+
+  .structure-col-results {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .structure-card {
+    width: 95%;
+    flex-direction: row;
+  }
+
+  .structure-details {
+    flex: 1;
+  }
+
+  .structure-see {
+    align-self: flex-end;
+  }
+}
+
+.ot-structures.map-view .activate-map-view {
+  font-weight: 750;
+}
+.ot-structures.list-view .activate-list-view {
+  font-weight: 750;
 }