@addev-be/ui 0.2.6 → 0.2.7

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

@@ -21,13 +21,27 @@ export type DataGridCellFC = FC<{
   style?: CSSProperties;
 }>;
 
+export type DataGridFooterPredefinedFunction =
+  | 'average'
+  | 'count'
+  | 'max'
+  | 'min'
+  | 'sum';
+export type DataGridFooterFunction<R> = (
+  allRows: R[],
+  filteredRows: R[],
+  selectedRows: R[]
+) => ReactNode;
+
 export type DataGridColumn<R> = {
   component?: DataGridCellFC;
   editable?: boolean;
   excelFormatter?: (value: any) => string;
   excelValue?: (value: any) => string;
   filter?: DataGridFilter;
-  footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
+  footer?:
+    | DataGridFooterFunction<R>
+    | Record<string, DataGridFooterFunction<R> | null>;
   getter?: (row: R) => string | number;
   name: string;
   order?: number;
@@ -71,6 +85,8 @@ export type DataGridProps<R> = {
   filter?: boolean;
   sort?: boolean;
   initialSorts?: Record<string, DataGridSort>;
+  initialFooters?: Record<string, string>;
+  onFootersChanged?: (footers: Record<string, string>) => void;
   filterValuesLoader?: (
     columnKey: string
   ) => Promise<(string | number | null)[]>;
@@ -94,6 +110,9 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   setSorts: (sorts: Record<string, DataGridSort>) => void;
   filters?: DataGridFilters;
   setFilters: Dispatch<SetStateAction<DataGridFilters>>;
+  footers?: Record<string, string>;
+  setFooters: Dispatch<SetStateAction<Record<string, string>>>;
+  footerFunctions?: Record<string, DataGridFooterFunction<R>>;
   visibleColumns: DataGridColumnKeyValuePair<R>[];
   copyTable: (
     includeHeaders?: boolean,

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

@@ -22,6 +22,7 @@ export const sqlTextColumn = <R extends Record<string, any>>(
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
+    footer: (rows) => `${rows[0][key]} éléments`,
   },
 });
 
@@ -54,6 +55,7 @@ export const sqlComposedColumn = <R extends Record<string, any>>(
     },
     filterField: fields[0],
     sortField: fields[0],
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -69,6 +71,7 @@ export const sqlMailColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -84,6 +87,7 @@ export const sqlPhoneColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -99,6 +103,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -114,6 +119,7 @@ export const sqlMonthColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -130,7 +136,18 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
     ...options,
   },
 });
@@ -143,11 +160,23 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'number',
     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 },
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
     ...options,
   },
 });
@@ -155,6 +184,7 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
 export const sqlPercentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
+  decimals = 2,
   options?: Partial<SqlRequestDataGridColumn<R>>
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
@@ -163,7 +193,11 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatPercentage(value, decimals) ?? '',
+    },
     ...options,
   },
 });
@@ -184,6 +218,7 @@ export const sqlCheckboxColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });

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

@@ -1,9 +1,15 @@
 import {
   ConditionDTO,
   OrderByDTO,
+  SqlRequestFooterFunction,
+  SqlRequestRow,
   useSqlRequestHandler,
 } from '../../../services/sqlRequests';
-import { DataGridFilters, DataGridSort } from '../DataGrid/types';
+import {
+  DataGridFilters,
+  DataGridFooterFunction,
+  DataGridSort,
+} from '../DataGrid/types';
 import _, { debounce } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -20,8 +26,10 @@ export const SqlRequestDataGrid = <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 [count, setCount] = useState(-1);
+  const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
+    props.type
+  );
 
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
@@ -30,6 +38,7 @@ export const SqlRequestDataGrid = <R,>({
     Object.entries(props.initialSorts ?? {}).map(
       ([columnKey, direction]): OrderByDTO => ({
         field: props.columns[columnKey].field?.fieldAlias ?? columnKey,
+        type: props.columns[columnKey].type ?? 'text',
         direction: direction.toUpperCase() as 'ASC' | 'DESC',
       })
     )
@@ -47,17 +56,24 @@ export const SqlRequestDataGrid = <R,>({
     ],
     [props.columns, props.hiddenColumns]
   );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.columns[key].type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.columns]
+  );
 
   const refresh = useCallback(() => {
     setRows([]);
     setStart(0);
     setLength(50);
-    setTotal(-1);
+    setCount(-1);
   }, []);
 
   const onFiltersChanged = useCallback((filters: DataGridFilters) => {
     const newConditions = convertSqlFiltersToConditions(filters);
-    setTotal(-1);
+    setCount(-1);
     setConditions(newConditions);
   }, []);
 
