Блог

Я использую таблицу материалов, отображающую некоторые данные/задания на моей боковой навигационной панели. Мне нужно отобразить конкретную работу, выбранную пользователем, в моем главном представлении.

Я не знаю, как это сделать. Я попытался добавить onClick в действия и сделать history.push , но на самом деле мне не нужна ссылка для этого. Я использую отдачу, поэтому мне нужно взять опоры и визуализировать их.

навигационный код:

 type OuterSingleJobNavProps = {
  selectedJobInfo: any
}

const OuterSingleJobNav: React.FC<OuterSingleJobNavProps> = (
  props: OuterSingleJobNavProps
) => {
  const jobInfo = props.selectedJobInfo
  const blankParentData = {
    pk: '-',
    link: '-',
    name: '-',
  }
  const blankCurrentData = {
    pk: '-',
    process: '-',
    type: '-',
  }
  const blankChildData = {
    pk: '-',
    link: '-',
    name: '-',
  }
  const checkForParentData = () => {
    if (jobInfo !== null) {
      if (jobInfo.parent_process !== null) {
        const parents = [jobInfo.parent_process]
        const parentData = []
        parents.forEach((parent) => {
          parentData.push({
            parentLink: parent.link,
            parentName: parent.name,
            parentPK: parent.pk,
          })
        })
        return parentData
      } else {
        return [blankParentData]
      }
    } else {
      return [blankParentData]
    }
  }
  const checkForCurrentData = () => {
    if (jobInfo !== null) {
      const currentJobInfo = {
        process: '-',
        pk: String(jobInfo.pk),
        type: String(jobInfo.type),
      }
      return [currentJobInfo]
    } else {
      return [blankCurrentData]
    }
  }
  const checkForChildData = () => {
    if (jobInfo !== null amp;amp; jobInfo.child_processes.length !== 0) {
      const children = jobInfo.child_processes
      const childData = []

      children.forEach((child) => {
        childData.push({
          childLink: child.link,
          childName: child.name,
          childPK: child.pk,
        })
      })
      return childData
    } else {
      return [blankChildData]
    }
  }
  const parentData = checkForParentData()
  const currentData = checkForCurrentData()
  const childData = checkForChildData()
  console.log(
    'parentData',
    parentData,
    'currentData',
    currentData,
    'childData',
    childData
  )
  return (
    <>
      <div className="process-nav">
        <h2>Process Navigation</h2>
        <ParentProcessTable data={parentData} />
        <MaterialTable
          aria-label="current process table"
          columns={[
            { title: 'Current', field: 'process' },
            { title: 'PK', field: 'pk' },
            { title: 'Type', field: 'type' },
          ]}
          data={currentData}
          options={{
            paging: false,
            showTitle: false,
            search: false,
            headerStyle: {
              fontSize: 14,
              backgroundColor: '#ddd',
              padding: '0.25em 1em',
              fontWeight: 'bolder',
            },
          }}
          actions={[

          ]}
        ></MaterialTable>
        <ChildProcessTable data={childData} />
      </div>
    </>
  )
}

export default OuterSingleJobNav
 

Мне нужно отобразить данные на этом представлении. Заметил, что там уже есть код задания, но его необходимо изменить, чтобы синхронизировать, чтобы данные изменялись в зависимости от выбранной работы.

 type ProcessInfoTabProps = {
  selectedJob: any
}

const ProcessInfoTab: React.FC<ProcessInfoTabProps> = (
  props: ProcessInfoTabProps
) => {
  const jobInfo = props.selectedJob

  return (
    <>
      <h4> {jobInfo !== null ? jobInfo.type : 'loading'}</h4>
      <div className="process-info">
        <h5>Generic Info</h5>
        <p>Type: {jobInfo !== null ? jobInfo.type : 'loading'}</p>
        <p>State: {jobInfo !== null ? jobInfo.state : 'loading'}</p>
        <p>PK: {jobInfo !== null ? jobInfo.pk : 'loading'}</p>
        <p>Label: {jobInfo !== null ? jobInfo.label : 'loading'}</p>
        <p>Description: {jobInfo !== null ? jobInfo.description : 'loading'}</p>
        <p>Created: {jobInfo !== null ? jobInfo.ctime : 'loading'}</p>
        {/* <h5>Attributes</h5>
            <p>{jobInfo !== null ? jobInfo.attributes : 'loading'}</p>
            <h5>Log Messages</h5>
            <p>
              {jobInfo !== null amp;amp; jobInfo.log_messages.length !== 0
                ? jobInfo.log_messages
                : 'loading'}
            </p> */}
      </div>
    </>
  )
}

export default ProcessInfoTab
 

Here’s a picture of what it looks like: nav and main view