@addev-be/ui 0.2.2 → 0.2.5

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

@@ -12,10 +12,7 @@ import moment from 'moment';
 
 export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
-): boolean => {
-  console.log('isColumnVisible obj=', obj);
-  return obj?.order !== -1;
-};
+): boolean => obj?.order !== -1;
 
 export const textColumn = <R extends Record<string, any>>(
   key: string,

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

@@ -37,6 +37,7 @@ export const useDataGrid = <R,>(
     onVisibleRowsChange,
     onSelectionChange,
     selectable,
+    initialSorts,
   } = props;
   const [columns, setColumns] = useState<DataGridColumns<R>>(props.columns);
 
@@ -116,7 +117,9 @@ export const useDataGrid = <R,>(
 
   /** ROWS SORTING **/
 
-  const [sorts, setSorts] = useState<Record<string, DataGridSort>>({});
+  const [sorts, setSorts] = useState<Record<string, DataGridSort>>(
+    initialSorts ?? {}
+  );
   const [sortedRows, setSortedRows] = useState<R[]>(rows);
 
   useEffect(() => {

package/src/components/data/DataGrid/hooks/useDataGridCopy.ts

@@ -69,7 +69,6 @@ export const useDataGridCopy = <R>(
 
   const generateCopyHtml = useCallback(
     (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
-      console.log('generateCopyHtml', rowsToCopy, columns);
       return `
             <table>
                 ${includeHeaders ? generateHeadersHtml() : ''}

package/src/components/data/DataGrid/hooks/useDataGridSettings.ts

@@ -14,7 +14,6 @@ export const useDataGridSettings = (name?: string) => {
     if (name) {
       const settingName = `user.datagrid.settings.${name}`;
       const gridSettingsJson = settings?.[settingName] || '{}';
-      console.log('read datagrid settings for', settingName, gridSettingsJson);
       let gridSettings: DataGridSettings = {};
       try {
         gridSettings = JSON.parse(gridSettingsJson);

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

@@ -47,10 +47,6 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
 
   const rowTemplate = useCallback(
     (row: R, rowIndex: number) => {
-      const { className, style } = props.rowClassNameGetter?.(row) ?? {
-        className: '',
-        style: undefined,
-      };
       if (!row) {
         return (
           <styles.DataGridRow key={`loading-row-${rowIndex}`}>
@@ -71,6 +67,10 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
         );
       }
       const key = rowKeyGetter(row);
+      const { className, style } = props.rowClassNameGetter?.(row) ?? {
+        className: '',
+        style: undefined,
+      };
       return (
         <styles.DataGridRow key={key}>
           {!!props.selectable && (
@@ -86,8 +86,7 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
           {visibleColumns.map(([key, col], index) => (
             <DataGridCell
               key={`loading-${rowIndex}-${index}`}
-              className={className}
-              style={style}
+              {...(index === 0 ? { className, style } : {})}
               row={row}
               rowIndex={rowIndex}
               column={col}

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

@@ -76,7 +76,7 @@ export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
 `;
 
 type DataGridHeaderCellContainerProps = {
-  $isResizing: boolean;
+  $isResizing?: boolean;
   $headerColor?: ThemeColor;
 };
 
@@ -96,14 +96,31 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
     $headerColor
       ? css`
           background-color: var(--color-${$headerColor}-200);
-          color: var(--color-${$headerColor}-900);
+          color: var(--color-${$headerColor}-950);
           &:hover {
             background-color: var(--color-${$headerColor}-300);
           }
+
+          & > button {
+            background-color: var(--color-${$headerColor}-400);
+            border-color: var(--color-${$headerColor}-500);
+            &:hover {
+              background-color: var(--color-${$headerColor}-500);
+              border-color: var(--color-${$headerColor}-600);
+            }
+          }
+          & > button.danger {
+            background-color: var(--color-red-400);
+            border-color: var(--color-red-500);
+            &:hover {
+              background-color: var(--color-red-500);
+              border-color: var(--color-red-600);
+            }
+          }
         `
       : css`
           background-color: var(--color-neutral-200);
-          color: var(--color-neutral-900);
+          color: var(--color-neutral-950);
           &:hover {
             background-color: var(--color-neutral-300);
           }
@@ -121,11 +138,13 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
     overflow: hidden;
     white-space: nowrap;
     flex: 1;
+    font-weight: bold;
   }
 `;
 DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
 
 export const DataGridCell = styled.div`
+  position: relative;
   padding: 0 var(--space-3);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -237,24 +256,32 @@ export const LoadingCell = styled(DataGridCell)`
 `;
 LoadingCell.displayName = 'LoadingCell';
 
-export const SelectionCell = styled(DataGridCell)`
-  /* inline-flex items-center justify-center w-12 select-none text-center whitespace-nowrap */
+const selectionCellStyle = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-6);
+  width: var(--space-8);
   padding: 0 var(--space-1);
 
   & > input[type='checkbox'] {
-    height: var(--space-6);
-    width: var(--space-6);
+    height: var(--space-4);
+    width: var(--space-4);
     border-radius: var(--rounded-sm);
     border: 1px solid var(--color-neutral-300);
-    color: var(--color-sky-600);
+    color: var(--color-primary-600);
   }
 `;
+
+export const SelectionCell = styled(DataGridCell)`
+  ${selectionCellStyle}
+`;
 SelectionCell.displayName = 'SelectionCell';
 
+export const HeaderSelectionCell = styled(DataGridHeaderCellContainer)`
+  ${selectionCellStyle}
+`;
+HeaderSelectionCell.displayName = 'HeaderSelectionCell';
+
 export const ResizeBackdrop = styled.div.attrs({
   className: 'ResizeBackdrop',
 })`

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

@@ -6,7 +6,9 @@ import {
   CSSProperties,
   Context,
   Dispatch,
+  FC,
   MouseEvent,
+  MouseEventHandler,
   ReactNode,
   SetStateAction,
 } from 'react';
@@ -16,9 +18,13 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 export type MysqlJsonObject = Record<string, string | number | null>;
 
+export type DataGridCellFC = FC<{
+  onDoubleClick?: MouseEventHandler;
+  style?: CSSProperties;
+}>;
+
 export type DataGridColumn<R> = {
-  bodyClassName?: string;
-  className?: string;
+  component?: DataGridCellFC;
   editable?: boolean;
   excelFormatter?: (value: any) => string;
   excelValue?: (value: any) => string;
@@ -68,6 +74,7 @@ export type DataGridProps<R> = {
   rowHeight?: number;
   filter?: boolean;
   sort?: boolean;
+  initialSorts?: Record<string, DataGridSort>;
   filterValuesLoader?: (
     columnKey: string
   ) => Promise<(string | number | null | MysqlJsonObject)[]>;
@@ -202,7 +209,7 @@ export type DataGridFilterDataType<T extends DataGridFilterType> =
 export type DataGridFilterGetter<T extends DataGridFilterType> = (
   value: any
 ) => DataGridFilterDataType<T> | null;
-export type DataGridFilterFormatter = (value: any) => string | null;
+export type DataGridFilterFormatter = (value: any) => ReactNode;
 
 export type DataGridFilterOperator<T extends DataGridFilterType> =
   DataGridFilterPredicates[T] extends DataGridFilterOperators<infer K, any>

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

@@ -8,7 +8,7 @@ import {
 } from '../../../../helpers/numbers';
 import { numberFilter, textFilter } from '../../DataGrid/helpers';
 
-import moment from 'moment';
+import { formatDate } from '../../../../helpers/dates';
 
 export const sqlTextColumn = <R extends Record<string, any>>(
   key: string,
@@ -95,7 +95,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    render: (row) => formatDate(row[key]),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
@@ -196,11 +196,29 @@ export const sqlColorColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => (
-      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+      <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] ?? '' },
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => (
+        <div
+          style={{
+            backgroundColor: value,
+            width: 'var(--space-16)',
+            height: '1em',
+          }}
+        >
+          &nbsp;
+        </div>
+      ),
+    },
     ...options,
   },
 });

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

@@ -3,18 +3,13 @@ import {
   OrderByDTO,
   useSqlRequestHandler,
 } from '../../../services/sqlRequests';
-import {
-  DataGridColumns,
-  DataGridFilters,
-  DataGridSort,
-} from '../DataGrid/types';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { DataGridFilters, DataGridSort } from '../DataGrid/types';
+import _, { debounce } from 'lodash';
+import { useCallback, useEffect, useMemo, 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,>({
@@ -31,7 +26,27 @@ export const SqlRequestDataGrid = <R,>({
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
   );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    Object.entries(props.initialSorts ?? {}).map(
+      ([columnKey, direction]): OrderByDTO => ({
+        field: props.columns[columnKey].field?.fieldAlias ?? columnKey,
+        direction: direction.toUpperCase() as 'ASC' | 'DESC',
+      })
+    )
+  );
+
+  const [columnsKeys, visibleColumnsKeys] = useMemo(
+    () => [
+      [...Object.keys(props.columns), ...(props.hiddenColumns ?? [])],
+      [
+        ...Object.keys(props.columns).filter((key) =>
+          isColumnVisible(props.columns[key])
+        ),
+        ...(props.hiddenColumns ?? []),
+      ],
+    ],
+    [props.columns, props.hiddenColumns]
+  );
 
   const refresh = useCallback(() => {
     setRows([]);
@@ -56,7 +71,6 @@ export const SqlRequestDataGrid = <R,>({
             direction: direction.toUpperCase(),
           } as OrderByDTO)
       );
-      console.log('newOrderBy=', newOrderBy);
       setOrderBy(newOrderBy);
     },
     [refresh]
@@ -65,19 +79,19 @@ export const SqlRequestDataGrid = <R,>({
   const loadRows = useRef(
     debounce(
       (
-        columns: DataGridColumns<R>,
+        columns: string[],
+        returnColumns: string[],
         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,
+          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
+          returnColumns: returnColumns.includes('Id')
+            ? returnColumns
+            : [...returnColumns, 'Id'],
           conditions,
           orderBy,
           start,
@@ -95,14 +109,19 @@ export const SqlRequestDataGrid = <R,>({
           setRows([...currentRows.current]);
         });
       },
-      100
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
     )
   );
 
   const loadFilterValues = useCallback(
     (columnKey: string) => {
       return sqlRequest({
-        columns: [columnKey],
+        columns: columnsKeys,
+        returnColumns: [columnKey],
         conditions: [
           ...(props.conditions ?? []),
           ...Object.values(
@@ -127,28 +146,38 @@ export const SqlRequestDataGrid = <R,>({
         )
       );
     },
-    [conditions, props.columns, props.conditions, sqlRequest]
+    [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]
   );
 
   useEffect(
     () =>
       loadRows.current(
-        props.columns,
+        columnsKeys,
+        visibleColumnsKeys,
         [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
         orderBy,
         start,
         length,
         total < 0
       ),
-    [props.columns, conditions, orderBy, start, length, total, props.conditions]
+    [
+      props.columns,
+      conditions,
+      orderBy,
+      start,
+      length,
+      total,
+      props.conditions,
+      columnsKeys,
+      visibleColumnsKeys,
+    ]
   );
 
   const loadCopyRows = useCallback(
     () =>
       sqlRequest({
-        columns: Object.keys(props.columns).filter((key) =>
-          isColumnVisible(props.columns[key])
-        ),
+        columns: columnsKeys,
+        returnColumns: visibleColumnsKeys,
         conditions: [
           ...(props.conditions ?? []),
           ...(Object.values(conditions) ?? []),
@@ -161,7 +190,8 @@ export const SqlRequestDataGrid = <R,>({
       ),
     [
       sqlRequest,
-      props.columns,
+      columnsKeys,
+      visibleColumnsKeys,
       props.conditions,
       props.parser,
       conditions,
@@ -173,7 +203,8 @@ export const SqlRequestDataGrid = <R,>({
   const loadAllIds = useCallback(
     () =>
       sqlIdRequest({
-        columns: ['Id'],
+        columns: columnsKeys,
+        returnColumns: ['Id'],
         conditions: [
           ...(props.conditions ?? []),
           ...(Object.values(conditions) ?? []),
@@ -182,7 +213,7 @@ export const SqlRequestDataGrid = <R,>({
         start: 0,
         length: total,
       }).then((response) => response.data.map((row) => row['Id'])),
-    [conditions, orderBy, props.conditions, sqlIdRequest, total]
+    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]
   );
 
   const onVisibleRowsChanged = useCallback(

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

@@ -39,6 +39,7 @@ export type SqlRequestDataGridProps<R> = Omit<
   'rows' | 'columns'
 > & {
   columns: SqlRequestDataGridColumns<R>;
+  hiddenColumns?: string[];
   type: string;
   orderBy?: OrderByDTO[];
   conditions?: ConditionDTO[];

package/src/components/data/index.ts

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

package/src/helpers/dates.ts

@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+export const formatDate = (
+  date: moment.MomentInput,
+  format: string = 'DD/MM/YYYY'
+): string => {
+  const m = moment.utc(date);
+  return m.isValid() ? m.format(format) : '';
+};

package/src/services/sqlRequests.ts

@@ -63,6 +63,7 @@ export type OrderByDTO = {
 
 export type SqlRequestDTO = {
   columns?: string[];
+  returnColumns?: string[];
   conditions?: ConditionDTO[];
   orderBy?: OrderByDTO[];
   start?: number;

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/icons.tsx","./src/index.ts","./src/typings.d.ts","./src/components/index.ts","./src/components/data/index.ts","./src/components/data/datagrid/advancedrequestdatagrid.tsx","./src/components/data/datagrid/datagridcell.tsx","./src/components/data/datagrid/datagrideditablecell.tsx","./src/components/data/datagrid/datagridfooter.tsx","./src/components/data/datagrid/datagridheader.tsx","./src/components/data/datagrid/datagridheadercell.tsx","./src/components/data/datagrid/filtervaluesscroller.tsx","./src/components/data/datagrid/virtualscroller.tsx","./src/components/data/datagrid/index.tsx","./src/components/data/datagrid/styles.ts","./src/components/data/datagrid/types.ts","./src/components/data/datagrid/datagridcolumnsmodal/helpers.ts","./src/components/data/datagrid/datagridcolumnsmodal/hooks.tsx","./src/components/data/datagrid/datagridcolumnsmodal/index.tsx","./src/components/data/datagrid/datagridcolumnsmodal/styles.ts","./src/components/data/datagrid/datagridfiltermenu/hooks.tsx","./src/components/data/datagrid/datagridfiltermenu/index.tsx","./src/components/data/datagrid/datagridfiltermenu/styles.ts","./src/components/data/datagrid/filtermodalcontent/index.tsx","./src/components/data/datagrid/filtermodalcontent/styles.ts","./src/components/data/datagrid/helpers/advancedrequests.tsx","./src/components/data/datagrid/helpers/columns.tsx","./src/components/data/datagrid/helpers/filters.ts","./src/components/data/datagrid/helpers/index.ts","./src/components/data/datagrid/hooks/index.ts","./src/components/data/datagrid/hooks/usedatagrid.tsx","./src/components/data/datagrid/hooks/usedatagridcopy.ts","./src/components/data/datagrid/hooks/usedatagridsettings.ts","./src/components/forms/button.tsx","./src/components/forms/iconbutton.tsx","./src/components/forms/indeterminatecheckbox.tsx","./src/components/forms/select.tsx","./src/components/forms/index.ts","./src/components/forms/styles.ts","./src/components/layout/index.ts","./src/components/layout/dropdown/index.tsx","./src/components/layout/dropdown/styles.ts","./src/components/layout/loading/index.tsx","./src/components/layout/loading/styles.ts","./src/components/layout/modal/index.tsx","./src/components/layout/modal/styles.ts","./src/config/index.ts","./src/helpers/getscrollbarsize.ts","./src/helpers/numbers.ts","./src/hooks/index.ts","./src/hooks/useelementsize.ts","./src/hooks/usewindowsize.ts","./src/providers/hooks.ts","./src/providers/index.ts","./src/providers/portalsprovider/index.tsx","./src/providers/portalsprovider/styles.ts","./src/providers/settingsprovider/index.tsx","./src/providers/themeprovider/themeprovider.ts","./src/providers/themeprovider/defaulttheme.ts","./src/providers/themeprovider/index.ts","./src/providers/themeprovider/types.ts","./src/providers/uiproviders/index.tsx","./src/providers/uiproviders/styles.ts","./src/services/websocketservice.ts","./src/services/advancedrequests.ts","./src/services/base.ts","./src/services/hooks.ts","./src/services/index.ts"],"version":"5.6.2"}
+{"root":["./src/icons.tsx","./src/index.ts","./src/typings.d.ts","./src/components/index.ts","./src/components/data/index.ts","./src/components/data/advancedrequestdatagrid/index.tsx","./src/components/data/advancedrequestdatagrid/types.ts","./src/components/data/advancedrequestdatagrid/helpers/advancedrequests.ts","./src/components/data/advancedrequestdatagrid/helpers/columns.tsx","./src/components/data/advancedrequestdatagrid/helpers/index.ts","./src/components/data/datagrid/datagridcell.tsx","./src/components/data/datagrid/datagrideditablecell.tsx","./src/components/data/datagrid/datagridfooter.tsx","./src/components/data/datagrid/datagridheader.tsx","./src/components/data/datagrid/datagridheadercell.tsx","./src/components/data/datagrid/filtervaluesscroller.tsx","./src/components/data/datagrid/virtualscroller.tsx","./src/components/data/datagrid/index.tsx","./src/components/data/datagrid/styles.ts","./src/components/data/datagrid/types.ts","./src/components/data/datagrid/datagridcolumnsmodal/helpers.ts","./src/components/data/datagrid/datagridcolumnsmodal/hooks.tsx","./src/components/data/datagrid/datagridcolumnsmodal/index.tsx","./src/components/data/datagrid/datagridcolumnsmodal/styles.ts","./src/components/data/datagrid/datagridfiltermenu/hooks.tsx","./src/components/data/datagrid/datagridfiltermenu/index.tsx","./src/components/data/datagrid/datagridfiltermenu/styles.ts","./src/components/data/datagrid/filtermodalcontent/index.tsx","./src/components/data/datagrid/filtermodalcontent/styles.ts","./src/components/data/datagrid/helpers/columns.tsx","./src/components/data/datagrid/helpers/filters.ts","./src/components/data/datagrid/helpers/index.ts","./src/components/data/datagrid/hooks/index.ts","./src/components/data/datagrid/hooks/usedatagrid.tsx","./src/components/data/datagrid/hooks/usedatagridcopy.ts","./src/components/data/datagrid/hooks/usedatagridsettings.ts","./src/components/data/sqlrequestdatagrid/index.tsx","./src/components/data/sqlrequestdatagrid/types.ts","./src/components/data/sqlrequestdatagrid/helpers/columns.tsx","./src/components/data/sqlrequestdatagrid/helpers/index.ts","./src/components/data/sqlrequestdatagrid/helpers/sqlrequests.ts","./src/components/forms/button.tsx","./src/components/forms/iconbutton.tsx","./src/components/forms/indeterminatecheckbox.tsx","./src/components/forms/select.tsx","./src/components/forms/index.ts","./src/components/forms/styles.ts","./src/components/layout/index.ts","./src/components/layout/dropdown/index.tsx","./src/components/layout/dropdown/styles.ts","./src/components/layout/loading/index.tsx","./src/components/layout/loading/styles.ts","./src/components/layout/modal/index.tsx","./src/components/layout/modal/styles.ts","./src/config/index.ts","./src/helpers/getscrollbarsize.ts","./src/helpers/numbers.ts","./src/hooks/index.ts","./src/hooks/useelementsize.ts","./src/hooks/usewindowsize.ts","./src/providers/hooks.ts","./src/providers/index.ts","./src/providers/portalsprovider/index.tsx","./src/providers/portalsprovider/styles.ts","./src/providers/settingsprovider/index.tsx","./src/providers/themeprovider/themeprovider.ts","./src/providers/themeprovider/defaulttheme.ts","./src/providers/themeprovider/index.ts","./src/providers/themeprovider/types.ts","./src/providers/uiproviders/index.tsx","./src/providers/uiproviders/styles.ts","./src/services/httpservice.ts","./src/services/websocketservice.ts","./src/services/advancedrequests.ts","./src/services/base.ts","./src/services/hooks.ts","./src/services/index.ts","./src/services/sqlrequests.ts"],"errors":true,"version":"5.6.2"}