frontsite: DocumentDetails: Add section for documents with same subjects

src/lib/api/documents/document.js

@@ -65,6 +65,7 @@ class QueryBuilder {
     this.withEitemsQuery = [];
     this.pendingOverdueQuery = [];
     this.withSeriesQuery = [];
+    this.withSubjectsQuery = [];
     this.sortByQuery = '';
     this.sortOrderQuery = '';
   }
@@ -146,6 +147,19 @@ class QueryBuilder {
     return this;
   }
 
+  withSubjects(subjects) {
+    if (subjects === undefined) {
+      return this;
+    }
+    const subjectQuery = subjects.map((subject) => {
+      return `(subjects.scheme:"${subject.scheme}" AND subjects.value:"${subject.value}")`;
+    });
+    if (subjectQuery !== '') {
+      this.withSubjectsQuery.push(`(${subjectQuery.join(' OR ')})`);
+    }
+    return this;
+  }
+
   sortBy(by = 'bestmatch') {
     this.sortByQuery = `&sort=${by}`;
     return this;
@@ -166,7 +180,8 @@ class QueryBuilder {
         this.withDocumentTypeQuery,
         this.withEitemsQuery,
         this.pendingOverdueQuery,
-        this.withSeriesQuery
+        this.withSeriesQuery,
+        this.withSubjectsQuery
       )
       .join(' AND ');
     return `${searchCriteria}${this.sortByQuery}${this.sortOrderQuery}${this.size}`;

src/lib/modules/Document/DocumentSubjectLayout.js

@@ -0,0 +1,35 @@
+import { recordToPidType } from '@api/utils';
+import { Media } from '@components/Media';
+import { DocumentCard } from '@modules/Document/DocumentCard';
+import { SeriesCard } from '@modules/Series/SeriesCard';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Card } from 'semantic-ui-react';
+
+export const DocumentSubjectGrid = ({ results }) => {
+  const cards = results.map((result) => {
+    return recordToPidType(result) === 'docid' ? (
+      <DocumentCard key={result.metadata.pid} data={result} />
+    ) : (
+      <SeriesCard key={result.metadata.pid} data={result} />
+    );
+  });
+  return (
+    <>
+      <Media greaterThanOrEqual="largeScreen">
+        <Card.Group doubling stackable itemsPerRow={5}>
+          {cards}
+        </Card.Group>
+      </Media>
+      <Media lessThan="largeScreen">
+        <Card.Group doubling stackable itemsPerRow={3}>
+          {cards}
+        </Card.Group>
+      </Media>
+    </>
+  );
+};
+
+DocumentSubjectGrid.propTypes = {
+  results: PropTypes.array.isRequired,
+};

src/lib/modules/Document/DocumentSubjectSearch.js

