@addev-be/ui 0.1.25 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.1.25",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.ts

@@ -47,15 +47,7 @@ export const getAdvancedRequestDto = <R>({
           }
     ),
   ],
-  conditions: [
-    ...conditions,
-    {
-      field: {
-        fieldName: 'DeletedAt',
-      },
-      operator: 'isNull' as const,
-    },
-  ],
+  conditions,
   orderBy,
   type,
   start,
@@ -68,10 +60,11 @@ export const convertFiltersToConditions = <R>(
   columns: AdvancedRequestDataGridColumns<R>
 ): Record<string, ConditionDTO> =>
   _.mapValues(filters, (filter, columnKey) => ({
-    field: columns[columnKey].filterField ??
-      columns[columnKey].field ?? {
-        fieldName: columnKey,
-      },
+    field:
+      columns[columnKey].filterField ??
+      columns[columnKey].field?.fieldAlias ??
+      columns[columnKey].field?.fieldName ??
+      columnKey,
     operator: filter.operator,
     value: ['inArray', 'inRange'].includes(filter.operator)
       ? filter.values

package/src/components/data/AdvancedRequestDataGrid/helpers/columns.tsx

@@ -11,17 +11,10 @@ import {
 } from '../../../../helpers/numbers';
 import { numberFilter, textFilter } from '../../DataGrid/helpers';
 
-import { DataGridSettings } from '../../DataGrid/types';
 import { FieldDTO } from '../../../../services/advancedRequests';
 import _ from 'lodash';
 import moment from 'moment';
 
-export const isColumnVisible = <R,>(
-  obj: AdvancedRequestDataGridColumn<R> | DataGridSettings
-): boolean => {
-  return obj?.order !== -1;
-};
-
 export const withGroupBy = <R extends Record<string, any>>(
   columns: AdvancedRequestDataGridColumns<R>
 ): AdvancedRequestDataGridColumns<R> =>
@@ -75,8 +68,8 @@ export const advancedComposedColumn = <R extends Record<string, any>>(
       ...textFilter(fields[0]),
       getter: (value) => value[fields[0]] ?? 0,
     },
-    filterField: { fieldName: fields[0] },
-    sortField: { fieldName: fields[0] },
+    filterField: fields[0],
+    sortField: fields[0],
     ...options,
   },
 });
