Bug 1667181: Adding in new layout and 'show more' pagination

Change-Id: I7081b319ff410aceeae01eb9d9f83fba95e99638

htdocs/admin/site/views.php

@@ -34,8 +34,8 @@ else {
 }
 
 $js = <<< EOF
-jQuery(function($) {
-    p = {$pagination['javascript']}
+jQuery(function() {
+    {$pagination['javascript']}
 EOF;
 if ($offset > 0) {
     $js .= <<< EOF
@@ -64,12 +64,12 @@ setpageicon($smarty, 'icon-file-text');
 $smarty->assign('INLINEJAVASCRIPT', $js);
 $smarty->assign('views', $views);
 $smarty->assign('institution', 'mahara');
+$smarty->assign('sitetemplate', View::SITE_TEMPLATE);
 $smarty->assign('querystring', get_querystring());
+$smarty->assign('pagination', $pagination['html']);
 $html = $smarty->fetch('view/indexresults.tpl');
 $smarty->assign('viewresults', $html);
-$smarty->assign('pagination', $pagination['html']);
 $smarty->assign('query', param_variable('query', null));
-
 $smarty->assign('searchform', $searchform);
 $smarty->assign('createviewform', $createviewform);
 $smarty->display('view/index.tpl');

htdocs/js/paginator.js

@@ -307,3 +307,24 @@ function PaginatorProxy() {
 
 // Create the paginator proxy
 var paginatorProxy = new PaginatorProxy();
+
+// 'Show more' pagination
+function pagination_showmore(btn) {
+    var params = {};
+    params.offset = parseInt(btn.data('offset'), 10);
+    params.orderby = btn.data('orderby');
+    if (btn.data('group').length) {
+        params.group = btn.data('group');
+    }
+    if (btn.data('institution').length) {
+        params.institution = btn.data('institution');
+    }
+    sendjsonrequest(config['wwwroot'] + btn.data('jsonscript'), params, 'POST', function(data) {
+        var btnid = btn.prop('id');
+        btn.parent().replaceWith(data.data.tablerows);
+        // we have a new 'showmore' button so wire it up
+        jQuery('#' + btnid).on('click', function() {
+            pagination_showmore(jQuery(this));
+        });
+    });
+}

htdocs/json/viewlist.php

@@ -16,7 +16,7 @@ require(dirname(dirname(__FILE__)) . '/init.php');
 require_once(get_config('libroot') . 'view.php');
 
 $offset = param_integer('offset', 0);
-$limit = param_integer('limit', 0);
+$limit = param_integer('limit', 12);
 $setlimit = param_boolean('setlimit', false);
 $groupid = param_integer('group', null);
 $institution = param_alpha('institution', null);
@@ -53,16 +53,14 @@ if (!empty($groupid)) {
             }
         }
 
-       $pagination = build_pagination(array(
-            'url' => get_config('wwwroot') . 'view/groupviews.php?group=' . $group->id,
+       $pagination = build_showmore_pagination(array(
             'count' => $data->count,
             'limit' => $limit,
             'offset' => $offset,
-            'setlimit' => $setlimit,
-            'datatable' => 'myviews',
+            'orderby' => $orderby,
+            'group' => $groupid,
+            'databutton' => 'showmorebtn',
             'jsonscript' => 'json/viewlist.php',
-            'jumplinks' => 6,
-            'numbersincludeprevnext' => 2,
         ));
     }
     else {
@@ -73,7 +71,7 @@ if (!empty($groupid)) {
 else if (!empty($institution)) {
     if ($institution == 'mahara') {
         define('ADMIN', 1);
-        $templateviews = View::get_template_views();
+        $templateviews = View::get_site_template_views();
         list($searchform, $data, $pagination) = View::views_by_owner(null, 'mahara');
         if ($data->data && $offset == '0') {
             $data->data = array_merge($templateviews, $data->data);
@@ -90,6 +88,8 @@ else {
 
 $smarty = smarty_core();
 $smarty->assign('views', $data->data);
+$smarty->assign('sitetemplate', View::SITE_TEMPLATE);
+$smarty->assign('pagination', $pagination['html']);
 if ($groupid && !$can_edit) {
     $html = $smarty->fetch('view/indexgroupresults.tpl');
     $smarty->assign('viewresults', $html);
@@ -105,7 +105,6 @@ json_reply(false, array(
     'message' => null,
     'data' => array(
         'tablerows' => $html,
-        'pagination' => $pagination['html'],
         'pagination_js' => $pagination['javascript'],
         'count' => $data->count,
         'results' => $data->count . ' ' . ($data->count == 1 ? get_string('result') : get_string('results')),

htdocs/lang/en.utf8/collection.php

@@ -69,6 +69,7 @@ $string['editviewaccess'] = 'Edit page access';
 $string['editaccess'] = 'Edit collection access';
 $string['emptycollectionnoeditaccess'] = 'You cannot edit access to empty collections. Add some pages first.';
 $string['emptycollection'] = 'Empty collection';
+$string['manage'] = 'Manage';
 $string['manageviews'] = 'Manage pages';
 $string['manageviewsspecific'] = 'Manage pages in "%s"';
 $string['name'] = 'Collection name';
@@ -88,6 +89,10 @@ $string['smartevidence'] = 'SmartEvidence';
 $string['update'] = 'Update';
 $string['usecollectionname'] = 'Use collection name?';
 $string['usecollectionnamedesc'] = 'If you wish to use the collection name instead of the block title, leave this checked.';
+$string['numviewsincollection'] = array(
+    '%s page in collection',
+    '%s pages in collection',
+);
 $string['viewsaddedtocollection1'] = array(
     '%s page added to collection.',
     '%s pages added to collection.',

htdocs/lang/en.utf8/group.php

@@ -151,6 +151,7 @@ $string['nmembers'] = array(
 $string['memberrequests'] = 'Membership requests';
 $string['declinerequest'] = 'Decline request';
 $string['submittedviews'] = 'Submitted pages';
+$string['submitted'] = 'Submitted';
 $string['releaseview'] = 'Release page';
 $string['releasecollection'] = 'Release collection';
 $string['invite'] = 'Invite';

htdocs/lang/en.utf8/mahara.php

@@ -129,6 +129,7 @@ $string['firstpage'] = 'First page';
 $string['last']      = 'Last';
 $string['lastpage']  = 'Last page';
 $string['maxitemsperpage1']  = 'Results per page:';
+$string['showmore'] = 'Show more';
 
 $string['accept'] = 'Accept';
 $string['memberofinstitutions'] = 'Member of %s';
@@ -766,6 +767,7 @@ $string['filter'] = 'Filter';
 $string['expand'] = 'Expand';
 $string['collapse'] = 'Collapse';
 $string['more...'] = 'More...';
+$string['moreoptionsfor'] = 'More options for "%s"';
 $string['details'] = 'details';
 $string['nohelpfound'] = 'There was no help found for this item.';
 $string['nohelpfoundpage'] = 'There was no help found for this page.';

htdocs/lang/en.utf8/view.php

@@ -19,6 +19,11 @@ $string['editcontentandlayout']   = 'Edit content and layout';
 $string['editlayout']             = 'Edit layout';
 $string['editaccess']             = 'Edit access';
 $string['editaccessfor']          = 'Edit access (ID %s)';
+$string['manageaccess']           = 'Manage access';
+$string['manageaccessfor']        = 'Manage access for "%s"';
+$string['managekeys']             = 'Manage secret URLs';
+$string['managekeysfor']          = 'Manage secret URLs for "%s"';
+$string['accessrulesfor']         = 'Access rules for "%s"';
 $string['next']                   = 'Next';
 $string['back']                   = 'Back';
 $string['title']                  = 'Page title';
@@ -71,6 +76,7 @@ $string['accessbetweendates3'] = 'Nobody can see this page before %s or after %s
 $string['artefactsinthisview'] = 'Artefacts in this page';
 $string['whocanseethisview'] = 'Who can see this page';
 $string['view'] = 'page';
+$string['panelmenu'] = 'Menu';
 $string['vieworcollection'] = 'page or collection';
 $string['views'] = 'pages';
 $string['viewsandcollections'] = 'pages and collections';

htdocs/lib/web.php

@@ -4227,6 +4227,56 @@ function build_pagination($params) {
 
 }
 
+/**
+ * Builds 'Show more' pagination for HTML display.
+ *
+ * This pagination is for adding a 'Show more' button when more results exist
+ * rather than 'paging' the results so the page only loads certain amount
+ * at a time but the user can see all loaded results in one view.
+ *
+ * This function takes one array that contains the options to configure the
+ * pagination.
+ * Required include:
+ * - jsonscript: Relative path to json script to return subsequent results
+ * - count: The total number of results to paginate for
+ * - limit: How many to show per fetch from db
+ * - offset: At which result to begin fetch for results
+ * - orderby: What order the results will be returned in
+ * - databutton: The ID of the 'Show more' button
+ *
+ * Optional include:
+ * - group: Group id the pagination is for
+ * - institution: Institution name the pagination is for
+ */
+function build_showmore_pagination($params) {
+    // Bail if the required attributes are not present
+    $required = array('jsonscript', 'count', 'limit', 'offset', 'orderby', 'databutton');
+    foreach ($required as $option) {
+        if (!isset($params[$option])) {
+            throw new ParameterException('You must supply option "' . $option . '" to build_pagination');
+        }
+    }
+    $output = $js = '';
+    if ((int) $params['count'] > ((int) $params['offset'] + (int) $params['limit'])) {
+        // Need to add 'showmore' button
+        $output  = '<div class="showmore">' . "\n";
+        $output .= '    <div id="' . $params['databutton'] . '" class="btn btn-default"';
+        $output .= ' data-orderby="' . $params['orderby'] . '"';
+        $output .= ' data-offset="' . ((int) $params['offset'] + (int) $params['limit']) . '"';
+        $output .= ' data-group="' . (isset($params['group']) ? $params['group'] : '') . '"';
+        $output .= ' data-jsonscript="' . $params['jsonscript'] . '"';
+        $output .= ' data-institution="' . (isset($params['institution']) ? $params['institution'] : '') . '">';
+        $output .= get_string('showmore', 'mahara') . '</div>' . "\n";
+        $output .= '</div>';
+
+        $js  = 'jQuery("#' . $params['databutton'] . '").on("click", function() {';
+        $js .= '    pagination_showmore(jQuery(this));';
+        $js .= '});' . "\n";
+    }
+
+    return array('html' => $output, 'javascript' => $js);
+}
+
 /**
  * Used by build_pagination to build individual links. Shouldn't be used
  * elsewhere.

htdocs/testing/frameworks/behat/classes/BehatGeneral.php

@@ -400,6 +400,92 @@ class BehatGeneral extends BehatBase {
         $elementnode->click();
     }
 
+    /**
+     * Click on the bottom right menu elipsis inside a list panel containing the specified text.
+     *
+     * @When /^I click on "(?P<row_text_string>(?:[^"]|\\")*)" panel menu$/
+     * @param string $rowtext The list/table row text
+     * @throws ElementNotFoundException
+     */
+    public function i_click_on_in_panel($rowtext) {
+
+        // The panel container.
+        $rowtextliteral = $this->escaper->escapeLiteral($rowtext);
+        $exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
+        $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
+            " and contains(normalize-space(.), " . $rowtextliteral . ")]";
+        $rownode = $this->find('xpath', $xpath, $exception);
+
+        // Click on the elipsis button for the panel
+        $jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.elipsis-right button')[0].click();";
+        $this->getSession()->executeScript($jscode);
+    }
+
+    /**
+     * Click on the bottom right collection menu inside a list panel containing the specified text.
+     *
+     * @When /^I click on "(?P<row_text_string>(?:[^"]|\\")*)" panel collection$/
+     * @param string $rowtext The list/table row text
+     * @throws ElementNotFoundException
+     */
+    public function i_click_on_in_panel_collection_box($rowtext) {
+
+        // The panel container.
+        $rowtextliteral = $this->escaper->escapeLiteral($rowtext);
+        $exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
+        $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
+            " and contains(normalize-space(.), " . $rowtextliteral . ")]";
+        $rownode = $this->find('xpath', $xpath, $exception);
+
+        // Click on the collection box for the panel
+        $jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.collnum')[0].click();";
+        $this->getSession()->executeScript($jscode);
+    }
+
+    /**
+     * Click on the link or button inside a panel menu containing the specified text.
+     *
+     * @When /^I click on "(?P<link_or_button>(?:[^"]|\\")*)" in "(?P<row_text_string>(?:[^"]|\\")*)" panel menu$/
+     * @param string $link_or_button we look for
+     * @param string $rowtext The panel menu text
+     * @throws ElementNotFoundException
+     */
+    public function i_click_on_in_panel_menu($link_or_button, $rowtext) {
+
+        // The panel container.
+        $rowtextliteral = $this->escaper->escapeLiteral($rowtext);
+        $exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
+        $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
+            " and contains(normalize-space(.), " . $rowtextliteral . ")]";
+        $rownode = $this->find('xpath', $xpath, $exception);
+
+        // Click on the elipsis button for the panel
+        $jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.elipsis-right a:contains(" . $this->escapeDoubleQuotes($link_or_button) . ")')[0].click();";
+        $this->getSession()->executeScript($jscode);
+    }
+
+    /**
+     * Click on the link or button inside a panel collection list containing the specified text.
+     *
+     * @When /^I click on "(?P<link_or_button>(?:[^"]|\\")*)" in "(?P<row_text_string>(?:[^"]|\\")*)" panel collection$/
+     * @param string $link_or_button we look for
+     * @param string $rowtext The panel menu text
+     * @throws ElementNotFoundException
+     */
+    public function i_click_on_in_panel_collection_menu($link_or_button, $rowtext) {
+
+        // The panel container.
+        $rowtextliteral = $this->escaper->escapeLiteral($rowtext);
+        $exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
+        $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
+            " and contains(normalize-space(.), " . $rowtextliteral . ")]";
+        $rownode = $this->find('xpath', $xpath, $exception);
+
+        // Click on the elipsis button for the panel
+        $jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find(\"a:contains(" . $this->escapeDoubleQuotes($link_or_button) . ")\")[0].click();";
+        $this->getSession()->executeScript($jscode);
+    }
+
     /**
      * Click a row containing the specified text.
      *
@@ -426,6 +512,27 @@ class BehatGeneral extends BehatBase {
         $this->getSession()->executeScript($jscode);
     }
 
+    /**
+     * Click a panel header containing the specified text.
+     *
+     * @When /^I click the panel "(?P<row_text_string>(?:[^"]|\\")*)"$/
+     * @param string $rowtext the panel heading text
+     * @throws ElementNotFoundException
+     */
+    public function i_click_panel($rowtext) {
+
+        // The panel container.
+        $rowtextliteral = $this->escaper->escapeLiteral($rowtext);
+        $exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
+        $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
+            " and contains(normalize-space(.), " . $rowtextliteral . ")]" .
+            "//a[contains(concat(' ', normalize-space(@class), ' '), ' title-link ')]";
+        $rownode = $this->find('xpath', $xpath, $exception);
+
+        $jscode = "jQuery(\"div.panel h3 a.title-link:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\")[0].click();";
+        $this->getSession()->executeScript($jscode);
+    }
+
     /**
      * Click a matrix point by being given a column,row pair
      * NOTE: column and row start from number '0' so the first cell in a table is (0,0)

htdocs/theme/raw/sass/components/_list-group.scss

@@ -320,3 +320,241 @@ h4.list-group-item-heading {
         }
     }
 }
+// Styles for the new page/collection layout
+.panel-quarter {
+    position: relative;
+    &.panel-view {
+        background-color: #ddd;
+        .panel-heading,
+        .panel-body,
+        .panel-footer,
+        button.dropdown-toggle {
+            background-color: transparent;
+        }
+        &.panel-warning {
+            background-color: $state-warning-bg;
+        }
+        .panel-footer {
+            border-bottom: 2px solid #999;
+        }
+        &.site-template {
+            background: repeating-linear-gradient(
+                -45deg,
+                #ddd,
+                #ddd 10px,
+                #ccc 10px,
+                #ccc 20px
+            ) !important;
+        }
+    }
+    &.panel-collection {
+        background-color: #fff;
+        .panel-heading,
+        .panel-body,
+        .panel-footer,
+        button.dropdown-toggle {
+            background-color: #fff;
+        }
+        &.panel-warning {
+            background-color: $state-warning-bg;
+            .panel-heading,
+            .panel-body,
+            .panel-footer,
+            button.dropdown-toggle {
+                background-color: $state-warning-bg;
+            }
+        }
+        .panel-footer {
+            border-bottom: 2px solid #ddd;
+        }
+    }
+
+    .panel-heading {
+        border-bottom: 1px solid transparent;
+
+        A {
+            padding: 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .panel-body {
+        padding: 5px;
+    }
+
+    .panel-footer {
+        border-top: 1px solid transparent;
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+
+        .dropdown-menu {
+            top: 100%;
+        }
+
+        .dropdown-toggle {
+            .collnum-arrow {
+                display: none;
+            }
+            .collnum {
+                display: block;
+            }
+
+            &.open {
+                .collnum-arrow {
+                    display: inline-block;
+                }
+                .collnum {
+                    display: none;
+                }
+            }
+        }
+    }
+    .access-list {
+        float: left;
+        .dropdown-menu {
+            width: 200%; /* to allow it to expand to almost 2 panel blocks wide */
+            max-height: 200px;
+            overflow: auto;
+            a {
+                white-space: normal;
+                background-color: $dropdown-bg;
+                padding: 5px;
+
+                &:hover {
+                    background-color: $dropdown-link-hover-bg;
+                }
+
+                span.icon {
+                    position: absolute;
+                    padding-top: 5px;
+                }
+                span.link-text {
+                    display: inline-block;
+                    padding-left: 20px;
+                    position: relative;
+                }
+                &.seperator {
+                    border-bottom: 1px solid #aaa;
+                }
+            }
+        }
+    }
+    &.lastquarter {
+        .access-list {
+            ul {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+    @media (max-width: $screen-sm-min) {
+        &.lasthalf {
+            .access-list {
+                ul {
+                    left: auto;
+                    right: 0;
+                }
+            }
+        }
+    }
+
+    .elipsis-right {
+        float: right;
+        .dropdown-menu {
+            .view-details {
+                font-size: 12px;
+                padding: 0 5px 0 5px;
+
+                A {
+                    display: inline !important;
+                    padding: 0 !important;
+                }
+            }
+        }
+    }
+
+    .collection-list {
+        text-align: center;
+        float: right;
+        width: 26px;
+        a {
+            display: block;
+        }
+        border-radius: 3px;
+
+        &.list-small {
+            border: 1px solid #800000;
+        }
+
+        &.list-medium {
+            border: 1px solid #008000;
+        }
+
+        &.list-large {
+            border: 1px solid #000080;
+
+        }
+        &.open {
+            border: 1px solid transparent;
+        }
+        .dropdown-menu {
+            width: 200%; /* to allow it to expand to almost 2 panel blocks wide */
+            max-height: 200px;
+            overflow: auto;
+            a {
+                white-space: normal;
+                background-color: $dropdown-bg;
+                padding: 5px;
+
+                &:hover {
+                    background-color: $dropdown-link-hover-bg;
+                }
+
+                span.icon {
+                    position: absolute;
+                    padding-top: 5px;
+                }
+                span.link-text {
+                    display: inline-block;
+                    padding-left: 20px;
+                    position: relative;
+                }
+            }
+        }
+    }
+    &.firstquarter {
+        .collection-list {
+            ul {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+    @media (max-width: $screen-sm-min) {
+        &.firsthalf {
+            .collection-list {
+                ul {
+                    left: 0;
+                    right: auto;
+                }
+            }
+        }
+    }
+    .btn-default {
+        border: 1px solid transparent;
+    }
+
+    .dropdown-menu {
+        padding: 0;
+        margin: 0;
+        min-width: auto;
+    }
+}
+
+.showmore {
+    text-align: center;
+    clear: both;
+}
\ No newline at end of file

htdocs/theme/raw/sass/layout/panel/_panel-half.scss

@@ -10,3 +10,20 @@
         margin-left:0;
     }
 }
+
+.panel-quarter {
+    width: 22%;
+    float: left;
+    margin-left: 4%;
+    height: 200px;
+    &.firstquarter {
+        margin-left:0;
+    }
+    @media (max-width: $screen-sm-min) {
+        width: 48%;
+        margin-left: 4%;
+        &.firsthalf {
+            margin-left:0;
+        }
+    }
+}

htdocs/theme/raw/templates/view/index.tpl

@@ -17,8 +17,7 @@