Pretty DescriptorCard

- List terms
- Display scale
- Display UoM

src/descriptors/ui/DisplayPage.tsx

@@ -9,7 +9,6 @@ import { fixDate } from 'utilities';
 import { loadDescriptor, publishDescriptor, deleteDescriptor, approveDescriptor, rejectDescriptor } from 'descriptors/actions/editor';
 
 import Descriptor, { DataType as DescriptorDataType } from 'model/catalog/Descriptor';
-import VocabularyTerm from 'model/vocabulary/VocabularyTerm';
 import { PublishState } from 'model/common.model';
 
 import confirm from 'utilities/confirmAlert';
@@ -21,7 +20,6 @@ import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 import PrettyDate from 'ui/common/time/PrettyDate';
 import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
 import { PartnerLink, CropLink, DescriptorListLink, DatasetLink } from 'ui/catalog/Links';
-import { Table, TableRow, TableCell } from 'ui/common/tables';
 import { Properties, PropertiesItem } from 'ui/common/Properties';
 import VocabularyCard from 'vocabulary/ui/c/VocabularyCard';
 import DescriptorScale from 'descriptors/ui/c/DescriptorScale';
@@ -36,6 +34,7 @@ import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import DescriptorTerms from './c/DescriptorTerms';
 
 interface IDisplayPageProps extends React.ClassAttributes<any> {
   classes: any;
@@ -225,21 +224,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
             { descriptor.dataType === DescriptorDataType.CODED && descriptor.terms && descriptor.terms.length > 0 && (
               <Grid item xs={ 12 } className="p-10">
                 <Section title={ t('descriptors.public.p.display.codingTable') }>
-                  <Table widths={ ['10%', '20%', null] } headers={ (
-                    <TableRow>
-                      <TableCell>{ t('descriptors.public.p.display.code') }</TableCell>
-                      <TableCell>{ t('descriptors.public.p.display.term') }</TableCell>
-                      <TableCell>{ t('descriptors.public.p.display.description') }</TableCell>
-                    </TableRow>
-                  ) }>
-                    { descriptor.terms.map((term: VocabularyTerm) => (
-                      <TableRow key={ term.code }>
-                        <TableCell className="font-bold">{ term.code }</TableCell>
-                        <TableCell>{ term.title }</TableCell>
-                        <TableCell>{ term.description }</TableCell>
-                      </TableRow>
-                    )) }
-                  </Table>
+                  <DescriptorTerms terms={ descriptor.terms } />
                 </Section>
               </Grid>
             ) }

src/descriptors/ui/c/DescriptorCard.tsx

@@ -8,9 +8,10 @@ import { translate } from 'react-i18next';
 
 import { Properties, PropertiesItem } from 'ui/common/Properties';
 
-import Descriptor from 'model/catalog/Descriptor';
-import VocabularyTerm from 'model/vocabulary/VocabularyTerm';
+import Descriptor, { DataType as DescriptorDataType } from 'model/catalog/Descriptor';
 import { DescriptorLink, PartnerLink, CropLink } from 'ui/catalog/Links';
+import DescriptorTerms from './DescriptorTerms';
+import DescriptorScale from './DescriptorScale';
 
 interface ICardProps {
   complete?: boolean;
@@ -194,16 +195,21 @@ const DescriptorCard = ({ complete = true, compact, descriptor, classes, classNa
                   { t(`descriptors.common.dataType.${descriptor.dataType.toLowerCase()}`) }
                 </PropertiesItem>
               ) }
+              { displayPref.dataType && descriptor.dataType === DescriptorDataType.NUMERIC && (
+                <PropertiesItem title={ t('descriptors.sort.uom') }>
+                  { descriptor.uom }
+                </PropertiesItem>
+              ) }
             </Properties>
           </Grid>
 
-          { (displayPref.vocabulary && descriptor.terms) && (
+          { (displayPref.vocabulary && descriptor.terms && descriptor.terms.length > 0) && (
             <Grid item xs={ 12 }>
-              { descriptor.terms.map((term: VocabularyTerm) => (
-                <div key={ term.code }>{ term.code } &rarr; <b>{ term.title }</b> { term.description }</div>
-              )) }
+              { descriptor.dataType === DescriptorDataType.CODED && <DescriptorTerms terms={ descriptor.terms } /> }
+              { descriptor.dataType === DescriptorDataType.SCALE && <DescriptorScale className="mt-20" min={ descriptor.minValue } max={ descriptor.maxValue } decimal={ !descriptor.integerOnly } labels={ descriptor.terms } /> }
             </Grid>
           ) }
+
           { errorMessage &&
           <div className={ classes.errorMessage }>{ errorMessage }</div>
           }

src/descriptors/ui/c/DescriptorScale.tsx

@@ -59,7 +59,7 @@ const styles = (theme) => ({
   /* tslint:enable */
 });
 
-const DescriptorScale = ({ classes, decimal, min, max, labels, className = '' }: { classes: any, decimal?: boolean, min: number, max: number, labels: VocabularyTerm[], className: string }) => {
+const DescriptorScale = ({ classes, decimal, min, max, labels, className = '' }: { classes: any, decimal?: boolean, min: number, max: number, labels: VocabularyTerm[], className?: string }) => {
 
   // Test if labels are provided
   const bits: number[] = labels !== null ? labels.map((l) => +l.code) : [];

src/descriptors/ui/c/DescriptorTerms.tsx

+import * as React from 'react';
+import { translate } from 'react-i18next';
+
+import VocabularyTerm from 'model/vocabulary/VocabularyTerm';
+
+import { Table, TableRow, TableCell } from 'ui/common/tables';
+
+
+const DescriptorTerms = ({ terms, t }: { terms: VocabularyTerm[], t: any }) => {
+  if (! terms) {
+    return null;
+  }
+  // console.log(terms);
+  return (
+    <Table widths={ ['10%', '20%', null] } headers={ (
+      <TableRow>
+        <TableCell>{ t('descriptors.public.p.display.code') }</TableCell>
+        <TableCell>{ t('descriptors.public.p.display.term') }</TableCell>
+        <TableCell>{ t('descriptors.public.p.display.description') }</TableCell>
+      </TableRow>
+    ) }>
+      { terms.map((term: VocabularyTerm) => (
+        <TableRow key={ term.code }>
+          <TableCell className="font-bold">{ term.code }</TableCell>
+          <TableCell>{ term.title }</TableCell>
+          <TableCell>{ term.description }</TableCell>
+        </TableRow>
+      )) }
+    </Table>
+  );
+};
+
+export default translate()(DescriptorTerms);

src/ui/common/tables/index.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import MuiTable from '@material-ui/core/Table';
 import MuiTableBody from '@material-ui/core/TableBody';
 import MuiTableCell from '@material-ui/core/TableCell';
-import MuiTableFooter from '@material-ui/core/TableFooter';
+// import MuiTableFooter from '@material-ui/core/TableFooter';
 import MuiTableHead from '@material-ui/core/TableHead';
 import MuiTableRow from '@material-ui/core/TableRow';
 
@@ -39,9 +39,6 @@ function Table({ headers, children, widths = [], maxHeight }: ITableProps) {
         <MuiTableBody>
           { children }
         </MuiTableBody>
-        <MuiTableFooter>
-            <MuiTableRow style={ { height: '2rem' } } />
-        </MuiTableFooter>
       </MuiTable>
     );
 }

styles/app.styles.scss

@@ -496,14 +496,14 @@ table.genesys-table {
 		}
 	}
 	// This adds the "margins" to the left and right of the table
-	tr > td, tr > th {
-		&:first-child {
-			border-left: solid 1rem White;
-		}
-		&:last-child {
-			border-right: solid 1rem White;
-		}
-	}
+	// tr > td, tr > th {
+	// 	&:first-child {
+	// 		border-left: solid 1rem White;
+	// 	}
+	// 	&:last-child {
+	// 		border-right: solid 1rem White;
+	// 	}
+	// }
 
 	tbody {
 		> tr {