issue-pane 2.4.10 → 2.4.11-4fce62b6

package/.eslintrc

@@ -1,10 +1,10 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es6": true,
     "node": true
   },
-  "extends": "standard",
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
@@ -14,5 +14,6 @@
       "argsIgnorePattern": "^_",
       "varsIgnorePattern": "^_"
     }]
-  }
+  },
+  "extends": ["eslint:recommended", "plugin:import/recommended"]
 }

package/.github/workflows/ci.yml

@@ -15,7 +15,6 @@ jobs:
     strategy:
       matrix:
        node-version:
-          - 12.x
           - 14.x
           - 16.x
     steps:

package/.nvmrc

@@ -1 +1 @@
-v12.7.0
+v16.14.0

package/board.js

@@ -10,10 +10,9 @@
  * @returns dom:Element
 */
 
-import * as UI from 'solid-ui'
+import { ns, rdf, utils, widgets } from 'solid-ui'
 import { store } from 'solid-logic'
-const ns = UI.ns
-const $rdf = UI.rdf
+const $rdf = rdf
 
 export function board (dom, columnValues, renderItem, options) {
   const board = dom.createElement('div')
@@ -27,7 +26,7 @@ export function board (dom, columnValues, renderItem, options) {
   const mainRow = table.appendChild(dom.createElement('tr'))
   columnValues.forEach(x => {
     const cell = headerRow.appendChild(dom.createElement('th'))
-    cell.textContent = UI.utils.label(x, true) // Initial capital
+    cell.textContent = utils.label(x, true) // Initial capital
     cell.subject = x
     cell.style = 'margin: 0.3em; padding: 0.5em 1em; font-treatment: bold; font-size: 120%;'
 
@@ -44,7 +43,7 @@ export function board (dom, columnValues, renderItem, options) {
     }
 
     if (options.columnDropHandler) {
-      UI.widgets.makeDropTarget(column, droppedURIHandler)
+      widgets.makeDropTarget(column, droppedURIHandler)
     }
   })
 
@@ -57,7 +56,7 @@ export function board (dom, columnValues, renderItem, options) {
     const classes = store.each(item, ns.rdf('type'))
     const catColors = classes.map(cat => store.any(cat, ns.ui('backgroundColor'))).filter(c => c)
 
-    table.appendChild(UI.widgets.personTR(dom, null, item))
+    table.appendChild(widgets.personTR(dom, null, item))
     table.subject = item
     table.style = 'margin: 1em;' // @@ use style.js
     const backgroundColor = catColors[0] || store.any(category, ns.ui('backgroundColor'))
@@ -76,7 +75,7 @@ export function board (dom, columnValues, renderItem, options) {
     const actualRenderItem = renderItem || options.renderItem || defaultRenderItem
     function localRenderItem (subject) {
       const ele = actualRenderItem(subject)
-      UI.widgets.makeDraggable(ele, subject)
+      widgets.makeDraggable(ele, subject)
       ele.subject = subject
       return ele
     }
@@ -88,7 +87,7 @@ export function board (dom, columnValues, renderItem, options) {
         items = items.filter(options.filter)
       }
       const sortedItems = sortedBy(items, sortBy, now, true)
-      UI.utils.syncTableToArrayReOrdered(col, sortedItems, localRenderItem)
+      utils.syncTableToArrayReOrdered(col, sortedItems, localRenderItem)
     }
   }
 

package/issue.js

@@ -5,20 +5,33 @@ import { authn, store } from 'solid-logic'
 import { newIssueForm } from './newIssue'
 
 const $rdf = rdf
+const kb = store
 
 const SET_MODIFIED_DATES = false
 
+export const TASK_ICON = icons.iconBase + 'noun_17020_gray-tick.svg'
+export const OPEN_TASK_ICON = icons.iconBase + 'noun_17020_sans-tick.svg'
+export const CLOSED_TASK_ICON = icons.iconBase + 'noun_17020.svg'
+
 function complain (message, context) {
   console.warn(message)
   context.paneDiv.appendChild(widgets.errorMessageBlock(context.dom, message))
 }
 
+export function isOpen (issue) {
+  const types = kb.findTypeURIs(issue)
+  return !!types[ns.wf('Open').uri]
+}
+
+export function iconForIssue (issue) {
+  return isOpen(issue) ? TASK_ICON : CLOSED_TASK_ICON
+}
 export function getState (issue, classification) {
-  const tracker = store.the(issue, ns.wf('tracker'), null, issue.doc())
-  const states = store.any(tracker, ns.wf('issueClass'))
+  const tracker = kb.the(issue, ns.wf('tracker'), null, issue.doc())
+  const states = kb.any(tracker, ns.wf('issueClass'))
   classification = classification || states
-  const types = store.each(issue, ns.rdf('type'))
-    .filter(ty => store.holds(ty, ns.rdfs('subClassOf'), classification))
+  const types = kb.each(issue, ns.rdf('type'))
+    .filter(ty => kb.holds(ty, ns.rdfs('subClassOf'), classification))
   if (types.length !== 1) {
     // const initialState = kb.any(tracker, ns.wf('initialState')) No do NOT default
     // if (initialState) return initialState
@@ -27,26 +40,27 @@ export function getState (issue, classification) {
   return types[0]
 }
 
-export function renderIssueCard (issue, context) {
-  function getBackgroundColor () {
-    const classes = store.each(issue, ns.rdf('type')) // @@ pick cats in order then state
-    const catColors = classes.map(cat => store.any(cat, ns.ui('backgroundColor'))).filter(c => !!c)
+export function getBackgroundColorFromTypes (issue) {
+  const classes = kb.each(issue, ns.rdf('type')) // @@ pick cats in order then state
+  const catColors = classes.map(cat => kb.any(cat, ns.ui('backgroundColor'))).filter(c => !!c)
 
-    if (catColors.length) return catColors[0].value // pick first one
-    return null
-  }
+  if (catColors.length) return catColors[0].value // pick first one
+  return null
+}
+
+export function renderIssueCard (issue, context) {
   function refresh () {
-    const backgroundColor = getBackgroundColor() || 'white'
+    const backgroundColor = getBackgroundColorFromTypes(issue) || 'white'
     card.style.backgroundColor = backgroundColor
     editButton.style.backgroundColor = backgroundColor // Override white from style sheet
   }
   const dom = context.dom
-  const uncategorized = !getBackgroundColor() // This is a suspect issue. Prompt to delete it
+  const uncategorized = !getBackgroundColorFromTypes(issue) // This is a suspect issue. Prompt to delete it
 
   const card = dom.createElement('div')
   const table = card.appendChild(dom.createElement('table'))
   table.style.width = '100%'
-  const options = { draggable: false } // Let the baord make th ewhole card draggable
+  const options = { draggable: false } // Let the board make the whole card draggable
   table.appendChild(widgets.personTR(dom, null, issue, options))
   table.subject = issue
   card.style = 'border-radius: 0.4em; border: 0.05em solid grey; margin: 0.3em;'
@@ -66,7 +80,7 @@ export function renderIssueCard (issue, context) {
   if (uncategorized) {
     const deleteButton = widgets.deleteButtonWithCheck(dom, buttonsCell, 'issue', async function () { // noun?
       try {
-        await store.updater.update(store.connectedStatements(issue))
+        await kb.updater.update(kb.connectedStatements(issue))
       } catch (err) {
         complain(`Unable to delete issue: ${err}`, context)
       }
@@ -100,18 +114,24 @@ export function exposeOverlay (subject, context) {
   overlay.firstChild.style.overflow = 'auto' // was scroll
 }
 
+function renderSpacer (dom, backgroundColor) {
+  const spacer = dom.createElement('div')
+  spacer.setAttribute('style', 'height: 1em; margin: 0.5em;') // spacer and placeHolder
+  spacer.style.backgroundColor = backgroundColor // try that
+  return spacer
+}
+
 export function renderIssue (issue, context) {
   // Don't bother changing the last modified dates of things: save time
-  function setModifiedDate (subj, store, doc) {
+  function setModifiedDate (subj, kb, doc) {
     if (SET_MODIFIED_DATES) {
       if (!getOption(tracker, 'trackLastModified')) return
-      let deletions = store.statementsMatching(issue, ns.dct('modified'))
-      deletions = deletions.concat(
-        store.statementsMatching(issue, ns.wf('modifiedBy'))
-      )
+      const deletions = kb.statementsMatching(issue, ns.dct('modified'))
+        .concat(kb.statementsMatching(issue, ns.wf('modifiedBy'))
+        )
       const insertions = [$rdf.st(issue, ns.dct('modified'), new Date(), doc)]
       if (me) insertions.push($rdf.st(issue, ns.wf('modifiedBy'), me, doc))
-      store.updater.update(deletions, insertions, function (_uri, _ok, _body) {})
+      kb.updater.update(deletions, insertions, function (_uri, _ok, _body) {})
     }
   }
 
@@ -123,7 +143,7 @@ export function renderIssue (issue, context) {
     return pre
   }
 
-  const timestring = function () {
+  function timestring () {
     const now = new Date()
     return '' + now.getTime()
     // http://www.w3schools.com/jsref/jsref_obj_date.asp
@@ -144,52 +164,50 @@ export function renderIssue (issue, context) {
   }
   function getOption (tracker, option) {
     // eg 'allowSubIssues'
-    const opt = store.any(tracker, ns.ui(option))
+    const opt = kb.any(tracker, ns.ui(option))
     return !!(opt && opt.value)
   }
 
   function setPaneStyle () {
-    const types = store.findTypeURIs(issue)
-    let mystyle = 'padding: 0.5em 1.5em 1em 1.5em; '
-    let backgroundColor = null
-    for (const uri in types) {
-      backgroundColor = store.any(
-        store.sym(uri),
-        store.sym('http://www.w3.org/ns/ui#backgroundColor')
-      )
-      if (backgroundColor) break
-    }
-    backgroundColor = backgroundColor ? backgroundColor.value : '#eee' // default grey
-    mystyle += 'background-color: ' + backgroundColor + '; '
+    const backgroundColor = getBackgroundColorFromTypes(issue) || '#eee' // default grey
+    const mystyle0 = 'padding: 0.5em 1.5em 1em 1.5em; border: 0.7em;'
+    const mystyle = mystyle0 + 'border-color: ' + backgroundColor + '; '
     issueDiv.setAttribute('style', mystyle)
+    issueDiv.style.backgroundColor = 'white'
   }
 
+  /// ////////////// Body of renderIssue
+
   const dom = context.dom
   // eslint-disable-next-line no-use-before-define
-  const tracker = store.the(issue, ns.wf('tracker'), null, issue.doc())
+  const tracker = kb.the(issue, ns.wf('tracker'), null, issue.doc())
   if (!tracker) throw new Error('No tracker')
   // eslint-disable-next-line no-use-before-define
-  const stateStore = store.any(tracker, ns.wf('stateStore'))
+  const stateStore = kb.any(tracker, ns.wf('stateStore'))
   const store = issue.doc()
 
   const issueDiv = dom.createElement('div')
   const me = authn.currentUser()
+  const backgroundColor = getBackgroundColorFromTypes(issue) || 'white'
 
   setPaneStyle()
 
   authn.checkUser() // kick off async operation
 
-  const states = store.any(tracker, ns.wf('issueClass'))
+  const iconButton = issueDiv.appendChild(widgets.button(dom, iconForIssue(issue)))
+  widgets.makeDraggable(iconButton, issue) // Drag me wherever you need to do stuff with this issue
+
+  const states = kb.any(tracker, ns.wf('issueClass'))
   if (!states) { throw new Error('This tracker ' + tracker + ' has no issueClass') }
   const select = widgets.makeSelectForCategory(
     dom,
-    store,
+    kb,
     issue,
     states,
     stateStore,
     function (ok, body) {
       if (ok) {
-        setModifiedDate(store, store, store)
+        setModifiedDate(store, kb, store)
         widgets.refreshTree(issueDiv)
       } else {
         console.log('Failed to change state:\n' + body)
@@ -198,18 +216,18 @@ export function renderIssue (issue, context) {
   )
   issueDiv.appendChild(select)
 
-  const cats = store.each(tracker, ns.wf('issueCategory')) // zero or more
-  for (let i = 0; i < cats.length; i++) {
+  const cats = kb.each(tracker, ns.wf('issueCategory')) // zero or more
+  for (const cat of cats) {
     issueDiv.appendChild(
       widgets.makeSelectForCategory(
         dom,
-        store,
+        kb,
         issue,
-        cats[i],
+        cat,
         stateStore,
         function (ok, body) {
           if (ok) {
-            setModifiedDate(store, store, store)
+            setModifiedDate(store, kb, store)
             widgets.refreshTree(issueDiv)
           } else {
             console.log('Failed to change category:\n' + body)
@@ -253,40 +271,26 @@ export function renderIssue (issue, context) {
     wf:Task     :creationForm core:coreIsueForm .
 `
   const CORE_ISSUE_FORM = ns.wf('coreIsueForm')
-  $rdf.parse(coreIssueFormText, store, CORE_ISSUE_FORM.doc().uri, 'text/turtle')
-  widgets.appendForm(
+  $rdf.parse(coreIssueFormText, kb, CORE_ISSUE_FORM.doc().uri, 'text/turtle')
+  const form = widgets.appendForm(
     dom,
-    issueDiv,
+    null, // was: container
     {},
     issue,
     CORE_ISSUE_FORM,
     stateStore,
     complainIfBad
   )
-
-  // Descriptions can be long and are stored local to the issue
-  /*
-  issueDiv.appendChild(
-    widgets.makeDescription(
-      dom,
-      kb,
-      issue,
-      ns.wf('description'),
-      store,
-      function (ok, body) {
-        if (ok) setModifiedDate(store, kb, store)
-        else console.log('Failed to change description:\n' + body)
-      }
-    )
-  ) */
+  issueDiv.appendChild(form)
+  form.style.backgroundColor = backgroundColor
 
   // Assigned to whom?
 
-  const assignments = store.statementsMatching(issue, ns.wf('assignee'))
+  const assignments = kb.statementsMatching(issue, ns.wf('assignee'))
   if (assignments.length > 1) {
     say('Weird, was assigned to more than one person. Fixing ..')
     const deletions = assignments.slice(1)
-    store.updater.update(deletions, [], function (uri, ok, body) {
+    kb.updater.update(deletions, [], function (uri, ok, body) {
       if (ok) {
         say('Now fixed.')
       } else {
@@ -299,20 +303,16 @@ export function renderIssue (issue, context) {
   // Anyone assigned to any issue we know about
 
   async function getPossibleAssignees () {
-    let devs = []
-    const devGroups = store.each(issue, ns.wf('assigneeGroup'))
-    for (let i = 0; i < devGroups.length; i++) {
-      const group = devGroups[i]
-      await store.fetcher.load()
-      devs = devs.concat(store.each(group, ns.vcard('member')))
-    }
+    const devGroups = kb.each(issue, ns.wf('assigneeGroup'))
+    await kb.fetcher.load(devGroups) // Load them all
+    const groupDevs = devGroups.map(group => kb.each(group, ns.vcard('member'), null, group.doc())).flat()
     // Anyone who is a developer of any project which uses this tracker
-    const proj = store.any(null, ns.doap('bug-database'), tracker) // What project?
+    const proj = kb.any(null, ns.doap('bug-database'), tracker) // What project?
     if (proj) {
-      await store.fetcher.load(proj)
-      devs = devs.concat(store.each(proj, ns.doap('developer')))
+      await kb.fetcher.load(proj)
     }
-    return devs
+    const projectDevs = proj ? kb.each(proj, ns.doap('developer')) : []
+    return groupDevs.concat(projectDevs)
   }
 
   // Super issues first - like parent directories .. maybe use breadcrums from?? @@
@@ -324,7 +324,7 @@ export function renderIssue (issue, context) {
   getPossibleAssignees().then(devs => {
     if (devs.length) {
       devs.forEach(function (person) {
-        store.fetcher.lookUpThing(person)
+        kb.fetcher.lookUpThing(person)
       }) // best effort async for names etc
       const opts = {
         // 'mint': '** Add new person **',
@@ -339,14 +339,14 @@ export function renderIssue (issue, context) {
       issueDiv.appendChild(
         widgets.makeSelectForOptions(
           dom,
-          store,
+          kb,
           issue,
           ns.wf('assignee'),
           devs,
           opts,
           store,
           function (ok, body) {
-            if (ok) setModifiedDate(store, store, store)
+            if (ok) setModifiedDate(store, kb, store)
             else console.log('Failed to change assignee:\n' + body)
           }
         )
@@ -354,27 +354,36 @@ export function renderIssue (issue, context) {
     }
   })
 
-  /*  The trees of super issues and subissues
+  /*  The trees of super-issues and sub-issues
   */
-  let subIssuePanel
+  function supersOver (issue, stack) {
+    stack = stack || []
+    const sup = kb.any(null, ns.wf('dependent'), issue, issue.doc())
+    if (sup) return supersOver(sup, [sup].concat(stack))
+    return stack
+  }
   if (getOption(tracker, 'allowSubIssues')) {
-    if (!subIssuePanel) {
-      subIssuePanel = issueDiv.appendChild(dom.createElement('div'))
-      subIssuePanel.style = 'margin: 1em; padding: 1em;'
-    }
+    const subIssuePanel = issueDiv.appendChild(dom.createElement('div'))
+    subIssuePanel.style = 'margin: 1em; padding: 1em;'
 
     subIssuePanel.appendChild(dom.createElement('h4')).textContent = 'Super Issues'
     const listOfSupers = subIssuePanel.appendChild(dom.createElement('div'))
+    listOfSupers.style.display = 'flex'
     listOfSupers.refresh = function () {
-      utils.syncTableToArrayReOrdered(listOfSupers, store.each(null, ns.wf('dependent'), issue), renderSubIssue)
+      // const supers = kb.each(null, ns.wf('dependent'), issue, issue.doc())
+      const supers = supersOver(issue)
+      utils.syncTableToArrayReOrdered(listOfSupers, supers, renderSubIssue)
     }
     listOfSupers.refresh()
 
     // Sub issues
     subIssuePanel.appendChild(dom.createElement('h4')).textContent = 'Sub Issues'
     const listOfSubs = subIssuePanel.appendChild(dom.createElement('div'))
+    listOfSubs.style.display = 'flex'
+    listOfSubs.style.flexDirection = 'reverse' // Or center
     listOfSubs.refresh = function () {
-      utils.syncTableToArrayReOrdered(listOfSubs, store.each(issue, ns.wf('dependent')), renderSubIssue)
+      const subs = kb.each(issue, ns.wf('dependent'), null, issue.doc())
+      utils.syncTableToArrayReOrdered(listOfSubs, subs, renderSubIssue)
     }
     listOfSubs.refresh()
 
@@ -387,7 +396,7 @@ export function renderIssue (issue, context) {
     b.addEventListener(
       'click',
       function (_event) {
-        subIssuePanel.insertBefore(newIssueForm(dom, store, tracker, issue, listOfSubs.refresh), b.nextSibling) // Pop form just after button
+        subIssuePanel.insertBefore(newIssueForm(dom, kb, tracker, issue, listOfSubs.refresh), b.nextSibling) // Pop form just after button
       },
       false
     )
@@ -396,7 +405,7 @@ export function renderIssue (issue, context) {
   issueDiv.appendChild(dom.createElement('br'))
 
   // Extras are stored centrally to the tracker
-  const extrasForm = store.any(tracker, ns.wf('extrasEntryForm'))
+  const extrasForm = kb.any(tracker, ns.wf('extrasEntryForm'))
   if (extrasForm) {
     widgets.appendForm(
       dom,
@@ -407,14 +416,14 @@ export function renderIssue (issue, context) {
       stateStore,
       complainIfBad
     )
+    // issueDiv.appendChild(renderSpacer(backgroundColor))
   }
 
   //   Comment/discussion area
 
-  const spacer = issueDiv.appendChild(dom.createElement('tr'))
-  spacer.setAttribute('style', 'height: 1em') // spacer and placeHolder
+  const spacer = issueDiv.appendChild(renderSpacer(dom, backgroundColor))
 
-  const template = store.anyValue(tracker, ns.wf('issueURITemplate'))
+  const template = kb.anyValue(tracker, ns.wf('issueURITemplate'))
   /*
   var chatDocURITemplate = kb.anyValue(tracker, ns.wf('chatDocURITemplate')) // relaive to issue
   var chat
@@ -427,20 +436,21 @@ export function renderIssue (issue, context) {
   if (template) {
     messageStore = issue.doc() // for now. Could go deeper
   } else {
-    messageStore = store.any(tracker, ns.wf('messageStore'))
-    if (!messageStore) messageStore = store.any(tracker, ns.wf('stateStore'))
-    store.sym(messageStore.uri + '#' + 'Chat' + timestring()) // var chat =
+    messageStore = kb.any(tracker, ns.wf('messageStore'))
+    if (!messageStore) messageStore = kb.any(tracker, ns.wf('stateStore'))
+    kb.sym(messageStore.uri + '#' + 'Chat' + timestring()) // var chat =
   }
 
-  store.fetcher.nowOrWhenFetched(messageStore, function (ok, body, _xhr) {
+  kb.fetcher.nowOrWhenFetched(messageStore, function (ok, body, _xhr) {
     if (!ok) {
       const er = dom.createElement('p')
       er.textContent = body // @@ use nice error message
       issueDiv.insertBefore(er, spacer)
     } else {
-      const discussion = messageArea(dom, store, issue, messageStore)
+      const discussion = messageArea(dom, kb, issue, messageStore)
       issueDiv.insertBefore(discussion, spacer)
-    }
+      issueDiv.insertBefore(renderSpacer(dom, backgroundColor), discussion)
+    } // Not sure why  e stuck this in upwards rather than downwards
   })
 
   // Draggable attachment list
@@ -448,23 +458,22 @@ export function renderIssue (issue, context) {
   attachmentHint.innerHTML = `<h4>Attachments</h4>
     <p>Drag files, emails,
     web pages onto the paper clip, or click the file upload button.</p>`
-  let uploadFolderURI
-  if (issue.uri.endsWith('/index.ttl#this')) { // This has a whole folder to itself
-    uploadFolderURI = issue.uri.slice(0, 14) + 'Files/' // back to slash
-  } else { // like state.ttl#Iss1587852322438
-    uploadFolderURI = issue.dir().uri + 'Files/' + issue.uri.split('#')[1] + '/' // New folder for issue in file with others
-  }
+  const uploadFolderURI =
+     issue.uri.endsWith('/index.ttl#this') // This has a whole folder to itself
+       ? issue.uri.slice(0, 14) + 'Files/' // back to slash
+       : issue.dir().uri + 'Files/' + issue.uri.split('#')[1] + '/' // New folder for issue in file with others
+
   widgets.attachmentList(dom, issue, issueDiv, {
     doc: stateStore,
     promptIcon: icons.iconBase + 'noun_25830.svg',
-    uploadFolder: store.sym(uploadFolderURI), // Allow local files to be uploaded
+    uploadFolder: kb.sym(uploadFolderURI), // Allow local files to be uploaded
     predicate: ns.wf('attachment')
   })
 
   // Delete button to delete the issue
   const deleteButton = widgets.deleteButtonWithCheck(dom, issueDiv, 'issue', async function () {
     try {
-      await store.updater.update(store.connectedStatements(issue))
+      await kb.updater.update(kb.connectedStatements(issue))
     } catch (err) {
       complain(`Unable to delete issue: ${err}`, context)
     }
@@ -482,7 +491,7 @@ export function renderIssue (issue, context) {
     'click',
     async function (_event) {
       try {
-        await store.fetcher.load(messageStore, { force: true, clearPreviousData: true })
+        await kb.fetcher.load(messageStore, { force: true, clearPreviousData: true })
       } catch (err) {
         alert(err)
         return