Merge pull request #67 from SolidOS/csv

Add a button to copy a Comma Separated Variables version of the tracker

Author: bourgeoa

Makefile

@@ -1,6 +1,8 @@
 # Wrap TTL files into JS files for bundling with library
 
-,all : wf.js trackerSettingsForm.js trackerInstancesForm.js ui.js
+# unused:  trackerInstancesForm.js
+
+,all : wf.js trackerSettingsForm.js  ui.js
 
 #individualForm.js : individualForm.ttl
 #				(echo 'module.exports = `' ; cat individualForm.ttl; echo '`') >  individualForm.js

csvButton.js

@@ -0,0 +1,135 @@
+// A Button to copy the state of the tracker in CSV format
+// Comma-separated Values
+//
+// Yes this mixes the layers but that is not all bad if it gets it in one file
+// one can look at 
+
+import { icons, ns, utils, widgets } from 'solid-ui'
+import { store } from 'solid-logic'
+
+export function quoteString(value) {
+  // https://www.rfc-editor.org/rfc/rfc4180
+  const stripped = value.replaceAll('\n', ' ')
+  if (!stripped.includes(',')) {
+    return stripped
+  }  // If contains comma then put in quotes and double up internal quotes
+  const quoted = '"' + stripped.replaceAll('"', '""') + '"'
+  console.log('Quoted:  >>>' + quoted + '<<<')
+  const check  = quoted.slice(1,-1).replaceAll('""', '') 
+  if (check.includes('"')) throw new Error('CSV inconsistecy')
+  return quoted
+}
+
+export function csvText(store, tracker)  {
+
+  function columnText(task, column) {
+    let thing
+    if (column.predicate)  {
+      thing = store.any(task, column.predicate)
+      return thing? thing.value : '--'
+    }
+    else if (column.category)  {
+      const types = store.each(task, ns.rdf('type'))
+      for (const t of types) {
+        // console.log('@@ checking subclass type: ', t, ' category: ', column.category )
+        if (store.holds(t, ns.rdfs('subClassOf'), column.category)){
+          thing = t
+        }
+      }
+      if (!thing) return '?' + utils.label(column.category) // Missing cat OK
+      // if (!thing) throw new Error('wot no class of category ', column.category)
+    } else {
+      throw new Error('wot no pred or cat', column)
+    }
+    return utils.label(thing)
+  }
+
+  function taskLine(task) {
+    return columns.map(column => columnText(task, column))
+        .map(quoteString)
+        .join(',')
+            + '\n'
+  }
+  const stateStore = store.any(tracker, ns.wf('stateStore'))
+  const tasks = store.each(null, ns.wf('tracker'), tracker, stateStore)
+  console.log('  CSV: Tasks:', tasks.length)
+
+  const columns = [
+    
+    { label: 'Name',  predicate: ns.dc('title')  },
+  /*  { label: 'Description',  predicate: ns.wf('description')  }, */
+
+/*    { label: 'State', category: ns.wf('Task') }
+      */
+] 
+  const states = store.any(tracker, ns.wf('issueClass')) // Main states are subclasses of this class
+  console.log('  CSV: States - main superclass:', states)
+  const stateColumn = { label: 'State', category: states} // better than  'task'
+  console.log('  CSV: found column from state', stateColumn)
+  columns.push(stateColumn) 
+
+  const categories = store.each(tracker, ns.wf('issueCategory'))
+  console.log('  CSV: Categories : ', categories )
+  console.log('  CSV: Categories : length: ', categories.length)
+  console.log('  CSV: Categories : first: ', categories[0])
+
+  const classifications = categories
+  for (const c of classifications){
+    const column = { label: utils.label(c), category: c}
+    console.log('  CSV: found column from classifications', column)
+    columns.push(column) // Classes are different
+  }
+
+  // const propertyList = ns.wf('propertyList')
+  const form = store.any(tracker, ns.wf('extrasEntryForm'), null, null)
+  console.log('  CSV: Form : ', form )
+
+  if (form) {
+    const parts = store.any(form, ns.ui('parts'), null, form.doc())
+    console.log('  CSV: parts : ', parts )
+
+    const fields = parts.elements
+    console.log('  CSV: fields : ', fields )
+
+    for (const field of fields) {
+      const prop = store.any(field,ns.ui('property'))
+      if (prop) {
+        const lab = utils.label(prop)
+        const column = {label: lab, predicate: prop}
+        console.log('  CSV: found column from form', column)
+        columns.push(column)  
+      }
+    }
+  }
+  // Put description  on the end as it can be long
+  columns.push({ label: 'Description',  predicate: ns.wf('description') })
+  console.log('Columns: ', columns.length)
+  const header = columns.map(col => col.label).join(',') + '\n'
+  console.log('CSV: Header= ', header)
+  // Order tasks?? By Creation date? By Status?
+  const body = tasks.map(taskLine).join('')
+  return header + body
+}
+
+export function csvButton (dom, tracker) {
+  const wrapper = dom.createElement('div')
+  // Add a button
+  const button = widgets.button(dom, icons.iconBase + 'noun_Document_998605.svg',
+    'Copy as CSV', async _event => {
+
+      const div = button.parentNode.parentNode
+      console.log('button gparent div', div)
+      div.addEventListener('copy', event => {
+          // alert ('Copy caught');
+          const csv = csvText(store, tracker);
+          event.clipboardData.setData("text/plain", csv);
+          event.clipboardData.setData("text/csv", csv);
+          alert ('Copy data: ' + csv)
+          event.preventDefault();
+      })
+    })
+
+  wrapper.appendChild(button)
+  return wrapper
+}
+

