dinocollab-core 1.0.0

package/src/table/create.status-cell.tsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { SxProps, Theme, Typography, TypographyProps, styled } from '@mui/material'
+
+export type StatusCellConfig<T extends string> = { [key in T]: SxProps<Theme> }
+
+export interface StatusCellOptions {
+  sx?: SxProps<Theme>
+}
+
+export interface StatusCellProps<T extends string> {
+  value?: T
+  title?: string
+  sx?: SxProps<Theme>
+  onClick?: TypographyProps['onClick']
+  slots?: {
+    typographyProps?: TypographyProps
+  }
+}
+
+
+const CreateStatusCell = function <T extends string>(config: StatusCellConfig<T>, options?: StatusCellOptions) {
+  class StatusCell extends Component<React.PropsWithChildren<StatusCellProps<T>>> {
+    render() {
+      if (!this.props.value) return <></>
+      return (
+        <CustomTypography onClick={this.props.onClick} {...this.props.slots?.typographyProps} sx={this.getSxProps()}>
+          {this.props.title || this.props.value}
+        </CustomTypography>
+      )
+    }
+
+    getSxProps = (): SxProps<Theme> => {
+      const { value: data, sx, slots } = this.props
+      return Object.assign({}, data ? config[data] : {}, options?.sx, sx, slots?.typographyProps?.sx)
+    }
+  }
+  return StatusCell
+}
+
+export default CreateStatusCell
+
+const CustomTypography = styled(Typography)({
+  borderRadius: '4px',
+  fontSize: '0.8rem',
+  padding: '4px 9px',
+  fontWeight: 600,
+  minWidth: '70px',
+  textAlign: 'center',
+  color: '#ffffff',
+  display: 'inline-block'
+})

package/src/table/create.table.tsx

