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