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 "BlobName" "blob"
20 "Required" true
21 "Placeholder" "Add to the discussion. Markdown is supported.") }}
22 </div>
23
24 <div class="flex gap-2 mt-2 items-center">
25 <button
26 id="comment-button"
27 type="submit"
28 class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline"
29 disabled
30 >
31 {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }}
32 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
33 Comment
34 </button>
35
36 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
37 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
38 {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
39 {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) .Issue.Open }}
40 <button
41 id="close-button"
42 type="button"
43 class="btn flex items-center gap-2 group/close"
44 hx-trigger="click"
45 >
46 {{ i "ban" "w-4 h-4 inline group-[.htmx-request]/close:hidden" }}
47 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/close:inline" }}
48 <span id="close-button-text">Close</span>
49 </button>
50 <div
51 id="close-issue"
52 hx-disabled-elt="#close-issue"
53 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
54 hx-trigger="click from:#close-button"
55 hx-target="#issue-action"
56 hx-swap="none"
57 hx-indicator="#close-button"
58 hx-on::before-request="document.getElementById('issue-action').innerHTML = ''"
59 >
60 </div>
61 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
62 <button
63 type="button"
64 class="btn flex items-center gap-2 group"
65 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
66 hx-swap="none"
67 >
68 {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
69 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
70 Reopen
71 </button>
72 {{ end }}
73
74 <div id="comment-error" class="error"></div>
75 <div id="issue-action" class="error"></div>
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.querySelector('form[hx-post="/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 }}