react-antd-odata

A reusable React component library for Ant Design Pro projects, providing generic CRUD (Create, Read, Update, Delete) operations with OData entities.

Features

• ODataCrudTable Component: A highly versatile component for dynamic table rendering, form generation, and seamless integration with OData services.
• OData Service Functions: Standardized asynchronous functions (getODataEntities, addODataEntity, updateODataEntity, removeODataEntity) for interacting with OData endpoints using axios.
• Dynamic Column & Form Generation: Utilizes Ant Design Pro's ProColumns and ProForm components to dynamically display table columns and generate forms based on definitions.
• Field Type Handling: Supports various input types including text, date, select, and tags-input.
• OData GUID Handling: Correctly formats GUIDs for OData PATCH and DELETE operations.
• Date Field Transformation: Transforms problematic default date strings to null for backend compatibility.
• Tags Input & Display: Handles conversion between comma-separated tag strings and array for input/display.
• Configurable OData API URL: The OData API base URL can now be passed as a prop to the ODataCrudTable component, making it flexible for different project environments.
• Automatic Authorization Header: axios interceptors are configured to automatically include the Authorization header with the accessToken from localStorage for OData API requests.

Installation

To install this package in your Ant Design Pro project, you can use npm:

npm install react-antd-odata

Usage

ODataCrudTable Component

Import the ODataCrudTable component and use it in your React application. Remember to wrap your component with Ant Design's App component and pass the message instance from App.useApp() as a prop.

import React from 'react';
import { App } from 'antd';
import type { ProColumns } from '@ant-design/pro-components';
import ODataCrudTable from 'react-antd-odata/dist/components/ODataCrudTable';

interface Customer {
  Oid: string;
  Name: string;
  Email: string;
  // ... other properties
}

const CustomerPage: React.FC = () => {
  const { message } = App.useApp(); // Get message instance from Ant Design App context

  const columns: ProColumns<Customer>[] = [
    {
      title: 'Name',
      dataIndex: 'Name',
      valueType: 'text',
    },
    {
      title: 'Email',
      dataIndex: 'Email',
      valueType: 'text',
    },
    // ... other columns
  ];

  const formItems = [
    {
      name: 'Name',
      label: 'Customer Name',
      rules: [{ required: true, message: 'Please enter customer name' }],
      type: 'text',
    },
    {
      name: 'Email',
      label: 'Customer Email',
      rules: [{ required: true, message: 'Please enter customer email' }],
      type: 'text',
    },
    // ... other form items
  ];

  return (
    <ODataCrudTable<Customer>
      entityName="Customer" // Your OData entity set name
      columns={columns}
      rowKey="Oid" // Unique key for your entity
      formItems={formItems}
      headerTitle="Customer Management"
      message={message} // Pass the message instance
      odataBaseUrl="https://localhost:5001/api/odata" // Your OData API base URL
    />
  );
};

export default CustomerPage;

OData Service Functions

You can also import and use the OData service functions directly. Remember to pass the baseUrl as the first argument to these functions.

import {
  getODataEntities,
  addODataEntity,
  updateODataEntity,
  removeODataEntity,
} from 'react-antd-odata/dist/components/ODataCrudTable/odata'; // Note: Path changed

// Example usage:
async function fetchCustomers() {
  const odataBaseUrl = "https://localhost:5001/api/odata"; // Define your OData API base URL
  try {
    const customers = await getODataEntities(odataBaseUrl, 'Customer', { $top: 10 });
    console.log(customers);
  } catch (error) {
    console.error('Failed to fetch customers:', error);
  }
}

async function createCustomer(newCustomer: any) {
  const odataBaseUrl = "https://localhost:5001/api/odata"; // Define your OData API base URL
  try {
    const created = await addODataEntity(odataBaseUrl, 'Customer', newCustomer);
    console.log('Customer created:', created);
  } catch (error) {
    console.error('Failed to create customer:', error);
  }
}

Development

To build the project:

npm install
npm run build

This will compile the TypeScript code into the dist directory.

License

This project is licensed under the MIT License - see the LICENSE file for details.