@reldens/cms 0.55.0 → 0.56.0

package/admin/reldens-admin-client.css

@@ -134,6 +134,11 @@
         &:hover {
             background-color: var(--red);
         }
+
+        svg, path {
+            width: 22px;
+            fill: var(--white);
+        }
     }
 
     .icon {
@@ -267,8 +272,6 @@
     }
 
     .entity-list {
-        overflow: auto;
-
         .actions {
             display: flex;
             justify-content: end;
@@ -280,6 +283,10 @@
         }
     }
 
+    .table-wrapper {
+        overflow-x: auto;
+    }
+
     .forms-container {
         width: 96%;
         max-width: 400px;
@@ -360,7 +367,7 @@
         }
 
         & th.field {
-            padding: 1.5rem 0;
+            padding: 1rem 0;
 
             & span {
                 color: var(--white);
@@ -383,18 +390,23 @@
 
             .field-actions-container {
                 display: flex;
-                flex-direction: column;
-                justify-content: center;
+                flex-direction: row;
+                justify-content: space-around;
                 align-items: center;
                 margin: 0 1rem;
 
                 .button {
-                    margin-bottom: 1rem;
+                    border: 1px solid var(--white);
 
                     &.list-select {
                         margin-bottom: 0;
                     }
                 }
+
+                .list-delete-selection {
+                    padding: 0.34rem 1rem;
+                    margin: 0 0.2rem;
+                }
             }
 
             & a, a:visited {
@@ -422,7 +434,7 @@
 
         .field-edit {
             & span {
-                & svg, path {
+                & svg, & path {
                     width: 24px;
                     color: var(--lightBlue);
                 }
@@ -431,14 +443,58 @@
 
         .field-delete {
             & span {
-                & svg, path {
+                & svg, & path {
                     width: 24px;
-                    fill: var(--lightBlue);
+                    fill: var(--red);
                 }
             }
         }
     }
 
+    .sortable {
+        cursor: pointer;
+        user-select: none;
+        transition: background-color 0.2s;
+
+        &:hover {
+            background-color: var(--lightBlue);
+
+            .sort-icon {
+                opacity: 0.7;
+            }
+        }
+
+        .header-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+
+    .sort-indicators {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.5rem;
+        gap: 2px;
+    }
+
+    .sort-icon {
+        width: 12px;
+        height: 12px;
+        fill: var(--grey);
+        opacity: 0.4;
+        transition: opacity 0.2s;
+
+        &.active {
+            fill: var(--white);
+            opacity: 1;
+        }
+    }
+
+    .sorted {
+        background-color: var(--darkBlue);
+    }
+
     .filters-toggle {
         cursor: pointer;
     }
@@ -595,7 +651,6 @@
         justify-content: space-between;
         align-items: center;
         width: 100%;
-        margin-bottom: 1rem;
         flex-wrap: wrap;
         gap: 1rem;
     }

package/admin/reldens-admin-client.js

@@ -4,12 +4,14 @@
  *
  */
 
-if(window.trustedTypes?.createPolicy){
-    trustedTypes.createPolicy('default', {
-        createHTML: s => s,
-        createScriptURL: s => s
+let trustedTypesPolicy = null;
+if(window.trustedTypes && window.trustedTypes.createPolicy){
+    trustedTypesPolicy = window.trustedTypes.createPolicy('default', {
+        createHTML: (s) => s,
+        createScriptURL: (s) => s
     });
 }
+window.trustedTypesPolicy = trustedTypesPolicy;
 
 window.addEventListener('DOMContentLoaded', () => {
 
@@ -168,7 +170,14 @@ window.addEventListener('DOMContentLoaded', () => {
                             params.set(filterName, filterInput.value);
                         }
                     }
-                    let newUrl = url.pathname + '?' + params;
+                    let sortedHeader = document.querySelector('th.sorted');
+                    if(sortedHeader){
+                        let columnName = sortedHeader.getAttribute('data-column');
+                        let sortDirection = sortedHeader.classList.contains('sorted-asc') ? 'asc' : 'desc';
+                        params.set('sortBy', columnName);
+                        params.set('sortDirection', sortDirection);
+                    }
+                    let newUrl = url.pathname+'?'+params;
                     window.location.href = newUrl;
                     return false;
                 });
@@ -176,6 +185,54 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    // column sorting functionality:
+    let sortableHeaders = document.querySelectorAll('th.sortable');
+    if(sortableHeaders){
+        for(let header of sortableHeaders){
+            header.addEventListener('click', () => {
+                let columnName = header.getAttribute('data-column');
+                let currentSortDirection = header.classList.contains('sorted-asc') ? 'asc' : header.classList.contains('sorted-desc') ? 'desc' : '';
+                let newSortDirection = 'asc';
+                if('asc' === currentSortDirection){
+                    newSortDirection = 'desc';
+                }
+                let sortForm = document.createElement('form');
+                sortForm.method = 'POST';
+                sortForm.action = window.location.pathname;
+                let sortByInput = document.createElement('input');
+                sortByInput.type = 'hidden';
+                sortByInput.name = 'sortBy';
+                sortByInput.value = columnName;
+                sortForm.appendChild(sortByInput);
+                let sortDirectionInput = document.createElement('input');
+                sortDirectionInput.type = 'hidden';
+                sortDirectionInput.name = 'sortDirection';
+                sortDirectionInput.value = newSortDirection;
+                sortForm.appendChild(sortDirectionInput);
+                let entitySearchInput = document.querySelector('#entityFilterTerm');
+                if(entitySearchInput && entitySearchInput.value){
+                    let filterTermInput = document.createElement('input');
+                    filterTermInput.type = 'hidden';
+                    filterTermInput.name = 'entityFilterTerm';
+                    filterTermInput.value = entitySearchInput.value;
+                    sortForm.appendChild(filterTermInput);
+                }
+                let allFilters = document.querySelectorAll('.filters-toggle-content .filter input');
+                for(let filterInput of allFilters){
+                    if(filterInput.value){
+                        let filterFieldInput = document.createElement('input');
+                        filterFieldInput.type = 'hidden';
+                        filterFieldInput.name = filterInput.name;
+                        filterFieldInput.value = filterInput.value;
+                        sortForm.appendChild(filterFieldInput);
+                    }
+                }
+                document.body.appendChild(sortForm);
+                sortForm.submit();
+            });
+        }
+    }
+
     // list "select all" option:
     let listSelect = document.querySelector('.list-select');
     if(listSelect){

package/admin/templates/list-content.html

@@ -3,7 +3,11 @@
         <div class="field-actions-container">
             <form name="delete-selection-form" id="delete-selection-form" action="{{&deletePath}}" method="post">
                 <input type="hidden" name="ids" class="hidden-ids-input"/>
-                <button class="button button-danger list-delete-selection">Bulk Delete</button>
+                <button class="button button-danger list-delete-selection">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10,18a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,10,18ZM20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Zm-3-1a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,14,18Z" fill="#6563ff"/>
+                    </svg>
+                </button>
             </form>
             <button class="button button-primary list-select" data-checked="1">
                 <input type="checkbox" id="input-check-select-all"/>
@@ -11,16 +15,22 @@
         </div>
     </th>
     {{#fieldsHeaders}}
-    <th class="field field-{{&name}}">
-        <span>{{&value}}</span>
+    <th class="field field-{{&name}} sortable{{#isSorted}} sorted sorted-{{&sortDirection}}{{/isSorted}}" data-column="{{&name}}">
+        <div class="header-content">
+            <span class="header-label">{{&value}}</span>
+            <span class="sort-indicators">
+                <svg class="sort-icon sort-asc{{#isSortedAsc}} active{{/isSortedAsc}}" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 6L5 0L10 6Z"/>
+                </svg>
+                <svg class="sort-icon sort-desc{{#isSortedDesc}} active{{/isSortedDesc}}" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 0L5 6L10 0Z"/>
+                </svg>
+            </span>
+        </div>
     </th>
     {{/fieldsHeaders}}
-    <th class="field field-edit">
-        <span>Edit</span>
-    </th>
-    <th class="field field-delete">
-        <span>Delete</span>
-    </th>
+    <th class="field field-edit"></th>
+    <th class="field field-delete"></th>
 </tr>
 {{#rows}}
 <tr class="row">

package/admin/templates/list.html

@@ -32,9 +32,11 @@
             </div>
         </form>
     </div>
-    <table class="list">
-        {{&list}}
-    </table>
+    <div class="table-wrapper">
+        <table class="list">
+            {{&list}}
+        </table>
+    </div>
     <div class="pagination">
         {{&pagination}}
     </div>

package/lib/admin-manager/admin-filters-manager.js

@@ -45,6 +45,49 @@ class AdminFiltersManager
         return true;
     }
 
+    getSortingFromSession(req, entityPath)
+    {
+        if(!req?.session){
+            return {sortBy: '', sortDirection: ''};
+        }
+        let sessionKey = 'adminFilters_'+entityPath;
+        let sessionData = req.session[sessionKey];
+        if(!sessionData || 'object' !== typeof sessionData){
+            return {sortBy: '', sortDirection: ''};
+        }
+        return {
+            sortBy: sessionData.sortBy || '',
+            sortDirection: sessionData.sortDirection || ''
+        };
+    }
+
+    saveSortingToSession(req, entityPath, sortBy, sortDirection)
+    {
+        if(!req?.session){
+            return false;
+        }
+        let sessionKey = 'adminFilters_'+entityPath;
+        if(!req.session[sessionKey]){
+            req.session[sessionKey] = {regular: {}, entityFilterTerm: ''};
+        }
+        req.session[sessionKey].sortBy = sortBy || '';
+        req.session[sessionKey].sortDirection = sortDirection || '';
+        return true;
+    }
+
+    clearSortingFromSession(req, entityPath)
+    {
+        if(!req?.session){
+            return false;
+        }
+        let sessionKey = 'adminFilters_'+entityPath;
+        if(req.session[sessionKey]){
+            delete req.session[sessionKey].sortBy;
+            delete req.session[sessionKey].sortDirection;
+        }
+        return true;
+    }
+
     prepareTextFilters(entityFilterTerm, driverResource)
     {
         if(!entityFilterTerm || '' === entityFilterTerm.trim()){

package/lib/admin-manager/router-contents.js

@@ -42,10 +42,14 @@ class RouterContents
         let pageSize = Number(req?.query?.pageSize || 25);
         let shouldClearFilters = 'true' === req?.query?.clearFilters;
         let sessionFilters = this.filtersManager.getFiltersFromSession(req, entityPath);
+        let sessionSorting = this.filtersManager.getSortingFromSession(req, entityPath);
         let filtersFromParams = shouldClearFilters ? {} : req?.body?.filters || req?.query?.filters || {};
         let entityFilterTerm = shouldClearFilters ? '' : sc.get(req?.body, 'entityFilterTerm', '');
+        let sortByFromParams = shouldClearFilters ? '' : sc.get(req?.body, 'sortBy', sc.get(req?.query, 'sortBy', ''));
+        let sortDirectionFromParams = shouldClearFilters ? '' : sc.get(req?.body, 'sortDirection', sc.get(req?.query, 'sortDirection', ''));
         if(shouldClearFilters){
             this.filtersManager.clearFiltersFromSession(req, entityPath);
+            this.filtersManager.clearSortingFromSession(req, entityPath);
         }
         let hasNewEntityFilterTerm = entityFilterTerm && '' !== entityFilterTerm;
         let hasNewToggleFilters = Object.keys(filtersFromParams).length > 0;
@@ -61,8 +65,15 @@ class RouterContents
             this.filtersManager.saveFiltersToSession(req, entityPath, filtersToSave);
             sessionFilters = filtersToSave;
         }
+        if(sortByFromParams && sortDirectionFromParams){
+            this.filtersManager.saveSortingToSession(req, entityPath, sortByFromParams, sortDirectionFromParams);
+            sessionSorting = {sortBy: sortByFromParams, sortDirection: sortDirectionFromParams};
+        }
         let mergedFilters = shouldClearFilters ? {} : Object.assign({}, sessionFilters.regular || {});
         let finalEntityFilterTerm = shouldClearFilters ? '' : sessionFilters.entityFilterTerm || '';
+        let idProperty = this.fetchEntityIdPropertyKey(driverResource);
+        let finalSortBy = sessionSorting.sortBy || idProperty;
+        let finalSortDirection = sessionSorting.sortDirection || 'ASC';
         let filters = this.filtersManager.prepareFilters(mergedFilters, driverResource);
         let textFilters = this.filtersManager.prepareTextFilters(finalEntityFilterTerm, driverResource);
         let combinedFilters = this.filtersManager.combineFilters(filters, textFilters);
@@ -74,6 +85,12 @@ class RouterContents
             if(finalEntityFilterTerm){
                 paginationUrl += '&entityFilterTerm='+encodeURIComponent(finalEntityFilterTerm);
             }
+            if(finalSortBy){
+                paginationUrl += '&sortBy='+encodeURIComponent(finalSortBy);
+            }
+            if(finalSortDirection){
+                paginationUrl += '&sortDirection='+encodeURIComponent(finalSortDirection);
+            }
             for(let filterKey of Object.keys(mergedFilters)){
                 if(mergedFilters[filterKey]){
                     paginationUrl += '&filters['+filterKey+']='+encodeURIComponent(mergedFilters[filterKey]);
@@ -109,9 +126,15 @@ class RouterContents
                                 driverResource.options.properties[property]?.alias || '',
                                 driverResource.id()
                             );
+                            let isSorted = finalSortBy === property;
+                            let sortDirection = isSorted ? finalSortDirection.toLowerCase() : '';
                             return {
                                 name: property,
-                                value: '' !== alias ? alias + ' ('+propertyTitle+')' : propertyTitle
+                                value: '' !== alias ? alias + ' ('+propertyTitle+')' : propertyTitle,
+                                isSorted,
+                                sortDirection,
+                                isSortedAsc: isSorted && 'asc' === sortDirection,
+                                isSortedDesc: isSorted && 'desc' === sortDirection
                             };
                         }),
                         rows: await this.loadEntitiesForList(
@@ -119,7 +142,9 @@ class RouterContents
                             pageSize,
                             currentPage,
                             req,
-                            combinedFilters
+                            combinedFilters,
+                            finalSortBy,
+                            finalSortDirection
                         )
                     }),
                     pagination: renderedPagination,
@@ -369,15 +394,15 @@ class RouterContents
         return await entityRepository.count(filters);
     }
 
-    async loadEntitiesForList(driverResource, pageSize, currentPage, req, filters)
+    async loadEntitiesForList(driverResource, pageSize, currentPage, req, filters, sortBy, sortDirection)
     {
         let entityRepository = this.dataServer.getEntity(driverResource.entityKey);
         entityRepository.limit = pageSize;
         if(1 < currentPage){
             entityRepository.offset = (currentPage - 1) * pageSize;
         }
-        entityRepository.sortBy = req?.body?.sortBy || false;
-        entityRepository.sortDirection = req?.body?.sortDirection || false;
+        entityRepository.sortBy = sortBy || false;
+        entityRepository.sortDirection = sortDirection || false;
         let loadedEntities = await entityRepository.loadWithRelations(filters, []);
         entityRepository.limit = 0;
         entityRepository.offset = 0;

package/migrations/install.sql

@@ -50,6 +50,9 @@ CREATE TABLE IF NOT EXISTS `cms_pages` (
     `locale` VARCHAR(10) NULL DEFAULT NULL COLLATE 'utf8mb4_unicode_ci',
     `publish_date` TIMESTAMP NULL DEFAULT (NOW()),
     `expire_date` TIMESTAMP NULL DEFAULT NULL,
+    `author` VARCHAR(255) NULL DEFAULT NULL COLLATE 'utf8mb4_unicode_ci',
+    `meta_color_scheme` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8mb4_unicode_ci',
+    `meta_og_type` VARCHAR(50) NULL DEFAULT 'website' COLLATE 'utf8mb4_unicode_ci',
     `created_at` TIMESTAMP NOT NULL DEFAULT (NOW()),
     `updated_at` TIMESTAMP NOT NULL DEFAULT (NOW()) ON UPDATE CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`) USING BTREE,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@reldens/cms",
     "scope": "@reldens",
-    "version": "0.55.0",
+    "version": "0.56.0",
     "description": "Reldens - CMS",
     "author": "Damian A. Pastorini",
     "license": "MIT",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@reldens/server-utils": "^0.46.0",
-        "@reldens/storage": "^0.88.0",
+        "@reldens/storage": "^0.89.0",
         "@reldens/utils": "^0.54.0",
         "dotenv": "17.2.3",
         "mustache": "4.2.0"