notesDialog index
unknown
plain_text
2 years ago
4.8 kB
4
Indexable
import { Box, Button, ButtonBase, Chip, Dialog, DialogProps, Tab, Tabs, Typography, } from '@mui/material'; import { ClientFull } from '../../../common/types/client'; import { formatDateTime } from '../../../common/lib/date'; import { tabsStyle } from '../../../ops/opsPage'; import { useMemo, useState } from 'react'; import AddNoteDialog from './addNoteDialog'; import Content from '../../../common/components/context'; import DialogHeader from '../../../ops/components/dialogHeader'; import LeadDialog from '../../../leads/components/leadDialog'; import RichTextEditor from '../../../common/components/richTextEditor'; const noteChipColors = { 2: '#3A9BB1', 3: '#003366', 4: '#16B526', 5: '#003366', 6: '#E11B22', 7: '#3D3D3D', }; interface NotesDialogProps extends DialogProps { client: ClientFull; } const noteChipBackground = { 2: '#F0F9FB', 3: 'rgba(193, 230, 237, 0.24)', 4: 'rgba(221, 238, 204, 0.2)', 5: 'rgba(18, 50, 98, 0.04)', 6: 'rgba(252, 211, 193, 0.2)', 7: 'rgba(18, 50, 98, 0.04)', }; const NotesDialog = ({ client, ...props }: NotesDialogProps) => { const [currentTab, setCurrentTab] = useState(0); const [showAddDialog, setShowAddDialog] = useState(false); const [selectedLeadId, setSelectedLeadId] = useState<number | null>(null); const availableNoteTypes = useMemo( () => new Set(client.notes.map((note) => note.typeNote)), [client.notes], ); const notesToDisplay = useMemo(() => { if (currentTab === 0) { return client.notes; } const selectedType = [...availableNoteTypes].at(currentTab - 1); return client.notes.filter((note) => note.typeNote === selectedType); }, [currentTab, availableNoteTypes, client.notes]); return ( <Dialog fullScreen {...props}> <DialogHeader onClose={(event) => props.onClose?.(event, 'escapeKeyDown')} title={`${client.fullname} - History`} /> <Content sx={{ py: 4 }}> <Box display="flex" mb={4} alignItems="center" justifyContent="space-between"> <Tabs sx={tabsStyle} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile value={currentTab} onChange={(_, newValue: number) => setCurrentTab(newValue)} > <Tab label="All" /> {[...availableNoteTypes].map((noteType) => ( <Tab key={noteType} label={noteType} /> ))} </Tabs> <Button variant="contained" color="primary" onClick={() => setShowAddDialog(true)}> Add comment </Button> </Box> {notesToDisplay.map((note) => { console.log(note); return ( <Box key={note.id} sx={{ mt: 2, display: 'flex', justifyContent: 'space-between', boxShadow: 2, p: 3, height: 110, }} > <Box display="flex" alignItems="center"> <Chip variant="outlined" sx={{ height: 29, mr: 3, width: 130, border: 'none', fontSize: '10px', color: noteChipColors[note.typeID] || 'default', backgroundColor: noteChipBackground[note.typeID] || 'default', }} label={note.typeNote} /> <Box> <Typography sx={{ mt: 1 }} fontWeight={500} variant="body2"> {note.action} </Typography> <Typography color="text.secondary" variant="small"> {formatDateTime(note.created)} </Typography> {note.comment && ( <Box sx={{ fontSize: 14, color: 'text.secondary', mt: 2 }}> <RichTextEditor value={note.comment} editable={false} /> </Box> )} </Box> </Box> {Boolean(note.leadID) && ( <Box> <ButtonBase onClick={() => note.leadID && setSelectedLeadId(note.leadID)}> <Button variant="outlined" color="primary"> View response </Button> </ButtonBase> </Box> )} </Box> ); })} </Content> <LeadDialog leadId={selectedLeadId} onClose={() => setSelectedLeadId(null)} /> <AddNoteDialog {...props} client={client} open={showAddDialog} onClose={() => setShowAddDialog(false)} /> </Dialog> ); }; export default NotesDialog;
Editor is loading...