tickets

9.2 KB

1. // components/ticket_list.hl — `/`, `/project/:projectName` (also `/projects/:projectName`),
2. // `/state/:stateSlug` and both:
3. // the tickets, newest update first, filtered by project and state, and the form that
4. // opens a new ticket. Live: a ticket created or changed anywhere (web or API) lands in,
5. // moves within or leaves this list without a reload. Ticket #12: the summary is an <md-editor>
6. // around the textarea (shared/md-editor.js; the textarea keeps the Markdown).
7. // Ticket #20: a project's page (`/projects/<slug>`, also `/project/<slug>`) shows its title, description
8. // (Markdown), its tickets and — for an admin — the link to its settings page. The new-ticket form needs the
9. // role edit or admin: its project choice holds only the projects the user may open tickets in.
10. parent './main.hl'
11. import { ticketRows, projectLinks, stateLinks, stateOfSlug, createTicket, projectByAnySlug, editableProjects, isAdminOf, roleOf } from '../store.hl'
12. import { markdownBlocks } from '../markdown.hl'
13. import { siteName } from '../project.hl'
14. import { canWriteSession, writerOfSession, userOfSession } from '../users.hl'
15. import { connectionRows, disconnect } from '../connections.hl'
16. import Markdown from './markdown.hl'
18. projectName = null
19. stateSlug = null
20. filterState = stateOfSlug(stateSlug)
21. rows = ticketRows(projectName, filterState)
22. projects = projectLinks(projectName, filterState)
23. stateFilters = stateLinks(projectName, filterState)
24. session = null
25. project = projectName != null ? projectByAnySlug(projectName) : null
26. noSuchProject = projectName != null && project == null
27. projectId = project != null ? project.id : ''
28. hasDescription = project != null && project.description != null && project.description != ''
29. descriptionMd = hasDescription ? markdownBlocks(project.description) : []
30. isAdmin = project != null && isAdminOf(project.id, userOfSession(session))
31. // ticket #21: the apps connected to this project (connections.hl), shown to everybody; an admin can disconnect
32. connections = project != null ? connectionRows(project.id) : []
33. hasConnections = connections.length > 0
34. connectionMessage = ''
35. settingsHref = project != null ? '/projects/' + project.slug + '/settings' : ''
36. isEmpty = rows.length == 0
37. heading = (projectName != null ? (project != null ? project.title : projectName) : 'All projects') + (filterState != null ? ' · ' + filterState : '')
38. __title = siteName + ' | ' + heading
40. // the new-ticket form
41. myProjects = editableProjects(userOfSession(session))
42. newProject = projectName != null && project != null ? project.slug : (myProjects.length > 0 ? myProjects[0].slug : '')
43. newSubject = ''
44. newSummary = ''
45. // only for a member with the role edit or admin (ticket #20): the author is that user
46. canWrite = myProjects.length > 0
47. canCreateProject = canWriteSession(session)
48. mustLogIn = userOfSession(session) == null
49. noRole = userOfSession(session) != null && myProjects.length == 0
50. notice = ''
51. noticeHref = ''
52. hasNotice = false
54. View {
55. ticketBoard {
56. h1 { id = "heading" heading }
57. ticketFilters {
58. nav { id = "projectfilter"
59. for (f of projects) { a { href = f.href class = f.cls f.label } }
60. }
61. nav { id = "statefilter"
62. for (f of stateFilters) { a { href = f.href class = f.cls f.label } }
63. }
64. }
65. if (noSuchProject) { p { id = "noproject" class = "empty" "There is no such project." } }
66. if (hasDescription) { projectDescription { id = "description" Markdown { blocks = descriptionMd } } }
67. if (hasConnections) { ul { id = "connections" class = "connections"
68. for (c of connections) {
69. li { class = "connection"
70. "Connected to " strong { c.text }
71. if (isAdmin) { button { type = "button" class = "quiet danger disconnect" "Disconnect" on click(e) { emit dropConnection(c.id) } } }
72. }
73. }
74. } }
75. p { id = "connectionmessage" class = "message" connectionMessage }
76. projectActions {
77. if (canCreateProject) { a { id = "newprojectlink" class = "button" href = "/new-project" "New project" } }
78. if (isAdmin) { a { id = "settingslink" class = "button" href = settingsHref "Project settings" } }
79. }
80. if (mustLogIn) { p { id = "loginhint" class = "hint" "Reading is open to everyone. To open a ticket, log in with ident (top right)." } }
81. if (noRole) { p { id = "rolehint" class = "hint" "To open a ticket you need the role edit or admin in a project — ask an admin of the project to invite you." } }
82. if (canWrite) { details { id = "newticket"
83. summary { "New ticket" }
84. form { id = "newticketform"
85. on submit(e) {
86. e.preventDefault()
87. emit create(e)
88. }
89. label { "Project"
90. select { id = "newproject" name = "project" value = newProject on change(e) { emit setProject(e.target.value) }
91. for (p of myProjects) { option { value = p.slug p.title } }
92. }
93. }
94. label { "Subject"
95. input { id = "newsubject" name = "subject" required = "required" maxlength = "200" value = newSubject on input(e) { emit setSubject(e.target.value) } }
96. }
97. label { "Summary"
98. mdEditor { textarea { id = "newsummary" name = "summary" rows = "4" value = newSummary on input(e) { emit setSummary(e.target.value) } } }
99. }
100. button { id = "newsubmit" type = "submit" "Open ticket" }
101. }
102. } }
103. if (hasNotice) { p { id = "notice" class = "notice" notice " " a { id = "noticelink" href = noticeHref "open it" } } }
104. if (isEmpty) { p { id = "empty" class = "empty" "No tickets here." } }
105. ol { id = "tickets" class = "tickets"
106. for (row of rows) {
107. li {
108. ticketState { class = row.stateSlug row.state }
109. a { class = "subject" href = row.href ticketRef { row.ref } row.subject }
110. ticketMeta {
111. a { href = row.projectHref row.projectTitle }
112. if (row.hasAssignee) { assignee { row.assignee } }
113. time { row.updated }
114. }
115. }
116. }
117. }
118. }
119. }
121. on setProject(v) { newProject = v }
122. on setSubject(v) { newSubject = v }
123. on setSummary(v) { newSummary = v }
125. on create(e) {
126. if (newProject.trim() == '' || newSubject.trim() == '') { return null }
127. let r = emit server openTicket(newProject, newSubject, newSummary)
128. if (r != null && r.error == null) {
129. notice = 'Opened ' + r.project + ' ' + r.ref + '.'
130. noticeHref = r.href
131. hasNotice = true
132. newSubject = ''
133. newSummary = ''
134. } else {
135. notice = r != null ? r.error : 'could not open the ticket'
136. noticeHref = ''
137. hasNotice = true
138. }
139. }
141. // does a row belong in THIS list (its filters)?
142. belongs = (row) => {
143. return (projectName == null || row.projectId == projectId) && (filterState == null || row.state == filterState)
144. }
146. // the row goes to the top (newest update first) if it belongs, and out if not
147. place = (row) => {
148. let next = []
149. if (belongs(row)) { next.push(row) }
150. for (r of rows) { if (r.id != row.id) { next.push(r) } }
151. rows = next
152. isEmpty = next.length == 0
153. }
155. on client ticketCreated(row) { place(row) }
157. on dropConnection(id) {
158. let r = emit server disconnectApp(projectId, id)
159. if (r == null || r.error != null) {
160. connectionMessage = r != null ? r.error : 'could not disconnect'
161. return null
162. }
163. connectionMessage = ''
164. connections = r.connections
165. hasConnections = r.connections.length > 0
166. }
167. on client connectionsChanged(slug) {
168. let r = emit server connectionsOfProject(projectId)
169. if (r != null && r.connections != null) {
170. connections = r.connections
171. hasConnections = r.connections.length > 0
172. }
173. }
174. on client signedIn(tag, info) {
175. let r = emit server whatICanOpen(projectName != null ? projectName : '')
176. if (r != null && r.projects != null) {
177. myProjects = r.projects
178. canWrite = r.projects.length > 0
179. noRole = r.projects.length == 0 && info.named
180. canCreateProject = info.named
181. mustLogIn = false
182. isAdmin = r.admin == true
183. if (newProject == '' && r.projects.length > 0) { newProject = r.projects[0].slug }
184. }
185. }
186. on client signedOut(tag) {
187. canWrite = false
188. canCreateProject = false
189. isAdmin = false
190. noRole = false
191. mustLogIn = true
192. myProjects = []
193. }
194. on client ticketEvent(ticketId, ev, row) { place(row) }
196. // THE FACE: a ticket opened from the web by the session's user (#31: only a real session).
197. // The same push the API sends.
198. on server openTicket(project, subject, summary, session) {
199. let w = writerOfSession(session)
200. if (w.error != null) { return { error = w.error } }
201. let r = createTicket(project, subject, summary, w.user, null, null)
202. if (r.error != null) { return { error = r.error } }
203. emit client ticketCreated(r.ticket)
204. return r.ticket
205. }
207. // what this session's user may do here after a login without a reload: the projects they may open tickets in,
208. // and whether they are an admin of THIS page's project (`slug` null = the all-projects page)
209. on server whatICanOpen(slug, session) {
210. let u = userOfSession(session)
211. if (u == null) { return { error = 'log in first' } }
212. let p = slug != null && slug != '' ? projectByAnySlug(slug) : null
213. return { projects = editableProjects(u) admin = p != null && isAdminOf(p.id, u) }
214. }
216. // ticket #21: an admin ends a connection — the key is dead at once (connections.hl)
217. on server disconnectApp(projectId, connectionId, session) {
218. let w = writerOfSession(session)
219. if (w.error != null) { return { error = w.error } }
220. let r = disconnect('' + projectId, w.user, '' + connectionId)
221. if (r.error != null) { return { error = r.error } }
222. emit client connectionsChanged('')
223. return { connections = r.connections }
224. }
226. on server connectionsOfProject(projectId, session) {
227. return { connections = connectionRows('' + projectId) }
228. }