ui: backoffice patron details UX

* closes #425 * closes #426
inveniosoftware · Apr 3, 2020 · d2b1ab3 · d2b1ab3
1 parent 431d932
commit d2b1ab3
Show file tree

Hide file tree

Showing 47 changed files with 5,704 additions and 16,498 deletions.
diff --git a/ui/src/api/items/item.js b/ui/src/api/items/item.js
@@ -1,7 +1,7 @@
-import { http, apiConfig } from '../base';
-import { serializer } from './serializer';
-import { prepareSumQuery } from '../utils';
 import { invenioConfig } from '@config';
+import { apiConfig, http } from '../base';
+import { prepareSumQuery } from '../utils';
+import { serializer } from './serializer';
 
 const itemURL = '/items/';
 

diff --git a/ui/src/components/ResultsTable/ResultsTableFooter.js b/ui/src/components/ResultsTable/ResultsTableFooter.js
@@ -21,7 +21,7 @@ export default class ResultsTableFooter extends Component {
             colSpan={this.props.columnsNumber + 1}
             textAlign="right"
           >
-            <span>
+            <span className="results-table-compact-summary">
               Showing entries {start + 1}-{end} of {allRowsNumber}{' '}
             </span>
             <span>{this.props.seeAllComponent}</span>

diff --git a/ui/src/components/ResultsTable/__tests__/__snapshots__/ResultsTable.test.js.snap b/ui/src/components/ResultsTable/__tests__/__snapshots__/ResultsTable.test.js.snap
@@ -643,7 +643,9 @@ exports[`ResultsTable tests should render the see all button when showing only a
                         className="right aligned"
                         colSpan={3}
                       >
-                        <span>
+                        <span
+                          className="results-table-compact-summary"
+                        >
                           Showing entries 
                           1
                           -

diff --git a/ui/src/components/SearchBar/SearchBar.js b/ui/src/components/SearchBar/SearchBar.js
@@ -1,9 +1,15 @@
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { Input } from 'semantic-ui-react';
 import { QueryBuildHelper } from './components/QueryBuildHelper/';
 
 export class SearchBar extends Component {
+  componentDidMount() {
+    if (this.searchInput) {
+      this.searchInput.focus();
+    }
+  }
+
   onChangeHandler = (e, { value }, onInputChange) => {
     onInputChange(value, e);
   };

diff --git a/ui/src/components/SearchControls/components/SearchEmptyResults/SearchEmptyResults.js b/ui/src/components/SearchControls/components/SearchEmptyResults/SearchEmptyResults.js
@@ -1,7 +1,7 @@
-import { Header, Icon, Segment } from 'semantic-ui-react';
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { EmptyResults } from 'react-searchkit';
+import { Header, Icon, Segment } from 'semantic-ui-react';
 import { ClearButton } from '../ClearButton';
 
 export default class SearchEmptyResults extends Component {

diff --git a/...cumentDetails/components/DocumentItems/__tests__/__snapshots__/DocumentItems.test.js.snap b/...cumentDetails/components/DocumentItems/__tests__/__snapshots__/DocumentItems.test.js.snap
@@ -1442,7 +1442,9 @@ exports[`DocumentItems tests should render the see all button when showing only
                               className="right aligned"
                               colSpan={8}
                             >
-                              <span>
+                              <span
+                                className="results-table-compact-summary"
+                              >
                                 Showing entries 
                                 1
                                 -

diff --git a/...components/DocumentPendingLoans/__tests__/__snapshots__/DocumentPendingLoans.test.js.snap b/...components/DocumentPendingLoans/__tests__/__snapshots__/DocumentPendingLoans.test.js.snap
@@ -1151,7 +1151,9 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                               className="right aligned"
                               colSpan={5}
                             >
-                              <span>
+                              <span
+                                className="results-table-compact-summary"
+                              >
                                 Showing entries 
                                 1
                                 -

diff --git a/ui/src/pages/backoffice/Patron/PatronDetails/PatronDetails.js b/ui/src/pages/backoffice/Patron/PatronDetails/PatronDetails.js
@@ -1,65 +1,134 @@
-import React, { Component } from 'react';
+import { Error, Loader } from '@components';
 import PropTypes from 'prop-types';
-import { Container, Grid, Header } from 'semantic-ui-react';
-import { Loader, Error } from '@components';
+import React, { Component } from 'react';
+import {
+  Container,
+  Divider,
+  Grid,
+  Header,
+  Ref,
+  Segment,
+  Sticky,
+} from 'semantic-ui-react';
 import {
   ItemsCheckout,
   ItemsSearch,
   PatronCurrentLoans,
   PatronDocumentRequests,
-  PatronMetadata,
   PatronPendingLoans,
+  PatronActionMenu,
+  PatronHeader,
+  PatronPastLoans,
 } from './components';
 
 export default class PatronDetails extends Component {
   constructor(props) {
     super(props);
     this.fetchPatronDetails = this.props.fetchPatronDetails;
+    this.menuRef = React.createRef();
+    this.headerRef = React.createRef();
   }
 
   componentDidMount() {
-    this.unlisten = this.props.history.listen(location => {
-      if (location.state && location.state.patronPid) {
-        this.fetchPatronDetails(location.state.patronPid);
-      }
-    });
     this.fetchPatronDetails(this.props.match.params.patronPid);
   }
 
-  componentWillUnmount() {
-    this.unlisten();
+  componentDidUpdate(prevProps, prevState) {
+    const currentPatronPid = this.props.match.params.patronPid;
+    const samePatronPidFromRouter =
+      prevProps.match.params.patronPid === currentPatronPid;
+    if (!samePatronPidFromRouter) {
+      this.fetchPatronDetails(currentPatronPid);
+    }
   }
 
   render() {
-    const { isLoading, error } = this.props;
+    const { isLoading, error, data } = this.props;
     return (
-      <Container>
-        <Grid columns={2}>
-          <Grid.Column width={5}>
-            <Header as="h2">Patron's profile</Header>
-          </Grid.Column>
-          <Grid.Column width={11} />
-        </Grid>
-        <Loader isLoading={isLoading}>
-          <Error error={error}>
-            <Grid>
-              <Grid.Row columns={2}>
-                <Grid.Column>
-                  <PatronMetadata />
-                  <ItemsCheckout />
-                  <ItemsSearch />
-                </Grid.Column>
+      <div ref={this.headerRef}>
+        <Container fluid>
+          <Loader isLoading={isLoading}>
+            <Error error={error}>
+              <Sticky context={this.headerRef} className="solid-background">
+                <Container fluid className="spaced">
+                  <PatronHeader data={data} />
+                </Container>
+                <Divider />
+              </Sticky>
+              <Container fluid>
+                <Ref innerRef={this.menuRef}>
+                  <Grid columns={2}>
+                    <Grid.Column width={13}>
+                      <Container className="spaced">
+                        <Header attached="top" as={'h3'}>
+                          Checkout
+                        </Header>
+                        <Segment
+                          attached
+                          className="bo-metadata-segment"
+                          id="patron-checkout"
+                        >
+                          <ItemsCheckout />
+                          <ItemsSearch />
+                        </Segment>
 
-                <Grid.Column>
-                  <PatronCurrentLoans />
-                  <PatronPendingLoans />
-                  <PatronDocumentRequests />
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Error>
-        </Loader>
-      </Container>
+                        <Container className="spaced">
+                          <Header attached="top" as={'h3'}>
+                            Patron's current loans
+                          </Header>
+                          <Segment
+                            attached
+                            id="current-loans"
+                            className="bo-metadata-segment no-padding"
+                          >
+                            <PatronCurrentLoans />
+                          </Segment>
+                          <Header attached="top" as={'h3'}>
+                            Patron's loan requests
+                          </Header>
+                          <Segment
+                            attached
+                            id="loan-requests"
+                            className="bo-metadata-segment no-padding"
+                          >
+                            <PatronPendingLoans />
+                          </Segment>
+                          <Header attached="top" as={'h3'}>
+                            Patron's literature requests
+                          </Header>
+                          <Segment
+                            attached
+                            id="literature-requests"
+                            className="bo-metadata-segment no-padding"
+                          >
+                            <PatronDocumentRequests />
+                          </Segment>
+                          <Header attached="top" as={'h3'}>
+                            Patron's loans history
+                          </Header>
+                          <Segment
+                            attached
+                            id="loans-history"
+                            className="bo-metadata-segment no-padding"
+                          >
+                            <PatronPastLoans />
+                          </Segment>
+                        </Container>
+                      </Container>
+                    </Grid.Column>
+                    <Grid.Column width={3}>
+                      <Sticky context={this.menuRef} offset={150}>
+                        <Divider horizontal> Navigation </Divider>
+                        <PatronActionMenu offset={-150} />
+                      </Sticky>
+                    </Grid.Column>
+                  </Grid>
+                </Ref>
+              </Container>
+            </Error>
+          </Loader>
+        </Container>
+      </div>
     );
   }
 }

diff --git a/ui/src/pages/backoffice/Patron/PatronDetails/__tests__/PatronDetails.test.js b/ui/src/pages/backoffice/Patron/PatronDetails/__tests__/PatronDetails.test.js
@@ -7,12 +7,22 @@ jest.mock('../components/', () => {
     ItemsCheckout: () => null,
     ItemsSearch: () => null,
     PatronCurrentLoans: () => null,
+    PatronPastLoans: () => null,
     PatronDocumentRequests: () => null,
     PatronMetadata: () => null,
     PatronPendingLoans: () => null,
+    PatronHeader: () => null,
+    PatronActionMenu: () => null,
   };
 });
 
+const data = {
+  metadata: {
+    name: 'XYZ',
+    email: '[email protected]',
+  },
+};
+
 describe('PatronDetails tests', () => {
   let component;
   afterEach(() => {