tickets

20.7 KB

1. // components/ticket.hl — `/:projectSlug/:ticketNumber` (ticket #25; was /projects/…): one ticket, its
2. // append-only event history, a comment form and the state change. (Old URLs `/tickets/<n>`,
3. // `/projects/<slug>/<n>`, `/projects/<slug>/tickets/<n>` are 301-redirected here by lib/api.hl.) Live: an event on THIS ticket (from any browser or
4. // the API) is appended here and the state badge follows, without a reload.
5. // Ticket #6 (mission 014): the summary, comments and state notes are MARKDOWN, rendered by the
6. // child component Markdown (components/markdown.hl) from markdown.hl's blocks — safe: no HTML
7. // string, links checked. Ticket #8: the ticket's AUTHOR (a ticket from before the login: the
8. // creator) gets "Edit" — subject + summary; the edit is a history event that keeps the previous
9. // values ("edited the ticket", the previous summary folded under it), pushed live like a comment.
10. // Ticket #4 (mission 017): RELATIONS — "Part of <parent>", the children with their states and
11. // "all children confirmed" / "n of m children confirmed", "Blocked by" and "Blocks" (each with
12. // states); logged-in users get the forms "Parent" (set / remove) and "Blocked by" (add / remove per
13. // row) — the store decides who may (the author of either ticket, or the creator). Live: the
14. // `ticketsRelated` push carries the relation view of every ticket involved in a write.
15. // Ticket #12 (mission 024): the Markdown fields (edit summary, comment, state note) are
16. // `<md-editor>`s around their textareas (shared/md-editor.js): edited visually, the textarea keeps
17. // the plain Markdown and fires `input` as before, so the members and faces are unchanged. The state
18. // note became a textarea (rows 1) because the editor writes line breaks. Ctrl/Cmd+Enter in the
19. // editor submits the form (the textarea's `keyed` handler only runs without the editor).
20. // Ticket #20 (roles): a member of the project may comment; `use` also moves the ticket between open and
21. // review; `edit` / `admin` edit it, assign it (a member; "Assigned to …" is shown) and set any state; a
22. // visitor without a role only reads. The server decides in every case; the page only shows what it may.
23. // A ticket opened through a FORMER slug of its project shows a note with the current address.
24. parent './main.hl'
25. import { ticketRowAt, ticketRecord, eventRows, stateChoices, addComment, changeState, assignTicket, editTicket, mayEditId, ticketRights, relatedViews, setParent, changeBlocker } from '../lib/tickets.hl'
26. import { assignChoices, isMember } from '../lib/projects.hl'
27. import { relationViewOf, noRef } from '../lib/tickets-helpers.hl'
28. import { pageEventsOf, pageEventOf } from '../lib/events.hl'
29. import { markdownBlocks } from '../lib/markdown.hl'
30. import { siteName } from '../project.hl'
31. import { canWriteSession, writerOfSession, userOfSession } from '../lib/users.hl'
32. import Markdown from './markdown.hl'
34. projectSlug = null
35. ticketNumber = null
36. row = ticketRowAt(projectSlug, ticketNumber)
37. present = row != null
38. gone = row == null
39. ticketId = row != null ? row.id : ''
40. ref = row != null ? row.ref : ''
41. movedNote = row != null && projectSlug != row.project
42. currentHref = row != null ? row.href : ''
43. assignee = row != null ? row.assignee : ''
44. hasAssignee = row != null && row.hasAssignee
45. createdBy = row != null ? row.createdBy : ''
46. hasOld = row != null && row.hasOld
47. oldRef = row != null ? row.oldRef : ''
48. subject = row != null ? row.subject : 'No such ticket'
49. summary = row != null ? row.summary : ''
50. hasSummary = row != null && row.summary != ''
51. summaryMd = row != null ? markdownBlocks(row.summary) : []
52. project = row != null ? row.project : ''
53. projectHref = row != null ? row.projectHref : '/'
54. state = row != null ? row.state : ''
55. stateSlug = row != null ? row.stateSlug : ''
56. created = row != null ? row.created : ''
57. updated = row != null ? row.updated : ''
58. events = row != null ? pageEventsOf(eventRows(row.id)) : []
59. __title = siteName + ' | ' + (row != null ? row.project + ' ' + row.ref + ' ' + row.subject : 'no such ticket')
61. // the forms: only for a logged-in user with a display name (ticket #7); the author is that
62. // user (the faces read the session). Confirm / reject: the server refuses a non-creator.
63. session = null
64. me = userOfSession(session)
65. canWrite = row != null && me != null && isMember(row.projectId, me)
66. mustLogIn = me == null
67. notMember = me != null && !canWrite
68. options = row != null ? stateChoices(ticketRecord(row.id), me) : []
69. hasOptions = options.length > 0
70. memberOptions = row != null ? assignChoices(row.projectId) : []
71. commentText = ''
72. newState = options.length > 0 ? options[0].value : ''
73. stateNote = ''
74. message = ''
75. // editing (ticket #8): only the author (the server decides; the face checks again)
76. canEdit = row != null && mayEditId(row.id, me)
77. assignDraft = row != null ? row.assigneeId : ''
78. assignMessage = ''
79. editing = false
80. showEdit = canEdit
81. showEdit2 = canEdit
82. editSubject = ''
83. editSummary = ''
84. editMessage = ''
85. // relations (ticket #4): the view of lib/tickets-helpers.hl relationViewOf, flat members for the View
86. rel = row != null ? relationViewOf(row) : null
87. hasRelations = rel != null && rel.hasRelations
88. hasParent = rel != null && rel.hasParent
89. parentRef = rel != null ? rel.parent : noRef
90. hasChildren = rel != null && rel.hasChildren
91. children = rel != null ? rel.children : []
92. childNote = rel != null ? rel.childNote : ''
93. childClass = rel != null ? rel.childClass : ''
94. hasBlockedBy = rel != null && rel.hasBlockedBy
95. blockedBy = rel != null ? rel.blockedBy : []
96. hasBlocks = rel != null && rel.hasBlocks
97. blocks = rel != null ? rel.blocks : []
98. parentDraft = ''
99. blockerDraft = ''
100. linkMessage = ''
102. View {
103. ticketView {
104. if (gone) { p { id = "gone" class = "empty" "There is no such ticket." } }
105. if (present) {
106. header {
107. p { a { id = "project" href = projectHref project } " " ticketRef { id = "ref" ref }
108. if (hasOld) { formerRef { id = "oldref" "formerly " oldRef } }
109. }
110. h1 { id = "subject" subject }
111. ticketState { id = "state" class = stateSlug state }
112. p { class = "people" "opened by " strong { id = "createdby" createdBy }
113. if (hasAssignee) { " · assigned to " strong { id = "assignee" assignee } }
114. }
115. if (movedNote) { p { id = "movednote" class = "hint" "This project has a new address: " a { id = "movedlink" href = currentHref currentHref } } }
116. p { class = "dates" "opened " time { created } " · updated " time { id = "updated" updated } }
117. if (showEdit) { button { id = "editbutton" type = "button" class = "quiet" "Edit" on click(e) { emit startEdit(e) } } }
118. }
119. if (editing) {
120. form { id = "editform"
121. on submit(e) {
122. e.preventDefault()
123. emit saveEdit(e)
124. }
125. label { "Subject"
126. input { id = "editsubject" name = "subject" required = "required" maxlength = "200" value = editSubject on input(e) { emit setEditSubject(e.target.value) } }
127. }
128. label { "Summary"
129. mdEditor { textarea { id = "editsummary" name = "summary" rows = "8" value = editSummary on input(e) { emit setEditSummary(e.target.value) } } }
130. }
131. formButtons {
132. button { id = "editsave" type = "submit" "Save" }
133. button { id = "editcancel" type = "button" class = "quiet" "Cancel" on click(e) { emit cancelEdit(e) } }
134. }
135. p { id = "editmessage" class = "message" editMessage }
136. }
137. }
138. if (hasSummary) { ticketSummary { id = "summary" Markdown { blocks = summaryMd } } }
139. if (hasRelations) { ticketRelations { id = "relations"
140. if (hasParent) { p { id = "parent" "Part of "
141. a { href = parentRef.href parentRef.project " " parentRef.ref }
142. " " span { class = "refsubject" parentRef.subject }
143. " " ticketState { class = parentRef.stateSlug parentRef.state }
144. } }
145. if (hasChildren) { div { id = "childrenbox"
146. h2 { "Children" }
147. p { id = "childnote" class = childClass childNote }
148. ul { id = "children" class = "refs"
149. for (c of children) { li {
150. ticketState { class = c.stateSlug c.state }
151. a { href = c.href c.project " " c.ref }
152. span { class = "refsubject" c.subject }
153. } }
154. }
155. } }
156. if (hasBlockedBy) { div { id = "blockedbybox"
157. h2 { "Blocked by" }
158. ul { id = "blockedby" class = "refs"
159. for (c of blockedBy) { li {
160. ticketState { class = c.stateSlug c.state }
161. a { href = c.href c.project " " c.ref }
162. span { class = "refsubject" c.subject }
163. if (showEdit2) { button { type = "button" class = "quiet unblock" value = c.key "Remove" on click(e) { emit removeBlocker(e.target.value) } } }
164. } }
165. }
166. } }
167. if (hasBlocks) { div { id = "blocksbox"
168. h2 { "Blocks" }
169. ul { id = "blocks" class = "refs"
170. for (c of blocks) { li {
171. ticketState { class = c.stateSlug c.state }
172. a { href = c.href c.project " " c.ref }
173. span { class = "refsubject" c.subject }
174. } }
175. }
176. } }
177. } }
178. section {
179. h2 { "History" }
180. ol { id = "events"
181. for (ev of events) {
182. li { class = ev.kind
183. eventHead {
184. strong { ev.author }
185. " " ev.label
186. if (ev.isState) { " " ticketState { class = ev.toSlug ev.to } }
187. " " time { ev.when }
188. }
189. if (ev.isEdit) { eventText { class = "edit"
190. if (ev.subjectChanged) { p { class = "was" "Subject before: " s { ev.oldSubject } } }
191. if (ev.summaryChanged) { details { class = "was"
192. summary { "Summary before" }
193. Markdown { blocks = ev.oldSummaryMd }
194. } }
195. } }
196. if (ev.hasText) { eventText { Markdown { blocks = ev.md } } }
197. }
198. }
199. }
200. }
201. if (mustLogIn) {
202. p { id = "loginhint" class = "hint" "Reading is open to everyone. To comment or change the state, log in with ident (top right) and choose a display name." }
203. }
204. if (notMember) {
205. p { id = "memberhint" class = "hint" "You are not a member of this project — ask an admin to invite you to comment." }
206. }
207. if (canWrite) { section {
208. h2 { "Respond" }
209. form { id = "commentform"
210. on submit(e) {
211. e.preventDefault()
212. emit sendComment(e)
213. }
214. label { "Comment"
215. mdEditor { textarea { id = "commenttext" name = "comment" rows = "3" required = "required" placeholder = "Write a comment" value = commentText
216. on input(e) { emit setComment(e.target.value) }
217. on keydown(e) { emit keyed(e) }
218. } }
219. }
220. button { id = "commentsend" type = "submit" "Comment" }
221. }
222. if (hasOptions) { form { id = "stateform"
223. on submit(e) {
224. e.preventDefault()
225. emit sendState(e)
226. }
227. label { "State"
228. select { id = "newstate" name = "state" value = newState
229. on change(e) { emit setNewState(e.target.value) }
230. for (o of options) { option { value = o.value o.label } }
231. }
232. }
233. label { "Note (optional)"
234. mdEditor { textarea { id = "statenote" name = "note" rows = "1" value = stateNote on input(e) { emit setStateNote(e.target.value) } } }
235. }
236. button { id = "statesend" type = "submit" "Change state" }
237. } }
238. p { id = "message" class = "message" message }
239. } }
240. if (showEdit2) { section {
241. h2 { "Manage" }
242. form { id = "assignform"
243. on submit(e) {
244. e.preventDefault()
245. emit sendAssign(e)
246. }
247. label { "Assigned to"
248. select { id = "assignselect" name = "assignee" value = assignDraft on change(e) { emit setAssignDraft(e.target.value) }
249. option { value = "" "nobody" }
250. for (o of memberOptions) { option { value = o.value o.label } }
251. }
252. }
253. button { id = "assignsave" type = "submit" "Assign" }
254. }
255. p { id = "assignmessage" class = "message" assignMessage }
256. form { id = "parentform"
257. on submit(e) {
258. e.preventDefault()
259. emit sendParent(e)
260. }
261. label { "Parent ticket (project#number)"
262. input { id = "parentkey" name = "parent" placeholder = "e.g. ident.worldapi.org#1" autocomplete = "off" value = parentDraft on input(e) { emit setParentDraft(e.target.value) } }
263. }
264. formButtons {
265. button { id = "parentsave" type = "submit" "Set parent" }
266. if (hasParent) { button { id = "parentremove" type = "button" class = "quiet" "Remove parent" on click(e) { emit removeParent(e) } } }
267. }
268. }
269. form { id = "blockerform"
270. on submit(e) {
271. e.preventDefault()
272. emit sendBlocker(e)
273. }
274. label { "Blocked by (project#number)"
275. input { id = "blockerkey" name = "blocker" placeholder = "e.g. hybriel#12" autocomplete = "off" value = blockerDraft on input(e) { emit setBlockerDraft(e.target.value) } }
276. }
277. button { id = "blockeradd" type = "submit" "Add blocker" }
278. }
279. p { id = "linkmessage" class = "message" linkMessage }
280. } }
281. }
282. }
283. }
285. on setComment(v) { commentText = v }
286. on setEditSubject(v) { editSubject = v }
287. on setEditSummary(v) { editSummary = v }
289. on startEdit(e) {
290. editSubject = subject
291. editSummary = summary
292. editMessage = ''
293. editing = true
294. showEdit = false
295. }
296. on cancelEdit(e) {
297. editing = false
298. showEdit = canEdit
299. editMessage = ''
300. }
301. on saveEdit(e) {
302. r = emit server ticketEdit(ticketId, editSubject, editSummary)
303. if (r != null && r.error != null) {
304. editMessage = r.error
305. return null
306. }
307. editing = false
308. showEdit = canEdit
309. editMessage = ''
310. }
311. on setNewState(v) { newState = v }
312. on setAssignDraft(v) { assignDraft = v }
314. on sendAssign(e) {
315. r = emit server ticketAssign(ticketId, assignDraft)
316. if (r != null && r.error != null) { assignMessage = r.error } else { assignMessage = '' }
317. }
318. on setParentDraft(v) { parentDraft = v }
319. on setBlockerDraft(v) { blockerDraft = v }
321. // relations (ticket #4): the answer is only ok / error — the page follows the push
322. on sendParent(e) {
323. if (parentDraft.trim() == '') {
324. linkMessage = 'name the parent as project#number'
325. return null
326. }
327. r = emit server ticketSetParent(ticketId, parentDraft)
328. if (r != null && r.error != null) { linkMessage = r.error } else { linkMessage = '' parentDraft = '' }
329. }
330. on removeParent(e) {
331. r = emit server ticketSetParent(ticketId, '')
332. if (r != null && r.error != null) { linkMessage = r.error } else { linkMessage = '' }
333. }
334. on sendBlocker(e) {
335. if (blockerDraft.trim() == '') {
336. linkMessage = 'name the blocking ticket as project#number'
337. return null
338. }
339. r = emit server ticketAddBlocker(ticketId, blockerDraft)
340. if (r != null && r.error != null) { linkMessage = r.error } else { linkMessage = '' blockerDraft = '' }
341. }
342. on removeBlocker(key) {
343. r = emit server ticketRemoveBlocker(ticketId, key)
344. if (r != null && r.error != null) { linkMessage = r.error } else { linkMessage = '' }
345. }
346. on setStateNote(v) { stateNote = v }
348. on keyed(e) {
349. if (e.key == 'Enter' && (e.ctrlKey || e.metaKey)) {
350. e.preventDefault()
351. e.target.form.requestSubmit()
352. }
353. }
355. on sendComment(e) {
356. if (commentText.trim() == '') { return null }
357. r = emit server commentOn(ticketId, commentText)
358. if (r != null && r.error != null) { message = r.error } else { message = '' commentText = '' }
359. }
361. on sendState(e) {
362. r = emit server setTicketState(ticketId, newState, stateNote)
363. if (r != null && r.error != null) { message = r.error } else { message = '' stateNote = '' }
364. }
366. // ---- what the server pushes: an event on some ticket -----------------------------------
367. on client ticketEvent(evTicket, ev, changed, count) {
368. if ('' + evTicket == '' + ticketId) {
369. next = []
370. for (x of events) { next.push(x) }
371. next.push(ev)
372. events = next
373. state = changed.state
374. stateSlug = changed.stateSlug
375. updated = changed.updated
376. assignee = changed.assignee
377. hasAssignee = changed.hasAssignee
378. assignDraft = changed.assigneeId
379. rights = emit server ticketRights(ticketId)
380. takeRights(rights)
381. if (ev.isEdit == true) {
382. subject = changed.subject
383. summary = changed.summary
384. hasSummary = changed.summary != ''
385. summaryMd = ev.summaryMd
386. }
387. }
388. }
390. // relations changed (a write on this ticket or on a related one): take over this ticket's view
391. on client ticketsRelated(views) {
392. for (v of views) {
393. if ('' + v.id == '' + ticketId) {
394. hasRelations = v.hasRelations
395. hasParent = v.hasParent
396. parentRef = v.parent
397. hasChildren = v.hasChildren
398. children = v.children
399. childNote = v.childNote
400. childClass = v.childClass
401. hasBlockedBy = v.hasBlockedBy
402. blockedBy = v.blockedBy
403. hasBlocks = v.hasBlocks
404. blocks = v.blocks
405. }
406. }
407. }
409. // login / logout in the shell (this session's tabs): the forms come and go without a reload
410. // what this session's user may do on this ticket now (the face answers from their role)
411. takeRights = (r) => {
412. if (r == null || r.error != null) { return null }
413. canWrite = r.comment == true
414. mustLogIn = false
415. notMember = !canWrite
416. canEdit = r.edit == true
417. showEdit = canEdit && !editing
418. showEdit2 = canEdit
419. options = r.options
420. hasOptions = r.options.length > 0
421. memberOptions = r.members
422. newState = r.options.length > 0 ? r.options[0].value : ''
423. }
424. on client signedIn(tag, info) {
425. r = emit server ticketRights(ticketId)
426. takeRights(r)
427. }
428. on client signedOut(tag) {
429. canWrite = false
430. mustLogIn = true
431. notMember = false
432. canEdit = false
433. showEdit = false
434. showEdit2 = false
435. hasOptions = false
436. editing = false
437. }
439. // ---- the faces: the writer is the session's user (#31: a forged trailing argument is not
440. // a real session → refused) ---------------------------------------------------------------
441. on server commentOn(ticketId, text, session) {
442. w = writerOfSession(session)
443. if (w.error != null) { return { error = w.error } }
444. r = addComment('' + ticketId, w.user, text)
445. if (r.error != null) { return { error = r.error } }
446. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
447. return { ok = true }
448. }
450. on server setTicketState(ticketId, state, note, session) {
451. w = writerOfSession(session)
452. if (w.error != null) { return { error = w.error } }
453. r = changeState('' + ticketId, state, w.user, note)
454. if (r.error != null) { return { error = r.error } }
455. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
456. if (r.assignEvent != null) { emit client ticketEvent(r.ticket.id, pageEventOf(r.assignEvent), r.ticket) }
457. emit client ticketsRelated(relatedViews(r.ticket.id, []))
458. return { ok = true }
459. }
461. // ticket #20: assign the ticket to a member ('' = nobody); the store wants the role edit or admin
462. on server ticketAssign(ticketId, userId, session) {
463. w = writerOfSession(session)
464. if (w.error != null) { return { error = w.error } }
465. if (hlTypeName(userId) != 'String') { return { error = 'the assignee must be text' } }
466. r = assignTicket('' + ticketId, w.user, userId)
467. if (r.error != null) { return { error = r.error } }
468. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
469. return { ok = true }
470. }
472. // ticket #8: the author edits subject + summary (the store refuses anyone else)
473. on server ticketEdit(ticketId, subject, summary, session) {
474. w = writerOfSession(session)
475. if (w.error != null) { return { error = w.error } }
476. if (hlTypeName(subject) != 'String' || hlTypeName(summary) != 'String') { return { error = 'subject and summary must be text' } }
477. r = editTicket('' + ticketId, w.user, subject, summary)
478. if (r.error != null) { return { error = r.error } }
479. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
480. emit client ticketsRelated(relatedViews(r.ticket.id, []))
481. return { ok = true }
482. }
484. // ticket #4: relations — the store refuses a user who may not (author of either ticket / creator)
485. on server ticketSetParent(ticketId, key, session) {
486. w = writerOfSession(session)
487. if (w.error != null) { return { error = w.error } }
488. if (hlTypeName(key) != 'String') { return { error = 'the parent must be text' } }
489. r = setParent('' + ticketId, w.user, key)
490. if (r.error != null) { return { error = r.error } }
491. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
492. emit client ticketsRelated(r.related)
493. return { ok = true }
494. }
495. on server ticketAddBlocker(ticketId, key, session) {
496. w = writerOfSession(session)
497. if (w.error != null) { return { error = w.error } }
498. if (hlTypeName(key) != 'String') { return { error = 'the blocker must be text' } }
499. r = changeBlocker('' + ticketId, w.user, key, true, 'add')
500. if (r.error != null) { return { error = r.error } }
501. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
502. emit client ticketsRelated(r.related)
503. return { ok = true }
504. }
505. on server ticketRemoveBlocker(ticketId, key, session) {
506. w = writerOfSession(session)
507. if (w.error != null) { return { error = w.error } }
508. if (hlTypeName(key) != 'String') { return { error = 'the blocker must be text' } }
509. r = changeBlocker('' + ticketId, w.user, key, false, 'remove')
510. if (r.error != null) { return { error = r.error } }
511. emit client ticketEvent(r.ticket.id, pageEventOf(r.event), r.ticket)
512. emit client ticketsRelated(r.related)
513. return { ok = true }
514. }
516. // what the session's user may do on this ticket: comment (a member), edit / assign (edit, admin), the states
517. // they may move it to, and the members it can be assigned to
518. on server ticketRights(ticketId, session) {
519. u = userOfSession(session)
520. if (u == null) { return { error = 'log in first' } }
521. t = ticketRecord('' + ticketId)
522. if (t == null) { return { error = 'no such ticket' } }
523. return ticketRights(t, u)
524. }