#

vincentlu

2025-04-08 5831c3e1dabd8d29270c140dc75151b20f65d030

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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 (
        <>
            <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;