UI improvements and add filters reducer

packages/component-wizard/src/components/WizardStep.js

@@ -5,7 +5,6 @@ import { ValidatedField, Button } from '@pubsweet/ui'
 
 import classes from './WizardStep.local.scss'
 import AutosaveIndicator from './AutosaveIndicator'
-import Files from './Files'
 
 export default ({
   children: stepChildren,

packages/components-faraday/src/components/Dashboard/Dashboard.js

@@ -6,12 +6,12 @@ import DashboardItems from './DashboardItems'
 import DashboardFilters from './DashboardFilters'
 
 const Dashboard = ({
+  changeViewMode,
+  createDraftSubmission,
   currentUser,
   dashboard,
-  listView,
-  changeViewMode,
   deleteProject,
-  createDraftSubmission,
+  listView,
 }) => (
   <div className={classes.root}>
     <div className={classes.header}>
@@ -21,7 +21,11 @@ const Dashboard = ({
       </Button>
     </div>
     <DashboardFilters changeView={changeViewMode} listView={listView} />
-    <DashboardItems dashboard={dashboard} listView={listView} />
+    <DashboardItems
+      dashboard={dashboard}
+      deleteProject={deleteProject}
+      listView={listView}
+    />
   </div>
 )
 

packages/components-faraday/src/components/Dashboard/Dashboard.local.scss

@@ -22,6 +22,29 @@
   }
 }
 
+.disabled {
+  cursor: not-allowed;
+
+  svg {
+    stroke: gray;
+  }
+}
+
+.viewMode {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+
+  .icon {
+    display: flex;
+    margin: 0 0.3em;
+
+    svg {
+      stroke: var(--color-primary);
+    }
+  }
+}
+
 .section {
   margin: 0.5em 0;
 }
@@ -87,7 +110,6 @@
 .column2 {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   margin: 0.5em;
 
   > div,
@@ -112,14 +134,6 @@
   cursor: pointer;
 }
 
-.disabled {
-  cursor: not-allowed;
-
-  svg {
-    stroke: gray;
-  }
-}
-
 .version {
   margin-left: 1em;
 }

packages/components-faraday/src/components/Dashboard/DashboardCard.js

@@ -6,7 +6,13 @@ import { Button, Icon } from '@pubsweet/ui'
 import { parseVersion, getFilesURL, downloadAll } from './utils'
 import classes from './Dashboard.local.scss'
 
-const DashboardCard = ({ project, listView, version }) => {
+const DashboardCard = ({
+  deleteProject,
+  history,
+  listView,
+  project,
+  version,
+}) => {
   const { submitted, author, title, type, version: vers } = parseVersion(
     version,
   )
@@ -39,10 +45,19 @@ const DashboardCard = ({ project, listView, version }) => {
         >
           <Icon>download</Icon>
         </div>
-
-        <a href={`/projects/${project.id}/versions/${version.id}/submit`}>
-          Details
-        </a>
+        <div className={classes.pointer} onClick={() => deleteProject(project)}>
+          <Icon>trash-2</Icon>
+        </div>
+        <div
+          className={classes.pointer}
+          onClick={() =>
+            history.push(
+              `/projects/${project.id}/versions/${version.id}/submit`,
+            )
+          }
+        >
+          <Icon>file-text</Icon>
+        </div>
       </div>
       {!listView && (
         <div className={classes.expandedView}>

packages/components-faraday/src/components/Dashboard/DashboardFilters.js

 import React from 'react'
+import { Icon } from '@pubsweet/ui'
+
 import classes from './Dashboard.local.scss'
 
 const DashboardFilters = ({
@@ -16,7 +18,12 @@ const DashboardFilters = ({
       <span> Status </span>
       <span> Newest on top </span>
     </div>
-    <div onClick={changeView}>View: {listView ? 'List' : 'Card'} </div>
+    <div className={classes.viewMode} onClick={changeView}>
+      <div className={classes.icon}>
+        {listView ? <Icon>list</Icon> : <Icon>credit-card</Icon>}
+      </div>
+      {listView ? ' List' : ' Card'} View
+    </div>
   </div>
 )
 

packages/components-faraday/src/components/Dashboard/DashboardItems.js

@@ -6,7 +6,7 @@ import classes from './Dashboard.local.scss'
 
 const DashboardItem = withVersion(Item)
 
-const DashboardItems = ({ dashboard, listView = true }) => (
+const DashboardItems = ({ dashboard, listView = true, deleteProject }) => (
   <div>
     {!dashboard.owner.length &&
       !dashboard.reviewer.length && (
@@ -18,7 +18,12 @@ const DashboardItems = ({ dashboard, listView = true }) => (
     {!!dashboard.owner.length && (
       <div className={classes.section}>
         {dashboard.owner.map(p => (
-          <DashboardItem key={p.id} listView={listView} project={p} />
+          <DashboardItem
+            deleteProject={deleteProject}
+            key={p.id}
+            listView={listView}
+            project={p}
+          />
         ))}
       </div>
     )}

packages/components-faraday/src/components/Dashboard/DashboardPage.js

@@ -14,7 +14,7 @@ export default compose(
     actions.getTeams(),
     actions.getUsers(),
   ]),
-  withState('listView', 'changeView', false),
+  withState('listView', 'changeView', true),
   withHandlers({
     changeViewMode: ({ changeView }) => () => changeView(listView => !listView),
   }),

packages/components-faraday/src/components/Dashboard/redux/filters.js

+export default (state = {}, action) => {
+  switch (action.type) {
+    default:
+      return state
+  }
+}

packages/components-faraday/src/components/Dashboard/redux/index.js

+export { default as filters } from './filters'

packages/components-faraday/src/index.js

@@ -3,6 +3,7 @@ module.exports = {
     components: [() => require('./components')],
     reducers: {
       authors: () => require('./redux/authors').default,
+      filters: () => require('./components/Dashboard/redux/filters').default,
     },
   },
 }

packages/xpub-faraday/app/config/journal/submit-wizard.js

 import React from 'react'
 import { AbstractEditor, TitleEditor } from 'xpub-edit'
-import {
-  Menu,
-  CheckboxGroup,
-  YesOrNo,
-  TextField,
-  Supplementary,
-} from '@pubsweet/ui'
+import { Menu, CheckboxGroup, YesOrNo, TextField } from '@pubsweet/ui'
 import uploadFileFn from 'xpub-upload'
 import { required, minChars, minSize } from 'xpub-validators'
 import { Files } from 'pubsweet-component-wizard/src/components/'