[UI] Sortable Tables Header By Click (#7980)

* [UI] Sortable Tables Header By Click

* get rid of padding above header

* restart CI

* fix lint

* convert getArrow JS to SortArrow go func

* addopt SortArrow funct

* suggestions from @silverwind - tablesort.js

Co-authored-by: silverwind <me@silverwind.io>

* Update web_src/js/features/tablesort.js

Co-authored-by: silverwind <me@silverwind.io>

* Update web_src/js/features/tablesort.js

Co-authored-by: silverwind <me@silverwind.io>

Co-authored-by: silverwind <me@silverwind.io>

modules/templates/helper.go

@@ -298,8 +298,30 @@ func NewFuncMap() []template.FuncMap {
 			}
 			return false
 		},
-		"svg": func(icon string, size int) template.HTML {
+		"svg": SVG,
-			return template.HTML(fmt.Sprintf(`<svg class="svg %s" width="%d" height="%d" aria-hidden="true"><use xlink:href="#%s" /></svg>`, icon, size, size, icon))
+		"SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML {
+			// if needed
+			if len(normSort) == 0 || len(urlSort) == 0 {
+				return ""
+			}
+
+			if len(urlSort) == 0 && isDefault {
+				// if sort is sorted as default add arrow tho this table header
+				if isDefault {
+					return SVG("octicon-triangle-down", 16)
+				}
+			} else {
+				// if sort arg is in url test if it correlates with column header sort arguments
+				if urlSort == normSort {
+					// the table is sorted with this header normal
+					return SVG("octicon-triangle-down", 16)
+				} else if urlSort == revSort {
+					// the table is sorted with this header reverse
+					return SVG("octicon-triangle-up", 16)
+				}
+			}
+			// the table is NOT sorted with this header
+			return ""
 		},
 	}}
 }
@@ -410,6 +432,11 @@ func NewTextFuncMap() []texttmpl.FuncMap {
 	}}
 }
 
