[UI] Sortable Tables Header By Click #7980

6543 · 2019-08-26T01:31:18Z

Arrow Preview:

how it works ... some notes

if table head colum class has attribute sort="xy" -> colum header klickable
Klich at colum header for example <ID>
-> script check if url has already a sort= with <ID>
NO: if data-sortt indikates default set URLsort=
YES: set URLsort variable
-> script check if URLsort and sort attribute is same
YES: -> check if reverse attribute exist
YES: generate URL with reverse sort param and open
NO: generate URL with sort param and open

Roadmap:

Programm Script (https://gitea.com/6543/gitea_sortt)
Add Script to Gitea
add attribute for existing table sort functions to table headers
add arrow to selected colum

davydov-vyacheslav · 2019-08-26T11:06:34Z

am I correct that this library is for client-side sorting? If so, we may have issues with pagination as library know nothing about pagination, haven't we?

6543 · 2019-08-26T11:13:56Z

@davydov-vyacheslav

am I correct that this library is for client-side sorting? If so, we may have issues with pagination as library know nothing about pagination, haven't we?

it is client-side sorting. I just searchend how to add this feature without many dependencys and so on ...
ill test things with paginaton but havent woked with jet so I'll see.

6543 · 2019-08-26T11:21:17Z

am I correct that this library is for client-side sorting? If so, we may have issues with pagination as library know nothing about pagination, haven't we?

yes paginaton and this won't work ... I'll look at the sort function of http://localhost:3000/admin/orgs?sort=alphabetically ...

codecov-io · 2019-08-26T11:30:52Z

Codecov Report

Merging #7980 into master will decrease coverage by 0.07%.
The diff coverage is 40.99%.

@@            Coverage Diff             @@
##           master    #7980      +/-   ##
==========================================
- Coverage   43.43%   43.36%   -0.08%     
==========================================
  Files         593      594       +1     
  Lines       83286    83453     +167     
==========================================
+ Hits        36178    36186       +8     
- Misses      42620    42781     +161     
+ Partials     4488     4486       -2

Impacted Files	Coverage Δ
models/error.go	`30.50% <0.00%> (ø)`
models/issue.go	`51.17% <0.00%> (-0.25%)`	⬇️
models/issue_label.go	`61.60% <0.00%> (-1.45%)`	⬇️
models/migrations/migrations.go	`4.16% <ø> (ø)`
models/migrations/v128.go	`0.00% <0.00%> (ø)`
models/migrations/v134.go	`0.00% <0.00%> (ø)`
modules/private/manager.go	`0.00% <0.00%> (ø)`
routers/repo/compare.go	`40.80% <ø> (-0.14%)`	⬇️
routers/repo/pull.go	`28.21% <0.00%> (-0.83%)`	⬇️
routers/repo/pull_review.go	`0.00% <0.00%> (ø)`
... and 20 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 36d9237...9c27520. Read the comment docs.

6543 · 2019-08-26T12:12:52Z

Current idear ...

if class has atribute sorttable -> colum header klickable
Klich at colum header for example <ID>
-> script check if url has already a sort= with <ID>
YES: open current URL wich sort=<ID> is replaced with <Rev_ID>
NO: open current URL and add/change sort= to sort=<ID>

davydov-vyacheslav · 2019-08-26T12:50:33Z

Current idear ...

if class has atribute sorttable -> colum header klickable

Klich at colum header for example <ID>
-> script check if url has already a sort= with <ID>
YES: open current URL wich sort=<ID> is replaced with <Rev_ID>
NO: open current URL and add/change sort= to sort=<ID>

I like this idea, but I don't think that all the table's controller has sort order for all the columns of these tables, at least at UI you are not able to perform sort by each column. Does controller support sort order for each column of the table?

6543 · 2019-08-27T11:37:08Z

@davydov-vyacheslav my currend idear to solf this is to tag table header colums
with an sort parameter. sort="alphabetically" and if there exist a reverse then sort="alphabetically,reversealphabetically"
-> https://gitea.com/6543/gitea_sortt

public/vendor/plugins/sortt/sortt.js

6543 · 2019-08-27T16:59:40Z

I'll have a look at the searchParams doku +1

6543 · 2019-08-28T00:43:03Z

@davydov-vyacheslav
ready for merge 🚀 ?

techknowlogick

Thanks for contribution :)