@@ -0,0 +1,141 @@
+import { documentApi } from '@api/documents';
+import { Media } from '@components/Media';
+import {
+  setReactSearchKitDefaultSortingOnEmptyQueryString,
+  setReactSearchKitInitialQueryState,
+  setReactSearchKitUrlHandler,
+} from '@config';
+import history from '@history';
+import { SearchControls } from '@modules/SearchControls/SearchControls';
+import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
+import SearchFooter from '@modules/SearchControls/SearchFooter';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { OverridableContext } from 'react-overridable';
+import {
+  EmptyResults,
+  Error,
+  InvenioSearchApi,
+  ReactSearchKit,
+  ResultsLoader,
+  ResultsGrid,
+} from 'react-searchkit';
+import { Header, Container, Ref, Sticky } from 'semantic-ui-react';
+import { InvenioRequestSerializer } from 'react-searchkit';
+import { DocumentSubjectGrid } from './DocumentSubjectLayout';
+import { Error as IlsError } from '@components/Error';
+import { SearchControlsMobile } from '@modules/SearchControls/SearchControlsMobile';
+
+const queryBuilderForSubjects = (documentMetadata) => {
+  let subjectsQuery = documentApi
+    .query()
+    .withSubjects(documentMetadata.subjects)
+    .qs();
+
+  return class DocumentSubjectsSerializer extends InvenioRequestSerializer {
+    serialize(stateQuery) {
+      stateQuery.queryString = subjectsQuery;
+      stateQuery.size = 5;
+      return super.serialize(stateQuery);
+    }
+  };
+};
+
+export class DocumentSubjectSearch extends React.Component {
+  modelName = 'DOCUMENTS';
+
+  render() {
+    const { metadata } = this.props;
+    const api = new InvenioSearchApi({
+      axios: {
+        url: documentApi.searchBaseURL,
+        withCredentials: true,
+      },
+      invenio: {
+        requestSerializer: queryBuilderForSubjects(metadata),
+      },
+    });
+
+    const initialState = setReactSearchKitInitialQueryState(this.modelName);
+    const defaultSortingOnEmptyQueryString =
+      setReactSearchKitDefaultSortingOnEmptyQueryString(this.modelName);
+    const urlHandler = setReactSearchKitUrlHandler(this.modelName, false);
+    return (
+      <>
+        <Header as="h2" textAlign="center">
+          More on this subject
+        </Header>
+        <OverridableContext.Provider
+          value={{
+            ...SearchControlsOverridesMap,
+            ResultsGrid: DocumentSubjectGrid,
+          }}
+        >
+          <ReactSearchKit
+            searchApi={api}
+            history={history}
+            urlHandlerApi={urlHandler}
+            initialQueryState={initialState}
+            defaultSortingOnEmptyQueryString={defaultSortingOnEmptyQueryString}
+          >
+            <>
+              <Media greaterThanOrEqual="computer">
+                <ResultsLoader>
+                  <EmptyResults />
+                  <Error />
+                  <SearchControls
+                    modelName={this.modelName}
+                    withLayoutSwitcher={false}
+                  />
+                  <ResultsGrid />
+                  <SearchFooter />
+                </ResultsLoader>
+              </Media>
+              <Media lessThan="computer">
+                <DocumentSubjectSearchMobile metadata={metadata} />
+              </Media>
+            </>
+          </ReactSearchKit>
+        </OverridableContext.Provider>
+      </>
+    );
+  }
+}
+
+DocumentSubjectSearch.propTypes = {
+  metadata: PropTypes.object.isRequired,
+};
+
+export class DocumentSubjectSearchMobile extends React.Component {
+  stickyRef = React.createRef();
+
+  renderError = (error) => {
+    return <IlsError error={error} />;
+  };
+
+  render() {
+    return (
+      <Container fluid className="grid-documents-search">
+        <ResultsLoader>
+          <EmptyResults />
+          <Error renderElement={this.renderError} />
+          <Ref innerRef={this.stickyRef}>
+            <Container fluid>
+              <Sticky context={this.stickyRef} offset={66}>
+                <SearchControlsMobile
+                  ref={this.stickyRef}
+                  modelName="DOCUMENTS"
+                />
+              </Sticky>
+              <Container className="fs-search-body" textAlign="center">
+                <ResultsGrid overridableId="documents_subjects_mobile" />
+              </Container>
+            </Container>
+          </Ref>
+        </ResultsLoader>
+      </Container>
+    );
+  }
+}
+
+DocumentSubjectSearchMobile.propTypes = {};

src/lib/pages/frontsite/Documents/DocumentDetails/DocumentDetails.js

@@ -21,6 +21,7 @@ import { DocumentItems } from './DocumentItems';
 import { DocumentMetadata } from './DocumentMetadata';
 import DocumentPanel from './DocumentPanel/DocumentPanel';
 import { NotFound } from '@components/HttpErrors';
+import { DocumentSubjectSearch } from '@modules/Document/DocumentSubjectSearch';
 
 const DocumentDetailsLayout = ({
   error,
@@ -104,6 +105,18 @@ const DocumentDetailsLayout = ({
             </ILSParagraphPlaceholder>
           </Container>
         </Container>
+        <Media greaterThanOrEqual="computer">
+          <Container className="items-locations spaced">
+            <ILSParagraphPlaceholder linesNumber={1} isLoading={isLoading}>
+              <DocumentSubjectSearch metadata={documentDetails.metadata} />
+            </ILSParagraphPlaceholder>
+          </Container>
+        </Media>
+        <Media lessThan="computer">
+          <ILSParagraphPlaceholder linesNumber={5} isLoading={isLoading}>
+            <DocumentSubjectSearch metadata={documentDetails.metadata} />
+          </ILSParagraphPlaceholder>
+        </Media>
         <AuthenticationGuard
           authorizedComponent={() => (
             <Container textAlign="center">