diff --git a/adminSiteClient/ChartViewIndexPage.tsx b/adminSiteClient/ChartViewIndexPage.tsx index c0b5d64d3b..7021d33bf8 100644 --- a/adminSiteClient/ChartViewIndexPage.tsx +++ b/adminSiteClient/ChartViewIndexPage.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect, useMemo, useState } from "react" +import { useCallback, useContext, useEffect, useMemo, useState } from "react" import * as React from "react" import { Button, Flex, Input, Space, Table } from "antd" @@ -15,11 +15,12 @@ import { highlightFunctionForSearchWords, } from "../adminShared/search.js" -function createColumns( +function createColumns(ctx: { highlightFn: ( text: string | null | undefined ) => React.ReactElement | string -): ColumnsType { + deleteFn: (chartViewId: number) => void +}): ColumnsType { return [ { title: "Preview", @@ -38,13 +39,13 @@ function createColumns( dataIndex: "name", key: "name", width: 150, - render: (name) => highlightFn(name), + render: (name) => ctx.highlightFn(name), }, { title: "Title", dataIndex: "title", key: "title", - render: (title) => highlightFn(title), + render: (title) => ctx.highlightFn(title), }, { title: "ID", @@ -58,7 +59,7 @@ function createColumns( key: "parent", render: (parent) => ( - {highlightFn(parent.title)} + {ctx.highlightFn(parent.title)} ), width: 200, @@ -90,6 +91,13 @@ function createColumns( > Edit + ), }, @@ -123,7 +131,21 @@ export function ChartViewIndexPage() { () => highlightFunctionForSearchWords(searchWords), [searchWords] ) - const columns = useMemo(() => createColumns(highlightFn), [highlightFn]) + const deleteFn = useCallback( + async (chartViewId: number) => { + if (confirm("Are you sure you want to delete this chart view?")) { + await admin + .requestJSON(`/api/chartViews/${chartViewId}`, {}, "DELETE") + .then(() => alert("Chart view deleted")) + .then(() => window.location.reload()) + } + }, + [admin] + ) + const columns = useMemo( + () => createColumns({ highlightFn, deleteFn }), + [highlightFn, deleteFn] + ) useEffect(() => { const getChartViews = async () =>