AccessionDetailsPage.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { WithTranslation, withTranslation } from 'react-i18next';
// Action
import {
  getAccessionAction,
  getAccessionInventories,
  uploadAccessionAttachments,
  removeAccessionAction,
  removeAccessionInvNameAction,
  receiveAccessionInvNameSuccessAction,
  removeAccessionIprAction,
  receiveAccessionIprSuccessAction,
  receiveAccessionSourceSuccessAction,
  removeAccessionSourceAction,
  receiveAccessionSourceMapSuccessAction,
  removeAccessionSourceMapAction,
  receiveAccessionPedigreeSuccessAction,
  removeAccessionPedigreeAction,
  receiveCitationSuccessAction,
  removeCitationAction,
  removeAccessionQuarantineAction,
  receiveAccessionQuarantineSuccessAction,
  removeAccessionAttachmentAction,
  receiveAccessionSuccessAction,
  removeAccessionAttachmentsAction,
  receiveAccessionAttachmentSuccessAction,
} from 'accession/action/public';
// Service
import { UISecurity as P, AccessionService, InventoryService, SourceDescObservationService } from '@gringlobal-ce/client/service';
import navigateTo from '@gringlobal-ce/client/action/navigation';
import { showDialog } from '@gringlobal-ce/client/action/dialog';

// Models
import {
  AuditLog,
  Accession,
  Inventory,
  AccessionAction,
  AccessionIpr,
  AccessionSource,
  Geography,
  Cooperator, SourceDescObservationFilteredPage,
} from '@gringlobal-ce/client/model/gringlobal';
import { SortDirection, Page, IPageRequest } from '@gringlobal-ce/client/model/page';
// 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 PrettyDate from '@gringlobal-ce/client/ui/common/time/PrettyDate';
import { PrintSpecies } from 'common/Taxonomy';
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 FileUploader from '@gringlobal-ce/client/ui/common/file-uploader';
import AttachmentsDisplay from 'repository/ui/c/AttachmentsDisplay';
import AuditDataDisplay from 'common/AuditDataDisplay';
import AuditLogsTable from 'common/AuditLogsTable';
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 { GridContainer, GridItem } from '@gringlobal-ce/client/ui/common/grid';
import withTabs, { IWithTabs } from 'ui/common/withTabs';
import SlotLayout from '@gringlobal-ce/client/ui/common/layout/SlotLayout';
import confirm from '@gringlobal-ce/client/utilities/confirmAlert';
import { showSnackbar } from '@gringlobal-ce/client/action/snackbar';
import { BasicAccessionActionsTable } from 'accession/ui/c/AccessionActionsTable';
// Dialog Forms
import AccessionForm from 'accession/ui/c/AccessionForm';
import AccessionIprForm from 'accession/ui/c/AccessionIprForm';
import AccessionSourceForm from 'accession/ui/c/AccessionSourceForm';
import AccessionPedigreeForm from 'accession/ui/c/AccessionPedigreeForm';
import AccessionCitationForm from 'accession/ui/c/AccessionCitationForm';
import AccessionQuarantineForm from 'accession/ui/c/AccessionQuarantineForm';
import AccessionInvName from '@gringlobal-ce/client/model/gringlobal/AccessionInvName';
import AccessionInvNameForm from 'accession/ui/c/AccessionInvNameForm';
import AccessionPedigree from '@gringlobal-ce/client/model/gringlobal/AccessionPedigree';
import Citation from '@gringlobal-ce/client/model/gringlobal/Citation';
import AccessionQuarantine from '@gringlobal-ce/client/model/gringlobal/AccessionQuarantine';
import InventoryTreeTable from 'inventory/ui/c/InventoryTreeTable';
import { AccessionLink, DOILink } from 'ui/common/Links';
import AccessionInvAttachForm from 'accession/ui/c/AccessionInvAttachForm';
import Table, { Renderers, TextAlign } from '@gringlobal-ce/client/ui/common/table/Table';
import { InventoryGroupTableDefaultConfig } from 'inventorygroup/ui/GroupBrowsePage';
import { CooperatorOwnedTableConfiguration as TableConfiguration } from '@gringlobal-ce/client/ui/common/table/TableConfiguration';
import AccessionSectionTable from './c/AccessionSectionTable';
import { ExtraRenderers } from 'common/ExtraRenderers';
import AddNewButton from '@gringlobal-ce/client/ui/common/button/AddNewButton';
import FABMenu from '@gringlobal-ce/client/ui/common/button/FABMenu';
import AccessionActionDialog from 'accession/ui/c/AccessionActionDialog';
import { AccessionTableDefaultConfig } from 'accession/ui/AccessionBrowsePage';
import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
import EditIcon from '@material-ui/icons/Edit';
import AccessionSourceMap from '@gringlobal-ce/client/model/gringlobal/AccessionSourceMap';
import { CooperatorTableDefaultConfig } from 'cooperator/ui/BrowsePage';
import AccessionSourceMapDialog from 'accession/ui/c/AccessionSourceMapDialog';
import { Link } from 'react-router-dom';
import { WithBrowsePageBase } from 'ui/common/withBrowsePageBase';
import { SourceDescObservationTableDefaultConfig } from 'accession/ui/SourceDescObservationBrowsePage';
import SourceDescObservationDialog from 'accession/ui/c/SourceDescObservationDialog';
import TranslatedSourceDescObservation from '@gringlobal-ce/client/model/gringlobal/TranslatedSourceDescObservation';
import PrintReportDialog from 'common/PrintReportDialog';

