103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
|
|
import { useLocalStorage } from '@mantine/hooks';
|
|
import { useState } from 'react';
|
|
|
|
import type { GridlerColumns } from '../components/Column';
|
|
|
|
import { APIAdaptorGoLangv2 } from '../components/APIAdaptorGoLangv2';
|
|
import { Gridler } from '../Gridler';
|
|
|
|
export const GridlerGoAPIExampleEventlog = () => {
|
|
const [apiUrl, setApiUrl] = useLocalStorage({
|
|
defaultValue: 'http://localhost:8080/api',
|
|
key: 'apiurl',
|
|
});
|
|
const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
|
|
const [selectRow, setSelectRow] = useState<string | undefined>('');
|
|
const [values, setValues] = useState<Array<Record<string, any>>>([]);
|
|
const columns: GridlerColumns = [
|
|
{
|
|
id: 'id_process',
|
|
title: 'RID',
|
|
width: 100,
|
|
},
|
|
|
|
{
|
|
id: 'process',
|
|
title: 'Process',
|
|
tooltip: (buffer) => {
|
|
return `Process: ${buffer?.process}\nType: ${buffer?.processtype}\nStatus: ${buffer?.status}`;
|
|
},
|
|
width: 200,
|
|
},
|
|
{
|
|
id: 'processtype',
|
|
title: 'Type',
|
|
},
|
|
|
|
{
|
|
disableSort: true,
|
|
id: 'status',
|
|
title: 'Status',
|
|
width: 100,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Stack h="80vh">
|
|
<h2>Demo Using Go API Adaptor</h2>
|
|
<TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
|
|
<TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
|
|
<Divider />
|
|
<Gridler
|
|
columns={columns}
|
|
getMenuItems={(id, _state, row, col, defaultItems) => {
|
|
return [
|
|
...(defaultItems ?? []),
|
|
// {
|
|
// id: 'test',
|
|
// label: `Test -${id}`,
|
|
// onClick: () => {
|
|
// console.log('Test clicked', row, col);
|
|
// },
|
|
// },
|
|
];
|
|
}}
|
|
keyField="id_process"
|
|
onChange={(v) => {
|
|
//console.log('GridlerGoAPIExampleEventlog onChange', v);
|
|
setValues(v);
|
|
}}
|
|
sections={{
|
|
bottom: <div style={{ backgroundColor: 'teal', height: '25px' }}>bottom</div>,
|
|
left: <div style={{ backgroundColor: 'orange', width: '20px' }}>L</div>,
|
|
right: <div style={{ backgroundColor: 'green', width: '20px' }}>R</div>,
|
|
top: <div style={{ backgroundColor: 'purple', height: '20px' }}>top</div>,
|
|
}}
|
|
selectedRow={selectRow ? parseInt(selectRow, 10) : undefined}
|
|
selectMode="row"
|
|
uniqueid="gridtest"
|
|
values={values}
|
|
>
|
|
<APIAdaptorGoLangv2 authtoken={apiKey} url={`${apiUrl}/public/process`} />
|
|
</Gridler>
|
|
<Divider />
|
|
<Group>
|
|
<TextInput
|
|
onChange={(e) => setSelectRow(e.target.value)}
|
|
placeholder="row"
|
|
value={selectRow}
|
|
w="90px"
|
|
/>
|
|
<TagsInput
|
|
data={[]}
|
|
onChange={(str) => setValues(str.map((v) => ({ id_process: String(v) })))}
|
|
placeholder="Values"
|
|
value={values.map((v) => String(v?.id_process))}
|
|
/>
|
|
;
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
};
|