lewis.moe
Monorepo for Tangled
1{{ define "repo/issues/fragments/newComment" }}
2 {{ if .LoggedInUser }}
3 <form
4 id="comment-form"
5 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
6 hx-on::after-request="if(event.detail.successful) this.reset()"
7 >
8 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
9 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
10 {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
11 </div>
12 <textarea
13 id="comment-textarea"
14 name="body"
15 class="w-full p-2 rounded"
16 placeholder="Add to the discussion. Markdown is supported."
17 onkeyup="updateCommentForm()"
18 rows="5"
19 ></textarea>
20 <div id="issue-comment"></div>
21 <div id="issue-action" class="error"></div>
22 </div>
23
24 <div class="flex gap-2 mt-2">
25 <button
26 id="comment-button"
27 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
28 type="submit"
29 hx-disabled-elt="#comment-button"
30 class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline group"
31 disabled
32 >
33 {{ i "message-square-plus" "w-4 h-4" }}
34 comment
35 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
36 </button>
37
38 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
39 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
40 {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
41 {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) .Issue.Open }}
42 <button
43 id="close-button"
44 type="button"
45 class="btn flex items-center gap-2"
46 hx-indicator="#close-spinner"
47 hx-trigger="click"
48 >
49 {{ i "ban" "w-4 h-4" }}
50 close
51 <span id="close-spinner" class="group">
52 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
53 </span>
54 </button>
55 <div
56 id="close-with-comment"
57 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
58 hx-trigger="click from:#close-button"
59 hx-disabled-elt="#close-with-comment"
60 hx-target="#issue-comment"
61 hx-indicator="#close-spinner"
62 hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}"
63 hx-swap="none"
64 >
65 </div>
66 <div
67 id="close-issue"
68 hx-disabled-elt="#close-issue"
69 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
70 hx-trigger="click from:#close-button"
71 hx-target="#issue-action"
72 hx-indicator="#close-spinner"
73 hx-swap="none"
74 >
75 </div>
76 <script>
77 document.addEventListener('htmx:configRequest', function(evt) {
78 if (evt.target.id === 'close-with-comment') {
79 const commentText = document.getElementById('comment-textarea').value.trim();
80 if (commentText === '') {
81 evt.detail.parameters = {};
82 evt.preventDefault();
83 }
84 }
85 });
86 </script>
87 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
88 <button
89 type="button"
90 class="btn flex items-center gap-2"
91 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
92 hx-indicator="#reopen-spinner"
93 hx-swap="none"
94 >
95 {{ i "refresh-ccw-dot" "w-4 h-4" }}
96 reopen
97 <span id="reopen-spinner" class="group">
98 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
99 </span>
100 </button>
101 {{ end }}
102
103 <script>
104 function updateCommentForm() {
105 const textarea = document.getElementById('comment-textarea');
106 const commentButton = document.getElementById('comment-button');
107 const closeButton = document.getElementById('close-button');
108
109 if (textarea.value.trim() !== '') {
110 commentButton.removeAttribute('disabled');
111 } else {
112 commentButton.setAttribute('disabled', '');
113 }
114
115 if (closeButton) {
116 if (textarea.value.trim() !== '') {
117 closeButton.innerHTML = `
118{{ i "ban" "w-4 h-4" }}
119<span>close with comment</span>
120<span id="close-spinner" class="group">
121 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
122</span>`;
123 } else {
124 closeButton.innerHTML = `
125{{ i "ban" "w-4 h-4" }}
126<span>close</span>
127<span id="close-spinner" class="group">
128 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
129</span>`;
130 }
131 }
132 }
133
134 document.addEventListener('DOMContentLoaded', function() {
135 updateCommentForm();
136 });
137 </script>
138 </div>
139 </form>
140 {{ else }}
141 <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm p-6 relative flex gap-2 items-center">
142 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
143 sign up
144 </a>
145 <span class="text-gray-500 dark:text-gray-400">or</span>
146 <a href="/login" class="underline">login</a>
147 to add to the discussion
148 </div>
149 {{ end }}
150{{ end }}