@@ -248,7 +241,7 @@ export const getColumnSortField = <R,>(
 ): FieldDTO => {
   return columns[columnKey].sortField
     ? {
-        fieldName: columns[columnKey].sortField?.fieldName ?? columnKey,
+        fieldName: columns[columnKey].sortField ?? columnKey,
         fieldAlias: columnKey,
       }
     : {
@@ -261,3 +254,9 @@ export const getFirstColumnField = <R,>(
 ): FieldDTO => {
   return getColumnField(columns, Object.keys(columns)[0]);
 };
+
+export const getFirstColumnSortField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>
+): FieldDTO => {
+  return getColumnSortField(columns, Object.keys(columns)[0]);
+};

package/src/components/data/AdvancedRequestDataGrid/index.tsx

@@ -14,7 +14,6 @@ import {
   convertFiltersToConditions,
   getAdvancedRequestDto,
   getColumnSortField,
-  getFirstColumnField,
   parseJsonObjectFields,
 } from './helpers';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -38,14 +37,7 @@ export const AdvancedRequestDataGrid = <R,>({
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
   );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
-    props.orderBy ?? [
-      {
-        field: getFirstColumnField(props.columns),
-        direction: 'ASC',
-      },
-    ]
-  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
 
   const refresh = useCallback(() => {
     setRows([]);
@@ -123,33 +115,23 @@ export const AdvancedRequestDataGrid = <R,>({
     (columnKey: string) => {
       return advancedRequest({
         fields: [
-          props.columns[columnKey].filterField ??
-            props.columns[columnKey].field ?? {
-              fieldName: columnKey,
-            },
+          props.columns[columnKey].field ?? {
+            fieldName: columnKey,
+          },
         ],
         conditions: [
           ...(props.conditions ?? []),
           ...Object.values(
             _.pickBy(conditions, (condition, key) => key !== columnKey)
           ),
-          {
-            field: {
-              fieldName: 'DeletedAt',
-            },
-            operator: 'isNull' as const,
-          },
-        ].filter(
-          (condition) =>
-            (condition.field.fieldAlias ?? condition.field.fieldName) !==
-            columnKey
-        ),
+        ].filter((condition) => condition.field !== columnKey),
         orderBy: [
           {
-            field: props.columns[columnKey].filterField ??
-              props.columns[columnKey].field ?? {
-                fieldName: columnKey,
-              },
+            field:
+              props.columns[columnKey].filterField ??
+              props.columns[columnKey].field?.fieldAlias ??
+              props.columns[columnKey].field?.fieldName ??
+              columnKey,
             direction: 'ASC',
           },
         ],

package/src/components/data/AdvancedRequestDataGrid/types.ts

@@ -25,8 +25,8 @@ export type AdvancedRequestDataGridFilters = Record<
 export type AdvancedRequestDataGridColumn<R> = DataGridColumn<R> & {
   filter?: AdvancedRequestDataGridFilter;
   field?: FieldDTO;
-  filterField?: FieldDTO;
-  sortField?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
 };
 
 export type AdvancedRequestDataGridColumns<R> = Record<

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -13,6 +13,7 @@ import moment from 'moment';
 export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
 ): boolean => {
+  console.log('isColumnVisible obj=', obj);
   return obj?.order !== -1;
 };
 

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -0,0 +1,206 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import {
+  formatMoney,
+  formatNumber,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from '../../DataGrid/helpers';
+
+import moment from 'moment';
+
+export const sqlTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+/**
+ * Creates a column with a composed value from multiple fields,
+ * and filtered by a text filter on the first field
+ */
+export const sqlComposedColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  fields: string[],
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    field: {
+      fieldAlias: key,
+      operator: 'jsonObject',
+      operands: fields.flatMap((field) => [
+        { constantValue: field },
+        { fieldName: field },
+      ]),
+    },
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(fields[0]),
+      getter: (value) => value[fields[0]] ?? 0,
+    },
+    filterField: fields[0],
+    sortField: fields[0],
+    ...options,
+  },
+});
+
+export const sqlMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const sqlPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const sqlDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const sqlMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const sqlNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => '#',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});

package/src/components/data/SqlRequestDataGrid/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './sqlRequests';
+export * from './columns';

package/src/components/data/SqlRequestDataGrid/helpers/sqlRequests.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../types';
+import _ from 'lodash';
+
+export const convertSqlFiltersToConditions = (
+  filters: SqlRequestDataGridFilters
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columnKey,
+    operator: filter.operator,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));

package/src/components/data/SqlRequestDataGrid/index.tsx

@@ -0,0 +1,221 @@
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumns,
+  DataGridFilters,
+  DataGridSort,
+} from '../DataGrid/types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DataGrid } from '../DataGrid';
+import { SqlRequestDataGridProps } from './types';
+import _ from 'lodash';
+import { convertSqlFiltersToConditions } from './helpers';
+import { debounce } from 'lodash';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+export const SqlRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  ...props
+}: SqlRequestDataGridProps<R>) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(50);
+  const [total, setTotal] = useState(-1);
+  const [sqlRequest, sqlIdRequest] = useSqlRequestHandler<R>(props.type);
+
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setTotal(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback((filters: DataGridFilters) => {
+    const newConditions = convertSqlFiltersToConditions(filters);
+    setTotal(-1);
+    setConditions(newConditions);
+  }, []);
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      refresh();
+      const newOrderBy = Object.entries(sorts).map(
+        ([columnKey, direction]) =>
+          ({
+            field: columnKey,
+            direction: direction.toUpperCase(),
+          } as OrderByDTO)
+      );
+      console.log('newOrderBy=', newOrderBy);
+      setOrderBy(newOrderBy);
+    },
+    [refresh]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: DataGridColumns<R>,
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        getTotal = false
+      ) => {
+        const columnsKeys = Object.keys(columns).filter((key) =>
+          isColumnVisible(columns[key])
+        );
+        if (!columnsKeys.includes('Id')) columnsKeys.push('Id');
+        sqlRequest({
+          columns: columnsKeys,
+          conditions,
+          orderBy,
+          start,
+          length,
+          getTotal,
+        }).then((response) => {
+          if (getTotal) {
+            currentRows.current = Array(response.total).fill(null);
+            if (getTotal) setTotal(response.total ?? 0);
+          }
+          const parsedRows = props.parser
+            ? response.data.map(props.parser)
+            : (response.data as R[]);
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return sqlRequest({
+        columns: [columnKey],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(
+            _.pickBy(conditions, (condition, key) => key !== columnKey)
+          ),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              props.columns[columnKey].filterField ??
+              props.columns[columnKey].field?.fieldAlias ??
+              props.columns[columnKey].field?.fieldName ??
+              columnKey,
+            direction: 'ASC',
+          },
+        ],
+        getTotal: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map(
+          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
+    },
+    [conditions, props.columns, props.conditions, sqlRequest]
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        props.columns,
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
+        orderBy,
+        start,
+        length,
+        total < 0
+      ),
+    [props.columns, conditions, orderBy, start, length, total, props.conditions]
+  );
+
+  const loadCopyRows = useCallback(
+    () =>
+      sqlRequest({
+        columns: Object.keys(props.columns).filter((key) =>
+          isColumnVisible(props.columns[key])
+        ),
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: total,
+      }).then((response) =>
+        props.parser ? response.data.map(props.parser) : (response.data as R[])
+      ),
+    [
+      sqlRequest,
+      props.columns,
+      props.conditions,
+      props.parser,
+      conditions,
+      orderBy,
+      total,
+    ]
+  );
+
+  const loadAllIds = useCallback(
+    () =>
+      sqlIdRequest({
+        columns: ['Id'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: total,
+      }).then((response) => response.data.map((row) => row['Id'])),
+    [conditions, orderBy, props.conditions, sqlIdRequest, total]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
+  return (
+    <DataGrid
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
+      {...props}
+    />
+  );
+};

package/src/components/data/SqlRequestDataGrid/types.ts

@@ -0,0 +1,46 @@
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type SqlRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestDataGridFilters = Record<
+  string,
+  SqlRequestDataGridFilter
+>;
+
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestDataGridColumns<R> = Record<
+  string,
+  SqlRequestDataGridColumn<R>
+>;
+
+export type SqlRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: SqlRequestDataGridColumns<R>;
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+};

package/src/components/data/index.ts

@@ -1,4 +1,6 @@
 export * from './DataGrid';
 export * from './DataGrid/helpers';
 export * from './AdvancedRequestDataGrid';
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
 export * from './AdvancedRequestDataGrid/helpers';

package/src/services/advancedRequests.ts

@@ -23,7 +23,7 @@ export type FieldDTO<T extends string = string> = {
 };
 
 export type ConditionDTO = {
-  field: FieldDTO;
+  field: string;
   operator:
     | 'lessThan'
     | 'lessThanOrEqual'
@@ -57,7 +57,7 @@ export type ConditionDTO = {
 };
 
 export type OrderByDTO = {
-  field: FieldDTO;
+  field: string;
   direction?: 'ASC' | 'DESC';
 };
 

package/src/services/sqlRequests.ts

@@ -0,0 +1,96 @@
+import { useRequestHandler } from './hooks';
+
+export type FieldDTO<T extends string = string> = {
+  fieldName?: T;
+  fieldAlias?: string;
+  operator?:
+    | 'add'
+    | 'concat'
+    | 'divide'
+    | 'groupConcat'
+    | 'if'
+    | 'ifNull'
+    | 'jsonObject'
+    | 'length'
+    | 'modulo'
+    | 'multiply'
+    | 'subtract'
+    | 'sum'
+    | 'trim';
+  operands?: FieldDTO[];
+  constantValue?: string | number | boolean | null;
+  groupBy?: boolean;
+};
+
+export type ConditionDTO = {
+  field: string;
+  operator:
+    | 'lessThan'
+    | 'lessThanOrEqual'
+    | 'lessThanOrEquals'
+    | 'equals'
+    | 'notEquals'
+    | 'greaterThanOrEqual'
+    | 'greaterThanOrEquals'
+    | 'greaterThan'
+    | 'like'
+    | 'contains'
+    | 'notContains'
+    | 'startsWith'
+    | 'endsWith'
+    | 'notLike'
+    | 'inRange'
+    | 'between'
+    | 'isNull'
+    | 'inArray'
+    | 'in'
+    | 'not'
+    | 'and'
+    | 'or';
+  value?:
+    | string
+    | number
+    | boolean
+    | null
+    | (string | number | boolean | null)[];
+  children?: boolean;
+};
+
+export type OrderByDTO = {
+  field: string;
+  direction?: 'ASC' | 'DESC';
+};
+
+export type SqlRequestDTO = {
+  columns?: string[];
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  unique?: boolean;
+};
+
+export type SqlRequestRow<R> = {
+  [K in keyof R]: R[K] extends string | number | null
+    ? R[K]
+    : string | number | null;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SqlResponseDTO<T = any> = {
+  data: SqlRequestRow<T>[];
+  total?: number;
+};
+
+type SqlRequestHandler<T> = (
+  request: SqlRequestDTO
+) => Promise<SqlResponseDTO<T>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useSqlRequestHandler = <T = any>(
+  name: string
+): [SqlRequestHandler<T>, SqlRequestHandler<{ Id: string }>] => [
+  useRequestHandler<SqlRequestDTO, SqlResponseDTO<T>>(name),
+  useRequestHandler<SqlRequestDTO, SqlResponseDTO<{ Id: string }>>(name),
+];