RequestDetailsPage.tsx

import * as React from 'react';
import memoize from 'memoize-one';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { WithTranslation, withTranslation } from 'react-i18next';
// import update from 'immutability-helper';

// Model
import {
  OrderRequest, Inventory, OrderRequestItem,
  Cooperator, Accession, OrderRequestAction,
} from '@gringlobal-ce/client/model/gringlobal';
import { OrderRequestItemStatus } from '@gringlobal-ce/client/model/gringlobal/OrderRequestItem';
import WebOrderRequestItem from '@gringlobal-ce/client/model/gringlobal/WebOrderRequestItem';
// Action
import navigateTo from '@gringlobal-ce/client/action/navigation';
import {
  getOrderRequestAction,
  listOrderRequestItemsAction,
  receiveOrderRequestItemsSuccessAction,
  editOrderRequestAction,
  removeOrderRequestAction,
  removeOrderRequestItemsAction,
  editOrderRequestItemAction,
  receiveRequestAttachmentSuccessAction,
  removeRequestAttachmentAction,
  removeRequestAttachmentsAction,
  uploadRequestAttachment,
} from 'request/action/public';
import { showSnackbar } from '@gringlobal-ce/client/action/snackbar';
// Service
import { RequestService } from '@gringlobal-ce/client/service';
// UI
import Loading from '@gringlobal-ce/client/ui/common/Loading';
import { Card, CardContent, CardHeader, CardActions, Button } from '@material-ui/core';
import { Properties, PropertiesItem } from '@gringlobal-ce/client/ui/common/Properties';
import Table, { TextAlign } from '@gringlobal-ce/client/ui/common/table/Table';
import { CooperatorOwnedTableConfiguration as TableConfiguration } from '@gringlobal-ce/client/ui/common/table/TableConfiguration';
import { CodeValueDisplay } from 'common/CodeValue';
import ButtonBar from '@gringlobal-ce/client/ui/common/button/ButtonBar';
import PageTitle from '@gringlobal-ce/client/ui/common/PageTitle';
import { BasicRequestActionsTable as RequestActionsTable } from 'request/ui/c/RequestActionsTable';
import { BasicRequestItemActionsTable as RequestItemActionsTable } from 'request/ui/c/RequestItemActionsTable';
import Tab from '@material-ui/core/Tab';
import HeaderTabs from '@gringlobal-ce/client/ui/common/tabs/HeaderTabs';
import TabPanel from '@gringlobal-ce/client/ui/common/tabs/TabPanel';
import SlotLayout from '@gringlobal-ce/client/ui/common/layout/SlotLayout';
import AuditDataDisplay from 'common/AuditDataDisplay';
import withTabs, { IWithTabs } from 'ui/common/withTabs';
import { withStyles, WithStyles } from '@material-ui/core/styles';
import { AccessionLink, CooperatorLink, InventoryLink } from 'ui/common/Links';
import InventorySelector from 'inventory/ui/c/InventorySelector';
import AccessionInventorySelector from 'accession/ui/c/AccessionInventorySelector';
import OrderRequestForm from 'request/ui/c/OrderRequestForm';
import QRCode from 'ui/barcode/QRCode';
import { PrintSpecies } from 'common/Taxonomy';
import { loadAllPages } from '@gringlobal-ce/client/utilities';
import PrintIcon from '@material-ui/icons/Print';
import SourceInventorySelector from 'request/ui/c/SourceInventorySelector';
import confirm from '@gringlobal-ce/client/utilities/confirmAlert';
import { Page } from '@gringlobal-ce/client/model/page';
import OrderRequestItemFormWithDetails from 'request/ui/c/OrderRequestItemFormWithDetails';
import Number from '@gringlobal-ce/client/ui/common/Number';
import FABMenu from '@gringlobal-ce/client/ui/common/button/FABMenu';
import AddNewButton from '@gringlobal-ce/client/ui/common/button/AddNewButton';
import PostAddIcon from '@material-ui/icons/PostAdd';
import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined';
import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
import UpdateOutlinedIcon from '@material-ui/icons/UpdateOutlined';
import PauseOutlinedIcon from '@material-ui/icons/PauseOutlined';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import ListAltOutlinedIcon from '@material-ui/icons/ListAltOutlined';
import CallSplitIcon from '@material-ui/icons/CallSplit';
import LocalShippingIcon from '@material-ui/icons/LocalShipping';
import EditIcon from '@material-ui/icons/Edit';
import AdjustIcon from '@material-ui/icons/Adjust';
import OrderRequestActionForm from 'request/ui/c/RequestActionForm';
import OrderRequestItemAction from '@gringlobal-ce/client/model/gringlobal/OrderRequestItemAction';
import { Alert } from '@material-ui/lab';
import { Link } from 'react-router-dom';
import AttachmentsDisplay from 'repository/ui/c/AttachmentsDisplay';
import FileUploader from '@gringlobal-ce/client/ui/common/file-uploader';
import RequestAttachForm from 'request/ui/c/RequestAttachForm';
import RequestItemActionDialog from 'request/ui/c/RequestItemActionDialog';
import CodeValueInfo from '@gringlobal-ce/client/model/gringlobal/CodeValueInfo';
import CreateCooperatorAction from 'cooperator/ui/c/CreateCooperatorAction';
import PrintReportDialog from 'common/PrintReportDialog';
import { showDialog } from '@gringlobal-ce/client/action/dialog';