@@ -0,0 +1,239 @@
+import React, { Component } from 'react'
+import { Box, BoxProps, styled } from '@mui/material'
+import { DataGrid, DataGridProps, GridColDef, GridFeatureMode, GridFilterOperator } from '@mui/x-data-grid'
+import { GridSortModel, GridValidRowModel, GridRowIdGetter, GridRowSelectionModel } from '@mui/x-data-grid'
+import { GridCallbackDetails, GridColumnVisibilityModel, GridDensity, GridFilterModel, GridPaginationModel } from '@mui/x-data-grid'
+import { mergeObjects } from '../utils'
+import { TableBaseContext } from './context'
+import { IActionRowProps } from './create.action-row'
+import { CustomFilterOperators } from './custom.filter-operators'
+import { GlobalModal, MapGlobalModalContext } from '../api-context'
+import { CustomGridColDef, CustomGridFilterModel, CustomGridSortModel, TableData, TableQueryParams } from './types'
+import ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'
+import TableHelper, { dinoTableClasses } from './helpers'
+
+interface TableSlots<T> {
+  maxSelection?: number
+  density?: GridDensity
+  toolbar?: React.ComponentType<IToolbarPannelProps>
+  actionRow?: React.ComponentType<IActionRowProps<T>>
+  toolbarProps?: IToolbarPannelProps
+  dataGridProps?: DataGridProps
+}
+
+type TableParamsSlots<T> = Pick<TableSlots<T>, 'maxSelection' | 'toolbarProps' | 'dataGridProps'>
+
+interface TableProps<T> {
+  data?: TableData<T>
+  query?: TableQueryParams<T>
+  onChange?: (query: TableQueryParams<T>) => void
+  onRowSelectionChange?: DataGridProps['onRowSelectionModelChange']
+  slots?: TableSlots<T>
+}
+
+interface TableParams<T extends GridValidRowModel> extends TableParamsSlots<T> {
+  featureMode?: GridFeatureMode
+  getRowId: GridRowIdGetter<T>
+  columns: CustomGridColDef<T>
+  filterOperators?: (config: GridColDef) => GridFilterOperator[]
+  columnVisibilityModel?: Partial<Record<keyof T, boolean>>
+  actionRow?: Omit<GridColDef, 'field'>
+}
+
+function CreateTable<T extends GridValidRowModel>(params: TableParams<T>) {
+  const generateColumns = (extendColDefs?: GridColDef[]) => {
+    const columns = Object.keys(params.columns).map<GridColDef>((key) => {
+      const obj = { field: key, ...params.columns[key] }
+      obj.filterOperators = params.filterOperators ? params.filterOperators(obj) : CustomFilterOperators(obj)
+      return obj
+    })
+
+    if (!!extendColDefs && extendColDefs.length > 0) columns.push(...extendColDefs)
+    return columns
+  }
+
+  class TableBase extends Component<TableProps<T>> {
+    private tableQueryParams: TableQueryParams<T>
+    private tableQueryParamsCache: TableQueryParams<T> = {}
+    private defaultTableQueryParams: TableQueryParams<T>
+    private columns: GridColDef<T>[]
+    private rowSelecteds: GridRowSelectionModel
+    constructor(props: TableProps<T>) {
+      super(props)
+      this.columns = this.initialColumns()
+      this.tableQueryParams = { ...props.query }
+      this.defaultTableQueryParams = this.tableQueryParams
+      this.rowSelecteds = []
+    }
+
+    get mergeConfig() {
+      const toolbarPannelProps = mergeObjects({}, params?.toolbarProps, this.props.slots?.toolbarProps)
+      return {
+        toolbar: this.props.slots?.toolbar ?? (() => <ToolbarPannel {...toolbarPannelProps} />),
+        ActionRow: this.props.slots?.actionRow,
+        columnVisibilityModel: params.columnVisibilityModel,
+        maxSelcion: this.props.slots?.maxSelection ?? params.maxSelection,
+        dataGridProps: mergeObjects({}, params.dataGridProps, this.props.slots?.dataGridProps)
+      }
+    }
+
+    setTableQueryParams = (value: Partial<TableQueryParams<T>>) => {
+      this.tableQueryParams = mergeObjects({}, this.tableQueryParams, value)
+    }
+
+    shouldComponentUpdate(nextProps: Readonly<TableProps<T>>): boolean {
+      if (params.featureMode === 'server' && !TableHelper.equalTableQueryParams(nextProps.query, this.props.query)) {
+        this.setTableQueryParams(nextProps.query ?? {})
+        return true
+      } else if (params.featureMode !== 'server') {
+        return true
+      } else {
+        return false
+      }
+    }
+
+    render() {
+      return this.renderWrapContext(
+        <Wrap>
+          <DataGrid {...this.getDataGridProps()} />
+        </Wrap>
+      )
+    }
+
+    renderWrapContext = (children: React.ReactNode) => (
+      <GlobalModal>
+        {MapGlobalModalContext((context) => (
+          <TableBaseContext.Provider value={{ showModal: context.show, closeModal: context.close }}>{children}</TableBaseContext.Provider>
+        ))}
+      </GlobalModal>
+    )
+
+    getDataGridProps = (): DataGridProps<T> => {
+      const mergeConfig = this.mergeConfig
+      const obj: DataGridProps<T> = {
+        getRowId: params.getRowId,
+        columns: this.columns,
+        rows: this.props.data?.items ?? [],
+        checkboxSelection: true,
+        pagination: true,
+        density: this.props.slots?.density ?? 'standard',
+        initialState: TableHelper.mapInitialState(this.props.query, {
+          columns: { columnVisibilityModel: params.columnVisibilityModel as GridColumnVisibilityModel }
+        }),
+        filterDebounceMs: 800,
+        sx: { border: 0 },
+        slots: { toolbar: mergeConfig.toolbar },
+        rowSelectionModel: this.rowSelecteds,
+        onRowSelectionModelChange: this.handleRowSelectionChange
+      }
+      if (params.featureMode === 'server') {
+        const objServer: Partial<DataGridProps<T>> = {
+          filterMode: 'server',
+          sortingMode: 'server',
+          paginationMode: 'server',
+          onPaginationModelChange: this.onPaginationModelChange,
+          onFilterModelChange: this.onFilterModelChange,
+          onSortModelChange: this.onSortModelChange,
+          rowCount: this.props.data?.rowTotal ?? 0,
+          paginationModel: this.tableQueryParams.pagination,
+          filterModel: this.tableQueryParams.filter as GridFilterModel,
+          sortModel: TableHelper.mapSortModel(this.tableQueryParams.sort),
+          loading: this.tableQueryParams.loading
+        }
+        Object.assign(obj, objServer)
+      }
+      return mergeObjects(obj, this.mergeConfig.dataGridProps)
+    }
+
+    initialColumns = (): GridColDef<T>[] => {
+      const { ActionRow } = this.mergeConfig
+      const list: GridColDef<T>[] = []
+      if (!!ActionRow) {
+        list.push({
+          field: 'Actions',
+          minWidth: 100,
+          headerAlign: 'right',
+          align: 'right',
+          filterable: false,
+          sortable: false,
+          renderCell: (value) => <ActionRow value={value.row} />,
+          ...params.actionRow
+        })
+      }
+      return generateColumns(list)
+    }
+
+    onPaginationModelChange = (model: GridPaginationModel, details: GridCallbackDetails<'pagination'>) => {
+      this.setTableQueryParams({ pagination: model, detail: 'pagination' })
+      this.handleChange()
+    }
+
+    onFilterModelChange = (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => {
+      const { pagination } = this.tableQueryParams
+      this.setTableQueryParams({
+        filter: model as CustomGridFilterModel<T>,
+        pagination: { page: 0, pageSize: pagination?.pageSize ?? 25 },
+        detail: TableHelper.detectSearchType(model)
+      })
+      this.handleChange()
+    }
+
+    onSortModelChange = (model: GridSortModel, details: GridCallbackDetails<any>) => {
+      let sortValue = model as CustomGridSortModel<T>
+      const { sort } = this.tableQueryParams
+      if (!!sort?.length && !sortValue.length) {
+        if (sort?.[0]?.field === this.defaultTableQueryParams.sort?.[0]?.field) {
+          sortValue = [{ field: sort[0]?.field, sort: sort[0]?.sort === 'desc' ? 'asc' : 'desc' }]
+        } else {
+          sortValue = this.defaultTableQueryParams.sort ?? []
+        }
+      }
+      this.setTableQueryParams({ sort: sortValue, detail: 'sort' })
+      this.handleChange()
+    }
+
+    handleChange = () => {
+      const check = TableHelper.isEmpty(this.tableQueryParams)
+      const checkCache = TableHelper.isEmpty(this.tableQueryParamsCache)
+      const isChange = this.props.onChange && this.props.onChange(this.tableQueryParams)
+      this.tableQueryParamsCache = this.tableQueryParams
+    }
+
+    handleRowSelectionChange = (value: GridRowSelectionModel, details: GridCallbackDetails) => {
+      if (this.mergeConfig.maxSelcion && value.length > this.mergeConfig.maxSelcion) {
+        this.rowSelecteds = value.slice(0, this.mergeConfig.maxSelcion)
+      } else {
+        this.rowSelecteds = value
+      }
+      this.props.onRowSelectionChange && this.props.onRowSelectionChange(this.rowSelecteds, details)
+      this.forceUpdate()
+    }
+  }
+
+  return TableBase
+}
+
+export default CreateTable
+
+const Wrap = styled(({ children, ...p }: BoxProps) => (
+  <Box {...p}>
+    <div>{children}</div>
+  </Box>
+))({
+  flex: 1,
+  position: 'relative',
+  '& > div': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    overflowY: 'auto'
+  },
+  '& .MuiDataGrid-root': {
+    '--unstable_DataGrid-radius': 0
+  },
+  [`& .MuiDataGrid-cell.${dinoTableClasses.whiteSpacePre} .MuiDataGrid-cellContent`]: {
+    whiteSpace: 'pre'
+  }
+})

