|  |  | 
 |  |  | import React, { useState, useRef, useEffect, useMemo, useCallback } from "react"; | 
 |  |  | import { useNavigate } from 'react-router-dom'; | 
 |  |  | import { | 
 |  |  |     ListBase, | 
 |  |  |     TopToolbar, | 
 |  |  |     FilterButton, | 
 |  |  |     useListContext, | 
 |  |  |     TextInput, | 
 |  |  |     ReferenceInput, | 
 |  |  |     AutocompleteInput, | 
 |  |  |     ListToolbar, | 
 |  |  |     Title, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { matchPath, useLocation } from 'react-router'; | 
 |  |  | import { Box, Typography, Card, Stack, LinearProgress } from '@mui/material'; | 
 |  |  | import { styled } from '@mui/material/styles'; | 
 |  |  | import * as Common from '@/utils/common'; | 
 |  |  | import MissionShow from "./MissionShow"; | 
 |  |  | import { MissionListContent } from "./MissionListContent"; | 
 |  |  | import EmptyDataLoader from "../components/EmptyDataLoader"; | 
 |  |  | import MissionResend from "./MissionResend"; | 
 |  |  |  | 
 |  |  | const MissionList = () => { | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <h1>Fuck</h1> | 
 |  |  |             <ListBase | 
 |  |  |                 perPage={100} | 
 |  |  |                 filter={{ | 
 |  |  |                 }} | 
 |  |  |             > | 
 |  |  |                 <MissionLayout /> | 
 |  |  |             </ListBase> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const filters = [ | 
 |  |  |     <ReferenceInput source="agvId" label="table.field.segment.agvId" reference="agv" alwaysOn> | 
 |  |  |         <AutocompleteInput label="table.field.segment.agvId" optionText="uuid" filterToQuery={(val) => ({ uuid: val })} /> | 
 |  |  |     </ReferenceInput>, | 
 |  |  |     <TextInput source="groupNo" label="table.field.segment.groupId" />, | 
 |  |  | ]; | 
 |  |  |  | 
 |  |  | const MissionLayout = () => { | 
 |  |  |     const location = useLocation(); | 
 |  |  |     const matchShow = matchPath('/mission/:id/show', location.pathname); | 
 |  |  |     const matchResend = matchPath('/mission/:id/resend', location.pathname); | 
 |  |  |  | 
 |  |  |     const { data, isPending, filterValues } = useListContext(); | 
 |  |  |     const hasFilters = filterValues && Object.keys(filterValues).length > 0; | 
 |  |  |  | 
 |  |  |     if (isPending) return <LinearProgress />; | 
 |  |  |     if (!data?.length && !hasFilters) { | 
 |  |  |         return ( | 
 |  |  |             <> | 
 |  |  |                 <EmptyDataLoader> | 
 |  |  |                     <MissionShow open={!!matchShow} groupNo={matchShow?.params.id} /> | 
 |  |  |                 </EmptyDataLoader> | 
 |  |  |             </> | 
 |  |  |         ); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Stack component="div" sx={{ width: '100%' }}> | 
 |  |  |             <Title title={'menu.mission'} /> | 
 |  |  |             <ListToolbar filters={filters} actions={( | 
 |  |  |                 <TopToolbar> | 
 |  |  |                     <FilterButton /> | 
 |  |  |                 </TopToolbar> | 
 |  |  |             )} /> | 
 |  |  |             <Card> | 
 |  |  |                 <MissionListContent /> | 
 |  |  |             </Card> | 
 |  |  |             <MissionShow open={!!matchShow} id={matchShow?.params.id} /> | 
 |  |  |             <MissionResend open={!!matchResend} id={matchResend?.params.id} /> | 
 |  |  |         </Stack> | 
 |  |  |     ); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export default MissionList; |