@@ -85,22 +101,25 @@ export const SqlRequestDataGrid = <R,>({
         orderBy: OrderByDTO[] = [],
         start = 0,
         length = 100,
-        getTotal = false
+        getCount = false
       ) => {
         sqlRequest({
           columns: columns.includes('Id') ? columns : [...columns, 'Id'],
           returnColumns: returnColumns.includes('Id')
             ? returnColumns
             : [...returnColumns, 'Id'],
+          columnTypes: columnTypes.includes('Id')
+            ? columnTypes
+            : [...columnTypes, 'Id'],
           conditions,
           orderBy,
           start,
           length,
-          getTotal,
+          getCount,
         }).then((response) => {
-          if (getTotal) {
-            currentRows.current = Array(response.total).fill(null);
-            if (getTotal) setTotal(response.total ?? 0);
+          if (getCount) {
+            currentRows.current = Array(response.count).fill(null);
+            if (getCount) setCount(response.count ?? 0);
           }
           const parsedRows = props.parser
             ? response.data.map(props.parser)
@@ -122,11 +141,10 @@ export const SqlRequestDataGrid = <R,>({
       return sqlRequest({
         columns: columnsKeys,
         returnColumns: [columnKey],
+        columnTypes: [props.columns[columnKey].type ?? 'text'],
         conditions: [
           ...(props.conditions ?? []),
-          ...Object.values(
-            _.pickBy(conditions, (condition, key) => key !== columnKey)
-          ),
+          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
         ].filter((condition) => condition.field !== columnKey),
         orderBy: [
           {
@@ -135,10 +153,11 @@ export const SqlRequestDataGrid = <R,>({
               props.columns[columnKey].field?.fieldAlias ??
               props.columns[columnKey].field?.fieldName ??
               columnKey,
+            type: props.columns[columnKey].type ?? 'text',
             direction: 'ASC',
           },
         ],
-        getTotal: false,
+        getCount: false,
         unique: true,
       }).then((response) =>
         response.data.map(
@@ -158,7 +177,7 @@ export const SqlRequestDataGrid = <R,>({
         orderBy,
         start,
         length,
-        total < 0
+        count < 0
       ),
     [
       props.columns,
@@ -166,7 +185,7 @@ export const SqlRequestDataGrid = <R,>({
       orderBy,
       start,
       length,
-      total,
+      count,
       props.conditions,
       columnsKeys,
       visibleColumnsKeys,
@@ -178,13 +197,14 @@ export const SqlRequestDataGrid = <R,>({
       sqlRequest({
         columns: columnsKeys,
         returnColumns: visibleColumnsKeys,
+        columnTypes,
         conditions: [
           ...(props.conditions ?? []),
           ...(Object.values(conditions) ?? []),
         ],
         orderBy,
         start: 0,
-        length: total,
+        length: count,
       }).then((response) =>
         props.parser ? response.data.map(props.parser) : (response.data as R[])
       ),
@@ -192,28 +212,32 @@ export const SqlRequestDataGrid = <R,>({
       sqlRequest,
       columnsKeys,
       visibleColumnsKeys,
+      columnTypes,
       props.conditions,
       props.parser,
       conditions,
       orderBy,
-      total,
+      count,
     ]
   );
 
   const loadAllIds = useCallback(
     () =>
       sqlIdRequest({
-        columns: columnsKeys,
+        columns: columnsKeys.includes('Id')
+          ? columnsKeys
+          : [...columnsKeys, 'Id'],
         returnColumns: ['Id'],
+        columnTypes: ['text'],
         conditions: [
           ...(props.conditions ?? []),
           ...(Object.values(conditions) ?? []),
         ],
         orderBy,
         start: 0,
-        length: total,
+        length: count,
       }).then((response) => response.data.map((row) => row['Id'])),
-    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]
+    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]
   );
 
   const onVisibleRowsChanged = useCallback(
@@ -233,6 +257,76 @@ export const SqlRequestDataGrid = <R,>({
     [onSelectionChangeFromProps]
   );
 
+  /** FOOTERS */
+  const [footers, setFooters] = useState<Record<string, string>>(
+    props.initialFooters ?? {}
+  );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [footerData, setFooterData] = useState<SqlRequestRow<any>>({});
+
+  const loadFooters = useCallback(() => {
+    if (Object.keys(footers).length === 0) {
+      setFooterData({});
+    } else {
+      sqlPartialRequest({
+        columns: columnsKeys.includes('Id')
+          ? columnsKeys
+          : [...columnsKeys, 'Id'],
+        returnColumns: [],
+        columnTypes: [],
+        totalColumns: footers as Record<string, SqlRequestFooterFunction>,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+      }).then((response) => setFooterData(response.totals ?? {}));
+    }
+  }, [
+    columnsKeys,
+    conditions,
+    footers,
+    orderBy,
+    props.conditions,
+    sqlPartialRequest,
+  ]);
+
+  useEffect(() => {
+    loadFooters();
+  }, [loadFooters]);
+
+  const footerFunctions = useMemo(
+    () =>
+      !footerData
+        ? {}
+        : Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
+            const column = props.columns[columnKey];
+            const footerFunc =
+              typeof column?.footer === 'function'
+                ? column.footer
+                : column?.footer?.[footerKey];
+            const render = footerFunc
+              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (data: any) => footerFunc([data], [], [])
+              : column?.render ?? _.identity;
+            if (!column) {
+              return acc;
+            }
+            acc[columnKey] = () => render(footerData, column);
+            return acc;
+          }, {} as Record<string, DataGridFooterFunction<R>>),
+    [footerData, footers, props.columns]
+  );
+
+  const contextOverride = useMemo(
+    () => ({
+      footers,
+      setFooters,
+      footerFunctions,
+    }),
+    [footers, setFooters, footerFunctions]
+  );
+
   return (
     <DataGrid
       onVisibleRowsChange={onVisibleRowsChanged}
@@ -246,6 +340,7 @@ export const SqlRequestDataGrid = <R,>({
       refresh={refresh}
       onSelectionChange={onSelectionChange}
       getAllIds={loadAllIds}
+      contextOverride={contextOverride}
       {...props}
     />
   );

package/src/components/ui/ContextMenu/index.tsx

@@ -0,0 +1,73 @@
+import { Divider, MenuContainer, MenuItemContainer, SubMenu } from './styles';
+import {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  useCallback,
+  useState,
+} from 'react';
+
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+  Item: typeof MenuItemContainer;
+  ParentItem: typeof ParentMenuItem;
+  Divider: typeof Divider;
+  SubMenu: typeof SubMenu;
+};
+
+export const ContextMenu: ContextMenuFC = ({ children }) => {
+  return (
+    <MenuContainer onClick={(e) => e.stopPropagation()}>
+      {children}
+    </MenuContainer>
+  );
+};
+
+export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  ...props
+}) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
+
+  const stopTimeout = useCallback(() => {
+    if (currentTimeout) {
+      clearTimeout(currentTimeout);
+    }
+    setCurrentTimeout(null);
+  }, [currentTimeout]);
+
+  const startTimeout = useCallback(
+    (open: boolean) => {
+      stopTimeout();
+      setCurrentTimeout(
+        window.setTimeout(
+          () => {
+            setIsOpened(open);
+          },
+          open ? 100 : 300
+        )
+      );
+    },
+    [stopTimeout]
+  );
+
+  const open = useCallback(() => startTimeout(true), [startTimeout]);
+  const close = useCallback(() => startTimeout(false), [startTimeout]);
+
+  return (
+    <MenuItemContainer
+      {...props}
+      className={isOpened ? 'opened' : ''}
+      onMouseEnter={open}
+      onMouseLeave={close}
+      $withArrow
+    >
+      {children}
+    </MenuItemContainer>
+  );
+};
+
+ContextMenu.Item = MenuItemContainer;
+ContextMenu.ParentItem = ParentMenuItem;
+ContextMenu.Divider = Divider;
+ContextMenu.SubMenu = SubMenu;

package/src/components/ui/ContextMenu/styles.ts

@@ -0,0 +1,115 @@
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+const menuContainerCss = css`
+  position: absolute;
+  color: var(--color-neutral-900);
+  border-radius: var(--rounded-md);
+  padding: var(--space-1) 0;
+  box-shadow: var(--shadow-lg);
+  background-color: var(--color-neutral-100);
+  min-width: 20em;
+  outline: 1px solid var(--color-neutral-200);
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MenuContainer = styled.div.attrs({
+  className: 'MenuContainer',
+})`
+  ${menuContainerCss}
+  inset: 0;
+`;
+MenuContainer.displayName = 'MenuContainer';
+
+export const SubMenu = styled.div.attrs({
+  className: 'SubMenu',
+})`
+  ${menuContainerCss}
+  top: 0;
+  left: 100%;
+  margin-top: -var(--space-1);
+`;
+SubMenu.displayName = 'SubMenu';
+
+export const MenuItemContainer = styled.div.attrs({
+  className: 'MenuItemContainer',
+})<{
+  $color?: ThemeColor;
+  disabled?: boolean;
+  $withArrow?: boolean;
+  $opened?: boolean;
+}>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-sans);
+  font-weight: normal;
+  text-align: left;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-base);
+  line-height: var(--leading-6);
+  border: none;
+  cursor: pointer;
+
+  ${({ $withArrow }) =>
+    $withArrow &&
+    css`
+      &::after {
+        content: '';
+        position: absolute;
+        right: var(--space-2);
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-left-color: var(--color-neutral-600);
+      }
+    `}
+
+  ${({ $color, disabled }) =>
+    disabled
+      ? css`
+          color: var(--color-neutral-300);
+          background-color: var(--color-neutral-100);
+          cursor: default;
+        `
+      : $color
+      ? css`
+          color: var(--color-${$color}-600);
+          background-color: var(--color-neutral-100);
+          &:hover {
+            background-color: var(--color-${$color}-200);
+          }
+        `
+      : css`
+          color: var(--color-neutral-900);
+          background-color: var(--color-neutral-100);
+          &:hover {
+            background-color: var(--color-neutral-200);
+          }
+        `}
+
+  svg {
+    fill: currentColor;
+    width: var(--space-4);
+    height: var(--space-4);
+    margin-right: var(--space-2);
+  }
+
+  & > ${SubMenu} {
+    display: none;
+    margin-top: calc(0px - var(--space-1));
+  }
+  &.opened > ${SubMenu} {
+    display: block;
+  }
+`;
+MenuItemContainer.displayName = 'MenuItemContainer';
+
+export const Divider = styled.div.attrs({
+  className: 'Divider',
+})`
+  border-top: 1px solid var(--color-neutral-200);
+  margin: var(--space-1) 0;
+`;

package/src/services/advancedRequests.ts

@@ -81,7 +81,7 @@ export type AdvancedRequestRow<R> = {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AdvancedResponseDTO<T = any> = {
   data: AdvancedRequestRow<T>[];
-  total?: number;
+  count?: number;
 };
 
 export type AdvancedRequestFieldDTO =

package/src/services/sqlRequests.ts

@@ -58,30 +58,36 @@ export type ConditionDTO = {
 
 export type OrderByDTO = {
   field: string;
+  type: string;
   direction?: 'ASC' | 'DESC';
 };
 
+export type SqlRequestFooterFunction = 'sum' | 'avg' | 'count' | 'max' | 'min';
+
 export type SqlRequestDTO = {
   columns?: string[];
   returnColumns?: string[];
+  columnTypes?: string[];
+  totalColumns?: Record<string, SqlRequestFooterFunction>;
   conditions?: ConditionDTO[];
   orderBy?: OrderByDTO[];
   start?: number;
   length?: number;
-  getTotal?: boolean;
+  getCount?: boolean;
   unique?: boolean;
 };
 
 export type SqlRequestRow<R> = {
-  [K in keyof R]: R[K] extends string | number | null
+  [K in keyof R]: R[K] extends string | number | null | undefined
     ? R[K]
-    : string | number | null;
+    : string | number | null | undefined;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type SqlResponseDTO<T = any> = {
   data: SqlRequestRow<T>[];
-  total?: number;
+  count?: number;
+  totals?: Record<string, string | number | null | undefined>;
 };
 
 type SqlRequestHandler<T> = (
@@ -91,9 +97,14 @@ type SqlRequestHandler<T> = (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const useSqlRequestHandler = <T = any>(
   name: string
-): [SqlRequestHandler<T>, SqlRequestHandler<{ Id: string }>] => [
+): [
+  SqlRequestHandler<T>,
+  SqlRequestHandler<{ Id: string }>,
+  SqlRequestHandler<Partial<T>>
+] => [
   useWebSocketRequestHandler<SqlRequestDTO, SqlResponseDTO<T>>(name),
   useWebSocketRequestHandler<SqlRequestDTO, SqlResponseDTO<{ Id: string }>>(
     name
   ),
+  useWebSocketRequestHandler<SqlRequestDTO, SqlResponseDTO<Partial<T>>>(name),
 ];