smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

DataTable removed from all settings

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-21 13:32:29 -05:00
parent 50fec41aba
commit 2b972afa68
18 changed files with 766 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/components/DataTable/DataTable.tsx
View File

@@ -1,233 +0,0 @@
import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core';
import { modals } from '@mantine/modals';
import { IconEdit, IconTrash } from '@tabler/icons-react';
import { ThemeProvider } from 'components/ThemeProvider';
import { useCommonHooks, useMutationAPI } from 'hooks';
import {
type MRT_Row,
type MRT_TableOptions,
MantineReactTable,
useMantineReactTable,
} from 'mantine-react-table';
import { memo } from 'react';
import { FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textInputClasses } from 'styles';
export function DataTableComponent({
tableName,
columns,
tableData,
isFetching,
isLoading,
endpoint,
}: {
tableName: string;
columns: any;
tableData: any;
isFetching: boolean;
isLoading: boolean;
endpoint: string;
}) {
const { theme } = useCommonHooks();
const { mutateAsync: createRow } = useMutationAPI();
const { mutateAsync: editRow } = useMutationAPI();
const { mutateAsync: deleteRow } = useMutationAPI();
const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
values,
exitCreatingMode,
}) => {
createRow({ method: 'POST', endpoint: endpoint, body: values });
exitCreatingMode();
};
const handleEditRow: MRT_TableOptions<any>['onEditingRowSave'] = async ({
values,
table,
row,
}) => {
editRow({ method: 'PATCH', endpoint: endpoint, body: { ...values, id: row.id } });
table.setEditingRow(null);
};
const openDeleteConfirmModal = (row: MRT_Row<any>) =>
modals.openConfirmModal({
title: (
<Text c={theme.primaryColor}>Are you sure you want to delete this user?</Text>
),
children: <Text c={theme.primaryColor}>Are you sure?</Text>,
labels: { confirm: 'Delete', cancel: 'Cancel' },
confirmProps: {
style: {
backgroundColor: 'var(--mantine-color-red-6)',
color: 'var(--mantine-color-white)',
},
},
cancelProps: { color: 'green' },
onConfirm: () =>
deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }),
});
const table = useMantineReactTable({
columns: columns,
data: tableData,
enableFacetedValues: true,
enablePagination: false,
enableRowVirtualization: true,
enableEditing: true,
createDisplayMode: 'modal',
editDisplayMode: 'row',
enableBottomToolbar: false,
enableToolbarInternalActions: false,
positionGlobalFilter: 'right',
onCreatingRowSave: handleCreateRow,
onEditingRowSave: handleEditRow,
getRowId: (row: any) => row.id,
initialState: {
showLoadingOverlay: isLoading,
isLoading: isLoading,
},
state: {
showLoadingOverlay: isFetching,
isLoading: isLoading,
columnVisibility: { id: false, categoryIndex: false },
showGlobalFilter: tableName !== 'Personalization',
},
mantineSearchTextInputProps: {
classNames: textInputClasses,
className: textInputClasses.default,
},
mantinePaperProps: {
style: {
border: 'none',
boxShadow: 'none',
'--mrt-base-background-color': 'transparent',
'--mrt-row-hover-background-color': theme.searchColor,
color: 'var(--color-text-pri)',
},
},
mantineTableContainerProps: {
style: {
maxHeight: '700px',
borderRadius: '20px',
backgroundColor: theme.searchColor,
backdropFilter: theme.backgroundImage === 'none' ? undefined : 'blur(20px)',
fontSize: '18px',
},
},
mantineTableHeadProps: {
style: {
fontSize: '18px',
backgroundColor: theme.primaryColor,
color: theme.accentColor,
opacity: 1,
},
},
mantineTableBodyRowProps: {
style: {
fontSize: '18px',
borderBottom: 'none',
},
},
mantineEditTextInputProps: {
styles: {
wrapper: {
display: 'flex',
},
input: {
width: '100%',
border: 'none',
backgroundColor: `${theme.searchColor}`,
color: 'var(--color-text-pri)',
fontSize: '18px',
},
},
},
mantineFilterTextInputProps: {
classNames: textInputClasses,
className: textInputClasses.default,
},
mantineEditSelectProps: {
styles: {
input: {
color: theme.primaryColor,
fontSize: '18px',
backgroundColor: theme.searchColor,
border: 'none',
},
option: {
color: theme.primaryColor,
fontSize: '18px',
backgroundColor: 'transparent',
},
dropdown: {
backgroundColor: `${theme.backgroundColor} !important`,
},
},
},
displayColumnDefOptions: {
'mrt-row-actions': {
header: '',
minSize: 40,
},
},
renderRowActions: ({ row, table }) => (
<Flex gap='xs'>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Edit'}
>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
onClick={() => table.setEditingRow(row)}
>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Delete'}
>
<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
<IconTrash />
</ActionIcon>
</Tooltip>
</Flex>
),
mantineCreateRowModalProps: {
styles: {
root: {
color: theme.primaryColor,
},
content: {
color: theme.primaryColor,
},
},
},
renderTopToolbarCustomActions: ({ table }) => {
return (
<>
{tableName !== 'Personalization' && (
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
onClick={() => {
table.setCreatingRow(true);
}}
>
<FiPlus />
</Button>
)}
</>
);
},
});
return (
<ThemeProvider theme={theme}>
<MantineReactTable table={table} />
</ThemeProvider>
);
}
export const DataTable = memo(DataTableComponent);
export default DataTable;