const styles = (theme) => ({
  tableWrapper: {
    position: "relative" as const,
  },
});

export const OrderRequestItemTableConfig = new TableConfiguration({
  defaultColumns: [
    'sequenceNumber', 'statusCode',
    'accession', 'improvementStatusCode', 'taxonomySpecies',
    'inventory', 'withdrawnInventory', 'name', 'quantityOnHand', 'quantityShipped', 'quantityShippedUnitCode'
  ],
  ignoredColumns: [
    'id', '_class', 'createdBy', 'modifiedBy', 'ownedBy', 'ownedDate',
  ],
  defaultColumnSettings: {
    id: { readonly: true, align: TextAlign.right },
    sequenceNumber: { align: TextAlign.right },
    statusCode: { align: TextAlign.center },
    accession: { label: 'client:model.Accession.accessionNumber', sort: 'inventory.accession.accessionNumber' },
    improvementStatusCode: { label: 'client:model.Accession.improvementStatusCode' },
    taxonomySpecies: { label: 'client:model.Accession.taxonomySpecies', sort: 'inventory.accession.taxonomySpecies.name' },
    quantityOnHand: { label: 'client:model.Inventory.quantityOnHand', sort: 'inventory.quantityOnHand' }
  },
  columnRenderers: {
    statusCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ OrderRequestItem.CodeValue.statusCode } value={ value } />,
    inventory: ({ value }: { value: Inventory }) => <InventoryLink inventory={ value } />,
    withdrawnInventory: ({ value }: { value: Inventory }) => value && <InventoryLink inventory={ value } />,
    accession: ({ row }: { row: OrderRequestItem }) => row?.inventory?.accession && <AccessionLink accession={ row.inventory.accession } />,
    taxonomySpecies: ({ row }: { row: OrderRequestItem }): JSX.Element => <PrintSpecies taxonomySpecies={ row?.inventory?.accession?.taxonomySpecies } />,
    improvementStatusCode: ({ row }: { row: OrderRequestItem }) => <CodeValueDisplay codeGroup={ Accession.CodeGroup.improvementStatusCode } value={ row?.inventory?.accession?.improvementStatusCode } />,
    quantityOnHand: ({ row }: { row: OrderRequestItem }) => <Number value={ row?.inventory?.quantityOnHand } />,
    sourceCooperator: ({ value }: { value: Cooperator }): JSX.Element => <CooperatorLink cooperator={ value } />,
    webOrderRequestItem: ({ value }: { value: WebOrderRequestItem}) => value && <span>{ value.id } { value.name }</span>
  },
});

/**
 * Cooperator address component
 */
const RequestorAddress = ({ cooperator }: { cooperator: Cooperator }) =>
  <>
    <div><CooperatorLink cooperator={ cooperator } /></div>
    { cooperator.lastName && <div>{ cooperator?.organization }</div> }
    { [ 'addressLine1', 'addressLine2', 'addressLine3' ].map((property) => (
      <div key={ property }>
        { cooperator?.[property] }
      </div>
    )) }
    <div>{ cooperator?.postalIndex } { cooperator?.city }</div>
    <div>{ cooperator?.geography?.countryCode }</div>
  </>

enum RequestTabs {
  REQUEST = 'request',
  ATTACHMENTS = 'attachments',
  ACTIONS = 'actions',
  ITEM_ACTIONS = 'itemActions'
}

class OrderRequestDetailsPage extends React.Component<PropsFromRedux & WithTranslation & WithStyles & IWithTabs> {

  protected static needs = [
    ({ params: { id } }) => getOrderRequestAction(id),
    ({ params: { id } }) => listOrderRequestItemsAction(id),
  ];

  private static PRINT_DIALOG_KEY = 'order-print-pdf-dialog';
  public static defaultTab = RequestTabs.REQUEST;

