Merge pull request #701 from materialsproject/add-structure-and-attac…

…hments-fields-react

add structure and attachments fields (react)

src/components/data-display/SearchUI/SearchUIContextProvider/SearchUIContextProvider.tsx

@@ -63,13 +63,14 @@ export const SearchUIContextProvider: React.FC<SearchState> = ({
     return initFilterGroups(props.filterGroups);
   }, []);
   const columns = useMemo(() => {
-    return initColumns(props.columns, props.disableRichColumnHeaders);
+    return initColumns(props.columns, props.apiEndpoint, props.disableRichColumnHeaders);
   }, []);
   const [state, setState] = useState<SearchState>({
     ...propsWithoutChildren,
     filterGroups,
     columns
   });
+
   /**
    * These default param values are added to the API query if no value is present
    * for that param. These params are omitted from the URL if they are equal to the

src/components/data-display/SearchUI/types.tsx

@@ -138,7 +138,8 @@ export enum ColumnFormat {
   RADIO = 'RADIO',
   EMAIL = 'EMAIL',
   TAG = 'TAG',
-  DICT = 'DICT'
+  DICT = 'DICT',
+  CONTRIBS_FILES_DOWNLOAD = 'CONTRIBS_FILES_DOWNLOAD'
 }
 
 /**

src/utils/table.tsx

@@ -10,6 +10,7 @@ import { spaceGroups } from '../constants/spaceGroups';
 import { joinUrl } from './navigation';
 import { FaEnvelope } from 'react-icons/fa';
 import { FaDownload } from 'react-icons/fa';
+import axios from 'axios';
 
 const emptyCellPlaceholder = '-';
 
@@ -48,7 +49,11 @@ export const getRowValueFromSelectorString = (selector: string, row: any) => {
  * FIXED_DECIMAL and SIGNIFICANT_FIGURES both expect another column property "formatArg"
  * that will specify how many decimals or figures to apply to the format.
  */
-export const initColumns = (columns: Column[], disableRichColumnHeaders?: boolean): Column[] => {
+export const initColumns = (
+  columns: Column[],
+  apiEndpoint: string,
+  disableRichColumnHeaders?: boolean
+): Column[] => {
   return columns.map((c) => {
     /** Make columns sortable by default */
     c.sortable = c.sortable !== undefined ? c.sortable : true;
@@ -281,7 +286,6 @@ export const initColumns = (columns: Column[], disableRichColumnHeaders?: boolea
           );
         };
         return c;
-
       case ColumnFormat.DICT:
         c.cell = (row: any) => {
           const rowValue = getRowValueFromSelectorString(c.selector, row);
@@ -322,6 +326,49 @@ export const initColumns = (columns: Column[], disableRichColumnHeaders?: boolea
           }
         };
         return c;
+      case ColumnFormat.CONTRIBS_FILES_DOWNLOAD:
+        c.cell = (row: any) => {
+          if (hasFormatOptions && c.formatOptions) {
+            if (c.formatOptions === 'structures' && row.structures) {
+              let out: any[] = [];
+              for (let sitem of row.structures) {
+                out.push(
+                  <span key={Math.random()}>
+                    <span className="tag">{sitem.name}</span>
+                    <a
+                      href={
+                        apiEndpoint.replace('contribs-api', 'contribs') + 'component/' + sitem.id
+                      }
+                    >
+                      <FaDownload className="mr-1" />
+                    </a>
+                  </span>
+                );
+              }
+              return <span>{out}</span>;
+            } else if (c.formatOptions === 'attachments' && row.attachments) {
+              let out: any[] = [];
+              for (let aitem of row.attachments) {
+                out.push(
+                  <span key={Math.random()}>
+                    <span className="tag">{aitem.name}</span>
+                    <a
+                      href={
+                        apiEndpoint.replace('contribs-api', 'contribs') + 'component/' + aitem.id
+                      }
+                    >
+                      <FaDownload className="mr-1" />
+                    </a>
+                  </span>
+                );
+              }
+              return <span>{out}</span>;
+            } else {
+              return null;
+            }
+          } else return null;
+        };
+        return c;
       default:
         c.format = (row: any) => {
           const rowValue = getRowValueFromSelectorString(c.selector, row);