96 lines
2.3 KiB
TypeScript
96 lines
2.3 KiB
TypeScript
import {
|
|
ContactPointInfo,
|
|
deleteContactPoint,
|
|
getContactPoints,
|
|
} from '@/api/contactPoints'
|
|
import { ConfirmModal } from '@/components/ConfirmModal'
|
|
import { DataTable } from '@/components/DataTable'
|
|
import { EditIcon, PlusIcon, TrashIcon } from '@/icons'
|
|
import { useState } from 'preact/hooks'
|
|
import { useMutation, useQuery } from 'react-query'
|
|
import { NoContactPoints } from '../NoContactPoints'
|
|
import { ContactPointFormModal } from './components/ContactPointFormModal'
|
|
|
|
export const ContactPointsTable = () => {
|
|
const contactPoints = useQuery('/contact-points', () => getContactPoints())
|
|
|
|
const deleteMutation = useMutation(deleteContactPoint, {
|
|
onSuccess: () => {
|
|
contactPoints.refetch()
|
|
setShowDelete(undefined)
|
|
},
|
|
})
|
|
|
|
const [showNew, setShowNew] = useState(false)
|
|
const [edited, setEdited] = useState<ContactPointInfo>()
|
|
const [showDelete, setShowDelete] = useState<ContactPointInfo>()
|
|
|
|
return (
|
|
<div className="contact-points">
|
|
<div className="section-title">
|
|
<h2>Contact Points</h2>
|
|
<button onClick={() => setShowNew(true)}>
|
|
<PlusIcon /> Add contact point
|
|
</button>
|
|
</div>
|
|
|
|
<div className="box-shadow">
|
|
<DataTable
|
|
query={contactPoints}
|
|
emptyMessage={<NoContactPoints />}
|
|
columns={[
|
|
{ key: 'name', title: 'Name', render: (c) => c.name, scale: 1 },
|
|
{
|
|
key: 'type',
|
|
title: 'Type',
|
|
render: (c) => c.type,
|
|
width: '5rem',
|
|
},
|
|
{
|
|
key: 'actions',
|
|
title: 'Actions',
|
|
width: '12rem',
|
|
className: 'actions',
|
|
render: (c) => (
|
|
<div>
|
|
<button
|
|
onClick={() => setShowDelete(c)}
|
|
className="danger-variant"
|
|
>
|
|
<TrashIcon /> Delete
|
|
</button>
|
|
<button onClick={() => setEdited(c)}>
|
|
<EditIcon /> Edit
|
|
</button>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{(showNew || edited) && (
|
|
<ContactPointFormModal
|
|
open
|
|
contactPoint={edited}
|
|
onClose={() => {
|
|
setShowNew(false)
|
|
setEdited(undefined)
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showDelete && (
|
|
<ConfirmModal
|
|
open
|
|
onConfirm={() => deleteMutation.mutate(showDelete.id)}
|
|
onCancel={() => setShowDelete(undefined)}
|
|
confirmText="Delete"
|
|
>
|
|
Do you want to delete {showDelete.name} contact point?
|
|
</ConfirmModal>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|