dev/context.js

@@ -0,0 +1,18 @@
+import { DataBrowserContext, PaneRegistry } from "pane-registry";
+import { LiveStore, solidLogicSingleton, store } from "solid-logic";
+
+export const context = {
+  session: {
+    store: store,
+    paneRegistry: {
+      byName: (name) => {
+        return // longChatPane
+      }
+    },
+    logic : solidLogicSingleton
+  },
+  dom: document,
+  getOutliner: () => null,
+};
+
+export const fetcher = store.fetcher;

dev/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>issue-pane dev server</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: sans-serif;
+        }
+        h1 {
+            padding: 0.5rem;
+            margin: 0;
+            color: #666;
+        }
+        #loginBanner {
+            display: grid;
+            padding: 0.5rem;
+            grid-gap: 1rem;
+            grid-auto-flow: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        .banner {
+            margin: 0;
+            height: 1rem;
+            width: 100%;
+            background: repeating-linear-gradient(
+                    -45deg,
+                    #ffffff,
+                    #d8d9d5 20px,
+                    #d41717 20px,
+                    #984646 40px
+            );
+        }
+    </style>
+</head>
+<body>
+<h1>pane under development</h1>
+<div>
+    <div id="webId"></div>
+  </div>
+<div id="loginBanner"></div>
+<div class="banner"></div>
+<div id="app">Rendering...</div>
+</body>
+</html>

dev/index.js

@@ -0,0 +1,42 @@
+import { sym } from "rdflib";
+import { default as pane } from "..";
+import { context, fetcher } from "./context";
+import { authn, authSession } from "solid-logic";
+import * as UI from "solid-ui";
+
+const loginBanner = document.getElementById("loginBanner");
+const webId = document.getElementById("webId");
+
+loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}));
+
+async function finishLogin() {
+  await authSession.handleIncomingRedirect();
+  const session = authSession;
+  if (session.info.isLoggedIn) {
+    // Update the page with the status.
+    webId.innerHTML = "Logged in as: " + authn.currentUser().uri;
+  } else {
+    webId.innerHTML = "";
+  }
+}
+
+finishLogin();
+
+
+// https://testingsolidos.solidcommunity.net/profile/card#me
+// https://timbl.solidcommunity.net/profile/card#me
+//
+// const targetURIToShow = "https://angelo.veltens.org/profile/card#me";
+// const targetURIToShow = "https://testingsolidos.solidcommunity.net/profile/card#me";
+// const targetURIToShow = "https://timbl.solidcommunity.net/profile/card#me";
+
+// const targetURIToShow = "https://solidproject.solidcommunity.net/Roadmap/index.ttl#this";
+
+// const targetURIToShow = "https://timbl.com/timbl/Automation/mother/tracker.n3#mother"
+
+const targetURIToShow = "http://localhost:8080/big-tracker.ttl#this"
+
+fetcher.load(targetURIToShow).then(() => {
+  const app = pane.render(sym(targetURIToShow), context);
+  document.getElementById("app").replaceWith(app);
+});