Listing Elements

General Usage

While listing the elements you can use predefined ListComponentcomponent. This component will let you list elements with sorting and filtering functionality.

You need to define some properties to make this component work. First of all, you need to define headerData with title string, routes and actionsComponent.

import { LinkButton } from '@components';
import { articlesSubRoutes } from 'modules/Articles/Static/articlesRoutes';
import { HeaderData, ListComponent } from '../modules/Crud/ListComponentWithFilter';

const headerData: HeaderData = {
    title: t('common:articles'),
    routes: articlesSubRoutes,
    actionsComponent:
        modes.length > 0 && modes.includes(ModeEnum.Write) ? (
            <LinkButton
                title={t('actions:add2', { name: t('common:article') })}
                path="/add-articlev2"
                type="primary"
            />
        ) : null
};

<ListComponent
                headerData={headerData}
                dataModel={ArticleModel}
                routeDetailPage={'/articlev2/:id'}
            />

You will also use dataModel (ArticleModel here) that we created in "Defining Data Model" section.

Finally you need to define routeDetailPagefor linking detail page from list items. Here, you can keep :idto replace it with item id during linking.

These will be enough for having filterable list component.

Optional Parameters

While using ListComponent there are some additional parameters you can use.

export interface IListProps {
    headerData?: HeaderData;
    dataModel: ModelType;
    routeDetailPage?: string;

    searchCriteria?: any;
    actionColumns?: any;
    searchable?: boolean;
    
    extraColumns?:any;    
    setData?: any;
    refresh?: any;
    sortDefault?: any;
    filterFields?: Array<FilterFieldType>;
}

• You can use searchCriteria for defining initial search filter if you need any.
• actionColumns is used for defining additional columns for action buttons. If not specified, by default it will show detail and delete buttons.
• searchable is a boolean variable to disable search functionality.

Here is the example component that lists barcodes of given article without any search filters.

import { ListComponent } from 'modules/Crud/ListComponent';
import { LinkButton } from '@components';
import { Button, Space } from 'antd';

<ListComponent
    searchCriteria={{ articleId: articleId }}
    dataModel={ArticleLuBarcodeModel}
    actionColumns={[
        {
            title: 'actions:actions',
            key: 'actions',
            render: (record: { id: string; name: string; barcodeId: string }) => (
                <Space>
                    {modes.length == 0 || !modes.includes(ModeEnum.Read) ? (
                        <></>
                    ) : (
                        <>
                            <LinkButton
                                icon={<EyeTwoTone />}
                                path={pathParams('/barcode/[id]', record.barcodeId)}
                            />
                            <Button
                                icon={<PrinterOutlined />}
                                onClick={() => {
                                    setBarcodeName(record.name);
                                    setShowModal(true);
                                }}
                            />
                        </>
                    )}
                </Space>
            )
        }
    ]}
    searchable={false}
/>

Customization

To customize pages and add more functionality to list component you can update other properties.

Adding Extra Columns

• extraColumns is used for adding custom columns to table. For example changing orders functionality.

extraColumns={[{
    title: 'd:order',
    key: 'order',
    render: (record: {id: string, order: number}) => (
        <Space>                    
            <Button
                icon={<ArrowUpOutlined />}
                onClick={() => moveUp( record.id, record.order )}
            />
            <Button
                icon={<ArrowDownOutlined />}
                onClick={() => moveDown( record.id, record.order )}
            />
        </Space>
    )
}]}

Accessing List Data out of Component

• If you need the access data inside the list from the parent page, you can use setData property. You can pass state object to there and use that variable.

const [data, setData] = useState<any>();
<ListComponent setData={setData} />

Refreshing List Programmatically

• If you want to trigger List update from parent, you can use refresh property. You can define simple counter and increase it whenever you need to update the list.

const [refresh, doRefresh] = useState(0);
doRefresh(refresh+1);
<ListComponent refresh={refresh} />

Change Default Sorting

• By default data in the list component sorted by date. If you want to change this behaviour, you can use sortDefault property.

<ListComponent sortDefault={{
                    field: 'order',
                    ascending: true
                }} />

Customize Filter Fields

• To customize filter fields, (e.g. for using dropdowns) you can use filterFields property and define each field seperately. If you not specify this, by default it will use dataModel 's filterFields list.

For the detailed information about properties of fields, you can refer to Add Element page.

<ListComponent filterFields={[
                    { name: 'name', type: FormDataType.String },
                    { name: 'code', type: FormDataType.String },
                    {
                        name: 'status',
                        type: FormDataType.Dropdown,
                        subOptions: statusTexts
                    },
                    { name: 'length', type: FormDataType.Number },
                    { name: 'width', type: FormDataType.Number },
                    { name: 'height', type: FormDataType.Number },
                    { name: 'baseUnitWeight', type: FormDataType.Number },
                    { name: 'boxWeight', type: FormDataType.Number },
                    {
                        name: 'stockOwnerId',
                        displayName: t('d:stockOwner'),
                        type: FormDataType.Dropdown,
                        subOptions: sidOptions
                    },
                    { name: 'permanentProduct', type: FormDataType.Boolean }
                ]} />