team page: Display contributor count per repo.

Fixes #20725.
This commit is contained in:
Eeshan Garg 2022-01-10 16:17:22 -05:00 committed by Tim Abbott
parent 3b9455c9ce
commit 94c89c80d1
3 changed files with 62 additions and 18 deletions

View File

@ -63,6 +63,8 @@ function get_display_name(contributor) {
// - Display full name instead of GitHub username.
export default function render_tabs() {
const template = _.template($("#contributors-template").html());
const count_template = _.template($("#count-template").html());
const total_count_template = _.template($("#total-count-template").html());
const total_tab_html = contributors_list
.map((c) => ({
name: get_display_name(c),
@ -75,7 +77,10 @@ export default function render_tabs() {
.map((c) => template(c))
.join("");
$("#tab-total").html(total_tab_html);
$("#tab-total .contributors-grid").html(total_tab_html);
$("#tab-total").prepend(
total_count_template({contributor_count: contributors_list.length, tab_name: "total"}),
);
for (const repo_name of Object.keys(repo_name_to_tab_name)) {
const tab_name = repo_name_to_tab_name[repo_name];
@ -83,12 +88,12 @@ export default function render_tabs() {
continue;
}
// Set as the loading template for now, and load when clicked.
$(`#tab-${CSS.escape(tab_name)}`).html($("#loading-template").html());
$(`#tab-${CSS.escape(tab_name)} .contributors-grid`).html($("#loading-template").html());
$(`#${CSS.escape(tab_name)}`).on("click", () => {
if (!loaded_repos.includes(repo_name)) {
const html = contributors_list
.filter((c) => c[repo_name])
const filtered_by_repo = contributors_list.filter((c) => c[repo_name]);
const html = filtered_by_repo
.sort((a, b) =>
a[repo_name] < b[repo_name] ? 1 : a[repo_name] > b[repo_name] ? -1 : 0,
)
@ -103,7 +108,12 @@ export default function render_tabs() {
)
.join("");
$(`#tab-${CSS.escape(tab_name)}`).html(html);
$(`#tab-${CSS.escape(tab_name)} .contributors-grid`).html(html);
const contributor_count = filtered_by_repo.length;
const repo_url = `https://github.com/zulip/${repo_name}`;
$(`#tab-${CSS.escape(tab_name)}`).prepend(
count_template({contributor_count, repo_name, repo_url}),
);
loaded_repos.push(repo_name);
}

View File

@ -884,12 +884,15 @@ input#python-zulip-api:checked ~ #tab-python-zulip-api,
input#zulip-js:checked ~ #tab-zulip-js,
input#zulipbot:checked ~ #tab-zulipbot,
input#terminal:checked ~ #tab-terminal {
border-top: 1px solid hsl(0, 0%, 93%);
padding-top: 20px;
display: block;
.contributors-grid {
padding-top: 5px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
.avatar_img {
width: auto;

View File

@ -110,14 +110,30 @@
<input id="terminal" type="radio" name="tabs" />
<label for="terminal"><i class="fa fa-terminal" aria-hidden="true"></i>&nbsp; Terminal</label>
<div id="tab-total" class="contributors"></div>
<div id="tab-server" class="contributors"></div>
<div id="tab-desktop" class="contributors"></div>
<div id="tab-mobile" class="contributors"></div>
<div id="tab-python-zulip-api" class="contributors"></div>
<div id="tab-zulip-js" class="contributors"></div>
<div id="tab-zulipbot" class="contributors"></div>
<div id="tab-terminal" class="contributors"></div>
<div id="tab-total" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-server" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-desktop" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-mobile" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-python-zulip-api" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-zulip-js" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-zulipbot" class="contributors">
<div class="contributors-grid"></div>
</div>
<div id="tab-terminal" class="contributors">
<div class="contributors-grid"></div>
</div>
</div>
<!-- Compiled using lodash -->
@ -141,6 +157,21 @@
</p>
</script>
<script type="text/template" id="total-count-template">
<p class="contributor-count">
<%= contributor_count %> total contributors
</p>
</script>
<script type="text/template" id="count-template">
<p class="contributor-count">
<%= contributor_count %> contributors to
<a href="<%= repo_url %>" target="_blank" rel="noopener noreferrer">
zulip/<%= repo_name %>
</a>
</p>
</script>
<p class="last-updated">
Last updated: {{ date }}
</p>