const AccessionSourceTableDefaultConfig = {
  defaultColumns: [
    'id',
    'sourceTypeCode',
    'sourceDate',
    'isOrigin',
    'isWebVisible',
  ],
  ignoredColumns: [ 'accession' ],
  columnRenderers: {
    sourceDate: ({ value: sourceDate, row }: { value: Date, row: AccessionSource }) => <PrettyDate value={ sourceDate } format={ row.sourceDateCode } />,
    sourceTypeCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionSource.CodeGroup.sourceTypeCode),
    acquisitionSource: ExtraRenderers.CODEVALUE_RENDERER(AccessionSource.CodeGroup.acquisitionSource),
    collectedFormCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionSource.CodeGroup.collectedFormCode),
    unitQuantityCollectedCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionSource.CodeGroup.unitQuantityCollectedCode),
    georeferenceDatum: ExtraRenderers.CODEVALUE_RENDERER(AccessionSource.CodeGroup.georeferenceDatum),
    georeferenceProtocolCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionSource.CodeGroup.georeferenceProtocolCode),
    isOrigin: Renderers.STRING_BOOL_RENDERER,
    isWebVisible: Renderers.STRING_BOOL_RENDERER,
    geography: ({ value }: { value: Geography }) => value ? <>{ value.countryCode }</> : null,
  },
}

interface IDetailsPageState {
  auditLogs: Page<AuditLog>;
  error: string;
  accessionDialogIsOpen: boolean;
  actionDialogIsOpen: boolean;
  actions: AccessionAction[];
  selected: number[];
  selectedAction: AccessionAction;
  createNew: boolean;
  descObservationDialogIsOpen: boolean;
  selectedSourceObs: number[];
  sourceDescObservations: SourceDescObservationFilteredPage
}

enum AccessionDetailsTabs {
  INFO = 'info',
  ACTIONS = 'actions',
  INVENTORIES = 'inventories',
  ATTACHMENTS = 'attachments',
  GROUPS = 'groups',
  AUDITLOGS = 'auditlogs',
  SOURCE_OBSERVATIONS = 'sourceobs',
}

const InventoryGroupTableConfig = new TableConfiguration(InventoryGroupTableDefaultConfig);
const AccessionTableConfig = new TableConfiguration(AccessionTableDefaultConfig);
const SourceDescObservationTableConfig = new TableConfiguration(SourceDescObservationTableDefaultConfig);

class AccessionDetailsPage extends React.Component<PropsFromRedux & WithBrowsePageBase & WithTranslation & IWithTabs, IDetailsPageState> {

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

  public static defaultTab = AccessionDetailsTabs.INFO;
  private static PRINT_DIALOG_KEY = 'accession-print-pdf-dialog';

  public state = {
    auditLogs: null,
    error: null,
    accessionDialogIsOpen: false,
    actionDialogIsOpen: false,
    actions: [],
    selected: [],
    selectedAction: null,
    createNew: true,
    descObservationDialogIsOpen: false,
    sourceDescObservations: null,
    selectedSourceObs: [],
  };

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

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

  public componentDidUpdate(prevProps, prevState) {
    const { accessionCall, id, getAccessionAction, getAccessionInventories, currentTab } = this.props;
    const { actions, selected, sourceDescObservations } = this.state;
    if (!accessionCall || !accessionCall.loading && (!accessionCall.error && id && +id !== accessionCall.data.id)) {
      getAccessionAction(id);
      getAccessionInventories(id);
    }

    if (prevState.actions.length === 0 && actions.length === 0 && accessionCall?.data?.actions.length > 0) {
      this.setState({ actions: accessionCall.data.actions })
    }

    if (currentTab === AccessionDetailsTabs.AUDITLOGS && currentTab !== prevProps.currentTab) {
      if (!this.state.auditLogs) {
        AccessionService.accessionAuditLogs(+this.props.id)
          .then((auditLogs) => this.setState({ auditLogs }));
      }
    }

    if (currentTab === AccessionDetailsTabs.SOURCE_OBSERVATIONS && currentTab !== prevProps.currentTab) {
      if (!sourceDescObservations || ! sourceDescObservations?.filter?.accessionSource?.accession?.id?.includes(id)) {
        this.loadSourceDescObservations();
      }
    }

    if (prevState.selected.length !== 1 && selected.length === 1) {
      this.getSelectedAction(selected[0]);
    }
  }

  private handleUploading = (files: File[]) => {
    const { inventories, uploadAccessionAttachments } = this.props;
    const systemInventory = inventories.data.content.find((inv) => inv.formTypeCode === Inventory.SYSTEM_INVENTORY_FTC);
    if (systemInventory) {
      return uploadAccessionAttachments(systemInventory.id, files);
    }
  };

  private onSortChange = (sortBy: string, dir: SortDirection): void => {
    AccessionService.accessionAuditLogs(+this.props.id, { properties: [ sortBy ], direction: [ dir ] })
      .then((auditLogs) => this.setState({ auditLogs }));
  };

