tachybase_todo/packages/plugins/@hera/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx

513 lines
23 KiB
TypeScript

import { ArrayTable } from '@formily/antd-v5';
import { observer, useField } from '@formily/react';
import {
ExtendCollectionsProvider,
FormProvider,
SchemaComponent,
TableBlockProvider,
useCollection_deprecated,
useCompile,
useRecord,
} from '@nocobase/client';
import React, { createContext, useContext } from 'react';
import { AuditLogsDesigner } from './AuditLogsDesigner';
import { tval } from '../locale';
const collection = {
name: 'auditLogs',
title: tval('Audit logs'),
fields: [
{
name: 'createdAt',
type: 'date',
interface: 'createdAt',
uiSchema: {
type: 'datetime',
title: tval('Created at'),
'x-component': 'DatePicker',
'x-component-props': {
showTime: true,
},
'x-read-pretty': true,
},
},
{
name: 'type',
type: 'string',
interface: 'select',
uiSchema: {
type: 'string',
title: tval('Action type'),
'x-component': 'Select',
'x-read-pretty': true,
enum: [
{ label: tval('Create record'), value: 'create', color: 'lime' },
{ label: tval('Update record'), value: 'update', color: 'gold' },
{ label: tval('Delete record'), value: 'destroy', color: 'magenta' },
],
},
},
],
};
const Username = observer(
() => {
const field = useField<any>();
return <div>{field?.value?.nickname || field.value?.id}</div>;
},
{ displayName: 'Username' },
);
const Collection = observer(
() => {
const field = useField<any>();
const { title, name } = field.value || {};
const compile = useCompile();
return <div>{title ? compile(title) : name}</div>;
},
{ displayName: 'Collection' },
);
const Field = observer(
() => {
const field = useField<any>();
const compile = useCompile();
if (!field.value) {
return null;
}
return <div>{field.value?.uiSchema?.title ? compile(field.value?.uiSchema?.title) : field.value.name}</div>;
},
{ displayName: 'Field' },
);
const Value = observer(
() => {
const field = useField<any>();
const record = ArrayTable.useRecord();
if (record.field?.uiSchema) {
return (
<FormProvider>
<SchemaComponent
schema={{
name: record.field.name,
...record.field?.uiSchema,
default: field.value,
'x-read-pretty': true,
}}
/>
</FormProvider>
);
}
return <div>{field.value ? JSON.stringify(field.value) : null}</div>;
},
{ displayName: 'Value' },
);
const IsAssociationBlock = createContext(null);
IsAssociationBlock.displayName = 'IsAssociationBlock';
export const AuditLogs: any = () => {
const isAssoc = useContext(IsAssociationBlock);
const ext = {};
if (!isAssoc) {
ext['column31'] = {
type: 'void',
'x-component': 'TableV2.Column',
title: tval('Record ID'),
properties: {
recordId: {
'x-component': 'Input',
'x-read-pretty': true,
},
},
};
}
return (
<SchemaComponent
memoized
components={{ ArrayTable, Username, Collection, Field, Value }}
schema={{
type: 'void',
name: 'lfm4trkw8j3',
'x-component': 'div',
properties: {
actions: {
type: 'void',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
properties: {
filter: {
type: 'void',
title: tval('Filter'),
'x-action': 'filter',
'x-component': 'Filter.Action',
'x-component-props': {
icon: 'FilterOutlined',
useProps: '{{ useFilterActionProps }}',
},
'x-align': 'left',
},
},
},
y84dlntcaup: {
type: 'array',
'x-component': 'TableV2',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
useProps: '{{ useTableBlockProps }}',
},
properties: {
actions: {
type: 'void',
title: tval('Actions'),
'x-action-column': 'actions',
'x-decorator': 'TableV2.Column.ActionBar',
'x-component': 'TableV2.Column',
'x-designer': 'TableV2.ActionColumnDesigner',
'x-initializer': 'table:configureItemActions',
properties: {
actions: {
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',
},
properties: {
o80rypwmeeg: {
type: 'void',
title: tval('View'),
'x-toolbar': 'ActionSchemaToolbar',
'x-settings': 'actionSettings:view',
'x-component': 'Action.Link',
'x-component-props': {
openMode: 'drawer',
},
properties: {
drawer: {
type: 'void',
title: tval('View record'),
'x-component': 'Action.Container',
'x-component-props': {
className: 'nb-action-popup',
},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
properties: {
tdlav8o9o17: {
type: 'void',
'x-component': 'Grid.Row',
properties: {
'7bsnaf47i6g': {
type: 'void',
'x-component': 'Grid.Col',
properties: {
'6s2qbihe3tu': {
type: 'void',
'x-acl-action': 'auditLogs:get',
'x-decorator': 'FormBlockProvider',
'x-decorator-props': {
resource: 'auditLogs',
collection: 'auditLogs',
readPretty: true,
action: 'get',
params: {
appends: ['collection', 'user', 'changes'],
},
useParams: '{{ useParamsFromRecord }}',
useSourceId: '{{ useSourceIdFromParentRecord }}',
},
'x-component': 'CardItem',
properties: {
mevpuonrda0: {
type: 'void',
'x-component': 'FormV2',
'x-read-pretty': true,
'x-component-props': {
useProps: '{{ useFormBlockProps }}',
},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
properties: {
row1: {
type: 'void',
'x-component': 'Grid.Row',
properties: {
col11: {
type: 'void',
'x-component': 'Grid.Col',
properties: {
collection: {
type: 'string',
title: tval('Collection display name'),
'x-component': 'Collection',
'x-decorator': 'FormItem',
'x-read-pretty': true,
},
},
},
},
},
row2: {
type: 'void',
'x-component': 'Grid.Row',
properties: {
col21: {
type: 'void',
'x-component': 'Grid.Col',
properties: {
type: {
type: 'string',
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
'x-read-pretty': true,
},
},
},
},
},
row3: {
type: 'void',
'x-component': 'Grid.Row',
properties: {
col31: {
type: 'void',
'x-component': 'Grid.Col',
properties: {
createdAt: {
type: 'string',
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
'x-read-pretty': true,
},
},
},
},
},
row4: {
type: 'void',
'x-component': 'Grid.Row',
properties: {
col41: {
type: 'void',
'x-component': 'Grid.Col',
properties: {
user: {
type: 'string',
title: tval('User'),
'x-component': 'Username',
'x-decorator': 'FormItem',
'x-read-pretty': true,
},
},
},
},
},
row5: {
type: 'void',
'x-component': 'Grid.Row',
properties: {
col51: {
type: 'void',
'x-component': 'Grid.Col',
properties: {
changes: {
type: 'array',
title: tval('Field value changes'),
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
'x-component-props': {
pagination: { pageSize: 10 },
scroll: { x: '100%' },
},
items: {
type: 'object',
properties: {
column3: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
width: 200,
title: tval('Field'),
},
properties: {
field: {
type: 'string',
//'x-decorator': 'Editable',
'x-component': 'Field',
},
},
},
column4: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
width: 200,
title: tval('Before change'),
},
properties: {
before: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Value',
},
},
},
column5: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
width: 200,
title: tval('After change'),
},
properties: {
after: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Value',
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
column1: {
type: 'void',
'x-decorator': 'TableV2.Column.Decorator',
'x-component': 'TableV2.Column',
properties: {
createdAt: {
'x-component': 'CollectionField',
'x-read-pretty': true,
},
},
},
column2: {
type: 'void',
'x-decorator': 'TableV2.Column.Decorator',
'x-component': 'TableV2.Column',
properties: {
type: {
'x-component': 'CollectionField',
'x-read-pretty': true,
},
},
},
column3: {
type: 'void',
'x-component': 'TableV2.Column',
title: tval('Collection display name'),
properties: {
collection: {
'x-component': 'Collection',
'x-read-pretty': true,
},
},
},
...ext,
column4: {
type: 'void',
'x-component': 'TableV2.Column',
title: tval('User'),
properties: {
user: {
'x-component': 'Username',
'x-read-pretty': true,
},
},
},
},
},
},
}}
/>
);
};
AuditLogs.Decorator = observer(
(props: any) => {
const parent = useCollection_deprecated();
const record = useRecord();
let filter = props?.params?.filter;
if (parent.name) {
const filterByTk = record?.[parent.filterTargetKey || 'id'];
if (filter) {
filter = {
$and: [
filter,
{
collectionName: parent.name,
recordId: `${filterByTk}`,
},
],
};
} else {
filter = {
collectionName: parent.name,
recordId: `${filterByTk}`,
};
}
}
const defaults = {
collection: 'auditLogs',
resource: 'auditLogs',
action: 'list',
params: {
pageSize: 20,
appends: ['collection', 'user'],
...props.params,
filter,
sort: '-createdAt',
},
rowKey: 'id',
showIndex: true,
dragSort: false,
};
return (
<IsAssociationBlock.Provider value={!!parent.name}>
<ExtendCollectionsProvider collections={[collection]}>
<TableBlockProvider {...defaults}>{props.children}</TableBlockProvider>
</ExtendCollectionsProvider>
</IsAssociationBlock.Provider>
);
},
{ displayName: 'AuditLogs.Decorator' },
);
AuditLogs.Designer = AuditLogsDesigner;