kelt-ui-kit-react 1.8.2 → 1.8.3

package/src/dataTable/DataTable.view.tsx

@@ -1,29 +1,53 @@
-import { useMemo } from "react";
-import { DataTable } from "./DataTable";
-import { dataTableActionsInterface } from "./dataTable.interface";
+import { useMemo, useState } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { DataTable, DataTableFilterState } from "./DataTable";
+import {
+  DataTableActionsInterface,
+  DataTableColumnsInterface,
+} from "./dataTable.interface";
 
 export const DataTableView = () => {
-  const dataTableColumns = useMemo(() => {
+  const dataTableColumns: DataTableColumnsInterface<{}>[] = useMemo(() => {
     return [
-      { id: "id", label: "ID", minWidth: 50, type: "number" },
+      {
+        id: "id",
+        label: "ID",
+        minWidth: 50,
+        type: "number",
+        filterable: true,
+        filterType: TypeInputEnum.CHECKBOX,
+        filterDataEnum: [
+          { label: "1", value: "1" },
+          { label: "2", value: "2" },
+          { label: "3", value: "3" },
+        ],
+      },
       {
         id: "name",
         label: "Name",
+        field: "name",
         minWidth: 100,
-        editable: true,
+        filterable: true,
         type: "text",
+        displayOverlay: true,
+        openClickCell: true,
+        filterType: TypeInputEnum.TEXT,
+        filterDataEnum: [
+          { label: "John Doe", value: "John Doe" },
+          { label: "Jane Smith", value: "Jane Smith" },
+          { label: "Alice Johnson", value: "Alice Johnson" },
+        ],
       },
       { id: "age", label: "Age", minWidth: 50, type: "number" },
     ];
   }, []);
-  const data = useMemo(() => {
-    return [
-      { id: 1, name: "John Doe", age: 28 },
-      { id: 2, name: "Jane Smith", age: 34 },
-      { id: 3, name: "Alice Johnson", age: 45 },
-    ];
-  }, []);
-  const actions: dataTableActionsInterface<{
+  const [data, setData] = useState([
+    { id: 1, name: "John Doe", age: 28 },
+    { id: 2, name: "Jane Smith", age: 34 },
+    { id: 3, name: "Alice Johnson", age: 45 },
+  ]);
+
+  const actions: DataTableActionsInterface<{
     id: number;
     name: string;
     age: number;
@@ -47,11 +71,20 @@ export const DataTableView = () => {
       },
     ];
   }, []);
+  const onFiltersChange = (filters: DataTableFilterState) => {
+    console.log("Filters changed: ", filters);
+  };
   return (
     <DataTable
       data={data}
       actions={actions}
       columns={dataTableColumns}
+      onFiltersChange={onFiltersChange}
+      onEditColumnByOverlay={(newRow) => {
+        setData((prevData) =>
+          prevData.map((row) => (row.id === newRow.id ? newRow : row)),
+        );
+      }}
       id="datatable-example"
       name={"DataTable"}
       onSelectionChange={(selectedRows) => {

package/src/dataTable/dataTable.css

@@ -1,14 +1,31 @@
 .data-table-container {
   overflow: auto;
+
+  .data-table-empty-state-content {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .data-table {
     width: 100%;
-    border-spacing: 5px;
+    border-spacing: 5px 0;
     font-size: 14px;
     color: #333;
+
+    /*   .data-table-sticky-cell {
+      box-shadow: 2px 0 0 #f1f3f8;
+    } */
+
     .select-cell {
       min-width: 40px !important;
+
       .input-container {
         min-width: 20px;
+
         input {
           min-width: 20px;
           width: 20px;
@@ -16,15 +33,146 @@
         }
       }
     }
+
     thead {
       margin-bottom: 1rem;
-      position: sticky;
-      top: 0;
-      background-color: #fff;
+      background-color: inherit;
+
       th {
         color: #bdbaba;
         min-width: 100px;
+        position: relative;
+        z-index: 11;
+        background-color: inherit;
+        background-clip: padding-box;
+
+        .data-table-column-sort {
+          .bi-arrow-down-up {
+            font-size: 1rem;
+          }
+        }
+
+        .data-table-column-filter {
+          visibility: hidden;
+          margin-left: 4px;
+
+          &.active {
+            visibility: visible;
+          }
+
+          .data-table-column-filter-active {
+            color: var(--tertiary-color);
+          }
+        }
+
+        .data-table-column-sort {
+          visibility: hidden;
+          margin-left: 4px;
+
+          &.active {
+            visibility: visible;
+          }
+
+          .data-table-column-sort-active {
+            color: var(--tertiary-color);
+          }
+        }
+
+        &:hover,
+        &:focus {
+
+          .data-table-column-filter,
+          .data-table-column-sort {
+            visibility: visible;
+          }
+        }
+      }
+
+      .data-table-filter-row {
+        th {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          overflow: visible;
+        }
+
+        .data-table-filter-select {
+          width: 100%;
+          max-width: 100%;
+
+          button {
+            width: 100%;
+            max-width: 100%;
+            overflow: hidden;
+            padding: 4px 6px;
+            border: 1px solid #dedede;
+          }
+
+          .select-container-value {
+            display: block;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.7rem;
+          }
+        }
+
+        .data-table-filter-input-wrapper {
+          width: 100%;
+          max-width: 100%;
+          overflow: visible;
+          box-sizing: border-box;
+
+          .input-clear-icon,
+          .clear-btn {
+            right: 5px;
+
+            .bi {
+              font-size: 0.8rem;
+            }
+          }
+
+          .input-container {
+            min-width: 0;
+            width: 100%;
+          }
+
+          .select-container {
+            max-width: 100%;
+            min-width: 0;
+          }
+
+          .select-container-button {
+            max-width: 100%;
+            min-width: 0;
+          }
+        }
+
+        .data-table-filter-input {
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          border: 1px solid #c9cfdb;
+          border-radius: 6px;
+          padding: 4px 6px;
+          font-size: 12px;
+          background-color: #fff;
+          color: #333;
+        }
+      }
+
+      .data-table-header-row {
+        th {
+          position: sticky;
+          top: 0;
+          z-index: 12;
+          background-color: #f9fbfc;
+        }
       }
     }
   }
-}
+}

package/src/dataTable/dataTable.interface.ts

@@ -1,23 +1,41 @@
 import { HTMLInputTypeAttribute } from "react";
+import { EnumerableType } from "../_core/type/generiqueType";
+import { TypeInputEnum } from "../form/form.enum";
 
-export interface dataTableColumnsInterface<T> {
+export interface DataTableColumnsInterface<T> {
   id: string;
   label: string;
+  key?: string;
+  name?: string;
+  sticky?: boolean;
   minWidth?: number;
   maxWidth?: number;
   width?: number;
   align?: "right" | "left" | "center";
+  alignText?: "right" | "left" | "center";
   format?: (value: any) => string;
   sortable?: boolean;
   filterable?: boolean;
-  filterValue?: string;
+  filterDataEnum?: EnumerableType[];
+  filterType?: TypeInputEnum;
   editable?: boolean;
+  isUpdatable?: boolean;
   options?: { label: string; value: string }[];
+  displayOverlay?: boolean;
+  onEditable?: (value: any, row: T) => boolean;
+  onChange?: (value: any, row: T) => void;
+  onEditByOverlay?: (value: any, row: T) => void;
   onEdit?: (value: any, row: T) => void;
+  onEditTrigger?: "change" | "enter";
   onRowStyle?: (row: T) => React.CSSProperties;
+  renderComponent?: (value: any, row: T) => JSX.Element;
+  openClickCell?: boolean;
+  handleClickCell?: (e: React.MouseEvent<HTMLTableCellElement>, row: T) => void;
+  renderClickCellComponent?: (value: any, row: T) => JSX.Element;
   type: HTMLInputTypeAttribute | "select";
+  children?: DataTableColumnsInterface<T>[];
 }
-export interface dataTableActionsInterface<T> {
+export interface DataTableActionsInterface<T> {
   id: string;
   label: string;
   type: "button" | "link" | "icon";

package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -1,8 +1,8 @@
 import { Button } from "../../button/Button";
 import { Icon } from "../../icon/Icon";
-import { dataTableActionsInterface } from "../dataTable.interface";
+import { DataTableActionsInterface } from "../dataTable.interface";
 type DataTableActionProps = {
-  action: dataTableActionsInterface<any>;
+  action: DataTableActionsInterface<any>;
   row: any;
   index?: number;
 };

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,27 +1,77 @@
-import { dataTableColumnsInterface } from "../dataTable.interface";
+import { DataTableSortDirection } from "../DataTable";
+import { DataTableColumnsInterface } from "../dataTable.interface";
+import { DataTableColumnFilter } from "./dataTableColumnFilter/DataTableColumnFilter";
+import { DataTableColumnSort } from "./dataTableColumnSort/DataTableColumnSort";
 
-type DataTableColumnProps = {
-  column: dataTableColumnsInterface<any>;
-  idx: number;
-  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
-};
-export const DataTableColumn = ({
+export function DataTableColumn<T>({
   column,
   idx,
   onColumnClick,
-}: DataTableColumnProps) => {
+  hasNestedColumns,
+  isFilterVisible,
+  onToggleFilterVisibility,
+  currentSortDirection,
+  onToggleSort,
+  stickyLeft,
+  stickyTop,
+}: {
+  hasNestedColumns: boolean;
+  column: DataTableColumnsInterface<T>;
+  idx: number;
+  onColumnClick?: (column: DataTableColumnsInterface<T>) => void;
+  isFilterVisible?: boolean;
+  onToggleFilterVisibility?: (column: DataTableColumnsInterface<T>) => void;
+  currentSortDirection?: DataTableSortDirection | null;
+  onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+  stickyLeft?: number;
+  stickyTop?: number;
+}) {
+  const hasChildren = !!column.children?.length;
+  const isSticky = stickyLeft !== undefined;
+
   return (
     <th
       key={`colonne-${column.id}-${idx}`}
       style={{
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth,
-        width: column.width,
-        textAlign: column.align || "left",
+        minWidth: hasChildren ? undefined : column.minWidth,
+        maxWidth: hasChildren ? undefined : column.maxWidth,
+        width: hasChildren ? undefined : column.width,
+        textAlign: column.align ?? "left",
+        alignContent: column.children ? "center" : "flex-end",
+        top: stickyTop,
+        ...(isSticky
+          ? {
+              position: "sticky",
+              left: stickyLeft,
+              zIndex: 13,
+              backgroundColor: "#f9fbfc",
+            }
+          : {}),
       }}
+      className={`${column.children ? "has-children" : ""} ${
+        isSticky ? "data-table-sticky-cell" : ""
+      }`.trim()}
+      colSpan={column.children?.length ?? 1}
+      rowSpan={!column.children?.length && hasNestedColumns ? 2 : 1}
       onClick={() => onColumnClick?.(column)}
     >
-      {column.label}
+      <div className="d-flex align-items-center">
+        <div className="flex-1">{column.label}</div>
+        {column.filterable && (
+          <DataTableColumnFilter
+            column={column}
+            isFilterVisible={isFilterVisible}
+            onToggleVisibility={onToggleFilterVisibility}
+          />
+        )}
+        {column.sortable && (
+          <DataTableColumnSort
+            column={column}
+            sortDirection={currentSortDirection}
+            onToggleSort={onToggleSort}
+          />
+        )}
+      </div>
     </th>
   );
-};
+}

package/src/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.tsx

@@ -0,0 +1,36 @@
+import { Icon } from "../../../icon/Icon";
+import { DataTableColumnsInterface } from "../../dataTable.interface";
+import "./dataTableColumnFilter.css";
+
+type DataTableColumnFilterProps<T> = {
+  className?: string;
+  column: DataTableColumnsInterface<T>;
+  isFilterVisible?: boolean;
+  onToggleVisibility?: (column: DataTableColumnsInterface<T>) => void;
+};
+export const DataTableColumnFilter = <T,>({
+  className,
+  column,
+  isFilterVisible = false,
+  onToggleVisibility,
+}: DataTableColumnFilterProps<T>) => {
+  return (
+    <div
+      className={`data-table-column-filter ${
+        isFilterVisible ? "active" : ""
+      } ${className ?? ""}`}
+    >
+      <span>
+        <Icon
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleVisibility?.(column);
+          }}
+          classIcon={`bi-filter cursor-pointer ${
+            isFilterVisible ? "data-table-column-filter-active" : ""
+          }`}
+        />
+      </span>
+    </div>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+import { TypeInputEnum } from "../../../../form/form.enum";
+import { Input } from "../../../../form/input/Input";
+
+type DataTableColumnFilterDateProps = {
+  id: string;
+  name: string;
+  label: string;
+  onChange: (value: string) => void;
+  currentValue?: string;
+};
+export const DataTableColumnFilterDate = ({
+  id,
+  name,
+  label,
+  onChange,
+  currentValue,
+}: DataTableColumnFilterDateProps) => {
+  const [selectedValue, setSelectedValue] = useState<string>(
+    currentValue ?? "",
+  );
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    onChange(value);
+  };
+  return (
+    <div>
+      <p>{label}</p>
+      <Input
+        id={id}
+        name={name}
+        type={TypeInputEnum.DATE}
+        value={selectedValue}
+        onChange={(e) => handleChange(e.target.value)}
+      />
+    </div>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+
+import { TypeInputEnum } from "../../../../form/form.enum";
+import { Input } from "../../../../form/input/Input";
+
+type DataTableColumnFilterDateRangeProps = {
+  id: string;
+  name: string;
+  onChange: (startDate: string, endDate: string) => void;
+  currentStartValue?: string;
+  currentEndValue?: string;
+};
+
+export const DataTableColumnFilterDateRange = ({
+  id,
+  name,
+  onChange,
+  currentStartValue,
+  currentEndValue,
+}: DataTableColumnFilterDateRangeProps) => {
+  const [startDate, setStartDate] = useState<string>(currentStartValue ?? "");
+  const [endDate, setEndDate] = useState<string>(currentEndValue ?? "");
+
+  useEffect(() => {
+    setStartDate(currentStartValue ?? "");
+  }, [currentStartValue]);
+
+  useEffect(() => {
+    setEndDate(currentEndValue ?? "");
+  }, [currentEndValue]);
+
+  const handleStartDateChange = (value: string) => {
+    setStartDate(value);
+    onChange(value, endDate);
+  };
+
+  const handleEndDateChange = (value: string) => {
+    setEndDate(value);
+    onChange(startDate, value);
+  };
+
+  return (
+    <div>
+      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+        <div>
+          <label
+            htmlFor={`${id}-start`}
+            style={{ display: "block", marginBottom: "4px" }}
+          >
+            Date début
+          </label>
+          <Input
+            id={`${id}-start`}
+            name={`${name}-start`}
+            type={TypeInputEnum.DATE}
+            value={startDate}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => handleStartDateChange(e.target.value)}
+          />
+        </div>
+        <div>
+          <label
+            htmlFor={`${id}-end`}
+            style={{ display: "block", marginBottom: "4px" }}
+          >
+            Date fin
+          </label>
+          <Input
+            id={`${id}-end`}
+            name={`${name}-end`}
+            type={TypeInputEnum.DATE}
+            value={endDate}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => handleEndDateChange(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { Button } from "../../../..";
+import { EnumerableType } from "../../../../_core/type/generiqueType";
+import { TypeInputEnum } from "../../../../form/form.enum";
+import { Input } from "../../../../form/input/Input";
+
+type DataTableColumnFilterEnumProps = {
+  type: TypeInputEnum;
+  id: string;
+  name?: string;
+  data: EnumerableType[];
+  onChange: (value: string) => void;
+  currentValue?: string;
+};
+export const DataTableColumnFilterEnum = ({
+  type,
+  id,
+  onChange,
+  name,
+  data,
+  currentValue = "",
+}: DataTableColumnFilterEnumProps) => {
+  const [selectedValue, setSelectedValue] = useState<string[]>(() => {
+    return currentValue ? currentValue.split(",") : [];
+  });
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let newSelectedValue: string[];
+
+    if (type === TypeInputEnum.RADIO) {
+      newSelectedValue = [e.target.value];
+    } else {
+      if (selectedValue.includes(e.target.value)) {
+        newSelectedValue = selectedValue.filter(
+          (val) => val !== e.target.value,
+        );
+      } else {
+        newSelectedValue = [...selectedValue, e.target.value];
+      }
+    }
+
+    setSelectedValue(newSelectedValue);
+    onChange(newSelectedValue.join(","));
+  };
+  const allSelected = () => {
+    if (selectedValue.length === data.length) {
+      setSelectedValue([]);
+      onChange("");
+    } else {
+      const allValues = data.map((d) => d.value);
+      setSelectedValue(allValues);
+      onChange(allValues.join(","));
+    }
+  };
+  useEffect(() => {
+    const newValue = currentValue ? currentValue.split(",") : [];
+    setSelectedValue(newValue);
+  }, [currentValue]);
+  return (
+    <>
+      {data?.map((opt) => (
+        <div
+          style={{
+            width: "150px",
+          }}
+          className="d-flex align-items-center"
+          key={opt.value}
+        >
+          <Input
+            id={id}
+            name={`${name}-${opt.value}-filter`}
+            value={opt.value}
+            onChange={handleChange}
+            type={type}
+            checked={selectedValue.includes(opt.value)}
+          />
+          <label className="ml-2" htmlFor={`${name}-${opt.value}-filter`}>
+            {opt.label}
+          </label>
+        </div>
+      ))}
+      <Button
+        className="mt-2"
+        onClick={allSelected}
+        id={`${id}-select-all`}
+        title="Tout sélectionner"
+      />
+    </>
+  );
+};