55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Badge, Stack, Td, Tr, Text } from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import MasterActionsMenu from '../MasterActionsMenu';
|
|
import { getTimeSlot } from '../../lib';
|
|
import EditableWrapper from '../Editable/Editable';
|
|
import { armService } from '../../api/arm';
|
|
|
|
const MasterItem = ({ name, phone, id, schedule }) => {
|
|
const { updateMaster } = armService();
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.arm.master',
|
|
});
|
|
|
|
return (
|
|
<Tr>
|
|
<Td>
|
|
<EditableWrapper
|
|
id={id}
|
|
as={'name'}
|
|
value={name}
|
|
onSubmit={updateMaster}
|
|
/>
|
|
</Td>
|
|
<Td>
|
|
{schedule?.length > 0 ? (
|
|
<Stack direction='row'>
|
|
{schedule?.map(({ startWashTime, endWashTime }, index: number) => (
|
|
<Badge colorScheme={'green'} key={index}>
|
|
{getTimeSlot(startWashTime, endWashTime)}
|
|
</Badge>
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Text color='gray.500'>{t('schedule.empty')}</Text>
|
|
)}
|
|
</Td>
|
|
<Td>
|
|
<EditableWrapper
|
|
id={id}
|
|
as={'phone'}
|
|
value={phone}
|
|
onSubmit={updateMaster}
|
|
/>
|
|
</Td>
|
|
<Td>
|
|
<MasterActionsMenu id={id} />
|
|
</Td>
|
|
</Tr>
|
|
);
|
|
};
|
|
|
|
export default MasterItem;
|