A few pieces of feedback:

If JS is getting injected into pages it should be in the footer with all other JS (and done in a DRY way)
Instead of doing onclick events, you can bind to elements in JS itself (this lets all related code be related to each other), and if you need to use arguments you can use something such as data-* attributes
librejs files need to be updated for each new JS dependency
This dependency is so small it could be included in the application itself

That being said, this can be done without JS, and have plain HTML links be generated, which is the way that I would recommend.

6543 · 2019-08-28T01:19:03Z

@techknowlogick
thanks for the feedback!

the plain HTML way would be the interesting one, but how should links togle betwen normal and revert sort?

davydov-vyacheslav · 2019-08-28T08:24:08Z

@6543 I'm not maintainer, so, globally, my opinion cost nothing :) But the code looks much better than original one and I don't have more concerns about it

6543 · 2019-08-28T09:41:16Z

@davydov-vyacheslav I know but it seems you already know a lot about javascript :)

gary-kim

Thank you for your contribution.

I think we should also think about if we could just do this with html though.

public/vendor/plugins/sortt/sortt.js

templates/admin/org/list.tmpl

6543 · 2019-09-18T00:52:45Z

@lafriks now it uses jQuery for events

@lunny @gary-kim

i think it is ready ... 🚀 - any thoughts?

public/vendor/plugins/sortt/sortt.js

davydov-vyacheslav · 2019-09-18T09:15:55Z

I have one more comment for this feature. Not all the columns' headers are able to sort. It would be nice to get images of current sorted column and the direction of sort (something like this one )

silverwind · 2020-06-23T11:11:31Z

Yeah I guess that's material for another PR 😉

6543 · 2020-06-23T11:53:13Z

@techknowlogick what is your opinion on this?

6543 · 2020-06-23T15:31:04Z

@gary-kim you had some opinions on this too - can you dismis or review :)

web_src/js/features/tablesort.js

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

web_src/js/features/tablesort.js

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

6543 · 2020-06-23T18:35:53Z

@silverwind your solution is not working - :/

6543 · 2020-06-23T18:36:21Z

should I rolle it back or do you have a look at it?

web_src/js/features/tablesort.js

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

6543 · 2020-06-23T18:43:51Z

@silverwind worked :)

and no problem, you have a lot more knowlage about JS than i do - so your suggestions are always welcome 👍

6543 · 2020-06-23T22:16:02Z

I would say let the old pull 🚀

6543 · 2020-06-24T11:56:00Z

ping

6543 · 2020-06-24T20:15:56Z

Ping

@silverwind

