Feature: show issue assignee on project board (#15232)

* Show assignees in project boards.

4 files changed, 27 insertions, 6 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 6a7f9bb47c..90309c9df9 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1181,6 +1181,7 @@ projects.board.deletion_desc = "Deleting a project board moves all related issue
 projects.board.color = "Color"
 projects.open = Open
 projects.close = Close
+projects.board.assigned_to = Assigned to
 
 issues.desc = Organize bug reports, tasks and milestones.
 issues.filter_assignees = Filter Assignee
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
index 6db1025539..e96b92fb77 100644
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@@ -82,7 +82,12 @@
 
 			<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
 				<div class="board-column-header df ac sb">
-					<div class="ui large label board-label py-2">{{.Title}}</div>
+					<div class="ui large label board-label py-2">
+						<div class="ui small circular grey label board-card-cnt">
+							{{len .Issues}}
+						</div>
+						{{.Title}}
+					</div>
 					{{if and $.CanWriteProjects (not $.Repository.IsArchived) (ne .ID 0)}}
 						<div class="ui dropdown jump item tooltip">
 							<div class="not-mobile px-3" tabindex="-1">
@@ -229,13 +234,19 @@
 							</div>
 							{{- end }}
 						</div>
-						{{if .Labels}}
-							<div class="extra content labels-list p-0 pt-2">
-								{{ range .Labels }}
-								<a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}};" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
+
+						{{ if or .Labels .Assignees }}
+						<div class="extra content labels-list p-0 pt-2">
+							{{ range .Labels }}
+								<a class="ui label" target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}};" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
+							{{ end }}
+							<div class="right floated">
+								{{ range .Assignees }}
+									<a class="tooltip" target="_blank" href="{{.HTMLURL}}" data-content="{{$.i18n.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini mr-3"}}</a>
 								{{ end }}
 							</div>
-						{{end}}
+						</div>
+						{{ end }}
 					</div>
 					<!-- stop issue card -->
 
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index 3147626b51..a948eba807 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -2,8 +2,16 @@ import $ from 'jquery';
 
 const {csrfToken} = window.config;
 
+function updateIssueCount(cards) {
+  const parent = cards.parentElement;
+  const cnt = parent.getElementsByClassName('board-card').length;
+  parent.getElementsByClassName('board-card-cnt')[0].innerText = cnt;
+}
+
 function moveIssue({item, from, to, oldIndex}) {
   const columnCards = to.getElementsByClassName('board-card');
+  updateIssueCount(from);
+  updateIssueCount(to);
 
   const columnSorting = {
     issues: [...columnCards].map((card, i) => ({
diff --git a/web_src/less/features/projects.less b/web_src/less/features/projects.less
index 99722b6cc5..21514688b6 100644
--- a/web_src/less/features/projects.less
+++ b/web_src/less/features/projects.less
@@ -48,6 +48,7 @@
 .board-column > .cards {
   flex: 1;
   display: flex;
+  align-content: baseline;
   margin: 0 !important;
   padding: 0 !important;
   flex-wrap: nowrap !important;