import React, { useState, useRef, useEffect, useMemo, useCallback } from "react"; 
 | 
import { 
 | 
    List, 
 | 
    DatagridConfigurable, 
 | 
    SearchInput, 
 | 
    TopToolbar, 
 | 
    SelectColumnsButton, 
 | 
    EditButton, 
 | 
    FilterButton, 
 | 
    CreateButton, 
 | 
    ExportButton, 
 | 
    BulkDeleteButton, 
 | 
    WrapperField, 
 | 
    useRecordContext, 
 | 
    useTranslate, 
 | 
    useNotify, 
 | 
    useListContext, 
 | 
    FunctionField, 
 | 
    TextField, 
 | 
    NumberField, 
 | 
    DateField, 
 | 
    BooleanField, 
 | 
    ReferenceField, 
 | 
    TextInput, 
 | 
    DateTimeInput, 
 | 
    DateInput, 
 | 
    SelectInput, 
 | 
    NumberInput, 
 | 
    ReferenceInput, 
 | 
    ReferenceArrayInput, 
 | 
    AutocompleteInput, 
 | 
    DeleteButton, 
 | 
    useRefresh, 
 | 
    useRedirect, 
 | 
    Button, 
 | 
    useGetList, 
 | 
    ListContextProvider, 
 | 
    useList, 
 | 
    Toolbar, 
 | 
} from 'react-admin'; 
 | 
  
 | 
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting'; 
 | 
import { Box, Typography, Card, Stack, DialogContent, DialogTitle, DialogActions, Dialog, Chip, ListItem, Paper } from '@mui/material'; 
 | 
import { styled } from '@mui/material/styles'; 
 | 
import DialogCloseButton from "../../components/DialogCloseButton"; 
 | 
import request from '@/utils/request'; 
 | 
import { filter } from "lodash"; 
 | 
import { height } from "@mui/system"; 
 | 
  
 | 
const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ 
 | 
    '& .css-1vooibu-MuiSvgIcon-root': { 
 | 
        height: '.9em' 
 | 
    }, 
 | 
    '& .RaDatagrid-row': { 
 | 
        cursor: 'auto' 
 | 
    }, 
 | 
    '& .column-name': { 
 | 
    }, 
 | 
    '& .opt': { 
 | 
        width: 200 
 | 
    }, 
 | 
})); 
 | 
  
 | 