package/src/table/custom.filter-operators.ts

@@ -0,0 +1,94 @@
+import { getGridBooleanOperators, getGridDateOperators, getGridNumericOperators, getGridStringOperators, GridColDef } from '@mui/x-data-grid'
+import { EOperator } from './model-filter'
+
+const StringMap = {
+  contains: EOperator.Contains,
+  equals: EOperator.Equal
+}
+
+const NumericMap = {
+  '=': EOperator.Equal,
+  '!=': EOperator.NotEqual,
+  '>': EOperator.GreaterThan,
+  '>=': EOperator.GreaterThanOrEqual,
+  '<': EOperator.LessThan,
+  '<=': EOperator.LessThanOrEqual
+}
+
+const BooleanMap = {
+  'is=': EOperator.Equal
+}
+
+const DateMap = {
+  is: EOperator.Equal,
+  not: EOperator.NotEqual,
+  after: EOperator.GreaterThan,
+  onOrAfter: EOperator.GreaterThanOrEqual,
+  before: EOperator.LessThan,
+  onOrBefore: EOperator.LessThanOrEqual
+}
+
+const getCustomGridStringOperators = () => {
+  const keys = new Set(Object.keys(StringMap))
+  const options = getGridStringOperators()
+    .filter((x) => keys.has(x.value))
+    .map((x) => {
+      x.label = x.value
+      x.value = (StringMap as any)[x.value] + ''
+      return x
+    })
+  return options
+}
+
+const getCustomGridNumericOperators = () => {
+  const keys = new Set(Object.keys(NumericMap))
+  const options = getGridNumericOperators()
+    .filter((x) => keys.has(x.value))
+    .map((x) => {
+      x.label = x.value
+      x.value = (NumericMap as any)[x.value] + ''
+      return x
+    })
+  return options
+}
+
+const getCustomGridBooleanOperators = () => {
+  const keys = new Set(Object.keys(BooleanMap))
+  const options = getGridBooleanOperators()
+    .filter((x) => keys.has(x.value))
+    .map((x) => {
+      x.label = x.value
+      x.value = (BooleanMap as any)[x.value] + ''
+      return x
+    })
+  return options
+}
+
+const getCustomGridDateOperators = (showTime?: boolean) => {
+  const keys = new Set(Object.keys(DateMap))
+  const options = getGridDateOperators(showTime)
+    .filter((x) => keys.has(x.value))
+    .map((x) => {
+      x.label = x.value
+      x.value = (DateMap as any)[x.value] + ''
+      return x
+    })
+  return options
+}
+
+export const CustomFilterOperators = (option: GridColDef) => {
+  switch (option.type) {
+    case 'string':
+      return getCustomGridStringOperators()
+    case 'number':
+      return getCustomGridNumericOperators()
+    case 'boolean':
+      return getCustomGridBooleanOperators()
+    case 'date':
+      return getCustomGridDateOperators()
+    case 'dateTime':
+      return getCustomGridDateOperators(true)
+    default:
+      return getCustomGridStringOperators()
+  }
+}

