implements pagination

ot_templating/Classes/Domain/Repository/ApiPagedCollection.php

@@ -73,4 +73,10 @@ class ApiPagedCollection
         return $nb;
     }
 
+    /**
+     * @return array
+     */
+    public function getPages() {
+        return range(1, $this->getLastPage());
+    }
 }

ot_templating/Classes/Domain/Repository/BaseApiRepository.php

@@ -22,7 +22,7 @@ abstract class BaseApiRepository extends Repository implements LoggerAwareInterf
     const BASE_URI = 'https://api.opentalent.fr/api/';
     const HYDRA_TYPE = '';
     const HTTP_METHOD = 'GET';
-    const DEFAULT_ITEMS_PER_PAGE = 10;
+    const DEFAULT_ITEMS_PER_PAGE = 8;
 
     private $client;
     private $context;
@@ -45,14 +45,7 @@ abstract class BaseApiRepository extends Repository implements LoggerAwareInterf
     protected function getApiRecords(string $uri, $params = []) {
         $body = $this->getJson($uri, $params);
 
-        // look up for the current page number
-        $matches = [];
-        preg_match("/.*page=(\d+).*/", $body['@id'], $matches);
-        if (in_array(1, $matches)) {
-            $page = (int)$matches[1];
-        } else {
-            $page = 1;
-        }
+        $page = (int)$params['page'] ?? 1;
 
         // build up the members
         $members = [];

ot_templating/Classes/Domain/Repository/OrganizationRepository.php

@@ -29,7 +29,7 @@ class OrganizationRepository extends BaseApiRepository
      * Get the organization by Id
      *
      * @param int $id The id of the organization
-     * @return Organization
+     * @return array
      * @throws ApiRequestException
      */
     public function findById($id) {
@@ -46,7 +46,7 @@ class OrganizationRepository extends BaseApiRepository
      * Get the organization by name
      *
      * @param string name          The name of the organization
-     * @return Organization
+     * @return array
      * @throws \Exception
      * @throws ApiRequestException
      */
@@ -67,7 +67,7 @@ class OrganizationRepository extends BaseApiRepository
      * @param int $id The id of the organization
      * @param array $searchParams An array of parameters which will be passed to the Api request as URI parameters
      * @param int $page
-     * @return array
+     * @return ApiPagedCollection
      * @throws ApiRequestException
      */
     public function findChildrenById(int $id, $searchParams = [], $page = 1)

ot_templating/Classes/ViewHelpers/Organizations/GetChildrenViewHelper.php

@@ -75,10 +75,10 @@ class GetChildrenViewHelper extends AbstractViewHelper implements LoggerAwareInt
     {
         $as = $this->arguments['as'];
         $organizationId = $this->arguments['organizationId'];
-        $page = $this->arguments['page'];
 
-        $searchParams = [];
+        $page = $_REQUEST['page'];
 
+        $searchParams = [];
         if($_REQUEST['search-loc']) {
             $searchParams['where'] = $_REQUEST['search-loc'];
         }

ot_templating/Classes/ViewHelpers/Request/WithPageViewHelper.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace Opentalent\OtTemplating\ViewHelpers\Request;
+
+use Closure;
+use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+/**
+ *   Returns the current url with a 'page=' argument set up or updated
+ *
+ *     {namespace ot=Opentalent\OtTemplating\ViewHelpers}
+ *
+ *     {ot:request.withPage(page: 1)}
+ *
+ * @package Opentalent\OtTemplating\ViewHelpers
+ */
+class WithPageViewHelper extends AbstractViewHelper {
+
+    /**
+     * -- This method is expected by Fluid --
+     * Declares the viewhelper's parameters
+     */
+    public function initializeArguments()
+    {
+        $this->registerArgument('page',
+            'int',
+            "The page's number",
+            true);
+    }
+
+    /**
+     * -- This method is expected by Fluid --
+     * Renders the content as html
+     *
+     * @param array $arguments
+     * @param Closure $renderChildrenClosure
+     * @param RenderingContextInterface $renderingContext
+     * @return string
+     */
+    public static function renderStatic(
+        array $arguments,
+        Closure $renderChildrenClosure,
+        RenderingContextInterface $renderingContext
+    ) {
+        $page = $arguments['page'];
+
+        $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;
+        }
+        return (string)$uri->withQuery($query);
+    }
+}

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

@@ -18,9 +18,6 @@
             <ot:organizations.getChildren as="structuresCollection"
                                           organizationId="{settings.organizationId}">
 
-
-                <f:debug>{_all}</f:debug>
-
                 <div class="ot-structures">
                     <div class="structure-controls">
                         <div class="structure-search">
@@ -85,9 +82,10 @@
                                 </a>
                             </div>
                         </f:for>
+
+                        <f:render partial="Classic/Pagination" arguments="{collection: structuresCollection}"/>
                     </div>
                 </div>
-
             </ot:organizations.getChildren>
 
         </div>

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

@@ -101,8 +101,11 @@
                             </a>
                         </div>
                     </f:for>
+
+                    <f:render partial="Classic/Pagination" arguments="{collection: eventsCollection}"/>
                 </div>
             </div>
+
         </ot:events.getAll>
 
     </div>

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

@@ -88,9 +88,10 @@
                                                 </a>
                                             </div>
                                         </f:for>
+
+                                        <f:render partial="Modern/Pagination" arguments="{collection: structuresCollection}"/>
                                     </div>
                                 </div>
-
                             </ot:organizations.getChildren>
 
                         </div>

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

@@ -103,6 +103,8 @@
                                             </a>
                                         </div>
                                     </f:for>
+
+                                    <f:render partial="Modern/Pagination" arguments="{collection: eventsCollection}"/>
                                 </div>
                             </div>
                         </ot:events.getAll>

ot_templating/Resources/Private/Partials/Classic/EventsIndex.html

@@ -86,5 +86,7 @@
                 </f:link.page>
             </div>
         </f:for>
+
+        <f:render partial="Classic/Pagination" arguments="{collection: eventsCollection}"/>
     </div>
 </div>

ot_templating/Resources/Private/Partials/Classic/Pagination.html

@@ -0,0 +1,22 @@
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:comment><!-- Pagination --></f:comment>
+<f:comment><!--
+    This partial expects an ApiPagedCollection
+    named {collection} as argument
+ --></f:comment>
+
+<f:if condition="{collection.lastPage} > 0">
+    <div class="pagination-bar">
+        <p>Pages:</p>
+        <ul>
+            <f:for each="{collection.pages}" as="page">
+                <li class="{f:if(condition: '{page}=={collection.currentPage}', then: 'current', else: '')}">
+                    <a href="{ot:request.withPage(page: page)}">
+                        {page}
+                    </a>
+                </li>
+            </f:for>
+        </ul>
+    </div>
+</f:if>

ot_templating/Resources/Private/Partials/Modern/EventsIndex.html

@@ -86,5 +86,7 @@
                 </f:link.page>
             </div>
         </f:for>
+
+        <f:render partial="Modern/Pagination" arguments="{collection: eventsCollection}"/>
     </div>
 </div>

ot_templating/Resources/Private/Partials/Modern/NextEvents.html

@@ -46,7 +46,7 @@
                         </div>
                     </div>
 
-                    <f:for each="{eventsCollection.totalItems}" as="event">
+                    <f:for each="{eventsCollection.members}" as="event">
 
                         <div class="card-container col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                             <div class="card border-0 theme-bg o-hidden h-100">

ot_templating/Resources/Private/Partials/Modern/Pagination.html

@@ -0,0 +1,22 @@
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:comment><!-- Pagination --></f:comment>
+<f:comment><!--
+    This partial expects an ApiPagedCollection
+    named {collection} as argument
+ --></f:comment>
+
+<f:if condition="{collection.lastPage} > 0">
+    <div class="pagination-bar">
+        <p>Pages:</p>
+        <ul>
+            <f:for each="{collection.pages}" as="page">
+                <li class="{f:if(condition: '{page}=={collection.currentPage}', then: 'current', else: '')}">
+                    <a href="{ot:request.withPage(page: page)}">
+                        {page}
+                    </a>
+                </li>
+            </f:for>
+        </ul>
+    </div>
+</f:if>

ot_templating/Resources/Private/Partials/Modern/Topbar.html

@@ -8,29 +8,21 @@
                     <ul>
 
                         <li class="brand-free">
-                            <strong>{settings.structureName}</strong> est membre de &nbsp;
+                            <strong>{settings.structureName}</strong>
 
                             <f:if condition="{settings.networkLogo} != ''">
-                                <a href="#"
-                                   title="{settings.networkName}"
-                                   class="reseau"
-                                   data-toggle="modal"
-                                   data-target="#cmfModal">
-                                    <img src="{settings.networkLogoUrl}"
-                                         alt="{settings.networkName}"
-                                         height="22px" />
-                                </a> &nbsp;
-                            </f:if>
+                            est membre de &nbsp;
 
                             <a href="#"
-                               title="Opentalent"
-                               class="reseau-opentalent"
+                               title="{settings.networkName}"
+                               class="reseau"
                                data-toggle="modal"
-                               data-target="#opentalentModal">
-                                <f:image src="EXT:ot_templating/Resources/Public/media/opentalent_longueur_S.jpg"
-                                     alt="Opentalent"
-                                     height="18px" />
-                            </a>
+                               data-target="#cmfModal">
+                                <img src="{settings.networkLogoUrl}"
+                                     alt="{settings.networkName}"
+                                     height="22px" />
+                            </a> &nbsp;
+                            </f:if>
                         </li>
 
                         <li id="notice-cmf">

ot_templating/Resources/Public/assets/Classic/style/classic-blue.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #03303a;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

ot_templating/Resources/Public/assets/Classic/style/classic-green.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #023c1d;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

ot_templating/Resources/Public/assets/Classic/style/classic-grey.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #595959;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

ot_templating/Resources/Public/assets/Classic/style/classic-light-blue.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #06618a;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

ot_templating/Resources/Public/assets/Classic/style/classic-light-red.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #9b201b;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

ot_templating/Resources/Public/assets/Classic/style/classic-orange.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #893a10;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

ot_templating/Resources/Public/assets/Classic/style/classic-red.css

@@ -1743,6 +1743,37 @@ form button[type=submit]:hover {
   text-align: center;
 }
 
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: #790005;
+}
+
 .no-script-warning {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;

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

@@ -0,0 +1,32 @@
+$content-a-color: $content-a-color;
+
+.pagination-bar {
+  display: flex;
+  flex-direction: row;
+  margin: 12px auto;
+}
+
+.pagination-bar p {
+  margin: 14px;
+}
+
+.pagination-bar ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pagination-bar li {
+  margin: 4px 2px;
+  font-size: 16px;
+}
+
+.pagination-bar li a {
+  padding: 12px;
+}
+
+.pagination-bar li.current a {
+  font-weight: 900;
+  color: darken($content-a-color, 20);
+}

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

@@ -99,5 +99,6 @@ $warning-font-color: #ffffff !default;
 "module/_faq",
 "module/_fce-2col",
 "module/_errpages",
+"module/_pagination",
 "module/_noscript",
 "_states";

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -956,6 +956,38 @@ Sitemap page
 /*}*/
 
 
+/* Pagination */
+.pagination-bar {
+    display: flex;
+    flex-direction: row;
+    margin: 12px auto;
+}
+
+.pagination-bar p {
+    margin: 4px;
+}
+
+.pagination-bar ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.pagination-bar li {
+    margin: 4px 2px;
+    font-size: 16px;
+}
+
+.pagination-bar li a {
+    padding: 12px;
+    color: #333333;
+}
+
+.pagination-bar li.current a {
+    color: #8c8c8c;
+}
+
 /*============================
 Error pages (404, 403...)
 ============================*/
@@ -1031,6 +1063,4 @@ Media queries
     .ce-right .ce-gallery {
         float: none;
     }
-
-
 }