* [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>

…os and diffs (go-gitea#9146) - fix links to PR commits, e.g. `!7979 (commit 4d968c08e0)` - show the repo slug for links other than the current repository, e.g. `forgejo/docs@498bd80133` - truncate long `diff-...` fragments, e.g. `600be26638 (diff-953bb4f01)` - show `files` query values for compare links, e.g. `8bbac4c679...e2278e5 (options/locale/locale_fi-FI.ini)` Closes: go-gitea#7980 Closes: go-gitea#9130 Closes: go-gitea#8023 Ref: go-gitea#5901 ## Checklist The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org). ### Tests - I added test coverage for Go changes... - [x] in their respective `*_test.go` for unit tests. - [x] in the `tests/integration` directory if it involves interactions with a live Forgejo server. - I added test coverage for JavaScript changes... - [ ] in `web_src/js/*.test.js` if it can be unit tested. - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)). ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [x] I did not document these changes and I do not expect someone else to do it. ### Release notes - [ ] I do not want this change to show in the release notes. - [x] I want the title to show in the release notes with a link to this pull request. - [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.  ## Release notes  - User Interface features - [PR](https://codeberg.org/forgejo/forgejo/pulls/9146): feat(ui): improve rendering commit links for PR commits, external repos and diffs  Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9146 Reviewed-by: Robert Wolff <mahlzahn@posteo.de> Co-authored-by: Lucas Schwiderski <lucas@lschwiderski.de> Co-committed-by: Lucas Schwiderski <lucas@lschwiderski.de>

…ts, external repos and diffs (go-gitea#9493) **Backport:** https://codeberg.org/forgejo/forgejo/pulls/9146 - fix links to PR commits, e.g. `!7979 (commit 4d968c08e0)` - show the repo slug for links other than the current repository, e.g. `forgejo/docs@498bd80133` - truncate long `diff-...` fragments, e.g. `600be26638 (diff-953bb4f01)` - show `files` query values for compare links, e.g. `8bbac4c679...e2278e5 (options/locale/locale_fi-FI.ini)` Closes: go-gitea#7980 Closes: go-gitea#9130 Closes: go-gitea#8023 Ref: go-gitea#5901 ## Checklist The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org). ### Tests - I added test coverage for Go changes... - [x] in their respective `*_test.go` for unit tests. - [x] in the `tests/integration` directory if it involves interactions with a live Forgejo server. - I added test coverage for JavaScript changes... - [ ] in `web_src/js/*.test.js` if it can be unit tested. - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)). ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [x] I did not document these changes and I do not expect someone else to do it. ### Release notes - [ ] I do not want this change to show in the release notes. - [x] I want the title to show in the release notes with a link to this pull request. - [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.  ## Release notes  - User Interface features - [PR](https://codeberg.org/forgejo/forgejo/pulls/9146): feat(ui): improve rendering commit links for PR commits, external repos and diffs  Co-authored-by: Lucas Schwiderski <lucas@lschwiderski.de> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9493 Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org> Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org> Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>

6543 mentioned this pull request Aug 26, 2019

[Feature Request] Sortable Table Headings #7573

Closed

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Aug 26, 2019

6543 changed the title ~~Sortable Tables [UI]~~ Sortable Tables [UI] [WIP] Aug 26, 2019

6543 force-pushed the sortable-tables branch 2 times, most recently from 292ca6e to f9e663b Compare August 27, 2019 16:51

6543 changed the title ~~Sortable Tables [UI] [WIP]~~ Sortable Tables Header By Click [UI] Aug 27, 2019

davydov-vyacheslav reviewed Aug 27, 2019

View reviewed changes

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

davydov-vyacheslav reviewed Aug 27, 2019

View reviewed changes

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

6543 force-pushed the sortable-tables branch from d57ee63 to 99913ff Compare August 28, 2019 00:40

techknowlogick requested changes Aug 28, 2019

View reviewed changes

gary-kim suggested changes Aug 29, 2019

View reviewed changes

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

lafriks reviewed Aug 31, 2019

View reviewed changes

templates/admin/org/list.tmpl Outdated Show resolved Hide resolved

6543 changed the title ~~Sortable Tables Header By Click [UI]~~ [WIP] [UI] Sortable Tables Header By Click Sep 3, 2019

6543 mentioned this pull request Sep 4, 2019

make test -> fails #8089

Closed

6543 changed the title ~~[WIP] [UI] Sortable Tables Header By Click~~ [UI] Sortable Tables Header By Click Sep 18, 2019

davydov-vyacheslav reviewed Sep 18, 2019

View reviewed changes

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

public/vendor/plugins/sortt/sortt.js Outdated Show resolved Hide resolved

Merge branch 'master' into sortable-tables

ddd7bfd

techknowlogick approved these changes Jun 23, 2020

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jun 23, 2020