  public state: {
    actionList: OrderRequestAction[],
    itemActionList: OrderRequestItemAction[],
    selectedItems: number[],
    selectedActions: OrderRequestAction[],
    sourceInventoryDialogIsOpen: boolean,
    itemsInventoryDialogIsOpen: boolean,
    itemsAccessionDialogIsOpen: boolean,
    orderRequestDialogIsOpen: boolean,
    actionDialogIsOpen: boolean,
    itemActionDialogIsOpen: boolean,
    createNewAction: boolean,
    error: string,
    orderRequestItemDialogIsOpen: boolean,
  } = {
    actionList: null,
    itemActionList: null,
    selectedItems: [],
    selectedActions: [],
    sourceInventoryDialogIsOpen: false,
    itemsInventoryDialogIsOpen: false,
    itemsAccessionDialogIsOpen: false,
    orderRequestDialogIsOpen: false,
    actionDialogIsOpen: false,
    itemActionDialogIsOpen: false,
    createNewAction: false,
    error: null,
    orderRequestItemDialogIsOpen: false,
  }

  public constructor(props) {
    super(props);
  }

  public componentDidMount(): void {
    const { id, requestCall } = this.props;
    if (id && !requestCall || requestCall.data.id !== +id) {
      this.reloadData();
    }
  }

  public componentDidUpdate(prevProps) {
    const { id, requestCall ,currentTab, showSnackbar } = this.props;
    if (!requestCall || !requestCall.loading && (!requestCall.error && id && +id !== requestCall.data.id)) {
      this.reloadData();
    }

    if ((id && +id !== requestCall?.data?.id) || currentTab === RequestTabs.ACTIONS && currentTab !== prevProps.currentTab) {
      loadAllPages(RequestService, RequestService.listActionsByOrderRequest, id).then((data) => {
          this.setState({ actionList: data })
      }).catch((e) => {
        showSnackbar(e.data && e.data.error || e.toString());
      });
    }

    if ((id && +id !== requestCall?.data?.id) || currentTab === RequestTabs.ITEM_ACTIONS && currentTab !== prevProps.currentTab) {
      loadAllPages(RequestService, RequestService.listItemActionsByOrderRequest, id).then((data) => {
        this.setState({ itemActionList: data })
      }).catch((e) => {
        showSnackbar(e.data && e.data.error || e.toString());
      });
    }
  }

  private reloadData = () => {
    const { id, getOrderRequestAction, listOrderRequestItemsAction } = this.props;
    getOrderRequestAction(id);
    listOrderRequestItemsAction(id);
  }

  private loadMoreItems = (): void => {
    const { id, listOrderRequestItemsAction, requestItemsCall } = this.props;
    listOrderRequestItemsAction(id, {}, Page.nextPage(requestItemsCall.data));
  };

