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-trigger="submit, click from:#close-button, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea"
6 hx-disabled-elt="find button[type='submit']"
7 hx-on::after-request="if(event.detail.successful) this.reset()"
8 class="group/form"
9 >
10 <input name="subject-uri" type="hidden" value="{{ .Issue.AtUri }}">
11 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
12 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
13 {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
14 </div>
15 <textarea
16 id="comment-textarea"
17 name="body"
18 class="w-full p-2 rounded"
19 placeholder="Add to the discussion. Markdown is supported."
20 onkeyup="updateCommentForm()"
21 rows="5"
22 required
23 ></textarea>
24 <div id="comment-error" class="error"></div>
25 <div id="issue-action" class="error"></div>
26 </div>
27
28 <div class="flex gap-2 mt-2">
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 >
63 </div>
64 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
65 <button
66 type="button"
67 class="btn flex items-center gap-2 group"
68 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
69 hx-swap="none"
70 >
71 {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
72 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
73 reopen
74 </button>
75 {{ end }}
76
77 <script>
78 function commentButtonEnabled() {
79 const commentButton = document.getElementById('comment-button');
80 return !commentButton.hasAttribute('disabled');
81 }
82
83 function updateCommentForm() {
84 const textarea = document.getElementById('comment-textarea');
85 const commentButton = document.getElementById('comment-button');
86 const closeButtonText = document.getElementById('close-button-text');
87
88 if (textarea.value.trim() !== '') {
89 commentButton.removeAttribute('disabled');
90 } else {
91 commentButton.setAttribute('disabled', '');
92 }
93
94 if (closeButtonText) {
95 if (textarea.value.trim() !== '') {
96 closeButtonText.innerHTML = `close with comment`;
97 } else {
98 closeButtonText.innerHTML = `close`;
99 }
100 }
101 }
102
103 document.addEventListener('DOMContentLoaded', function() {
104 updateCommentForm();
105 });
106 </script>
107 </div>
108 </form>
109 {{ else }}
110 <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">
111 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
112 sign up
113 </a>
114 <span class="text-gray-500 dark:text-gray-400">or</span>
115 <a href="/login" class="underline">login</a>
116 to add to the discussion
117 </div>
118 {{ end }}
119{{ end }}