tickets

20.7 KB

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