  private handleUpdateItems = (updatedItems) => {
    const { id, listOrderRequestItemsAction, showSnackbar } = this.props;
    RequestService.updateItems(updatedItems).then((res) => {
      listOrderRequestItemsAction(id);
      this.closeSourceInventoryDialog();
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  private printRequest = () => {
    const { id, receiveOrderRequestItemsSuccessAction } = this.props;
    loadAllPages(RequestService, RequestService.filterItems, {}, id).then((data) => {
      receiveOrderRequestItemsSuccessAction(data);
      window.print()
    });
  }

  private renumberItems = () => {
    const { id, listOrderRequestItemsAction } = this.props;
    RequestService.renumber(id).then(() => {
      listOrderRequestItemsAction(id);
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  private generateInventories = () => {
    const { id, listOrderRequestItemsAction } = this.props;
    RequestService.generateInventories(id).then(() => {
      listOrderRequestItemsAction(id);
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  private rowsToggled = (selectedRows: number[]) => {
    this.setState({ selectedItems: selectedRows });
  }

  // private toggleSelectAll = () => {
  //   const { requestItemsCall: { data: { content } } } = this.props;
  //   const { selectedItems } = this.state;
  //   let items = content.map((i, idx) => idx);
  //   if (selectedItems.length === items.length) {
  //     items = [];
  //   }
  //   this.setState({
  //     selectedItems: [ ...items ],
  //   });
  // }

  private removeItems = () => {
    const { t, removeOrderRequestItemsAction,  requestItemsCall: { data: { content: items } }, id } = this.props;
    const { selectedItems } = this.state;

    confirm(t('common:label.deleteListConfirm', { count: selectedItems.length, what: t('client:model.name.OrderRequestItem', { count: selectedItems.length }) }), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(() => {
      removeOrderRequestItemsAction(items.filter((item, index) => selectedItems.includes(index)).map((i) => i.id), +id)
      this.setState({ selectedItems: [] })
    });
  };

  private updateItemStatus = (newStatus: OrderRequestItemStatus) => () => {
    const { id, listOrderRequestItemsAction, requestCall: { data: request }, requestItemsCall: { data: { content: items } } } = this.props;

    const selectedItems = this.state.selectedItems.map((i) => items[i]);
    console.log(`Updating selected items status to ${newStatus}`, selectedItems);

    RequestService.updateItemStatus(request.id, newStatus, selectedItems.map((item) => item.id))
      .then((data) => {
        console.log('Items updated!!', data);
        listOrderRequestItemsAction(id);
      }).catch((err) => {
        console.log('Error updating items', err);
      });
  }

  private getItemStatusIcon = (value: string) => {
    switch (value) {
      case OrderRequestItemStatus.NEW: {
        return <FiberNewOutlinedIcon/>
      }
      case OrderRequestItemStatus.CANCEL: {
        return <CancelOutlinedIcon/>
      }
      case OrderRequestItemStatus.PENDING: {
        return <UpdateOutlinedIcon/>
      }
      case OrderRequestItemStatus.HOLD: {
        return <PauseOutlinedIcon/>
      }
      case OrderRequestItemStatus.INSPECT: {
        return <SearchOutlinedIcon/>
      }
      case OrderRequestItemStatus.QUALITYTEST: {
        return <ListAltOutlinedIcon/>
      }
      case OrderRequestItemStatus.SPLIT: {
        return <CallSplitIcon/>
      }
      case OrderRequestItemStatus.SHIPPED: {
        return <LocalShippingIcon/>
      }
      default: {
        return <AdjustIcon/>
      }
    }
  }

  private verifyItemList = () => {
    const { requestCall: { data: request }, showSnackbar, t } = this.props;
    RequestService.startOrderItemActions(request.id, OrderRequestItem.Actions.VERIFY).then((data) => {
      console.log('Action started for {} items!', data.length);
      showSnackbar(t('common:label.actionScheduled', { count: data.length }));
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  private handleSubmit = (formData: OrderRequest) => {
    const { editOrderRequestAction } = this.props;
    editOrderRequestAction(formData);
    this.closeOrderRequestDialog();
  };

  private handleEditItem = (formData: OrderRequestItem) => {
    const { editOrderRequestItemAction } = this.props;
    if (formData.sourceCooperator) {
      formData.sourceCooperator = { id: formData.sourceCooperator as any } as Cooperator
    }
    editOrderRequestItemAction(formData);
    this.closeOrderRequestItemDialog();
  };

  private handleSubmitAction = (formData: OrderRequestAction) => {
    const { requestCall: { data: request } } = this.props;
    const { actionList, selectedActions } = this.state;
    let updatedActionList = [ ...actionList ]
    this.resetError()
    formData.orderRequest = { id: request?.id } as OrderRequest;
    let requestActionPromise: Promise<OrderRequestAction>;
    if (formData.id) {
      requestActionPromise = RequestService.updateAction(formData);
    } else {
      requestActionPromise = RequestService.createAction(formData);
    }
    requestActionPromise
      .then((requestAction: OrderRequestAction) => {
        console.log('success', requestAction);
        if (formData.id) {
          const foundIndex = actionList?.findIndex((data) => +data.id === +requestAction.id)
          updatedActionList[foundIndex] = requestAction
        } else {
          updatedActionList = [ requestAction, ...actionList ]
        }
        this.setState({ actionList: [ ...updatedActionList ], selectedActions: formData.id ? [ requestAction ] : selectedActions });
        this.closeActionDialog();
      })
      .catch((e) => {
        console.log('error', e);
        this.setState({ error: e.data && e.data.error || e.toString() });
      });
  };

  private handleSubmitItemAction = async (formData: OrderRequestItemAction) => {
    const { showSnackbar, t,  requestItemsCall: { data: { content: items } } } = this.props;
    const { itemActionList } = this.state;
    const selectedItems = this.state.selectedItems.map((i) => items[i]);
    this.resetError()
    for (const item of selectedItems) {
      try {
        const requestItemAction = await RequestService.createItemAction({ ...formData, orderRequestItem: { id: item.id } as OrderRequestItem });
        this.setState({ itemActionList: [ requestItemAction, ...(itemActionList ?? []) ] })
      } catch (e) {
        console.log('error', e);
        this.setState({ error: e.data && e.data.error || e.toString() });
        showSnackbar(t('request.public.p.details.unableToAddActionForItem', { itemId: item.id }))
        return;
      }
    }
    this.closeItemActionDialog();
  };

  private resetError = () => {
    return this.setState({ error: null });
  }

  private onActionsSelected = (selectedRows: number[]) => {
    const { actionList } = this.state;
    const selectedActions = selectedRows.map((rowIndex) => actionList[rowIndex])
    this.setState({ selectedActions });
  }

  private onItemActionsSelected = (selectedRows: number[]) => {
    const { itemActionList } = this.state;
    const selectedItemActions = selectedRows.map((rowIndex) => itemActionList[rowIndex])
    this.setState({ selectedItemActions });
  }

  // source inventory
  private openSourceInventoryDialog = () => this.setState({ sourceInventoryDialogIsOpen: true });

  private closeSourceInventoryDialog = () => this.setState({ sourceInventoryDialogIsOpen: false });

  // by accession
  private openItemsAccessionDialog = () => this.setState({ itemsAccessionDialogIsOpen: true });

  private closeItemsAccessionDialog = () => this.setState({ itemsAccessionDialogIsOpen: false });

  // by inventory
  private openItemsInventoryDialog = () => this.setState({ itemsInventoryDialogIsOpen: true });

  private closeItemsInventoryDialog = () => this.setState({ itemsInventoryDialogIsOpen: false });

  // edit request
  private openOrderRequestDialog = () => this.setState({ orderRequestDialogIsOpen: true });

  private closeOrderRequestDialog = () => this.setState({ orderRequestDialogIsOpen: false });

  // edit request item
  private openOrderRequestItemDialog = () => this.setState({ orderRequestItemDialogIsOpen: true });

  private closeOrderRequestItemDialog = () => this.setState({ orderRequestItemDialogIsOpen: false });

  //edit request action
  private openActionDialog = (createNewAction = true) => {
    this.setState({ actionDialogIsOpen: true, createNewAction });
  };

  private closeActionDialog = () => {
    this.setState({ actionDialogIsOpen: false, createNewAction: false });
  };

  // edit request item action
  private openItemActionDialog = (createNewAction = true) => {
    this.setState({ itemActionDialogIsOpen: true, createNewAction });
  }

  private closeItemActionDialog = () => {
    this.setState({ itemActionDialogIsOpen: false, createNewAction: false });
  }

  private onInventoriesSelect = (selected, byAccession: boolean) => {
    const { id, showSnackbar, listOrderRequestItemsAction } = this.props;
    RequestService.addInventories(id, selected).then(() => {
      listOrderRequestItemsAction(id);
      byAccession ? this.closeItemsAccessionDialog() : this.closeItemsInventoryDialog();
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  public handleRemove = () => {
    const { removeOrderRequestAction, t, id, requestCall: { data: request } } = this.props;
    confirm(t('common:label.deleteItemConfirm', { title: request.localNumber, what: t('client:model.name.OrderRequest') }), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(() => {
      removeOrderRequestAction(+id);
    });
  };

  private handleUploading = (files: File[]) => {
    const { requestCall, uploadRequestAttachment } = this.props;
    uploadRequestAttachment(requestCall.data.id, files);
  };

  private handleAttachmentSubmit = (data, closeDialog) => {
    const { receiveRequestAttachmentSuccessAction } = this.props
    if(data.request && !data.request.id) {
      data.request = { id: data.request }
    }
    RequestService.updateAttach(data)
      .then((updatedAttach) => {
        closeDialog();
        receiveRequestAttachmentSuccessAction(updatedAttach);
      })
      .catch((e) => {
        this.setState({ error: e.data && e.data.error || e.toString() })
      })
  }

  private handleEditFile = (fileId, openDialog, updateFileMeta) => {
    RequestService.getAttach(fileId)
      .then((fileMeta) => {
        updateFileMeta(fileMeta);
        openDialog();
      })
  }

  private getCodeValueItemStatusActions = memoize((codeValue: { [key: string]: CodeValueInfo }) => {
    return codeValue ? Object.keys(codeValue).map((value) => ({
      title: <CodeValueDisplay value={ value } codeGroup={ OrderRequestItem.CodeValue.statusCode } />,
      action: this.updateItemStatus(value as OrderRequestItemStatus),
      icon: this.getItemStatusIcon(value),
    })) : []
  })

  public render(): React.ReactNode {
    const { requestCall, requestItemsCall, codeValuesCall, removeRequestAttachmentAction, removeRequestAttachmentsAction, t, currentTab, onTabChange, classes } = this.props;
    const {
      actionList, itemActionList, selectedItems, selectedActions, sourceInventoryDialogIsOpen, itemsInventoryDialogIsOpen, orderRequestItemDialogIsOpen,
      itemsAccessionDialogIsOpen, orderRequestDialogIsOpen, actionDialogIsOpen, itemActionDialogIsOpen, createNewAction, error
    } = this.state;
    const columns = OrderRequestItemTableConfig.getColumns(requestItemsCall && requestItemsCall.data && requestItemsCall.data.content ? requestItemsCall.data.content[0] : null);
    if (!requestCall) {
      return null;
    }

    const actionActions = [
      {
        title: 'common:action.edit',
        action: () => this.openActionDialog(false),
        icon: <EditIcon/>,
        disabled: selectedActions.length !== 1
      },
    ]

    const addItemActions = [
      {
        title:'request.public.p.details.byAccession',
        action: this.openItemsAccessionDialog,
        icon: <PostAddIcon/>,
      },
      {
        title:'request.public.p.details.byInventory',
        action: this.openItemsInventoryDialog,
        icon: <PostAddIcon/>,
      },
    ]

    const itemActions = [
      {
        title: 'common:action.remove',
        action: this.removeItems,
        icon: <CancelOutlinedIcon/>,
      },
      {
        title: 'common:action.edit',
        action: this.openOrderRequestItemDialog,
        icon: <EditIcon/>,
        disabled: selectedItems.length !== 1
      },
      {
        title:t('common:action.add', { what: t('client:model.name.OrderRequestItemAction') }),
        action: this.openItemActionDialog,
        icon: <PostAddIcon/>,
      },
      {
        title:'request.public.p.details.changeInventory',
        action: this.openSourceInventoryDialog,
        icon: <AssignmentOutlinedIcon/>,
      },
      ...this.getCodeValueItemStatusActions(codeValuesCall?.data?.[OrderRequestItem.CodeValue.statusCode])
    ]

    const { loading, data: request } = requestCall;
    const selectedItem = requestItemsCall?.data?.content?.[selectedItems[0]];

    return (
      <>
        <PageTitle title={ request ? request.localNumber ? request.localNumber : `${t('request.public.p.details.title')} ${request.id}` : t('request.public.p.details.title') }/>
        <HeaderTabs
          value={ currentTab }
          textColor="primary"
          onChange={ onTabChange }
          variant="scrollable"
          scrollButtons="auto"
          aria-label="Request tabs"
        >
          <Tab value={ RequestTabs.REQUEST } label={ t('request.public.p.details.title') } />
          <Tab value={ RequestTabs.ATTACHMENTS } label={ t('request.public.p.details.attachments') } />
          <Tab value={ RequestTabs.ACTIONS } label={ t('request.public.p.details.actions') } />
          <Tab value={ RequestTabs.ITEM_ACTIONS } label={ t('request.public.p.details.itemActions') } />
        </HeaderTabs>
        <TabPanel value={ currentTab } index={ RequestTabs.REQUEST }>
          { loading && <Loading/> }
          { request &&
            <SlotLayout
              fixedContent={
                <>
                  <Card>
                    { request && <div style={ { float: 'left' } }>
                      <QRCode width="80px" value={ `OR:${request.id}` } />
                    </div> }
                    <CardHeader title={
                      request
                        ? <>{ request.localNumber ? request.localNumber : request.id }</>
                        : t('request.public.p.details.title')
                    }
                      subheader={ request && <>
                        <CodeValueDisplay codeGroup={ OrderRequest.CodeGroup.orderTypeCode } value={ request.orderTypeCode } />
                        { request.intendedUseCode && <span> &mdash; </span> }
                        <CodeValueDisplay codeGroup={ OrderRequest.CodeGroup.intendedUseCode } value={ request.intendedUseCode } />
                      </> }
                    />
                    { request.originalOrderRequest && request.originalOrderRequest !== request.id &&
                      <Alert style={{ clear: 'both', borderRadius: 0 }} severity="info">
                        <Link to={ `/dist/request/${request.originalOrderRequest}` } title={ t('common:action.navigateTo', { where: t(['client:model.OrderRequest.originalOrderRequest', 'client:model._.originalOrderRequest']) }) }>
                          { t('request.public.p.details.splitFromRequest', { originalRequestId: request.originalOrderRequest }) }
                        </Link>
                      </Alert>
                    }
                    <CardContent>
                      <Properties>
                        {/* <PropertiesItem title={ t(['client:model.OrderRequest.orderTypeCode', 'client:model._.orderTypeCode']) }>
                          <CodeValueDisplay codeGroup={ OrderRequest.CodeGroup.orderTypeCode } value={ request.orderTypeCode } />
                        </PropertiesItem> */}
                        { [ /* 'localNumber', 'intendedUseNote', */ 'orderObtainedVia', 'specialInstruction', 'note' ].map((property) => (
                          <PropertiesItem key={ property } title={ t([`client:model.OrderRequest.${property}`, `client:model._.${property}`]) }>
                            { request[property] }
                          </PropertiesItem>
                        )) }
                        <PropertiesItem title={ t(['client:model.OrderRequest.intendedUseCode', 'client:model._.intendedUseCode']) }>
                          <CodeValueDisplay codeGroup={ OrderRequest.CodeGroup.intendedUseCode } value={ request.intendedUseCode } />
                        </PropertiesItem>

                        { request.finalRecipientCooperator && <PropertiesItem title={ t(['client:model.OrderRequest.finalRecipientCooperator', 'client:model._.finalRecipientCooperator']) }>
                          <RequestorAddress cooperator={ request.finalRecipientCooperator } />
                        </PropertiesItem> }
                        { request.shipToCooperator && <PropertiesItem title={ t(['client:model.OrderRequest.shipToCooperator', 'client:model._.shipToCooperator']) }>
                          { request.shipToCooperator?.id === request?.finalRecipientCooperator?.id ? t('request.public.p.details.sameAsFinalRecipient') : <RequestorAddress cooperator={ request.shipToCooperator } /> }
                        </PropertiesItem> }
                        { request.requestorCooperator && <PropertiesItem title={ t(['client:model.OrderRequest.requestorCooperator', 'client:model._.requestorCooperator']) }>
                          { request.finalRecipientCooperator?.id === request.requestorCooperator?.id ? t('request.public.p.details.sameAsFinalRecipient') : <RequestorAddress cooperator={ request.requestorCooperator } /> }
                        </PropertiesItem> }

                        <AuditDataDisplay item={ request } withoutAuditFields/>
                      </Properties>
                    </CardContent>
                    <CardActions>
                      <ButtonBar>
                        <Button variant="outlined" color="secondary" onClick={ () => this.props.showDialog(OrderRequestDetailsPage.PRINT_DIALOG_KEY) }>
                          { t('common:action.generatePdf') }
                        </Button>
                        <Button variant="contained" color="primary" onClick={ this.printRequest } startIcon={ <PrintIcon /> }>
                          { t('request.public.p.retrievalList.label.printRequest') }
                        </Button>
                        <Button variant="contained" color="primary" onClick={ this.renumberItems }>
                          { t('request.public.p.details.renumberItems') }
                        </Button>
                        <Button variant="contained" color="primary" onClick={ this.generateInventories }>
                          { t('request.public.p.details.createWithdrawnInventories') }
                        </Button>
                        <Button variant="contained" color="primary" onClick={ this.verifyItemList }>{ t('request.public.p.details.verifyItemList') }</Button>
                        <Button variant="contained" color="secondary" onClick={ this.openOrderRequestDialog }>{ t('common:action.edit') }</Button>
                        <Button variant="outlined" color="secondary" onClick={ this.handleRemove }>{ t('common:action.remove') }</Button>
                      </ButtonBar>
                    </CardActions>
                  </Card>
                </>
              }
            >
              <Card>
                <CardHeader title={ t('request.public.p.details.items', { count: requestItemsCall?.data?.totalElements }) } />
                <div className={ classes.tableWrapper }>
                  <Table
                    noWrap
                    tableKey="request-items-list"
                    type={ 'OrderRequestItem' }
                    columns={ columns }
                    data={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.content }
                    tableConfig={ OrderRequestItemTableConfig }
                    total={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.content && requestItemsCall.data.totalElements }
                    // sort={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.sort }
                    // onSortChange={ onSortChange }
                    onRowsToggled={ this.rowsToggled }
                    loadMore={ this.loadMoreItems }
                  />
                </div>
                <SourceInventorySelector items={ selectedItems.map((index) => requestItemsCall?.data?.content?.[index]) } onSubmit={ this.handleUpdateItems } isOpen={ sourceInventoryDialogIsOpen } onClose={ this.closeSourceInventoryDialog }/>
                <AccessionInventorySelector onInventoriesSelect={ this.onInventoriesSelect } isOpen={ itemsAccessionDialogIsOpen } onClose={ this.closeItemsAccessionDialog }/>
                <InventorySelector onInventoriesSelect={ this.onInventoriesSelect } isOpen={ itemsInventoryDialogIsOpen } onClose={ this.closeItemsInventoryDialog }/>
              </Card>
            </SlotLayout>
          }
          <OrderRequestForm
            isOpen={ orderRequestDialogIsOpen }
            onClose={ this.closeOrderRequestDialog }
            onSubmit={ this.handleSubmit }
            formId="order-request-form"
            title={ request?.localNumber }
            size="lg"
            initialValues={ request }
            additionalActions={
              <CreateCooperatorAction/>
            }
          />
          <RequestItemActionDialog
            isOpen={ itemActionDialogIsOpen }
            onClose={ this.closeItemActionDialog }
            onSubmit={ this.handleSubmitItemAction }
            formId="request-item-action-form"
            items={ selectedItems.map((index) => requestItemsCall?.data?.content?.[index]) }
            error={ error }
            resetError={ this.resetError }
          />
          { selectedItems.length === 0 &&
            <AddNewButton
              actions={ addItemActions }
              addTitle
              tooltipOpen
            />
          }
          { selectedItems.length > 0 &&
            <FABMenu
              title="request.public.p.details.setStatus"
              actions={ itemActions }
            />
          }
          <OrderRequestItemFormWithDetails
            isOpen={ orderRequestItemDialogIsOpen }
            onClose={ this.closeOrderRequestItemDialog }
            onSubmit={ this.handleEditItem }
            formId="order-request-item-form"
            title={ selectedItem?.name || t('request.public.p.edit.itemTitle', { number: selectedItem?.sequenceNumber }) }
            size="lg"
            initialValues={ selectedItem || {} }
          />
          <PrintReportDialog
            endpoint="order"
            modelName="OrderRequest"
            selectedItemIds={ [ request?.id ] }
            dialogKey={ OrderRequestDetailsPage.PRINT_DIALOG_KEY }
          />
        </TabPanel>
        <TabPanel value={ currentTab } index={ RequestTabs.ATTACHMENTS }>
          <Card>
            <CardHeader title={ t('request.public.p.details.attachments') } />
            { request?.attachments &&
              <AttachmentsDisplay
                AttachmentForm={ RequestAttachForm }
                handleSubmit={ this.handleAttachmentSubmit }
                handleEdit={ this.handleEditFile }
                removeAttachmentAction={ removeRequestAttachmentAction }
                removeAttachmentsAction={ removeRequestAttachmentsAction }
                id={ request.id }
                attachments={ request.attachments }
              />
            }
            <div className="p-1rem">
              <FileUploader id="crop-attachment" handleUploading={ this.handleUploading }/>
            </div>
          </Card>
        </TabPanel>
        <TabPanel value={ currentTab } index={ RequestTabs.ACTIONS }>
          { actionList && <RequestActionsTable onActionSelected={ this.onActionsSelected } actions={ actionList }/> }
          { selectedActions.length === 0 &&
            <AddNewButton action={ this.openActionDialog }/>
          }
          { selectedActions.length > 0 &&
            <FABMenu
              title="common:label.openActionList"
              actions={ actionActions }
            />
          }
          <OrderRequestActionForm
            isOpen={ actionDialogIsOpen }
            onClose={ this.closeActionDialog }
            onSubmit={ this.handleSubmitAction }
            formId="request-action-form"
            title={ ! createNewAction && selectedActions.length === 1
              ? t('common:action.editItem', { what: t('client:model.name.OrderRequestAction') })
              : t('common:action.add', { what: t('client:model.name.OrderRequestAction') })
            }
            size="lg"
            error={ error }
            resetError={ this.resetError }
            initialValues={ ! createNewAction ? selectedActions[0] : {} }
          />
        </TabPanel>
        <TabPanel value={ currentTab } index={ RequestTabs.ITEM_ACTIONS }>
          { itemActionList && <RequestItemActionsTable onActionSelected={ this.onItemActionsSelected } actions={ itemActionList }/> }
        </TabPanel>
      </>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  id: ownProps.routeParams.id,
  requestCall: state.request.public.request,
  requestItemsCall: state.request.public.requestItems,
  codeValuesCall: state.codeValue.public.codeValuesCall,
});

const mapDispatch = {
  getOrderRequestAction,
  listOrderRequestItemsAction,
  receiveOrderRequestItemsSuccessAction,
  uploadRequestAttachment,
  removeRequestAttachmentAction,
  removeRequestAttachmentsAction,
  receiveRequestAttachmentSuccessAction,
  editOrderRequestAction,
  removeOrderRequestAction,
  removeOrderRequestItemsAction,
  editOrderRequestItemAction,
  navigateTo,
  showSnackbar,
  showDialog,
}

type PropsFromRedux = ReturnType<typeof mapStateToProps> & typeof mapDispatch;

export default compose(
  connect(mapStateToProps, mapDispatch),
  withTranslation(),
  withStyles(styles),
)(withTabs(OrderRequestDetailsPage));