937e8b5514
Before this change, if we had more than 200 entries being deferred in
loading, the entire table would get replaced thus losing any event
listeners attached to the elements within the table, such as the elipsis
button and commit list with tippy.
With this change we remove the previous javascript code that replaced
the table and use htmx to replace the table.
htmx attributes added:
- `hx-indicator="tr.notready td.message span"`: attach the loading
spinner to the files whose last commit is still being loaded
- `hx-trigger="load"` trigger the request-replace behavior as soon as
possible
- `hx-swap="morph"`: use the idiomorph morphing algorithm, this is the
thing that makes it so the elipsis button event listener is kept during
the replacement, fixing the bug because we don't actually replace the
table, only modifying it
- `hx-post="{{.LastCommitLoaderURL}}"`: make a post request to this url
to get the table with all of the commit information
As part of this change I removed the handling of partial replacement in
the case we have less than 200 "not ready" files. The first reason is
that I couldn't make htmx replace only a subset of returned elements,
the second reason is that we have a cache implemented in the backend
already so the only cost added is that we query the cache a few times
(which is sure to be populated due to the initial request), and the last
reason is that since the last refactor of this functionality that
removed jQuery we don't properly send the "not ready" entries as the
backend expects `FormData` with `f[]` and we send a JSON with `f` so we
always query for all rows anyway.
# Before
# After
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
70 lines
3.3 KiB
Handlebars
70 lines
3.3 KiB
Handlebars
<table id="repo-files-table" class="ui single line table gt-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
|
|
<thead>
|
|
<tr class="commit-list">
|
|
<th colspan="2">
|
|
{{template "repo/latest_commit" .}}
|
|
</th>
|
|
<th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{if .HasParentPath}}
|
|
<tr class="has-parent">
|
|
<td colspan="3">{{svg "octicon-reply"}}<a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a></td>
|
|
</tr>
|
|
{{end}}
|
|
{{range $item := .Files}}
|
|
{{$entry := $item.Entry}}
|
|
{{$commit := $item.Commit}}
|
|
{{$subModuleFile := $item.SubModuleFile}}
|
|
<tr data-entryname="{{$entry.Name}}" data-ready="{{if $commit}}true{{else}}false{{end}}" class="{{if not $commit}}not{{end}}ready entry">
|
|
<td class="name four wide">
|
|
<span class="truncate">
|
|
{{if $entry.IsSubModule}}
|
|
{{svg "octicon-file-submodule"}}
|
|
{{$refURL := $subModuleFile.RefURL AppUrl $.Repository.FullName $.SSHDomain}} {{/* FIXME: the usage of AppUrl seems incorrect, it would be fixed in the future, use AppSubUrl instead */}}
|
|
{{if $refURL}}
|
|
<a class="muted" href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{PathEscape $subModuleFile.RefID}}">{{ShortSha $subModuleFile.RefID}}</a>
|
|
{{else}}
|
|
{{$entry.Name}}<span class="at">@</span>{{ShortSha $subModuleFile.RefID}}
|
|
{{end}}
|
|
{{else}}
|
|
{{if $entry.IsDir}}
|
|
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
|
|
{{svg "octicon-file-directory-fill"}}
|
|
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
|
|
{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
|
|
{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
|
|
{{if eq $subJumpablePathFieldLast 0}}
|
|
{{$subJumpablePathName}}
|
|
{{else}}
|
|
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
|
|
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
|
|
{{end}}
|
|
</a>
|
|
{{else}}
|
|
{{svg (printf "octicon-%s" (EntryIcon $entry))}}
|
|
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
|
|
{{end}}
|
|
{{end}}
|
|
</span>
|
|
</td>
|
|
<td class="message nine wide">
|
|
<span class="truncate">
|
|
{{if $commit}}
|
|
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
|
|
{{RenderCommitMessageLinkSubject $.Context $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}}
|
|
{{else}}
|
|
<div class="ui active tiny slow centered inline"></div>
|
|
{{end}}
|
|
</span>
|
|
</td>
|
|
<td class="text right age three wide">{{if $commit}}{{TimeSince $commit.Committer.When ctx.Locale}}{{end}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{if .ReadmeExist}}
|
|
{{template "repo/view_file" .}}
|
|
{{end}}
|