Implemented Sorting for Themes and Plugins views (fixes #583)

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v1.1.0-rc.5
+## XX/XX/2016
+
+1. [](#improved)
+    * It is now possible to sort the Plugins and Themes views by 'Name', 'Author', 'GravTeam', 'Release Date', 'Updates Available' and 'Testing' releases (if in Testing Channel), both Ascending and Descending. [#583](https://github.com/getgrav/grav-plugin-admin/issues/583)
+
 # v1.1.0-rc.4
 ## 06/21/2016
 

languages/en.yaml

@@ -575,4 +575,6 @@ PLUGIN_ADMIN:
   REDIS_PORT_HELP: "The Redis server port"
   ALL: "All"
   FROM: "from"
-  TO: "to"
+  TO: "to"
+  RELEASE_DATE: "Release Date"
+  SORT_BY: "Sort By"

themes/grav/app/plugins/index.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import packages from '../utils/packages';
+import camelCase from 'mout/string/camelCase';
 
 // Plugins sliders details
 $('.gpm-name, .gpm-actions').on('click', function(e) {
@@ -52,3 +53,21 @@ $(document).on('click', '[data-plugin-action="install-dependencies-and-package"]
 $(document).on('click', '[data-plugin-action="install-package"]', (event) => {
     packages.handleInstallingPackage('plugin', event);
 });
+
+// Sort plugins
+$(document).on('change', '.sort-actions select', (event) => {
+    let direction = $('.sort-actions .sort-icon .fa').hasClass('fa-sort-amount-desc') ? 'desc' : 'asc';
+    let sorting = $(event.currentTarget).val();
+
+    packages.Sort[camelCase(`by-${sorting}`)](direction);
+});
+
+// Sort plugins
+$(document).on('click', '.sort-icon', (event) => {
+    let icon = $(event.currentTarget).find('.fa');
+    let current = icon.hasClass('fa-sort-amount-asc') ? 'asc' : 'desc';
+    let opposite = current === 'asc' ? 'desc' : 'asc';
+
+    icon.removeClass(`fa-sort-amount-${current}`).addClass(`fa-sort-amount-${opposite}`);
+    $('.sort-actions select').trigger('change');
+});

themes/grav/app/utils/packages.js

@@ -3,10 +3,70 @@ import { config, translations } from 'grav-config';
 import request from '../utils/request';
 import { Instance as gpm } from '../utils/gpm';
 
+class Sorter {
+    getElements(elements, container) {
+        this.elements = elements || $('[data-gpm-plugin], [data-gpm-theme]');
+        this.container = container || $('.gpm-plugins > table > tbody, .gpm-themes > .themes.card-row');
+        return this.elements;
+    }
+
+    static sort(A, B, direction = 'asc') {
+        if (A > B) { return (direction === 'asc') ? 1 : -1; }
+        if (A < B) { return (direction === 'asc') ? -1 : 1; }
+
+        return 0;
+    }
+
+    byCommon(direction = 'asc', data = '') {
+        let elements = this.getElements().sort((a, b) => {
+            let A = $(a).data(data).toString().toLowerCase();
+            let B = $(b).data(data).toString().toLowerCase();
+
+            return Sorter.sort(A, B, direction);
+        });
+
+        return elements.appendTo(this.container);
+    }
+
+    byName(direction = 'asc', data = 'gpm-name') {
+        return this.byCommon(direction, data);
+    }
+
+    byAuthor(direction = 'asc', data = 'gpm-author') {
+        return this.byCommon(direction, data);
+    }
+
+    byOfficial(direction = 'asc', data = 'gpm-official') {
+        return this.byCommon(direction, data);
+    }
+
+    byReleaseDate(direction = 'asc', data = 'gpm-release-date') {
+        let elements = this.getElements().sort((a, b) => {
+            let A = new Date($(a).data(data)).getTime();
+            let B = new Date($(b).data(data)).getTime();
+
+            return Sorter.sort(A, B, direction === 'asc' ? 'desc' : 'asc');
+        });
+
+        elements.appendTo(this.container);
+    }
+
+    byUpdatable(direction = 'asc', data = 'gpm-updatable') {
+        return this.byCommon(direction, data);
+    }
+
+    byTesting(direction = 'asc', data = 'gpm-testing') {
+        return this.byCommon(direction, data);
+    }
+}
+
 class Packages {
+    constructor() {
+        this.Sort = new Sorter();
+    }
 
     static getBackToList(type) {
-        window.location.href = `${config.base_url_relative}/${type}s`;
+        global.location.href = `${config.base_url_relative}/${type}s`;
     }
 
     static addDependencyToList(type, dependency, slug = '') {
@@ -283,9 +343,9 @@ class Packages {
                 $('[data-packages-modal] .installation-complete').removeClass('hidden');
 
                 if (slugs.length === 1) {
-                    window.location.href = `${config.base_url_relative}/${type}s/${slugs[0]}`;
+                    global.location.href = `${config.base_url_relative}/${type}s/${slugs[0]}`;
                 } else {
-                    window.location.href = `${config.base_url_relative}/${type}s`;
+                    global.location.href = `${config.base_url_relative}/${type}s`;
                 }
 
             });
@@ -305,9 +365,9 @@ class Packages {
             $('[data-packages-modal] .installation-complete').removeClass('hidden');
 
             if (slugs.length === 1) {
-                window.location.href = `${config.base_url_relative}/${type}s/${slugs[0]}`;
+                global.location.href = `${config.base_url_relative}/${type}s/${slugs[0]}`;
             } else {
-                window.location.href = `${config.base_url_relative}/${type}s`;
+                global.location.href = `${config.base_url_relative}/${type}s`;
             }
         });
     }

themes/grav/scss/template/_gpm.scss

@@ -3,6 +3,22 @@
         border: 0;
     }
 
+    .sort-actions {
+        > * {
+            font-size: 1rem;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .sort-icon {
+            cursor: pointer;
+        }
+
+        select {
+            margin: 0;
+        }
+    }
+
     .gpm-name {
         white-space: nowrap;
 
@@ -133,5 +149,6 @@
     #gpm-release-toggle {
         float: right;
         margin-right: 1rem;
+        margin-top: 1rem;
     }
 }

themes/grav/templates/partials/plugins-list.html.twig

@@ -4,6 +4,18 @@
 {% endif %}
 <h1>
     {{ installing ? "PLUGIN_ADMIN.AVAILABLE_PLUGINS"|tu : "PLUGIN_ADMIN.INSTALLED_PLUGINS"|tu }}
+    <div class="sort-actions">
+        <span>{{ "PLUGIN_ADMIN.SORT_BY"|tu }}</span>
+        <select>
+            <option value="name" selected>{{ "PLUGIN_ADMIN.NAME"|tu }}</option>
+            <option value="author">{{ "PLUGIN_ADMIN.AUTHOR"|tu }}</option>
+            <option value="official">GravTeam</option>
+            <option value="release-date">{{ "PLUGIN_ADMIN.RELEASE_DATE"|tu }}</option>
+            {% if not installing %}<option value="updatable">{{ "PLUGIN_ADMIN.UPDATES_AVAILABLE"|tu }}</option>{% endif %}
+            {% if config.system.gpm.releases == 'testing' %}<option value="testing">{{ "PLUGIN_ADMIN.TESTING"|tu }}</option>{% endif %}
+        </select>
+        <div class="sort-icon"><i class="fa fa-fw fa-sort-amount-asc"></i></div>
+    </div>
 </h1>
 
 <table>
@@ -11,7 +23,7 @@
         {% set data = admin.data('plugins/' ~ slug) %}
         {% set isTestingRelease = admin.gpm.isTestingRelease(slug) %}
 
-        <tr data-gpm-plugin="{{ slug|url_encode }}">
+        <tr data-gpm-plugin="{{ slug|url_encode }}" data-gpm-name="{{ plugin.name }}" data-gpm-release-date="{{ plugin.date }}" data-gpm-author="{{ plugin.author.name }}" data-gpm-official="{{ admin.isTeamGrav(plugin) ? '1' : '2' }}" data-gpm-updatable="{{ admin.gpm.isUpdatable(slug) ? '1' : '2' }}" data-gpm-testing="{{ isTestingRelease ? '1' : '2' }}">
             <td class="gpm-name quadruple">
                 <i class="fa fa-fw fa-{{ plugin.icon }}"></i>
                 <a href="{{ base_url_relative }}/plugins/{{ slug|url_encode }}">{{ plugin.name }}</a>

themes/grav/templates/partials/themes-list.html.twig

@@ -4,6 +4,18 @@
 {% endif %}
 <h1>
     {{ installing ? "PLUGIN_ADMIN.AVAILABLE_THEMES"|tu : "PLUGIN_ADMIN.INSTALLED_THEMES"|tu }}
+    <div class="sort-actions">
+        <span>{{ "PLUGIN_ADMIN.SORT_BY"|tu }}</span>
+        <select>
+            <option value="name" selected>{{ "PLUGIN_ADMIN.NAME"|tu }}</option>
+            <option value="author">{{ "PLUGIN_ADMIN.AUTHOR"|tu }}</option>
+            <option value="official">GravTeam</option>
+            <option value="release-date">{{ "PLUGIN_ADMIN.RELEASE_DATE"|tu }}</option>
+            {% if not installing %}<option value="updatable">{{ "PLUGIN_ADMIN.UPDATES_AVAILABLE"|tu }}</option>{% endif %}
+            {% if config.system.gpm.releases == 'testing' %}<option value="testing">{{ "PLUGIN_ADMIN.TESTING"|tu }}</option>{% endif %}
+        </select>
+        <div class="sort-icon"><i class="fa fa-fw fa-sort-amount-asc"></i></div>
+    </div>
 </h1>
 
 <div class="themes card-row grid fixed-blocks pure-g">
@@ -13,7 +25,7 @@
         {% if (config.get('system.pages.theme') == slug) %}{% set state = 'active' %}{% endif %}
         {% set isTestingRelease = admin.gpm.isTestingRelease(slug) %}
 
-        <div class="theme card-item pure-u-1-3 {{ state }}-theme" data-gpm-theme="{{ slug|url_encode }}">
+        <div class="theme card-item pure-u-1-3 {{ state }}-theme" data-gpm-theme="{{ slug|url_encode }}" data-gpm-name="{{ theme.name }}" data-gpm-release-date="{{ theme.date }}" data-gpm-author="{{ theme.author.name }}" data-gpm-official="{{ admin.isTeamGrav(theme) ? '1' : '2' }}" data-gpm-updatable="{{ admin.gpm.isUpdatable(slug) ? '1' : '2' }}" data-gpm-testing="{{ isTestingRelease ? '1' : '2' }}">
             <div class="gpm-name">
                 <i class="fa fa-fw fa-{{ theme.icon }}"></i>
                 <a href="{{ base_url_relative }}/themes/{{ slug|url_encode }}">{{ theme.name }}</a>