  private loadMore = (): void => {
    const { auditLogs } = this.state;
    AccessionService.accessionAuditLogs(+this.props.id, Page.nextPage(auditLogs))
      .then((newAuditLogs) => this.setState({ auditLogs: Page.merge(auditLogs, newAuditLogs) }));
  };

  private handleRemove = () => {
    const { removeAccessionAction, t, id, accessionCall, showSnackbar } = this.props;
    confirm(t('accession.public.p.details.delete', { name: accessionCall.data.accessionNumber }), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(() => {
      removeAccessionAction(+id);
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  };

  private addCurrentAccession = (el) => {
    const { accessionCall } = this.props;
    el.accession = { id: accessionCall.data.id }
    return el;
  }

  private addFirstInventory = (el) => {
    const { inventories } = this.props;
    el.inventory = { id: inventories.data.content[0].id };
    return el;
  }

  private handleCreateAction = (actionData: AccessionAction) => {
    const { accessionCall } = this.props;
    const { actions } = this.state;
    const { data: accession } = accessionCall
    this.setState({ error: null });
    actionData.accession = { id: accession.id } as Accession;

    AccessionService.createAction(actionData).then((action) => {
      const updatedActions = [action, ...actions];
      this.closeActionDialog();
      this.setState({ selected: [], actions: updatedActions });
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
  }

  private handleRemoveAction = () => {
    const { t, showSnackbar } = this.props;
    const { selected, actions } = this.state;

    confirm(t('common:label.deleteListConfirm', { what: t('accession.public.p.details.actions'), count: selected.length }), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(async () => {
      for (let i = 0; i < selected.length; i++) {
        await AccessionService.removeAction(selected[i]);
      }
      const updatedActions = actions.filter((action) => !selected.includes(action.id))
      console.log("updatedActions", updatedActions);
      this.setState({ selected: [], actions: [ ...updatedActions ] });
      console.log("actions", this.state.actions);
    }).catch((e) => {
      showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  private handleUpdateAction = (actionData: AccessionAction) => {
    const { accessionCall } = this.props;
    const { actions } = this.state;
    const { data: accession } = accessionCall
    this.setState({ error: null });
    actionData.accession = { id: accession.id } as Accession;

    AccessionService.updateAction(actionData).then((response) => {
      const updatedActionIndex = accession.actions.findIndex((action) => +action.id === +response.id)
      const updatedActions = actions;
      updatedActions[updatedActionIndex] = response;
      this.closeActionDialog();
      this.setState({ selected: [], actions: [ ...updatedActions ] });
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
  }

  private getSelectedAction = (id) => {
    AccessionService.getAction(id).then((response) => {
      this.setState({ selectedAction: response });
    }).catch((e) => {
      this.props.showSnackbar(e.data && e.data.error || e.toString());
    });
  }

  private openActionDialog = (createNew = true) => {
    this.setState({ actionDialogIsOpen: true, createNew });
  };

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

  private actionsSelected = (selectedRows: number[]) => {
    const { actions } = this.state;
    const selectedIds = selectedRows.map((rowIndex) => actions[rowIndex].id)
    this.setState({ selected: selectedIds });
  }

  private handleInvNameSubmit = (name: AccessionInvName, edit: boolean) => {
    const { receiveAccessionInvNameSuccessAction, inventories, t } = this.props;
    let accessionInvNamePromise: Promise<AccessionInvName>;
    this.setState({ error: null });
    name = this.addCurrentAccession(name);
    if (inventories.data.content.length === 0) {
      this.setState({ error: t('accession.public.c.error.noInventories') })
      return;
    }
    name = this.addFirstInventory(name);
    if (edit) {
      accessionInvNamePromise = AccessionService.updateAccessionInvName(name)
    } else {
      accessionInvNamePromise = AccessionService.createAccessionInvName(name)
    }
    accessionInvNamePromise.then((name) => {
      receiveAccessionInvNameSuccessAction(name);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionInvNamePromise
  };

  private handleIprSubmit = (ipr: AccessionIpr, edit: boolean) => {
    const { receiveAccessionIprSuccessAction, accessionCall } = this.props;
    let accessionIprPromise: Promise<AccessionIpr>;
    this.setState({ error: null });
    ipr = this.addCurrentAccession(ipr);
    if (edit) {
      accessionIprPromise = AccessionService.updateAccessionIpr(ipr)
    } else {
      ipr.accession = accessionCall.data as unknown as Accession;
      accessionIprPromise = AccessionService.createAccessionIpr(ipr)
    }
    accessionIprPromise.then((ipr) => {
      receiveAccessionIprSuccessAction(ipr);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionIprPromise;
  };

  private handleSourceSubmit = (source: AccessionSource, edit: boolean) => {
    const { receiveAccessionSourceSuccessAction } = this.props;
    let accessionSourcePromise: Promise<AccessionSource>;
    this.setState({ error: null });
    source = this.addCurrentAccession(source);
    if (edit) {
      accessionSourcePromise = AccessionService.updateAccessionSource(source)
    } else {
      accessionSourcePromise = AccessionService.createAccessionSource(source)
    }
    accessionSourcePromise.then((source) => {
      receiveAccessionSourceSuccessAction(source);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionSourcePromise;
  };

  private handleSourceMapSubmit = (sourceMap: AccessionSourceMap, edit: boolean) => {
    const { receiveAccessionSourceMapSuccessAction, t } = this.props;
    let accessionSourceMapPromise: Promise<AccessionSourceMap>;
    this.setState({ error: null });
    if (! sourceMap.accessionSource) {
      this.setState({ error: t("accession.public.c.error.noAccessionSource") });
      return;
    }
    sourceMap.accessionSource = this.addCurrentAccession(sourceMap.accessionSource);
    if (edit) {
      accessionSourceMapPromise = AccessionService.updateSourceMap(sourceMap)
    } else {
      accessionSourceMapPromise = AccessionService.createSourceMap(sourceMap)
    }
    accessionSourceMapPromise.then((sourceMap) => {
      receiveAccessionSourceMapSuccessAction(sourceMap);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionSourceMapPromise;
  };

  private handlePedigreeSubmit = (pedigree: AccessionPedigree, edit: boolean) => {
    const { receiveAccessionPedigreeSuccessAction } = this.props;
    let accessionPedigreePromise: Promise<AccessionPedigree>;
    this.setState({ error: null });
    pedigree = this.addCurrentAccession(pedigree);
    if (edit) {
      accessionPedigreePromise = AccessionService.updateAccessionPedigree(pedigree)
    } else {
      accessionPedigreePromise = AccessionService.createAccessionPedigree(pedigree)
    }
    accessionPedigreePromise.then((pedigree) => {
      receiveAccessionPedigreeSuccessAction(pedigree);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionPedigreePromise;
  };

  private handleCitationSubmit = (citation: Citation, edit: boolean) => {
    const { receiveCitationSuccessAction } = this.props;
    let accessionCitationPromise: Promise<Citation>;
    this.setState({ error: null });
    citation = this.addCurrentAccession(citation);
    if (edit) {
      accessionCitationPromise = AccessionService.updateCitation(citation)
    } else {
      accessionCitationPromise = AccessionService.createCitation(citation)
    }
    accessionCitationPromise.then((citation) => {
      receiveCitationSuccessAction(citation);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionCitationPromise;
  };

  private handleQuarantineSubmit = (quarantine: AccessionQuarantine, edit: boolean) => {
    const { receiveAccessionQuarantineSuccessAction } = this.props;
    let accessionQuarantinePromise: Promise<AccessionQuarantine>;
    this.setState({ error: null });
    quarantine = this.addCurrentAccession(quarantine);
    if (edit) {
      accessionQuarantinePromise = AccessionService.updateAccessionQuarantine(quarantine)
    } else {
      accessionQuarantinePromise = AccessionService.createAccessionQuarantine(quarantine)
    }
    accessionQuarantinePromise.then((quarantine) => {
      receiveAccessionQuarantineSuccessAction(quarantine);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
    return accessionQuarantinePromise;
  };

  private clearError = () => {
    this.setState({ error: null })
  }

  private openAccessionDialog = () => {
    this.setState({ accessionDialogIsOpen: true });
  };

  private closeAccessionDialog = () => {
    this.setState({ accessionDialogIsOpen: false });
  };

  private handleSubmit = (accessionData: Accession) => {
    const { receiveAccessionSuccessAction, navigateTo } = this.props;
    this.setState({ error: null });
    AccessionService.update(accessionData).then((accession) => {
      this.closeAccessionDialog();
      navigateTo(`/a/${accession.id}`);
      receiveAccessionSuccessAction(accession);
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
  };

  private handleAttachmentSubmit = (data, closeDialog) => {
    const { receiveAccessionAttachmentSuccessAction } = this.props
    if(data.inventory && !data.inventory.id) {
      data.inventory = { id: data.inventory }
    }
    InventoryService.updateAccessionInvAttach(data)
      .then((updatedAttach) => {
        closeDialog();
        receiveAccessionAttachmentSuccessAction(updatedAttach);
      })
      .catch((e) => {
        this.setState({ error: e.data && e.data.error || e.toString() })
      })
  }

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

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

  private handleSubmitSourceObs = (data: TranslatedSourceDescObservation) => {
    const { sourceDescObservations } = this.state;
    this.resetError();
    let SourceDescObservationPromise: Promise<TranslatedSourceDescObservation>;

    if (data.id) {
      SourceDescObservationPromise = SourceDescObservationService.update(data)
    } else {
      SourceDescObservationPromise = SourceDescObservationService.create(data)
    }

    SourceDescObservationPromise.then((receivedSourceDescObs) => {
      this.closeSourceObsDialog();
      const updatedObs = sourceDescObservations
      if (data.id) {
        updatedObs.content = sourceDescObservations.content.map((sourceObs) => sourceObs.id === receivedSourceDescObs.id ? { ...sourceObs, ...receivedSourceDescObs } : sourceObs)
        this.setState({ sourceDescObservations: updatedObs })
      } else {
        updatedObs.content = [ ...sourceDescObservations.content, receivedSourceDescObs ]
        this.setState({ sourceDescObservations: updatedObs })
      }
    }).catch((e) => {
      this.setState({ error: e.data && e.data.error || e.toString() });
    });
  };

  private removeSourceObs = () => {
    const { t } = this.props;
    const { selectedSourceObs } = this.state;

    confirm(t('common:label.deleteListConfirm', { count: selectedSourceObs.length, what: t('client:model.name.SourceDescObservation', { count: selectedSourceObs.length }) }), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(() => {
      Promise.all(selectedSourceObs.map(async (sourceObs) => await SourceDescObservationService.remove(sourceObs.id)))
        .then(() => {
          this.loadSourceDescObservations().then(() => {
            this.setState({
              selectedSourceObs: [],
            });
          }).catch((e) => console.log('Loading source descriptor observations error: ', e));
        })
        .catch((e) => {
          console.log('SourceDescObservation removing error: ', e);
        });
    });
  };

  private sourceDescObsRowsToggled = (selectedRows: number[]) => {
    const { sourceDescObservations } = this.state;
    const selectedIds = selectedRows.map((rowIndex) => sourceDescObservations.content[rowIndex].id)
    this.setState({ selectedSourceObs: selectedIds });
  }

  private onSourceObsSortChange = (sortBy: string, dir: SortDirection): void => {
    this.loadSourceDescObservations({ properties: [ sortBy ], direction: [ dir ] })
  };

  private loadSourceDescObservations = (page: IPageRequest = {}) => {
    const { id } = this.props;
    const { sourceDescObservations } = this.state;
    return SourceDescObservationService.listTranslated({ accessionSource: { accession: { id } } }, page)
      .then((newSourceDescObservations) => this.setState({ sourceDescObservations: Page.merge(sourceDescObservations, newSourceDescObservations) }))
      .catch((e) => console.log('Loading source descriptor observations error: ', e));
  }

  private loadMoreSourceObs = (): void => {
    const { sourceDescObservations } = this.state;
    this.loadSourceDescObservations(Page.nextPage(sourceDescObservations))
  };

  private openSourceObsDialog = (createNew = true) => {
    this.setState({ descObservationDialogIsOpen: true, createNew });
  };

  private closeSourceObsDialog = () => {
    this.setState({ descObservationDialogIsOpen: false, createNew: true });
  };


  public render(): React.ReactNode {
    const {
      id, inventories, accessionCall, t, currentTab, onTabChange,
      removeAccessionInvNameAction, removeAccessionIprAction,
      removeAccessionSourceAction, removeAccessionSourceMapAction,
      removeAccessionPedigreeAction, removeCitationAction, removeAccessionQuarantineAction,
      removeAccessionAttachmentAction, removeAccessionAttachmentsAction
    } = this.props;
    const { auditLogs, error, accessionDialogIsOpen, actionDialogIsOpen, actions, selectedAction, selected, createNew, selectedSourceObs, descObservationDialogIsOpen, sourceDescObservations } = this.state;
    // const columns = InventoryTableConfig.getColumns(inventories && inventories.data && inventories.data.content ? inventories.data.content[0] : null);
    if (!accessionCall) {
      return null;
    }

    const { loading, data: accession } = accessionCall;
    const systemInventory = inventories?.data?.content?.find((inv) => inv.formTypeCode === Inventory.SYSTEM_INVENTORY_FTC);
    const groupsColumns = InventoryGroupTableConfig.getColumns(accession && accession.groups && accession.groups.length ? accession.groups[0] : null );
    const sourceDescObsColumns = SourceDescObservationTableConfig.getColumns(sourceDescObservations?.content ? sourceDescObservations.content[0] : null);

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

    const sourceObsActions = [
      {
        title: 'common:action.remove',
        action: this.removeSourceObs,
        icon: <CancelOutlinedIcon/>,
      },
      {
        title: 'common:action.edit',
        action: () => this.openSourceObsDialog(false),
        icon: <EditIcon/>,
        disabled: selectedSourceObs.length !== 1
      },
    ]

    return (
      <>
        <PageTitle title={ accession ? accession.accessionNumber : t('accession.public.p.details.title') }/>
        <HeaderTabs
          value={ currentTab }
          textColor="primary"
          onChange={ onTabChange }
          variant="scrollable"
          scrollButtons="auto"
          aria-label="Inventory tabs"
        >
          <Tab value={ AccessionDetailsTabs.INFO } label={ accession ? <>{ accession.accessionNumber }</> : t('accession.public.p.details.title') } />
          <Tab value={ AccessionDetailsTabs.INVENTORIES } label={ t('client:model.name.Inventory_plural') } />
          <Tab value={ AccessionDetailsTabs.ATTACHMENTS } label={ t('accession.public.p.details.attachments') } />
          <Tab value={ AccessionDetailsTabs.GROUPS } label={ t('accession.public.p.details.groups') } />
          <Tab value={ AccessionDetailsTabs.SOURCE_OBSERVATIONS } label={ t('client:model.name.SourceDescObservation_plural') } />
          <Tab value={ AccessionDetailsTabs.ACTIONS } label={ t('accession.public.p.details.actions') } />
          <Tab value={ AccessionDetailsTabs.AUDITLOGS } label={ t('accession.public.p.details.auditLogs') } />
        </HeaderTabs>
        { loading && <Loading/> }
        { accession &&
          <>
            <TabPanel value={ currentTab } index={ AccessionDetailsTabs.INFO }>
              <GridContainer>
                <GridItem>
                  <Card>
                    <CardHeader
                      title={ accession.accessionNumber }
                      subheader={ <PrintSpecies taxonomySpecies={ accession.taxonomySpecies } /> }
                    />

                    <CardActions>
                      <ButtonBar>
                        <P.HasAccess action={ P.PassportData } permission={ P.write } siteId={ accession.site.id }>
                          <Button onClick={ this.openAccessionDialog } variant="contained" color="secondary">{ t('common:action.edit') }</Button>
                        </P.HasAccess>
                        <P.HasAccess action={ P.PassportData } permission={ P.delete } siteId={ accession.site.id }>
                          <Button onClick={ this.handleRemove } variant="text">{ t('common:action.delete') }</Button>
                        </P.HasAccess>
                        <Button variant="outlined" color="secondary" onClick={ () => this.props.showDialog(AccessionDetailsPage.PRINT_DIALOG_KEY) }>
                          { t('common:action.generatePdf') }
                        </Button>
                      </ButtonBar>
                    </CardActions>
                    <CardContent>
                      <Properties>
                        { accession.accessionNumberPart1 &&
                          <PropertiesItem title={ t(['client:model.Accession.accessionNumberPart1', 'client:model._.accessionNumberPart1']) }>
                            { accession.accessionNumberPart1 }
                          </PropertiesItem>
                        }
                        { accession.accessionNumberPart2 &&
                          <PropertiesItem title={ t(['client:model.Accession.accessionNumberPart2', 'client:model._.accessionNumberPart2']) }>
                            { accession.accessionNumberPart2 }
                          </PropertiesItem>
                        }
                        { accession.accessionNumberPart3 &&
                          <PropertiesItem title={ t(['client:model.Accession.accessionNumberPart3', 'client:model._.accessionNumberPart3']) }>
                            { accession.accessionNumberPart3 }
                          </PropertiesItem>
                        }
                        { accession.taxonomySpecies &&
                          <PropertiesItem title={ t(['client:model.Accession.taxonomySpecies', 'client:model._.taxonomySpecies']) }>
                            <PrintSpecies taxonomySpecies={ accession.taxonomySpecies } />
                          </PropertiesItem>
                        }
                        <PropertiesItem title={ t([ 'client:model.Accession.site', 'client:model._.site' ]) }>
                          <code>{ accession.site.siteShortName }</code> { accession.site.siteLongName }
                        </PropertiesItem>
                        { accession.statusCode &&
                          <PropertiesItem title={ t(['client:model.Accession.statusCode', 'client:model._.statusCode']) }>
                            <CodeValueDisplay codeGroup={ Accession.CodeGroup.statusCode } value={ accession.statusCode } />
                          </PropertiesItem>
                        }
                        { accession.mlsStatus &&
                        <PropertiesItem title={ t(['client:model.Accession.mlsStatus', 'client:model._.mlsStatus']) }>
                          <CodeValueDisplay codeGroup={ Accession.CodeGroup.mlsStatus } value={ accession.mlsStatus } />
                        </PropertiesItem>
                        }
                        { accession.lifeFormCode &&
                          <PropertiesItem title={ t(['client:model.Accession.lifeFormCode', 'client:model._.lifeFormCode']) }>
                            <CodeValueDisplay codeGroup={ Accession.CodeGroup.lifeFormCode } value={ accession.lifeFormCode } />
                          </PropertiesItem>
                        }
                        { accession.improvementStatusCode &&
                          <PropertiesItem title={ t(['client:model.Accession.improvementStatusCode', 'client:model._.improvementStatusCode']) }>
                            <CodeValueDisplay codeGroup={ Accession.CodeGroup.improvementStatusCode } value={ accession.improvementStatusCode } />
                          </PropertiesItem>
                        }
                        { accession.reproductiveUniformityCode &&
                          <PropertiesItem title={ t(['client:model.Accession.reproductiveUniformityCode', 'client:model._.reproductiveUniformityCode']) }>
                            <CodeValueDisplay codeGroup={ Accession.CodeGroup.reproductiveUniformityCode } value={ accession.reproductiveUniformityCode } />
                          </PropertiesItem>
                        }
                        { accession.doi &&
                          <PropertiesItem title={ t(['client:model.Accession.doi', 'client:model._.doi']) }>
                            <DOILink doi={ accession.doi } />
                          </PropertiesItem>
                        }
                        { /* accession.isCore &&
                          <PropertiesItem title={ t(['client:model.Accession.isCore', 'client:model._.isCore']) }>
                            { accession.isCore }
                          </PropertiesItem>
                        */ }
                        { /* accession.isBackedUp &&
                          <PropertiesItem title={ t(['client:model.Accession.isBackedUp', 'client:model._.isBackedUp']) }>
                            { accession.isBackedUp }
                          </PropertiesItem>
                        */ }
                        { accession.initialReceivedDate &&
                          <PropertiesItem title={ t(['client:model.Accession.initialReceivedDate', 'client:model._.initialReceivedDate']) }>
                            <PrettyDate value={ accession.initialReceivedDate } format={ accession.initialReceivedDateCode } withCaption />
                          </PropertiesItem>
                        }
                        { accession.initialReceivedDateCode &&
                          <PropertiesItem title={ t(['client:model.Accession.initialReceivedDateCode', 'client:model._.initialReceivedDateCode']) }>
                            { accession.initialReceivedDateCode }
                          </PropertiesItem>
                        }
                        { accession.initialReceivedFormCode &&
                          <PropertiesItem title={ t(['client:model.Accession.initialReceivedFormCode', 'client:model._.initialReceivedFormCode']) }>
                            <CodeValueDisplay codeGroup={ Accession.CodeGroup.initialReceivedFormCode } value={ accession.initialReceivedFormCode } />
                          </PropertiesItem>
                        }
                        { accession.backupLocation1Site &&
                          <PropertiesItem title={ t(['client:model.Accession.backupLocation1Site', 'client:model._.backupLocation1Site']) }>
                            <code>{ accession.backupLocation1Site.siteShortName }</code> { accession.backupLocation1Site.siteLongName }
                          </PropertiesItem>
                        }
                        { accession.backupLocation2Site &&
                          <PropertiesItem title={ t(['client:model.Accession.backupLocation2Site', 'client:model._.backupLocation2Site']) }>
                            <code>{ accession.backupLocation2Site.siteShortName }</code> { accession.backupLocation2Site.siteLongName }
                          </PropertiesItem>
                        }
                        { accession.note &&
                          <PropertiesItem title={ t([ 'client:model.Accession.note', 'client:model._.note' ]) }>
                            { accession.note }
                          </PropertiesItem>
                        }
                        <AuditDataDisplay item={ accession }/>
                      </Properties>
                    </CardContent>
                  </Card>
                </GridItem>

                <AccessionSectionTable
                  sectionName="names"
                  model={ { modelName: 'AccessionInvName', modelClass: AccessionInvName } }
                  tableConfig={ {
                    defaultColumns: [
                      'id',
                      'categoryCode',
                      'plantName',
                      'plantNameRank',
                      'isWebVisible',
                      'nameGroup',
                    ],
                    ignoredColumns: [ 'inventory', 'nameGroup' ],
                    defaultColumnSettings: {
                      plantName: { bold: true },
                    },
                    columnRenderers: {
                      categoryCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionInvName.CodeGroup.categoryCode),
                      isWebVisible: Renderers.STRING_BOOL_RENDERER,
                    },
                  } }
                  dialogForm={ AccessionInvNameForm }
                  removeAction={ removeAccessionInvNameAction }
                  handleSubmit={ this.handleInvNameSubmit }
                  error={ { error, clear: this.clearError } }
                />

                <AccessionSectionTable
                  sectionName="sources"
                  model={ { modelName: 'AccessionSource', modelClass: AccessionSource } }
                  tableConfig={ AccessionSourceTableDefaultConfig }
                  dialogForm={ AccessionSourceForm }
                  removeAction={ removeAccessionSourceAction }
                  handleSubmit={ this.handleSourceSubmit }
                  error={ { error, clear: this.clearError } }
                  hasMap
                />

                <AccessionSectionTable
                  sectionName="sourceCooperators"
                  model={ { modelName: 'AccessionSourceMap', modelClass: AccessionSourceMap } }
                  tableConfig={ {
                    defaultColumns: [
                      'id',
                      'sourceTypeCode',
                      'sourceId',
                      'cooperatorId',
                      ...CooperatorTableDefaultConfig.defaultColumns,
                      'site',
                      'statusCode',
                      'categoryCode',
                      'disciplineCode',
                    ],
                    ignoredColumns: [ 'cooperator', 'accessionSource' ],
                    defaultColumnSettings: {
                      id: { readonly: true, align: TextAlign.right },
                      sourceId: { readonly: true, align: TextAlign.right },
                      cooperatorId: { readonly: true, align: TextAlign.right },
                      name: { readonly: true, label: ["client:model.Cooperator.name", "client:model._.name"] },
                      title: { align: TextAlign.right, label: "client:model.Cooperator.title" },
                      lastName: { label: "client:model.Cooperator.lastName" },
                      firstName: { label: "client:model.Cooperator.firstName" },
                      organization: { label: "client:model.Cooperator.organization" },
                      job: { label: "client:model.Cooperator.job" },
                      geography: { label: "client:model.Cooperator.geography" },
                      faoInstituteNumber: { label: "client:model.Cooperator.faoInstituteNumber" },
                      site: { label: "client:model.Cooperator.site" },
                      statusCode: { label: "client:model.Cooperator.statusCode" },
                      categoryCode: { label: "client:model.Cooperator.categoryCode" },
                      disciplineCode: { label: "client:model.Cooperator.disciplineCode" },
                    },
                    columnRenderers: {
                      ...CooperatorTableDefaultConfig.columnRenderers,
                      sourceTypeCode: ({ row: sourceMap }: { row: AccessionSourceMap }) => <CodeValueDisplay codeGroup={ AccessionSource.CodeGroup.sourceTypeCode } value={ sourceMap?.accessionSource?.sourceTypeCode } />,
                      sourceId: ({ row: sourceMap }: { row: AccessionSourceMap }) => sourceMap?.accessionSource && <>{ sourceMap.accessionSource.id }</>,
                      // Fix cooperator link!
                      name: ({ row: cooperator }: { row: Cooperator & { cooperatorId: number } }): JSX.Element => (
                        <Link to={ `/cooperator/${cooperator.cooperatorId}` }>
                          { (cooperator.firstName || cooperator.lastName) && (
                            <>{ cooperator.title } { cooperator.firstName } { cooperator.lastName }</>
                          ) }
                          { ! (cooperator.firstName || cooperator.lastName) && (
                            <>{ cooperator.organization }</>
                          ) }
                        </Link>
                      ),
                    },
                  } }
                  createDisabled={ accession.sources?.length === 0 }
                  customDialogTableConfig={ AccessionSourceTableDefaultConfig }
                  CustomDialog={ AccessionSourceMapDialog }
                  removeAction={ removeAccessionSourceMapAction }
                  handleSubmit={ this.handleSourceMapSubmit }
                  error={ { error, clear: this.clearError } }
                />

                <AccessionSectionTable
                  sectionName="ipr"
                  model={ { modelName: 'AccessionIpr', modelClass: AccessionIpr } }
                  tableConfig={ {
                    defaultColumns: [
                      'id',
                      'typeCode',
                      'iprNumber',
                      'iprFullName',
                      'iprCropName',
                      'issuedDate',
                      'expectedDate',
                      'acceptedDate',
                      'expiredDate',
                    ],
                    defaultColumnSettings: {
                      sourceTypeCode: { label: 'client:model.AccessionSource.sourceTypeCode' },
                      name: { readonly: true, label: 'client:model.Cooperator.name' },
                      geography: { label: 'client:model.Cooperator.geography' },
                      site: { label: 'client:model.Cooperator.site' },
                      statusCode: { label: 'client:model.Cooperator.statusCode' },
                      categoryCode: { label: 'client:model.Cooperator.categoryCode' },
                      disciplineCode: { label: 'client:model.Cooperator.disciplineCode' },
                      title: { align: TextAlign.right, label: 'client:model.Cooperator.title' },
                    },
                    columnRenderers: {
                      acceptedDate: Renderers.DATE_RENDERER,
                      expectedDate: Renderers.DATE_RENDERER,
                      expiredDate: Renderers.DATE_RENDERER,
                      typeCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionIpr.CodeGroup.typeCode),
                    },
                  } }
                  dialogForm={ AccessionIprForm }
                  removeAction={ removeAccessionIprAction }
                  handleSubmit={ this.handleIprSubmit }
                  error={ { error, clear: this.clearError } }
                />

                <AccessionSectionTable
                  sectionName="pedigree"
                  model={ { modelName: 'AccessionPedigree', modelClass: AccessionPedigree } }
                  tableConfig={ {
                    defaultColumns: [
                      'id',
                      'crossCode',
                      'releasedDate',
                      'releasedDateCode',
                      'maleAccession',
                      'maleExternalAccession',
                      'femaleAccession',
                      'femaleExternalAccession',
                      'description',
                      'note',
                    ],
                    ignoredColumns: [ 'accession' ],
                    columnRenderers: {
                      crossCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionPedigree.CodeGroup.crossCode),
                      releasedDateCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionPedigree.CodeGroup.releasedDateCode),
                      releasedDate: Renderers.DATE_RENDERER,
                      establishedDate: Renderers.DATE_RENDERER,
                      expectedReleaseDate: Renderers.DATE_RENDERER,
                      custodialCooperator: ExtraRenderers.COOPERATORNAME_RENDERER,
                      maleAccession: ({ value }: { value: Accession }) => value && <AccessionLink accession={ value } />,
                      femaleAccession: ({ value }: { value: Accession }) => value && <AccessionLink accession={ value } />,
                    },
                  } }
                  dialogForm={ AccessionPedigreeForm }
                  removeAction={ removeAccessionPedigreeAction }
                  handleSubmit={ this.handlePedigreeSubmit }
                  error={ { error, clear: this.clearError } }
                />

                <AccessionSectionTable
                  sectionName="quarantine"
                  model={ { modelName: 'AccessionQuarantine', modelClass: AccessionQuarantine } }
                  tableConfig={ {
                    defaultColumns: [
                      'id',
                      'quarantineTypeCode',
                      'progressStatusCode',
                      'custodialCooperator',
                      'enteredDate',
                      'establishedDate',
                      'expectedReleaseDate',

                    ],
                    ignoredColumns: [ 'accession', 'inventory' ],
                    columnRenderers: {
                      quarantineTypeCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionQuarantine.CodeGroup.quarantineTypeCode),
                      progressStatusCode: ExtraRenderers.CODEVALUE_RENDERER(AccessionQuarantine.CodeGroup.progressStatusCode),
                      enteredDate: Renderers.DATE_RENDERER,
                      establishedDate: Renderers.DATE_RENDERER,
                      expectedReleaseDate: Renderers.DATE_RENDERER,
                      custodialCooperator: ExtraRenderers.COOPERATORNAME_RENDERER,
                    },
                  } }
                  dialogForm={ AccessionQuarantineForm }
                  removeAction={ removeAccessionQuarantineAction }
                  handleSubmit={ this.handleQuarantineSubmit }