@addev-be/ui 0.6.11 → 0.6.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.6.11",
+  "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

@@ -58,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]

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

@@ -38,14 +38,16 @@ export const DataGridInner = <R,>(
     sortedRows,
     onVisibleRowsChange,
     refresh,
+    setSelectedKeys,
   } = contextProps;
 
   useImperativeHandle(
     ref,
     () => ({
       refresh,
+      setSelectedKeys,
     }),
-    [refresh]
+    [refresh, setSelectedKeys]
   );
 
   const hasFooter = Object.values(columns).some((col) => col.footer);

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

@@ -270,4 +270,7 @@ export type DataGridRowTemplateProps<R> = {
   context: DataGridContext<R>;
 };
 
-export type DataGridRefProps<R> = Pick<DataGridContextProps<R>, 'refresh'>;
+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

@@ -43,6 +43,7 @@ export const SqlRequestDataGridInner = <R,>(
   const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
     props.type
   );
+  const gridRef = useRef<DataGridRefProps<R>>(null);
 
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
@@ -348,12 +349,14 @@ export const SqlRequestDataGridInner = <R,>(
     ref,
     () => ({
       refresh,
+      setSelectedKeys: gridRef.current?.setSelectedKeys ?? (() => {}),
     }),
     [refresh]
   );
 
   return (
     <DataGrid
+      ref={gridRef}
       onVisibleRowsChange={onVisibleRowsChanged}
       filter={false}
       sort={false}

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) : '';
+};