Defining Data Model for CRUD Components

For creating basic CRUD components you can create data model at modelsfolder. Here we will go through ArticleModel.tsx example.

Properties of Model.

For models you need to use ModelType as a type which has the following structure:

// Used for CRUD form field type declarations.
export enum FormDataType {
    Number,
    String,
    Boolean,
    TextArea,
    Dropdown
}
// Used for CRUD form validation rule definitions
export type FormRuleType = {
    required: boolean;
    message: string;
};
// Used for CRUD form options definition (e.g. for dropdown <Select />)
export type FormOptionType = {
    key: any;
    text: string;
}
// Used for CRUD form item definitons
export type FilterFieldType = {
    name: string;
    displayName?: string; // (If not specified, name will be used.).
    type: FormDataType;
    numberPrecision?: number;
    rules?: Array<FormRuleType>;
    disabled?: boolean;
    subOptions?: Array<FormOptionType>; // Used for dropdown items.
};

// Used for defining endpoints inside ModelType
export type EndpointsType = {
    list: string;
    export?: string;
    detail: string;
    create: string;
    update: string;
    delete: string;
};
// Used for model definition of CRUD operations.
export type ModelType = {
    tableName: string;
    detailFields: Array<string>;
    listFields: Array<string>;
    sortableFields?: Array<string>;
    filterFields?: Array<FilterFieldType>;
    hiddenFields?: Array<string>;

    endpoints: EndpointsType;
    resolverName: string;
};

• tableName: Name of table to query. (Can be imported over graphql codegen.)
• resolverName: Name of the resolver on GraphQL backend.
• endpoints: Dictionary of endpoints for different CRUD operations.
• detailFields: List of fields that we want to fetch in detail & edit pages.
• hiddenFields: List of fields that we don't want to display in detail page.
• listFields: List of fields that we want to use in list page.
• sortableFields: List of fields that are going to be sortable in list page.
• filterFields: List of fields that is used for filtering in list page. They need to contain both name and type as FormDataTypeformat.

Here is an example from article model:

import { ModelType, FormDataType } from './Models';
import { Table } from 'generated/graphql';

export const ArticleModel: ModelType = {
    tableName: Table.Article,
    resolverName: 'Article',

    endpoints: {
        list: 'articles',
        export: 'exportArticles',
        detail: 'article',
        create: 'createArticle',
        update: 'updateArticle',
        delete: 'deleteArticle'
    },
    detailFields: [
        'id',
        'extras',
        'created',
        'createdBy',
        'modified',
        'modifiedBy',
        'status',
        'code',
        'name',
        'additionalDescription',
        'supplierName',
        'translation',
        'length',
        'width',
        'height',
        'baseUnitPrice',
        'baseUnitWeight',
        'baseUnitPicking',
        'baseUnitRotation',
        'cubingType',
        'featureType',
        'permanentProduct',
        'tariffClassification',
        'family',
        'subfamily',
        'groupingId',
        'countryOfOrigin',
        'newProduct',
        'endOfLife',
        'supportQuantity',
        'stockOwnerId',
        'statusText',
        'cubingTypeText',
        'baseUnitRotationText',
        'featureTypeText'
    ],
    listFields: [
        'id',
        'extras',
        'created',
        'createdBy',
        'modified',
        'modifiedBy',
        'status',
        'code',
        'name'
    ],
    sortableFields: ['name', 'code'],
    filterFields: [
        { name: 'name', type: FormDataType.String },
        { name: 'code', type: FormDataType.String },
        { name: 'status', type: FormDataType.Number },
        { 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: 'permanentProduct', type: FormDataType.Boolean }
    ]
};

For displaying cascaded fields, you can set field name in this format: stockOwner { id, name }

{
    listfields: [
        'id',
        'name',
        'stockOwnerId',
        'stockOwner { id, name }'
    ]
}