package/src/table/dino.tsx

@@ -0,0 +1,120 @@
+import { FC } from 'react'
+import { GridRenderCellParams, GridTreeNodeWithRender, GridValueFormatterParams } from '@mui/x-data-grid'
+import { dayjsCustom } from '../utils'
+import { MapTableBaseContext } from './context'
+import { BtnDetail, BtnFormDetail } from './ui.buttons'
+import { CellBase, CellImageSmall, CellBaseOptions, CellChips, CellChipsProps, CellDate, CellDatePropsOwner } from './ui.units'
+import ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'
+import CustomBreadcrumbs, { CustomBreadcrumbConfig } from '../components/custom.breadcrumbs'
+import CreateStatusCell, { StatusCellOptions, StatusCellConfig } from './create.status-cell'
+import TableHelper from './helpers'
+import CreateTable from './create.table'
+import CreateActionRow from './create.action-row'
+
+const formatDateString = 'MM/DD/YYYY HH:mm'
+
+type RenderCellBaseParams<T> = Omit<CellBaseOptions, 'imageUrl'> & {
+  imageUrl?: (value: any, model: T) => string
+  valueFormatter?: (value: any, model: T) => string
+}
+
+interface FormatterDateOptions {
+  formatString?: string
+  showRelative?: boolean
+}
+
+class DinoTableBase {
+  //#region Base
+
+  createTable = CreateTable
+
+  createActionRow = CreateActionRow
+
+  setUrlQuery = TableHelper.setUrlQuery
+
+  getUrlQuery = TableHelper.getUrlQuery
+
+  mapContext = MapTableBaseContext
+
+  ToolbarPannel = ToolbarPannel
+
+  createToolbar = (props: IToolbarPannelProps): FC<IToolbarPannelProps> => {
+    return (p) => <ToolbarPannel {...{ ...p, ...props }} />
+  }
+
+  BtnFormDetail = BtnFormDetail
+
+  BtnDetail = BtnDetail
+
+  createBreadcrumbConfigs = (value: CustomBreadcrumbConfig[]) => value
+
+  createBreadcrumbs = (value: CustomBreadcrumbConfig[]): FC => {
+    return () => <CustomBreadcrumbs value={value} />
+  }
+
+  createStatusCell = CreateStatusCell
+
+  //#endregion
+
+  //#region Value Formatter
+  formatterDate = (value: any, options?: FormatterDateOptions): string => {
+    const f = options?.formatString ?? formatDateString
+    const showRelative = options?.showRelative ?? false
+    try {
+      if (!value) return ''
+
+      const date = dayjsCustom(value)
+      const formatted = date.format(f)
+
+      return showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted
+    } catch (error) {
+      return ''
+    }
+  }
+
+  valueFormatterDate = (options?: FormatterDateOptions) => {
+    return (params: GridValueFormatterParams<any>) => this.formatterDate(params.value, options)
+  }
+  //#endregion
+
+  //#region Render Cell
+  renderCellChips = (params?: CellChipsProps) => {
+    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {
+      return <CellChips {...params} value={tableRow.value ?? params?.value} />
+    }
+  }
+
+  renderCellStatus = function <E extends string>(config: StatusCellConfig<E>, options?: StatusCellOptions) {
+    const StatusCellInstance = CreateStatusCell(config, { sx: { minWidth: '90px' }, ...options })
+    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {
+      return <StatusCellInstance value={tableRow.value} />
+    }
+  }
+
+  renderCellBase = function <T = any>(options?: RenderCellBaseParams<T>) {
+    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {
+      const { imageUrl, valueFormatter, ...p } = options ?? {}
+      const value = valueFormatter ? valueFormatter(tableRow.value, tableRow.row) : undefined
+      const img = imageUrl ? imageUrl(tableRow.value, tableRow.row) : undefined
+      return <CellBase value={tableRow.value} valueFormatted={value} {...p} imageUrl={img} />
+    }
+  }
+
+  renderCellImage = function <T>(selectImage: (value: T) => T[keyof T], options?: { fallbackSrc?: string }) {
+    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {
+      return <CellImageSmall value={tableRow.value} imageUri={selectImage(tableRow.row)?.toString()} fallbackSrc={options?.fallbackSrc} />
+    }
+  }
+
+  renderCellDate = function (params?: CellDatePropsOwner) {
+    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {
+      const { formatString, ...props } = params ?? {}
+      return <CellDate {...props} value={tableRow.value} formatString={formatString ?? formatDateString} />
+    }
+  }
+  //#endregion
+}
+
+const DinoTable = new DinoTableBase()
+
+export default DinoTable

