ui: document details page ux and themes

inveniosoftware · Oct 11, 2019 · 27e56fc · 27e56fc
1 parent 9bd6790
commit 27e56fc
Show file tree

Hide file tree

Showing 35 changed files with 902 additions and 527 deletions.
diff --git a/invenio_app_ils/config.py b/invenio_app_ils/config.py
@@ -683,7 +683,7 @@ def _(x):
 
 CIRCULATION_DELIVERY_METHODS = {
     "PICKUP": "Pick it up at the library desk",
-    "DELIVERY": "Delivery",
+    "DELIVERY": "Have it delivered to my office",
 }
 
 CIRCULATION_POLICIES = dict(

diff --git a/invenio_app_ils/ui/package-lock.json b/invenio_app_ils/ui/package-lock.json
diff --git a/invenio_app_ils/ui/package.json b/invenio_app_ils/ui/package.json
@@ -29,10 +29,12 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.2",
     "react-searchkit": "^0.13.0",
+    "react-show-more": "^2.0.0",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-css": "^2.4.1",
     "semantic-ui-less": "^2.4.1",
     "semantic-ui-react": "^0.88.0",
     "styled-components": "^4.4.0",

diff --git a/invenio_app_ils/ui/public/index.html b/invenio_app_ils/ui/public/index.html
@@ -27,7 +27,7 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
 
-    <div id="invenio-config" data-config='{"circulation": {"deliveryMethods": {"DELIVERY": "Delivery", "PICKUP": "Pick it up at the library desk"}, "loanActiveStates": ["ITEM_AT_DESK", "ITEM_ON_LOAN", "ITEM_IN_TRANSIT_FOR_PICKUP", "ITEM_IN_TRANSIT_TO_HOUSE"], "loanCancelledStates": ["CANCELLED"], "loanCompletedStates": ["ITEM_RETURNED"], "loanRequestStates": ["PENDING"], "requestDuration": 60}, "default_results_size": 10, "documentRequests": {"search": {"aggs": ["state"], "sortBy": {"onEmptyQuery": null, "values": []}, "sortOrder": ["asc", "desc"]}}, "documents": {"search": {"aggs": ["tags", "languages", "document_type", "relations", "has_items", "has_eitems", "has_items_for_loan"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"default_order": "asc", "field": "mostrecent", "order": 1, "title": "Newest"}, {"default_order": "asc", "field": "bestmatch", "order": 2, "title": "Best match"}, {"default_order": "asc", "field": "available_items", "order": 3, "title": "Available Items"}, {"default_order": "desc", "field": "mostloaned", "order": 4, "title": "Most loaned"}]}, "sortOrder": ["asc", "desc"]}}, "editor": {"url": "/editor"}, "eitems": {"search": {"aggs": [], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "items": {"canCirculateStates": ["CAN_CIRCULATE"], "search": {"aggs": ["status", "medium", "circulation"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "loans": {"search": {"aggs": ["state"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "max_results_window": 10000, "patrons": {"search": {"aggs": [], "sortBy": {"onEmptyQuery": null, "values": []}, "sortOrder": ["asc", "desc"]}}, "relationTypes": [{"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 3, "label": "Multipart Monograph", "name": "multipart_monograph", "relation_class": "invenio_app_ils.records.relations.api.ParentChildRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 4, "label": "Serial", "name": "serial", "relation_class": "invenio_app_ils.records.relations.api.ParentChildRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 0, "label": "Language", "name": "language", "relation_class": "invenio_app_ils.records.relations.api.SiblingsRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 1, "label": "Edition", "name": "edition", "relation_class": "invenio_app_ils.records.relations.api.SiblingsRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 2, "label": "Other", "name": "other", "relation_class": "invenio_app_ils.records.relations.api.SiblingsRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}], "rest_mimetype_query_arg_name": "format", "series": {"search": {"aggs": ["moi"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "support_email": "info@inveniosoftware.org"}'></div>
+    <div id="invenio-config" data-config='{"circulation": {"deliveryMethods": {"DELIVERY": "Have it delivered to my office", "PICKUP": "Pick it up at the library desk"}, "loanActiveStates": ["ITEM_AT_DESK", "ITEM_ON_LOAN", "ITEM_IN_TRANSIT_FOR_PICKUP", "ITEM_IN_TRANSIT_TO_HOUSE"], "loanCancelledStates": ["CANCELLED"], "loanCompletedStates": ["ITEM_RETURNED"], "loanRequestStates": ["PENDING"], "requestDuration": 60}, "default_results_size": 10, "documentRequests": {"search": {"aggs": ["state"], "sortBy": {"onEmptyQuery": null, "values": []}, "sortOrder": ["asc", "desc"]}}, "documents": {"search": {"aggs": ["tags", "languages", "document_type", "relations", "has_items", "has_eitems", "has_items_for_loan"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"default_order": "asc", "field": "mostrecent", "order": 1, "title": "Newest"}, {"default_order": "asc", "field": "bestmatch", "order": 2, "title": "Best match"}, {"default_order": "asc", "field": "available_items", "order": 3, "title": "Available Items"}, {"default_order": "desc", "field": "mostloaned", "order": 4, "title": "Most loaned"}]}, "sortOrder": ["asc", "desc"]}}, "editor": {"url": "/editor"}, "eitems": {"search": {"aggs": [], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "items": {"canCirculateStates": ["CAN_CIRCULATE"], "search": {"aggs": ["status", "medium", "circulation"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "loans": {"search": {"aggs": ["state"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "max_results_window": 10000, "patrons": {"search": {"aggs": [], "sortBy": {"onEmptyQuery": null, "values": []}, "sortOrder": ["asc", "desc"]}}, "relationTypes": [{"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 3, "label": "Multipart Monograph", "name": "multipart_monograph", "relation_class": "invenio_app_ils.records.relations.api.ParentChildRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 4, "label": "Serial", "name": "serial", "relation_class": "invenio_app_ils.records.relations.api.ParentChildRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 0, "label": "Language", "name": "language", "relation_class": "invenio_app_ils.records.relations.api.SiblingsRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 1, "label": "Edition", "name": "edition", "relation_class": "invenio_app_ils.records.relations.api.SiblingsRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}, {"api": "invenio_app_ils.records.relations.nodes:PIDNodeRelated", "id": 2, "label": "Other", "name": "other", "relation_class": "invenio_app_ils.records.relations.api.SiblingsRelation", "schema": "invenio_pidrelations.serializers.schemas.RelationSchema"}], "rest_mimetype_query_arg_name": "format", "series": {"search": {"aggs": ["moi"], "sortBy": {"onEmptyQuery": "mostrecent", "values": [{"field": "mostrecent", "order": 1, "title": "Newest"}, {"field": "bestmatch", "order": 2, "title": "Best match"}]}, "sortOrder": ["asc", "desc"]}}, "support_email": "info@inveniosoftware.org"}'></div>
     <div id="app"></div>
     <!--
       This HTML file is a template.

diff --git a/...c/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/DocumentsDetailsContainer.js b/...c/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/DocumentsDetailsContainer.js
@@ -9,6 +9,36 @@ import { DocumentPanel } from './components/DocumentPanel';
 import { Error } from '../../../../common/components/Error';
 import { Loader } from '../../../../common/components/Loader';
 import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { DocumentTags } from './components/DocumentMetadata/components';
+
+export class DocumentDetails extends Component {
+  breadcrumbs = () => [
+    { to: FrontSiteRoutes.home, label: 'Home' },
+    { to: FrontSiteRoutes.documentsList, label: 'Search' },
+  ];
+
+  render() {
+    return (
+      <>
+        <Container className="document-details-container default-margin-top">
+          <Breadcrumbs
+            elements={this.breadcrumbs()}
+            currentElement={this.props.data.metadata.title}
+          />
+          <DocumentPanel />
+        </Container>
+        <Container className="document-tags">
+          <DocumentTags tags={this.props.data.metadata.tags} />
+        </Container>
+        <Container className="section" fluid>
+          <Container>
+            <DocumentMetadata />
+          </Container>
+        </Container>
+      </>
+    );
+  }
+}
 
 export default class DocumentsDetailsContainer extends Component {
   constructor(props) {
@@ -40,11 +70,6 @@ export default class DocumentsDetailsContainer extends Component {
     this.setState({ searchQuery: event.target.value });
   };
 
-  breadcrumbs = () => [
-    { to: FrontSiteRoutes.home, label: 'Home' },
-    { to: FrontSiteRoutes.documentsList, label: 'Search' },
-  ];
-
   _renderElement(isLoading, error, data) {
     return (
       <>
@@ -59,18 +84,12 @@ export default class DocumentsDetailsContainer extends Component {
             />
           </Container>
         </Container>
-        <Container className={'document-details-container'}>
-          <Loader isLoading={isLoading}>
-            <Error error={error}>
-              <Breadcrumbs
-                elements={this.breadcrumbs()}
-                currentElement={data.metadata ? data.metadata.title : null}
-              />
-              <DocumentPanel />
-              <DocumentMetadata />
-            </Error>
-          </Loader>
-        </Container>
+
+        <Loader isLoading={isLoading}>
+          <Error error={error}>
+            <DocumentDetails data={data} />
+          </Error>
+        </Loader>
       </>
     );
   }
@@ -83,5 +102,5 @@ export default class DocumentsDetailsContainer extends Component {
 
 DocumentsDetailsContainer.propTypes = {
   fetchDocumentsDetails: PropTypes.func.isRequired,
-  renderElement: PropTypes.func,
+  renderElement: PropTypes.node,
 };
diff --git a/...app_ils/pages/frontsite/Documents/DocumentsDetails/__tests__/DocumentsDetailsContainer.js b/...app_ils/pages/frontsite/Documents/DocumentsDetails/__tests__/DocumentsDetailsContainer.js
@@ -44,7 +44,7 @@ describe('DocumentsDetailsContainer tests', () => {
         history={routerHistory}
         match={routerUrlParams}
         fetchDocumentsDetails={() => {}}
-        data={testData[0]}
+        data={{ metadata: testData[0] }}
       />
     );
     expect(component).toMatchSnapshot();
@@ -58,7 +58,7 @@ describe('DocumentsDetailsContainer tests', () => {
           history={routerHistory}
           match={routerUrlParams}
           fetchDocumentsDetails={mockedFetchDocumentsDetails}
-          data={testData[0]}
+          data={{ metadata: testData[0] }}
         />
       </BrowserRouter>
     );

diff --git a/...site/Documents/DocumentsDetails/__tests__/__snapshots__/DocumentsDetailsContainer.js.snap b/...site/Documents/DocumentsDetails/__tests__/__snapshots__/DocumentsDetailsContainer.js.snap
@@ -16,30 +16,33 @@ exports[`DocumentsDetailsContainer tests should load the details component 1`] =
       />
     </Container>
   </Container>
-  <Container
-    className="document-details-container"
-  >
-    <Loader>
-      <Error>
-        <Breadcrumbs
-          currentElement={null}
-          elements={
-            Array [
-              Object {
-                "label": "Home",
-                "to": "/",
-              },
-              Object {
-                "label": "Search",
-                "to": "/search",
+  <Loader>
+    <Error>
+      <DocumentDetails
+        data={
+          Object {
+            "metadata": Object {
+              "abstract": "This is an abstract",
+              "authors": Array [
+                Object {
+                  "full_name": "Jack E. Davis",
+                },
+              ],
+              "edition": "ed. 1",
+              "keywords": Object {
+                "source": "X",
+                "value": "Patata",
               },
-            ]
+              "languages": Array [
+                "en",
+              ],
+              "pid": "docid-1",
+              "title": "The Gulf: The Making of An American Sea",
+            },
           }
-        />
-        <DocumentPanel />
-        <DocumentMetadata />
-      </Error>
-    </Loader>
-  </Container>
+        }
+      />
+    </Error>
+  </Loader>
 </Fragment>
 `;
diff --git a/...rontsite/Documents/DocumentsDetails/components/DocumentCirculation/DocumentCirculation.js b/...rontsite/Documents/DocumentsDetails/components/DocumentCirculation/DocumentCirculation.js
@@ -60,7 +60,7 @@ export default class DocumentCirculation extends Component {
         <List.Item key={eitem.pid}>
           <List.Icon name={'linkify'} />
           <List.Content>
-            Read <a href="#TODO">online(e-book)</a>
+            Read <a href="#TODO">online</a>
           </List.Content>
         </List.Item>
       );
@@ -70,7 +70,6 @@ export default class DocumentCirculation extends Component {
         <>
           <Header as="h3">Access online</Header>
           <List>{eitems}</List>
-          <br />
           <Divider horizontal>Or</Divider>
         </>
       );
@@ -80,7 +79,7 @@ export default class DocumentCirculation extends Component {
 
   render() {
     return (
-      <Segment className={'#TODO'} color="orange">
+      <Segment color="orange">
         {this.renderEItems()}
         <Header as="h3" content="Request loan" />
         <List>

diff --git a/...ages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/DocumentMetadata.js b/...ages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/DocumentMetadata.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
-import { Grid, Segment, Tab } from 'semantic-ui-react';
+import { Container, Divider, Grid, Segment, Tab } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { DocumentTags, DocumentRelations, DocumentInfo } from './components';
+import { DocumentTableOfContent } from './components/DocumentTableOfContent';
+import { DocumentConference } from './components/DocumentConference';
 
 export default class DocumentMetadata extends Component {
   constructor(props) {
@@ -15,15 +17,23 @@ export default class DocumentMetadata extends Component {
         menuItem: 'Details',
         render: () => (
           <Tab.Pane attached={false}>
-            <DocumentRelations relations={this.document.metadata.relations} />
+            <DocumentRelations
+              relations={this.document.metadata.relations}
+              documentType={this.document.metadata.document_type}
+            />
             <DocumentInfo metadata={this.document.metadata} />
           </Tab.Pane>
         ),
       },
       {
         menuItem: 'Content',
         render: () => (
-          <Tab.Pane attached={false}>We wait for the schema!</Tab.Pane>
+          <Tab.Pane attached={false}>
+            <DocumentTableOfContent
+              toc={this.document.metadata.table_of_content}
+              abstract={this.document.metadata.abstract}
+            />
+          </Tab.Pane>
         ),
       },
       {
@@ -35,14 +45,20 @@ export default class DocumentMetadata extends Component {
       {
         menuItem: 'Conference',
         render: () => (
-          <Tab.Pane attached={false}>We wait for the schema!</Tab.Pane>
+          <Tab.Pane attached={false}>
+            <DocumentConference
+              conference={this.document.metadata.conference_info}
+              documentType={this.document.metadata.document_type}
+            />
+          </Tab.Pane>
         ),
       },
       {
         menuItem: 'Notes',
         render: () => (
           <Tab.Pane attached={false}>
-            {this.document.metadata.notes[0].value}
+            <Divider horizontal>Librarian's note</Divider>
+            {this.document.metadata.note}
           </Tab.Pane>
         ),
       },
@@ -51,26 +67,15 @@ export default class DocumentMetadata extends Component {
 
   render() {
     return (
-      <Segment
+      <Container
         className="document-metadata"
         data-test={this.document.metadata.pid}
       >
-        <Grid>
-          <Grid.Row>
-            <Grid stackable columns={1}>
-              <Grid.Column width={16}>
-                <DocumentTags tags={this.document.metadata.tags} />
-                <br />
-                <br />
-                <Tab
-                  menu={{ secondary: true, pointing: true }}
-                  panes={this.renderTabPanes()}
-                />
-              </Grid.Column>
-            </Grid>
-          </Grid.Row>
-        </Grid>
-      </Segment>
+        <Tab
+          menu={{ secondary: true, pointing: true }}
+          panes={this.renderTabPanes()}
+        />
+      </Container>
     );
   }
 }

diff --git a/...site/Documents/DocumentsDetails/components/DocumentMetadata/__tests__/DocumentMetadata.js b/...site/Documents/DocumentsDetails/components/DocumentMetadata/__tests__/DocumentMetadata.js
@@ -51,7 +51,7 @@ describe('DocumentMetadata tests', () => {
 
     const rows = component
       .find('DocumentMetadata')
-      .find('Segment')
+      .find('Container')
       .filterWhere(
         element => element.prop('data-test') === documentDetails.metadata.pid
       );