@addev-be/ui 0.2.2 → 0.2.6

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

@@ -1,206 +1,224 @@
-/* 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,
-  },
-});
+/* 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 { formatDate } from '../../../../helpers/dates';
+
+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) => formatDate(row[key]),
+    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={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
+      >
+        &nbsp;
+      </div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      renderer: (value) => (
+        <div
+          style={{
+            backgroundColor: value,
+            width: 'var(--space-16)',
+            height: '1em',
+          }}
+        >
+          &nbsp;
+        </div>
+      ),
+    },
+    ...options,
+  },
+});

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

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

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

@@ -1,16 +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],
-  }));
+/* 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],
+  }));