package/src/table/helpers.ts

@@ -0,0 +1,94 @@
+import { GridFilterModel, GridSortItem, GridSortModel } from '@mui/x-data-grid'
+import { GridInitialStateCommunity } from '@mui/x-data-grid/models/gridStateCommunity'
+import { CustomGridSortModel, TableQueryParams, TableQueryDetail } from './types'
+import { decodeBase64, encodeBase64, QueryParam, tryParseObject } from '../utils'
+
+export const dinoTableClasses = {
+  whiteSpacePre: 'white-space-pre-wrap'
+}
+
+interface TableQueryParamModel {
+  table?: string
+}
+
+class TableHelperBase {
+  private extractTableQueryParams = <T>(data?: TableQueryParams<T>): TableQueryParams<T> => {
+    if (!data) return {}
+    const { pagination, filter, sort, loading } = data
+    return { pagination, filter, sort, loading }
+  }
+
+  isEmpty = <T>(value: TableQueryParams<T>, defaultValue?: TableQueryParams<T>): boolean => {
+    const obj = this.extractTableQueryParams<T>(value)
+    const check1 = !obj.filter || obj.filter.items.filter((x) => !!x.value).length < 1
+    const check2 = !value.filter?.quickFilterValues || value.filter.quickFilterValues.length < 1
+    // const check3 = 
+    return check1 || check2
+  }
+
+  equalTableQueryParams = <T>(ti1?: TableQueryParams<T>, ti2?: TableQueryParams<T>): boolean => {
+    return JSON.stringify(this.extractTableQueryParams<T>(ti1)) === JSON.stringify(this.extractTableQueryParams<T>(ti2))
+  }
+
+  mapInitialState = <T>(value?: TableQueryParams<T>, initialState?: GridInitialStateCommunity): GridInitialStateCommunity => {
+    if (!value) return initialState ?? {}
+    return {
+      pagination: { paginationModel: value.pagination },
+      filter: { filterModel: value.filter as GridFilterModel },
+      sorting: { sortModel: this.mapSortModel(value.sort) },
+      ...initialState
+    }
+  }
+
+  mapSortModel = <T>(value?: CustomGridSortModel<T>): GridSortModel | undefined => {
+    return value?.map<GridSortItem>((x) => ({ field: x.field.toString(), sort: x.sort }))
+  }
+
+  detectSearchType = (data: GridFilterModel): TableQueryDetail => {
+    const hasQuickSearch = data.quickFilterValues && data.quickFilterValues.length > 0
+    const hasFilter = data.items && data.items.length > 0
+    if (hasQuickSearch && !hasFilter) return 'quickSearch'
+    if (hasFilter) return 'filter'
+  }
+
+  //#region Query Params
+  private extractToUrlQuery = <TModel>(tableInfo: Partial<TableQueryParams<TModel>>): Partial<TableQueryParams<TModel>> => {
+    const { filter, sort, pagination } = tableInfo
+    const obj = { filter, sort, pagination }
+    const isQuickSearchEmpty = !filter?.quickFilterValues?.filter((x) => !!x).length
+    if (!filter?.items.length && isQuickSearchEmpty) {
+      obj.filter = undefined
+    }
+    return obj
+  }
+
+  private equals = <TModel>(tableInfo: Partial<TableQueryParams<TModel>>, tableInfoOld: Partial<TableQueryParams<TModel>>) => {
+    return JSON.stringify(this.extractToUrlQuery(tableInfo)) === JSON.stringify(this.extractToUrlQuery(tableInfoOld))
+  }
+
+  setUrlQuery = <TModel>(tableInfo: Partial<TableQueryParams<TModel>>, defaultValue: TableQueryParams<TModel>) => {
+    try {
+      if (!this.equals(tableInfo, defaultValue)) {
+        const data = this.extractToUrlQuery(tableInfo)
+        const tqp: TableQueryParamModel = { table: encodeBase64(JSON.stringify(data)) }
+        QueryParam.Patch(tqp)
+      } else {
+        QueryParam.Deletes<TableQueryParamModel>('table')
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  getUrlQuery = <TModel>(defaultValue: TableQueryParams<TModel>): TableQueryParams<TModel> => {
+    const temp = QueryParam.GetAll() as TableQueryParamModel
+    if (!temp?.table) return defaultValue
+    const data = tryParseObject<TableQueryParams<TModel>>(decodeBase64(temp.table ?? ''), {})
+    if (Object.keys(data).length < 1) return defaultValue
+    return data
+  }
+  //#endregion
+}
+
+const TableHelper = new TableHelperBase()
+export default TableHelper

package/src/table/index.ts

@@ -0,0 +1,13 @@
+export * from './types'
+
+export * from './model-filter'
+
+export * from './create.action-row'
+
+export { default as CreateTable } from './create.table'
+
+export { default as DinoTable } from './dino'
+
+export { default as TableHelper, dinoTableClasses } from './helpers'
+
+export type { StatusCellConfig as TStatusCellConfig } from './create.status-cell'

package/src/table/model-filter.ts

@@ -0,0 +1,43 @@
+export enum ELogic {
+  And,
+  Or
+}
+
+export enum EOperator {
+  GreaterThan,
+  LessThan,
+  GreaterThanOrEqual,
+  LessThanOrEqual,
+  NotEqual,
+  Equal,
+  Contains
+}
+
+export enum EOrder {
+  Ascending,
+  Descending
+}
+
+interface FieldFilter<TModel> {
+  Logic?: ELogic
+  Operator?: EOperator
+  FieldName: keyof TModel
+  Value: string
+}
+export interface ScopeFilter<TModel> {
+  Logic?: ELogic
+  Scopes: PropFilter<TModel>[]
+}
+export type PropFilter<TModel> = FieldFilter<TModel> | ScopeFilter<TModel>
+
+export interface PropOrderBy<TModel> {
+  Type: EOrder
+  FieldName: keyof TModel
+}
+
+export interface IModelFilter<TModel> {
+  Page?: number
+  Amount?: number
+  PropFilters?: PropFilter<TModel>[]
+  PropOrders?: PropOrderBy<TModel>[]
+}