86
src/components/DataTable/columns/ApplicationColumns.tsx
View File

@@ -1,86 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function ApplicationColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.name) {
return `${row.name}`;
}
return '';
},
id: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.url) {
return `${row.url}`;
}
return '';
},
id: 'url',
header: 'Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.icon) {
return `${row.icon}`;
}
return '';
},
id: 'icon',
header: 'Icon',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.baseUrl) {
return `${row.baseUrl}`;
}
return '';
},
id: 'baseUrl',
header: 'Base Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.filterName) {
return `${row.filterName}`;
}
return '';
},
id: 'filterName',
header: 'Filter Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

64
src/components/DataTable/columns/BookmarkColumns.tsx
View File

@@ -1,64 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function BookmarkColumns(groups: any) {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.name) {
return `${row.name}`;
}
return '';
},
id: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.url) {
return `${row.url}`;
}
return '';
},
id: 'url',
header: 'Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.category) {
return `${row.category}`;
}
return '';
},
id: 'category',
header: 'Category',
editVariant: 'select',
mantineEditSelectProps: { data: groups },
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[groups],
);
return columns;
}

66
src/components/DataTable/columns/CategoryColumns.tsx
View File

@@ -1,66 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function CategoryColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.categoryName) {
return `${row.categoryName}`;
}
return '';
},
id: 'categoryName',
header: 'Name',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.categoryIndex > -1) {
return `${row.categoryIndex}`;
}
return '';
},
enableEditing: false,
id: 'categoryIndex',
header: 'Index',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.filterName) {
return `${row.filterName}`;
}
return '';
},
id: 'filterName',
header: 'Filter Name',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

38
src/components/DataTable/columns/MessagesColumns.tsx
View File

@@ -1,38 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function MessagesColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.message) {
return `${row.message}`;
}
return '';
},
id: 'message',
header: 'Message',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

62
src/components/DataTable/columns/SearchProviderColumns.tsx
View File

@@ -1,62 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function SearchProviderColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.name) {
return `${row.name}`;
}
return '';
},
id: 'name',
header: 'Name',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.url) {
return `${row.url}`;
}
return '';
},
id: 'url',
header: 'Url',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.prefix) {
return `${row.prefix}`;
}
return '';
},
id: 'prefix',
header: 'Prefix',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

50
src/components/DataTable/columns/WolClientColumns.tsx
View File

@@ -1,50 +0,0 @@
import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';
export function WolClientColumns() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => {
if (row.id) {
return `${row.id}`;
}
return '';
},
enableEditing: false,
id: 'id',
header: 'ID',
size: 50,
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.hostname) {
return `${row.hostname}`;
}
return '';
},
id: 'hostname',
header: 'Hostname',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
{
accessorFn: (row) => {
if (row.macAddress) {
return `${row.macAddress}`;
}
return '';
},
id: 'macAddress',
header: 'MAC Address',
Cell: ({ renderedCellValue }) => renderedCellValue,
Header: ({ column }) => column.columnDef.header,
},
],
[],
);
return columns;
}

7
src/components/index.ts
View File

@@ -1,11 +1,4 @@
export { HelpModal } from './HelpModal/HelpModal';
export { WeatherModal } from './WeatherModal/WeatherModal';
export { DataTable } from './DataTable/DataTable';
export { ThemeProvider } from './ThemeProvider';
export { MainLayout } from './MainLayout';
export { ApplicationColumns } from './DataTable/columns/ApplicationColumns';
export { BookmarkColumns } from './DataTable/columns/BookmarkColumns';
export { CategoryColumns } from './DataTable/columns/CategoryColumns';
export { MessagesColumns } from './DataTable/columns/MessagesColumns';
export { SearchProviderColumns } from './DataTable/columns/SearchProviderColumns';
export { WolClientColumns } from './DataTable/columns/WolClientColumns';