alice.pds.demo.boltless.dev
This repository has no description
1{{ define "repo/issues/fragments/newComment" }}
2 {{ if .LoggedInUser }}
3 <form
4 hx-post="/comment"
5 hx-swap="none"
6 hx-trigger="submit, click from:#close-button, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea"
7 hx-disabled-elt="find button[type='submit']"
8 hx-on::before-request="document.getElementById('comment-error').innerHTML = ''"
9 hx-swap="none"
10 class="group/form "
11 >
12 <input name="subject-uri" type="hidden" value="{{ .Issue.AtUri }}">
13 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full border border-gray-200 dark:border-gray-700">
14 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
15 {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
16 </div>
17 <textarea
18 id="comment-textarea"
19 name="body"
20 class="w-full p-2 rounded"
21 placeholder="Add to the discussion. Markdown is supported."
22 onkeyup="updateCommentForm()"
23 rows="5"
24 required
25 ></textarea>
26 </div>
27
28 <div class="flex gap-2 mt-2 items-center">
29 <button
30 id="comment-button"
31 type="submit"
32 class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline"
33 disabled
34 >
35 {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }}
36 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
37 Comment
38 </button>
39
40 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
41 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
42 {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
43 {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) .Issue.Open }}
44 <button
45 id="close-button"
46 type="button"
47 class="btn flex items-center gap-2 group/close"
48 hx-trigger="click"
49 >
50 {{ i "ban" "w-4 h-4 inline group-[.htmx-request]/close:hidden" }}
51 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/close:inline" }}
52 <span id="close-button-text">Close</span>
53 </button>
54 <div
55 id="close-issue"
56 hx-disabled-elt="#close-issue"
57 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
58 hx-trigger="click from:#close-button"
59 hx-target="#issue-action"
60 hx-swap="none"
61 hx-indicator="#close-button"
62 hx-on::before-request="document.getElementById('issue-action').innerHTML = ''"
63 >
64 </div>
65 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
66 <button
67 type="button"
68 class="btn flex items-center gap-2 group"
69 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
70 hx-swap="none"
71 >
72 {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
73 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
74 Reopen
75 </button>
76 {{ end }}
77
78 <div id="comment-error" class="error"></div>
79 <div id="issue-action" class="error"></div>
80
81 <script>
82 function commentButtonEnabled() {
83 const commentButton = document.getElementById('comment-button');
84 return !commentButton.hasAttribute('disabled');
85 }
86
87 function updateCommentForm() {
88 const textarea = document.getElementById('comment-textarea');
89 const commentButton = document.getElementById('comment-button');
90 const closeButtonText = document.getElementById('close-button-text');
91
92 if (textarea.value.trim() !== '') {
93 commentButton.removeAttribute('disabled');
94 } else {
95 commentButton.setAttribute('disabled', '');
96 }
97
98 if (closeButtonText) {
99 if (textarea.value.trim() !== '') {
100 closeButtonText.innerHTML = `Close with comment`;
101 } else {
102 closeButtonText.innerHTML = `Close`;
103 }
104 }
105 }
106
107 document.addEventListener('DOMContentLoaded', function() {
108 updateCommentForm();
109 });
110 </script>
111 </div>
112 </form>
113 {{ else }}
114 <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">
115 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
116 Sign up
117 </a>
118 <span class="text-gray-500 dark:text-gray-400">or</span>
119 <a href="/login" class="underline">Login</a>
120 to add to the discussion
121 </div>
122 {{ end }}
123{{ end }}