@addev-be/ui 0.6.10 → 0.6.12

package/package.json

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

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

@@ -90,6 +90,8 @@ export const dateColumn = <R extends Record<string, any>>(
     name: title,
     type: 'date',
     render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    excelFormatter: () => 'dd/mm/yyyy',
+    excelValue: (date) => moment(date).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     footer: (_, filteredRows) => `${filteredRows.length} éléments`,
@@ -101,6 +103,28 @@ export const dateColumn = <R extends Record<string, any>>(
   },
 });
 
+export const dateTimeColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'date',
+    render: (row) => moment(row[key]).format('DD/MM/YYYY HH:mm:ss') ?? '',
+    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
+    excelValue: (date) => moment(date).format('DD/MM/YYYY HH:mm:ss') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: {
+      ...dateFilter(key),
+      renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
+    },
+    ...options,
+  },
+});
+
 export const monthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -34,6 +34,7 @@ export const useDataGrid = <R,>(
     onSortsChanged,
     loadCopyRows,
     onSelectionChange,
+    onSelectedRowsChanged,
     selectable,
     initialSorts,
   } = props;
@@ -57,7 +58,7 @@ export const useDataGrid = <R,>(
   const gridTemplateColumns = useMemo(
     () =>
       [
-        ...(selectable ? ['var(--space-10)'] : []),
+        ...(selectable ? ['var(--space-8)'] : []),
         ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
       ].join(' '),
     [selectable, visibleColumns]
@@ -87,6 +88,9 @@ export const useDataGrid = <R,>(
   useEffect(() => {
     onSelectionChange?.(selectedKeys);
   }, [onSelectionChange, selectedKeys]);
+  useEffect(() => {
+    onSelectedRowsChanged?.(selectedRows);
+  }, [onSelectedRowsChanged, selectedRows]);
 
   const toggleSelection = useCallback(
     (key: string) => {

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

@@ -1,7 +1,13 @@
 import * as styles from './styles';
 
-import { Context, useRef } from 'react';
-import { DataGridContextProps, DataGridProps } from './types';
+import {
+  Context,
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
 
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
@@ -12,12 +18,15 @@ import { useDataGrid } from './hooks';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 
-export const DataGrid = <R,>({
-  contextOverride,
-  ...props
-}: DataGridProps<R> & {
-  contextOverride?: Partial<DataGridContextProps<R>>;
-}) => {
+export const DataGridInner = <R,>(
+  {
+    contextOverride,
+    ...props
+  }: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+  },
+  ref: ForwardedRef<DataGridRefProps<R>>
+) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const { className } = props;
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
@@ -28,8 +37,19 @@ export const DataGrid = <R,>({
     gridTemplateColumns,
     sortedRows,
     onVisibleRowsChange,
+    refresh,
+    setSelectedKeys,
   } = contextProps;
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+      setSelectedKeys,
+    }),
+    [refresh, setSelectedKeys]
+  );
+
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
   const rowTemplate = DataGridRowTemplate;
@@ -58,3 +78,5 @@ export const DataGrid = <R,>({
     </DataGridContext.Provider>
   );
 };
+
+export const DataGrid = forwardRef(DataGridInner);

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

@@ -73,6 +73,7 @@ export type DataGridProps<R> = {
   editable?: boolean;
   onRowDoubleClick?: (row: R, e: MouseEvent) => void;
   onSelectionChange?: (keys: string[]) => void;
+  onSelectedRowsChanged?: (rows: R[]) => void;
   getAllIds?: () => Promise<string[]>;
   onFiltersChanged?: (filters: DataGridFilters) => void;
   onSortsChanged?: (sorts: Record<string, DataGridSort>) => void;
@@ -268,3 +269,8 @@ export type DataGridRowTemplateProps<R> = {
   toggleSelection?: () => void;
   context: DataGridContext<R>;
 };
+
+export type DataGridRefProps<R> = Pick<
+  DataGridContextProps<R>,
+  'refresh' | 'setSelectedKeys'
+>;

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

@@ -6,6 +6,7 @@ import {
   numberFilter,
   textFilter,
 } from '../../DataGrid/helpers';
+import { formatDate, formatDateTime } from '../../../../helpers/dates';
 import {
   formatMoney,
   formatNumber,
@@ -13,8 +14,6 @@ import {
   formatPercentage,
 } from '../../../../helpers/numbers';
 
-import { formatDate } from '../../../../helpers/dates';
-
 export const sqlTextColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
@@ -121,6 +120,30 @@ export const sqlDateColumn = <R extends Record<string, any>>(
   },
 });
 
+export const sqlDateTimeColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'date',
+    render: (row) => formatDateTime(row[key]),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
+    excelValue: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDateTime(value),
+      renderer: (value) => formatDateTime(value),
+    },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
 export const sqlMonthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,

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

@@ -8,20 +8,33 @@ import {
 import {
   DataGridFilters,
   DataGridFooterFunction,
+  DataGridRefProps,
   DataGridSort,
 } from '../DataGrid/types';
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import _, { debounce } from 'lodash';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { DataGrid } from '../DataGrid';
 import { SqlRequestDataGridProps } from './types';
 import { convertSqlFiltersToConditions } from './helpers';
 import { isColumnVisible } from '../DataGrid/helpers';
 
-export const SqlRequestDataGrid = <R,>({
-  onSelectionChange: onSelectionChangeFromProps,
-  ...props
-}: SqlRequestDataGridProps<R>) => {
+export const SqlRequestDataGridInner = <R,>(
+  {
+    onSelectionChange: onSelectionChangeFromProps,
+    ...props
+  }: SqlRequestDataGridProps<R>,
+  ref: ForwardedRef<DataGridRefProps<R>>
+) => {
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
   const [start, setStart] = useState(0);
@@ -30,6 +43,7 @@ export const SqlRequestDataGrid = <R,>({
   const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
     props.type
   );
+  const gridRef = useRef<DataGridRefProps<R>>(null);
 
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
@@ -331,8 +345,18 @@ export const SqlRequestDataGrid = <R,>({
     [footers, setFooters, footerFunctions]
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+      setSelectedKeys: gridRef.current?.setSelectedKeys ?? (() => {}),
+    }),
+    [refresh]
+  );
+
   return (
     <DataGrid
+      ref={gridRef}
       onVisibleRowsChange={onVisibleRowsChanged}
       filter={false}
       sort={false}
@@ -349,3 +373,5 @@ export const SqlRequestDataGrid = <R,>({
     />
   );
 };
+
+export const SqlRequestDataGrid = forwardRef(SqlRequestDataGridInner);

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

@@ -5,22 +5,34 @@ import {
   OrderByDTO,
   useSqlRequestHandler,
 } from '../../../services/sqlRequests';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { SqlRequestGridProps, SqlRequestGridRefProps } from './types';
 
-import { SqlRequestGridProps } from './types';
 import { VirtualScroller } from '../VirtualScroller';
 import { debounce } from 'lodash';
 import { isColumnVisible } from '../DataGrid/helpers';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export const SqlRequestGrid = <R, P extends object = {}>({
-  rowHeight = styles.DEFAULT_ROW_HEIGHT,
-  itemsPerRow,
-  itemTemplate,
-  itemProps,
-  gap,
-  ...props
-}: SqlRequestGridProps<R, P>) => {
+export const SqlRequestGridInner = <R, P extends object = {}>(
+  {
+    rowHeight = styles.DEFAULT_ROW_HEIGHT,
+    itemsPerRow,
+    itemTemplate,
+    itemProps,
+    gap,
+    ...props
+  }: SqlRequestGridProps<R, P>,
+  ref: ForwardedRef<SqlRequestGridRefProps>
+) => {
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
   const [start, setStart] = useState(0);
@@ -128,6 +140,21 @@ export const SqlRequestGrid = <R, P extends object = {}>({
     [length, start]
   );
 
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setCount(-1);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+    }),
+    [refresh]
+  );
+
   return (
     <styles.SqlRequestGridContainer>
       <VirtualScroller
@@ -143,3 +170,5 @@ export const SqlRequestGrid = <R, P extends object = {}>({
     </styles.SqlRequestGridContainer>
   );
 };
+
+export const SqlRequestGrid = forwardRef(SqlRequestGridInner);

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

@@ -44,3 +44,7 @@ export type SqlRequestGridProps<R, P extends object = {}> = {
   parser?: (row: SqlRequestRow<R>) => R;
   itemProps: P;
 };
+
+export type SqlRequestGridRefProps = {
+  refresh: () => void;
+};

package/src/components/data/index.ts

@@ -1,12 +1,17 @@
 export * from './DataGrid';
 export * from './DataGrid/helpers';
 export * from './DataGrid/styles';
+export * from './DataGrid/types';
+
 export * from './AdvancedRequestDataGrid';
+export * from './AdvancedRequestDataGrid/helpers';
+
 export * from './SqlRequestDataGrid';
 export * from './SqlRequestDataGrid/helpers';
 export * from './SqlRequestDataGrid/types';
+
 export * from './SqlRequestGrid';
 export * from './SqlRequestGrid/types';
+
 export * from './VirtualScroller';
 export * from './VirtualScroller/types';
-export * from './AdvancedRequestDataGrid/helpers';

package/src/components/layout/Modal/styles.ts

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components';
 
+import { ThemeColor } from '../../../providers';
+
 export const ModalBackdrop = styled.div.attrs({
   className: 'ModalBackdrop',
 })`
@@ -20,6 +22,7 @@ export type ModalContainerProps = {
   $height?: number;
   $zIndex?: number;
   $fullscreen?: boolean;
+  $color?: ThemeColor;
 };
 
 export const ModalContainer = styled.div.attrs({
@@ -51,6 +54,14 @@ export const ModalContainer = styled.div.attrs({
           width: ${$width ? `${$width}px` : 'auto'};
           height: ${$height ? `${$height}px` : 'auto'};
         `}
+
+  ${({ $color }) =>
+    $color
+      ? css`
+          border: 1px solid var(--color-${$color}-500);
+          box-shadow: 0 0 var(--space-3) var(--color-${$color}-500);
+        `
+      : null}
 `;
 
 export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`

package/src/helpers/dates.ts

@@ -7,3 +7,11 @@ export const formatDate = (
   const m = moment.utc(date);
   return m.isValid() ? m.format(format) : '';
 };
+
+export const formatDateTime = (
+  date: moment.MomentInput,
+  format: string = 'DD/MM/YYYY HH:mm:ss'
+): string => {
+  const m = moment.utc(date);
+  return m.isValid() ? m.format(format) : '';
+};

package/src/typings.d.ts

@@ -4,3 +4,10 @@
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}