aboutsummaryrefslogtreecommitdiffstats
path: root/web_src
diff options
context:
space:
mode:
authorGusted <williamzijl7@hotmail.com>2022-06-12 14:08:23 +0200
committerGitHub <noreply@github.com>2022-06-12 20:08:23 +0800
commit796c4eca0bacf67c186768de66fcfee21867045f (patch)
tree3fc7947372c955953c0c6d443b05d3585a6ce300 /web_src
parent0097fbc2ac153a686b68af43e791704e9b5cf74b (diff)
downloadgitea-796c4eca0bacf67c186768de66fcfee21867045f.tar.gz
gitea-796c4eca0bacf67c186768de66fcfee21867045f.zip
Prettify number of issues (#17760)
* Prettify number of issues - Use the PrettyNumber function to add commas in large amount of issues. * Use client-side formatting * prettify on both server and client * remove unused i18n entries * handle more cases, support other int types in PrettyNumber * specify locale to avoid issues with node default locale * remove superfluos argument * introduce template helper, octicon tweaks, js refactor * Update modules/templates/helper.go * Apply some suggestions. * Add comment * Update templates/user/dashboard/issues.tmpl Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Diffstat (limited to 'web_src')
-rw-r--r--web_src/js/features/formatting.js14
-rw-r--r--web_src/js/index.js5
-rw-r--r--web_src/js/utils.js7
-rw-r--r--web_src/js/utils.test.js14
4 files changed, 38 insertions, 2 deletions
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js
new file mode 100644
index 0000000000..a7ee7ec3cf
--- /dev/null
+++ b/web_src/js/features/formatting.js
@@ -0,0 +1,14 @@
+import {prettyNumber} from '../utils.js';
+
+const {lang} = document.documentElement;
+
+export function initFormattingReplacements() {
+ // replace english formatted numbers with locale-specific separators
+ for (const el of document.getElementsByClassName('js-pretty-number')) {
+ const num = Number(el.getAttribute('data-value'));
+ const formatted = prettyNumber(num, lang);
+ if (formatted && formatted !== el.textContent) {
+ el.textContent = formatted;
+ }
+ }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index b6a1aee779..0568da64ae 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -84,6 +84,11 @@ import {initRepoBranchButton} from './features/repo-branch.js';
import {initCommonOrganization} from './features/common-organization.js';
import {initRepoWikiForm} from './features/repo-wiki.js';
import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
+import {initFormattingReplacements} from './features/formatting.js';
+
+// Run time-critical code as soon as possible. This is safe to do because this
+// script appears at the end of <body> and rendered HTML is accessible at that point.
+initFormattingReplacements();
// Silence fomantic's error logging when tabs are used without a target content element
$.fn.tab.settings.silent = true;
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 67f8f1cc98..f01f2d3b22 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -90,3 +90,10 @@ export function strSubMatch(full, sub) {
}
return res;
}
+
+// pretty-print a number using locale-specific separators, e.g. 1200 -> 1,200
+export function prettyNumber(num, locale = 'en-US') {
+ if (typeof num !== 'number') return '';
+ const {format} = new Intl.NumberFormat(locale);
+ return format(num);
+}
diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js
index acf3f1ece3..ba5335e3e4 100644
--- a/web_src/js/utils.test.js
+++ b/web_src/js/utils.test.js
@@ -1,5 +1,5 @@
import {
- basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch,
+ basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, prettyNumber,
} from './utils.js';
test('basename', () => {
@@ -85,7 +85,6 @@ test('parseIssueHref', () => {
expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
});
-
test('strSubMatch', () => {
expect(strSubMatch('abc', '')).toEqual(['abc']);
expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']);
@@ -98,3 +97,14 @@ test('strSubMatch', () => {
expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']);
expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']);
});
+
+test('prettyNumber', () => {
+ expect(prettyNumber()).toEqual('');
+ expect(prettyNumber(null)).toEqual('');
+ expect(prettyNumber(undefined)).toEqual('');
+ expect(prettyNumber('1200')).toEqual('');
+ expect(prettyNumber(12345678, 'en-US')).toEqual('12,345,678');
+ expect(prettyNumber(12345678, 'de-DE')).toEqual('12.345.678');
+ expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678');
+ expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,678');
+});