+// SVG render icons
+func SVG(icon string, size int) template.HTML {
+	return template.HTML(fmt.Sprintf(`<svg class="svg %s" width="%d" height="%d" aria-hidden="true"><use xlink:href="#%s" /></svg>`, icon, size, size, icon))
+}
+
 // Safe render raw as HTML
 func Safe(raw string) template.HTML {
 	return template.HTML(raw)

templates/admin/emails/list.tmpl

@@ -33,9 +33,15 @@
 			<table class="ui very basic striped table">
 				<thead>
 					<tr>
-						<th>{{.i18n.Tr "admin.users.name"}}</th>
+						<th data-sortt-asc="username" data-sortt-desc="reverseusername">
+							{{.i18n.Tr "admin.users.name"}}
+							{{SortArrow "username" "reverseusername" $.SortType false}}
+						</th>
 						<th>{{.i18n.Tr "admin.users.full_name"}}</th>
-						<th>{{.i18n.Tr "email"}}</th>
+						<th data-sortt-asc="email" data-sortt-desc="reverseemail" data-sortt-default="true">
+							{{.i18n.Tr "email"}}
+							{{SortArrow "email" "reverseemail" $.SortType true}}
+						</th>
 						<th>{{.i18n.Tr "admin.emails.primary"}}</th>
 						<th>{{.i18n.Tr "admin.emails.activated"}}</th>
 					</tr>

templates/admin/org/list.tmpl

@@ -16,12 +16,18 @@
 			<table class="ui very basic striped table">
 				<thead>
 					<tr>
-						<th>ID</th>
+						<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
-						<th>{{.i18n.Tr "admin.orgs.name"}}</th>
+						<th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically" data-sortt-default="true">
+							{{.i18n.Tr "admin.orgs.name"}}
+							{{SortArrow "alphabetically" "reversealphabetically" $.SortType true}}
+						</th>
 						<th>{{.i18n.Tr "admin.orgs.teams"}}</th>
 						<th>{{.i18n.Tr "admin.orgs.members"}}</th>
 						<th>{{.i18n.Tr "admin.users.repos"}}</th>
-						<th>{{.i18n.Tr "admin.users.created"}}</th>
+						<th data-sortt-asc="recentupdate" data-sortt-desc="leastupdate">
+							{{.i18n.Tr "admin.users.created"}}
+							{{SortArrow "recentupdate" "leastupdate" $.SortType false}}
+						</th>
 						<th>{{.i18n.Tr "admin.users.edit"}}</th>
 					</tr>
 				</thead>

templates/admin/repo/list.tmpl

@@ -13,15 +13,27 @@
 			<table class="ui very basic striped table">
 				<thead>
 					<tr>
-						<th>ID</th>
+						<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
 						<th>{{.i18n.Tr "admin.repos.owner"}}</th>
-						<th>{{.i18n.Tr "admin.repos.name"}}</th>
+						<th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically">
+							{{.i18n.Tr "admin.repos.name"}}
+							{{SortArrow "alphabetically" "reversealphabetically" $.SortType false}}
+						</th>
 						<th>{{.i18n.Tr "admin.repos.private"}}</th>
 						<th>{{.i18n.Tr "admin.repos.watches"}}</th>
-						<th>{{.i18n.Tr "admin.repos.stars"}}</th>
+						<th  data-sortt-asc="moststars" data-sortt-desc="feweststars">
-						<th>{{.i18n.Tr "admin.repos.forks"}}</th>
+							{{.i18n.Tr "admin.repos.stars"}}
+							{{SortArrow "moststars" "feweststars" $.SortType false}}
+						</th>
+						<th  data-sortt-asc="mostforks" data-sortt-desc="fewestforks">
+							{{.i18n.Tr "admin.repos.forks"}}
+							{{SortArrow "mostforks" "fewestforks" $.SortType false}}
+						</th>
 						<th>{{.i18n.Tr "admin.repos.issues"}}</th>
-						<th>{{.i18n.Tr "admin.repos.size"}}</th>
+						<th  data-sortt-asc="size" data-sortt-desc="reversesize">
+							{{.i18n.Tr "admin.repos.size"}}
+							{{SortArrow "size" "reversesize" $.SortType false}}
+						</th>
 						<th>{{.i18n.Tr "admin.users.created"}}</th>
 						<th>{{.i18n.Tr "admin.notices.op"}}</th>
 					</tr>

templates/admin/user/list.tmpl

@@ -16,15 +16,21 @@
 			<table class="ui very basic striped table">
 				<thead>
 					<tr>
-						<th>ID</th>
+						<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" .SortType false}}</th>
-						<th>{{.i18n.Tr "admin.users.name"}}</th>
+						<th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically" data-sortt-default="true">
+							{{.i18n.Tr "admin.users.name"}}
+							{{SortArrow "alphabetically" "reversealphabetically" $.SortType true}}
+						</th>
 						<th>{{.i18n.Tr "email"}}</th>
 						<th>{{.i18n.Tr "admin.users.activated"}}</th>
 						<th>{{.i18n.Tr "admin.users.admin"}}</th>
 						<th>{{.i18n.Tr "admin.users.restricted"}}</th>
 						<th>{{.i18n.Tr "admin.users.repos"}}</th>
 						<th>{{.i18n.Tr "admin.users.created"}}</th>
-						<th>{{.i18n.Tr "admin.users.last_login"}}</th>
+						<th data-sortt-asc="recentupdate" data-sortt-desc="leastupdate">
+							{{.i18n.Tr "admin.users.last_login"}}
+							{{SortArrow "recentupdate" "leastupdate" $.SortType false}}
+						</th>
 						<th>{{.i18n.Tr "admin.users.edit"}}</th>
 					</tr>
 				</thead>

web_src/js/features/tablesort.js

@@ -0,0 +1,20 @@
+export default function initTableSort() {
+  for (const header of document.querySelectorAll('th[data-sortt-asc]') || []) {
+    const {sorttAsc, sorttDesc, sorttDefault} = header.dataset;
+    header.addEventListener('click', () => {
+      tableSort(sorttAsc, sorttDesc, sorttDefault);
+    });
+  }
+}
+
+function tableSort(normSort, revSort, isDefault) {
+  if (!normSort) return false;
+  if (!revSort) revSort = '';
+
+  const url = new URL(window.location);
+  let urlSort = url.searchParams.get('sort');
+  if (!urlSort && isDefault) urlSort = normSort;
+
+  url.searchParams.set('sort', urlSort !== normSort ? normSort : revSort);
+  window.location.replace(url.href);
+}

web_src/js/index.js

@@ -15,6 +15,7 @@ import initUserHeatmap from './features/userheatmap.js';
 import initServiceWorker from './features/serviceworker.js';
 import attachTribute from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
+import initTableSort from './features/tablesort.js';
 import highlight from './features/highlight.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
@@ -2450,6 +2451,7 @@ $(document).ready(async () => {
   initRepoStatusChecker();
   initTemplateSearch();
   initContextPopups();
+  initTableSort();
   initNotificationsTable();
   initNotificationCount();
 

web_src/less/_admin.less

@@ -6,8 +6,6 @@
         font-size: 13px;
 
         &:not(.striped) {
-            padding-top: 5px;
-
             thead {
                 th:last-child {
                     padding-right: 5px !important;

web_src/less/_base.less

@@ -1223,6 +1223,17 @@ i.icon.centerlock {
     margin-top: 1rem;
 }
 
+table th[data-sortt-asc],
+table th[data-sortt-desc] {
+    &:hover {
+        background: rgba(0, 0, 0, .1) !important;
+        cursor: pointer !important;
+    }
+    .svg {
+        margin-left: .25rem;
+    }
+}
+
 /* limit width of all direct dropdown menu children */
 /* https://github.com/go-gitea/gitea/pull/10835 */
 .dropdown:not(.selection) > .menu:not(.review-box) > *:not(.header) {

web_src/less/themes/theme-arc-green.less

@@ -479,7 +479,7 @@ a.ui.basic.green.label:hover {
 
 .ui.table thead th,
 .ui.table > thead > tr > th {
-    background: #404552 !important;
+    background: #404552;
     color: #dbdbdb !important;
 }