Tables: Added DATE_WITHCODE_RENDERER support and PrettyDate uses friendly display for future dates

workspaces/client/src/ui/common/table/Table.tsx

@@ -295,6 +295,7 @@ const MIN_COLUMN_WIDTH = 10;
 
 export class Renderers {
   public static DATE_RENDERER = ({ value }: { value: Date }): JSX.Element => value ? <PrettyDate value={ value } /> : null;
+  public static DATE_WITHCODE_RENDERER = (formatField: string) => ({ value, row }: { value: Date, row: unknown }): JSX.Element => value ? <PrettyDate value={ value } format={ row[formatField] } /> : null;
   public static STRING_BOOL_RENDERER = ({ value }: { value: string }): JSX.Element => {
     if(value) {
       return <div className={ `boolField ${value === 'Y' ? 'boolY' : 'boolN'}` }>{value}</div>

workspaces/client/src/ui/common/time/PrettyDate.tsx

@@ -41,7 +41,7 @@ export default connect(mapStateToProps, null)(withTranslation()(function PrettyD
 
     return (
       <span className="prettydate">
-        { !simple && diffDays <= 4 ?
+        { !simple && (diffDays <= 4 || diffSeconds < 0) ?
           moment(value).fromNow()
           :
           dateFormatter(format)(value)

workspaces/ui-express/src/accession/ui/c/AccessionActionsTable.tsx

@@ -23,10 +23,10 @@ const BasicAccessionActionsTableConfigProps = {
     id: { readonly: true, align: TextAlign.right },
   },
   columnRenderers: {
-    notBeforeDate: Renderers.DATE_RENDERER,
+    notBeforeDate: Renderers.DATE_WITHCODE_RENDERER('notBeforeDateCode'),
     createdDate: Renderers.DATE_RENDERER,
-    startedDate: Renderers.DATE_RENDERER,
-    completedDate: Renderers.DATE_RENDERER,
+    startedDate: Renderers.DATE_WITHCODE_RENDERER('startedDateCode'),
+    completedDate: Renderers.DATE_WITHCODE_RENDERER('completedDateCode'),
     isWebVisible: Renderers.STRING_BOOL_RENDERER,
     actionNameCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ AccessionAction.CodeGroup.actionNameCode } value={ value } />,
   },

workspaces/ui-express/src/inventory/ui/c/InventoryActionsTable.tsx

@@ -29,10 +29,10 @@ const BasicInventoryActionsTableConfigProps = {
     formCode: { align: TextAlign.center },
   },
   columnRenderers: {
-    notBeforeDate: Renderers.DATE_RENDERER,
+    notBeforeDate: Renderers.DATE_WITHCODE_RENDERER('notBeforeDateCode'),
     createdDate: Renderers.DATE_RENDERER,
-    startedDate: Renderers.DATE_RENDERER,
-    completedDate: Renderers.DATE_RENDERER,
+    startedDate: Renderers.DATE_WITHCODE_RENDERER('startedDateCode'),
+    completedDate: Renderers.DATE_WITHCODE_RENDERER('completedDateCode'),
     quantity: ({ value }: { value: number }) => <Number value={ value } />,
     formCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ InventoryAction.CodeGroup.formCode } value={ value } description />,
     actionNameCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ InventoryAction.CodeGroup.actionNameCode } value={ value } />,
@@ -68,8 +68,6 @@ const InventoryActionsTableConfigProps = {
     inventory: ({ value }: { value: Inventory }) => value && <InventoryLink inventory={ value } />,
     accession: ({ row }: { row: InventoryAction }) => row.inventory && row.inventory.accession && <AccessionLink accession={ row.inventory.accession } />,
     durationInDays: Renderers.NUMBER_RENDERER,
-    startedDate: Renderers.DATE_RENDERER,
-    completedDate: Renderers.DATE_RENDERER,
     quantity: Renderers.NUMBER_RENDERER,
   },
 };

workspaces/ui-express/src/request/ui/c/RequestActionsTable.tsx

@@ -27,9 +27,9 @@ const BasicRequestActionsTableConfigProps = {
     id: { readonly: true, align: TextAlign.right },
   },
   columnRenderers: {
-    notBeforeDate: Renderers.DATE_RENDERER,
-    startedDate: Renderers.DATE_RENDERER,
-    completedDate: Renderers.DATE_RENDERER,
+    notBeforeDate: Renderers.DATE_WITHCODE_RENDERER('notBeforeDateCode'),
+    startedDate: Renderers.DATE_WITHCODE_RENDERER('startedDateCode'),
+    completedDate: Renderers.DATE_WITHCODE_RENDERER('completedDateCode'),
     actionNameCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ OrderRequestAction.CodeGroup.actionNameCode } value={ value } />,
     cooperator: ({ value: cooperator }: { value: Cooperator }): JSX.Element => <CooperatorLink cooperator={ cooperator } />,
   },

workspaces/ui-express/src/viability/ui/OrderBrowsePage.tsx

@@ -7,7 +7,7 @@ import { WithTranslation, withTranslation } from 'react-i18next';
 import { Accession, Inventory, InventoryMaintenancePolicy } from '@gringlobal-ce/client/model/gringlobal';
 // Ui
 import ContentHeader from '@gringlobal-ce/client/ui/common/heading/ContentHeader';
-import Table, { TextAlign } from '@gringlobal-ce/client/ui/common/table/Table';
+import Table, { Renderers, TextAlign } from '@gringlobal-ce/client/ui/common/table/Table';
 import { CooperatorOwnedTableConfiguration as TableConfiguration } from '@gringlobal-ce/client/ui/common/table/TableConfiguration';
 import PageTitle from '@gringlobal-ce/client/ui/common/PageTitle';
 import FiltersButton from 'accession/ui/c/FiltersButton';
@@ -31,6 +31,7 @@ interface IOrderBrowsePageProps extends React.ClassAttributes<any>, WithTranslat
 export const InventoryViabilityOrderTableDefaultConfig = {
   defaultColumns: [
     'id',
+    'notBeforeDate',
     'accession',
     'formTypeCode',
     'inventoryNumber',
@@ -48,7 +49,7 @@ export const InventoryViabilityOrderTableDefaultConfig = {
   defaultColumnSettings: {
     id: { readonly: true, align: TextAlign.right },
     formTypeCode: { align: TextAlign.center },
-
+    notBeforeDate: { align: TextAlign.center, label: 'client:model.InventoryAction.notBeforeDate' },
     // inventory.accession
     ...[
       'taxonomySpecies', 'improvementStatusCode',
@@ -56,6 +57,7 @@ export const InventoryViabilityOrderTableDefaultConfig = {
     ].reduce((obj, prop) => ({...obj, [prop]: { label: `client:model.Accession.${prop}` }}), {}),
   },
   columnRenderers: {
+    notBeforeDate: Renderers.DATE_WITHCODE_RENDERER('notBeforeDateCode'),
     accession: ({ value: accession }: { value: Accession }): JSX.Element => accession ? <AccessionLink accession={ accession }/> : null,
     formTypeCode: ({ value: codeValue }: { value: string }) => <CodeValueDisplay codeGroup={ Inventory.CodeGroup.formTypeCode } value={ codeValue } description />,
     inventoryNumber: ({ row: inventory }: { row: Inventory }): JSX.Element => <InventoryLink inventory={ inventory }/>,
@@ -79,7 +81,6 @@ export const InventoryViabilityOrderTableDefaultConfig = {
 const InventoryViabilityOrderTableConfig = new TableConfiguration(InventoryViabilityOrderTableDefaultConfig);
 
 class OrderBrowsePage extends React.Component<IOrderBrowsePageProps> {
-  private scheduledInventories = [];
 
   public constructor(props) {
     super(props);
@@ -89,6 +90,7 @@ class OrderBrowsePage extends React.Component<IOrderBrowsePageProps> {
     selected: [],
     filter: {},
     scheduledActions: null,
+    scheduledInventories: null,
     orderDialogIsOpen: false,
     error: null,
   };
@@ -107,7 +109,8 @@ class OrderBrowsePage extends React.Component<IOrderBrowsePageProps> {
   }
 
   private rowsToggled = (selectedRows: number[]) => {
-    const selected = selectedRows.map((rowIndex) => this.scheduledInventories[rowIndex])
+    const { scheduledInventories } = this.state;
+    const selected = selectedRows.map((rowIndex) => scheduledInventories[rowIndex])
     this.setState({ selected });
   }
 
@@ -115,7 +118,8 @@ class OrderBrowsePage extends React.Component<IOrderBrowsePageProps> {
   private loadData = () => {
     InventoryViabilityService.listScheduledInventories(this.state.filter)
       .then((scheduledActions) => {
-        this.setState({ scheduledActions })
+        const scheduledInventories = scheduledActions.content.map(action => { return { ...action.inventory, notBeforeDate: action.notBeforeDate, notBeforeDateCode: action.notBeforeDateCode } });
+        this.setState({ scheduledActions, scheduledInventories })
       })
   }
 
@@ -150,13 +154,12 @@ class OrderBrowsePage extends React.Component<IOrderBrowsePageProps> {
 
   public render() {
     const { t } = this.props;
-    const { scheduledActions, selected, filter, orderDialogIsOpen, error } = this.state;
+    const { scheduledActions, scheduledInventories, selected, filter, orderDialogIsOpen, error } = this.state;
 
-    if (!scheduledActions) {
+    if (!scheduledInventories) {
       return <Loading/>
     }
 
-    this.scheduledInventories = scheduledActions.content.map((action) => action.inventory);
 
     const actions = [
       {
@@ -181,7 +184,7 @@ class OrderBrowsePage extends React.Component<IOrderBrowsePageProps> {
           tableKey="viability-scheduled-list"
           type={ 'Inventory' }
           columns={ InventoryViabilityOrderTableConfig.defaultColumns }
-          data={ this.scheduledInventories }
+          data={ scheduledInventories }
           tableConfig={ InventoryViabilityOrderTableConfig }
           total={ scheduledActions.content && scheduledActions.totalElements }
           onRowsToggled={ this.rowsToggled }