folder list on new dataset page

4 files changed, 86 insertions, 1 deletions

diff --git a/app/client/common/folderList.component.js b/app/client/common/folderList.component.js
new file mode 100644
index 0000000..13ef398
--- /dev/null
+++ b/app/client/common/folderList.component.js
@@ -0,0 +1,44 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import util from '../util'
+
+import Group from './group.component'
+import Param from './param.component'
+import Loading from './loading.component'
+
+export default function FolderList ({ db, path, emptyText }) {
+  if (! db) return null
+  if (db.loading || !db.data) {
+    return (
+      <div class='col folderList'>
+        <Loading progress={db.progress} />
+      </div>
+    )
+  } else if (! db.data.folders.length && emptyText) {
+    return (
+      <div class='col folderList'>
+        {emptyText}
+      </div>
+    )
+  }
+  console.log(db.data.folders)
+  const folders = db.data.folders.map(folder => {
+    const datasetCount = folder.datasets ? folder.datasets.length : 0
+    const [ className, size ] = util.hush_null(datasetCount)
+    return (
+      <Param title={<Link to={path + folder.id + '/'}>{folder.name}</Link>}>
+        <span className={className}>{datasetCount} dataset{util.courtesy_s(datasetCount)}</span>
+      </Param>
+    )
+  })
+
+  return (
+    <div class='col folderList'>
+      <Group title='Projects'>
+        {folders}
+      </Group>
+    </div>
+  )
+}
diff --git a/app/client/common/index.js b/app/client/common/index.js
index de3e5b4..471bdd3 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -1,6 +1,7 @@
 import Button from './button.component'
 import { FileList, FileRow } from './fileList.component'
 import FileUpload from './fileUpload.component'
+import FolderList from './folderList.component'
 import Gallery from './gallery.component'
 import Group from './group.component'
 import Header from './header.component'
@@ -12,10 +13,12 @@ import Progress from './progress.component'
 import Select from './select.component'
 import Slider from './slider.component'
 import TextInput from './textInput.component'
+import * as Views from './views'
 
 export {
+  Views,
   Loading, Progress, Header,
-  FileList, FileRow, FileUpload,
+  FolderList, FileList, FileRow, FileUpload,
   Gallery, Player,
   Group, ParamGroup, Param,
   TextInput, Slider, Select, Button,
diff --git a/app/client/common/views/index.js b/app/client/common/views/index.js
new file mode 100644
index 0000000..e7f7386
--- /dev/null
+++ b/app/client/common/views/index.js
@@ -0,0 +1,3 @@
+import NewView from './new.view.js'
+
+export const New = NewView
diff --git a/app/client/common/views/new.view.js b/app/client/common/views/new.view.js
new file mode 100644
index 0000000..93ac3d5
--- /dev/null
+++ b/app/client/common/views/new.view.js
@@ -0,0 +1,35 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import util from '../../util'
+
+import Group from '../group.component'
+import Param from '../param.component'
+import Loading from '../loading.component'
+import FolderList from '../folderList.component'
+
+import NewDatasetForm from '../../dataset/dataset.new'
+
+export default class NewView extends Component {
+  constructor(props){
+    super(props)
+    console.log(props)
+    if (! props.db.data) {
+      props.actions.load_directories()
+    }
+  }
+  render(){
+    const { module, history, db, path } = this.props
+    return (
+      <div class={'app ' + module.name}>
+        <h1>&nbsp;{module.displayName || module.name}</h1>
+        <br/>
+        <div class='col narrow'>
+          <NewDatasetForm module={module} history={history} />
+          <FolderList db={db} path={path} emptyText={<i>No projects yet. Please create one~</i>} />
+        </div>
+      </div>
+    )
+  }
+}