const ItemToTaskModal = (props) => { 
 | 
    const { open, setOpen, record } = props; 
 | 
    const translate = useTranslate(); 
 | 
    const [createDialog, setCreateDialog] = useState(false); 
 | 
    const [drawerVal, setDrawerVal] = useState(false); 
 | 
    const handleClose = (event, reason) => { 
 | 
        if (reason !== "backdropClick") { 
 | 
            setOpen(false); 
 | 
        } 
 | 
    }; 
 | 
  
 | 
    const { data, total, isPending, error, refetch, meta } = useGetList('/wave/locs/preview', { filter: { waveId: record?.id } }); 
 | 
    const listContext = useList({ data, isPending }); 
 | 
  
 | 
    return ( 
 | 
        <Box display="flex"> 
 | 
            <Dialog 
 | 
                open={open} 
 | 
                onClose={handleClose} 
 | 
                aria-labelledby="form-dialog-title" 
 | 
                aria-hidden 
 | 
                fullWidth 
 | 
                disableRestoreFocus 
 | 
                maxWidth="lg" 
 | 
            > 
 | 
                <DialogTitle id="form-dialog-title" sx={{ 
 | 
                    position: 'sticky', 
 | 
                    top: 0, 
 | 
                    backgroundColor: 'background.paper', 
 | 
                    zIndex: 1000 
 | 
                }}> 
 | 
                    {translate('toolbar.createTask')} 
 | 
                    <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}> 
 | 
                        <DialogCloseButton onClose={handleClose} /> 
 | 
                    </Box> 
 | 
                </DialogTitle> 
 | 
                <DialogContent sx={{ height: 400 }}> 
 | 
                    <ListContextProvider 
 | 
                        value={listContext} 
 | 
                        sx={{ 
 | 
                            flexGrow: 1, 
 | 
                            transition: (theme) => 
 | 
                                theme.transitions.create(['all'], { 
 | 
                                    duration: theme.transitions.duration.enteringScreen, 
 | 
                                }), 
 | 
                            marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0, 
 | 
                        }} 
 | 
                        title={"menu.waveItem"} 
 | 
                        empty={false} 
 | 
                        sort={{ field: "create_time", order: "desc" }} 
 | 
                        actions={( 
 | 
                            <TopToolbar> 
 | 
                                <SelectColumnsButton preferenceKey='waveItem' /> 
 | 
                            </TopToolbar> 
 | 
                        )} 
 | 
                        perPage={DEFAULT_PAGE_SIZE} 
 | 
                    > 
 | 
                        <StyledDatagrid 
 | 
                            preferenceKey='waveItem' 
 | 
                            bulkActionButtons={false} 
 | 
                            rowClick={(id, resource, record) => false} 
 | 
                            expand={false} 
 | 
                            expandSingle={false} 
 | 
                            omit={['id', 'createTime', 'matnrId', 'waveId', 'batch', 'orderItemId', 'unit', 'batch', 'trackCode', 'fieldsIndex', 'createBy', 'memo']} 
 | 
                        > 
 | 
                            <NumberField source="id" /> 
 | 
                            <NumberField source="waveId" label="table.field.waveItem.waveId" /> 
 | 
                            <TextField source="waveCode" label="table.field.waveItem.waveCode" /> 
 | 
                            <TextField source="orderCode" label="table.field.waveItem.orderCode" /> 
 | 
                            <NumberField source="matnrId" label="table.field.waveItem.matnrId" /> 
 | 
                            <TextField source="matnrCode" label="table.field.waveItem.matnrCode" /> 
 | 
                            <TextField source="batch" label="table.field.waveItem.batch" /> 
 | 
                            <TextField source="splrBatch" label="table.field.waveItem.splrBatch" /> 
 | 
                            <NumberField source="orderItemId" label="table.field.waveItem.orderItemId" /> 
 | 
                            <TextField source="unit" label="table.field.waveItem.unit" /> 
 | 
                            <TextField source="trackCode" label="table.field.waveItem.trackCode" /> 
 | 
                            <TextField source="fieldsIndex" label="table.field.waveItem.fieldsIndex" /> 
 | 
                            <NumberField source="anfme" label="table.field.waveItem.anfme" /> 
 | 
                            <NumberField source="workQty" label="table.field.waveItem.workQty" /> 
 | 
                            <NumberField source="qty" label="table.field.waveItem.qty" /> 
 | 
                            <NumberField source="stockQty" label="table.field.waveItem.stockQty" /> 
 | 
                            <WrapperField cellClassName="opt" label="table.field.waveItem.stockLocs"> 
 | 
                                <TagsField /> 
 | 
                            </WrapperField> 
 | 
                        </StyledDatagrid> 
 | 
                    </ListContextProvider> 
 | 
                </DialogContent> 
 | 
                <DialogActions> 
 | 
                    <Toolbar sx={{ width: '100%', justifyContent: 'end' }} > 
 | 
                        <GenerateTaskButton record={record?.id} dataSource={data} setOpen={setOpen}/> 
 | 
                    </Toolbar> 
 | 
                </DialogActions> 
 | 
            </Dialog> 
 | 
        </Box> 
 | 
    ) 
 | 
} 
 | 
  
 | 
export default ItemToTaskModal; 
 | 
  
 | 
const GenerateTaskButton = (record) => { 
 | 
    const refresh = useRefresh(); 
 | 
    const notify = useNotify(); 
 | 
    const redirect = useRedirect(); 
 | 
    const translate = useTranslate(); 
 | 
    const { locs, setLocs } = useState([]); 
 | 
    const generateTask = async () => { 
 | 
        record?.dataSource.map(item => { 
 | 
            const loc = JSON.parse(item.stockLocs); 
 | 
            if (loc != undefined && loc.length > 0) { 
 | 
                setLocs(...loc) 
 | 
            } 
 | 
        }) 
 | 
        if (locs == undefined || locs.length < 1) { 
 | 
            notify(translate('request.error.stock')) 
 | 
        } else { 
 | 
            const res = await request.post(`/wave/public/task`, { wave: record?.record, waveItem: record?.dataSource }); 
 | 
            if (res?.data?.code === 200) { 
 | 
                record.setOpen(false) 
 | 
                notify(res.data.msg); 
 | 
                redirect("/task") 
 | 
            } else { 
 | 
                notify(res.data.msg); 
 | 
            } 
 | 
            refresh(); 
 | 
        } 
 | 
    } 
 | 
    return (<Button variant="contained" label={"ra.action.save"} onClick={generateTask}></Button>) 
 | 
} 
 | 
  
 | 
const TagsField = () => { 
 | 
    const record = useRecordContext(); 
 | 
    const translate = useTranslate(); 
 | 
    const locs = JSON.parse(record.stockLocs); 
 | 
    if (locs == undefined || locs.length < 1) { 
 | 
        return ( 
 | 
            <> 
 | 
                <ListItem> 
 | 
                    <Chip color="error" label={translate("common.action.stockError")} variant="outlined" /> 
 | 
                </ListItem> 
 | 
            </> 
 | 
        ) 
 | 
    } else { 
 | 
        return ( 
 | 
            <> 
 | 
                {locs.map((data) => { 
 | 
                    return ( 
 | 
                        <ListItem key={data?.id}> 
 | 
                            <Chip label={data?.locCode} /> 
 | 
                        </ListItem> 
 | 
                    ) 
 | 
                })} 
 | 
            </> 
 | 
        ) 
 | 
    } 
 | 
  
 | 
} 
 |