kelt-ui-kit-react 2.0.2 → 2.0.3

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"
+      />
+    </>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.tsx

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

package/src/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.tsx

@@ -0,0 +1,42 @@
+import { Icon } from "../../../icon/Icon";
+import { DataTableSortDirection } from "../../DataTable";
+import { DataTableColumnsInterface } from "../../dataTable.interface";
+
+type DataTableColumnSortProps<T> = {
+  className?: string;
+  column: DataTableColumnsInterface<T>;
+  sortDirection?: DataTableSortDirection | null;
+  onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+};
+
+export const DataTableColumnSort = <T,>({
+  className,
+  column,
+  sortDirection,
+  onToggleSort,
+}: DataTableColumnSortProps<T>) => {
+  const iconClass =
+    sortDirection === "asc"
+      ? "bi-sort-up"
+      : sortDirection === "desc"
+        ? "bi-sort-down"
+        : "bi-arrow-down-up";
+
+  return (
+    <div
+      className={`data-table-column-sort ${sortDirection ? "active" : ""} ${className ?? ""}`}
+    >
+      <span>
+        <Icon
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleSort?.(column);
+          }}
+          classIcon={`${iconClass} cursor-pointer ${
+            sortDirection ? "data-table-column-sort-active" : ""
+          }`}
+        />
+      </span>
+    </div>
+  );
+};

package/src/dataTable/dataTableFilters/DataTableFilters.tsx

@@ -0,0 +1,91 @@
+import { Badge } from "../../badge/Badge";
+import { Icon } from "../../icon/Icon";
+import {
+  DataTableDateRangeFilterValue,
+  DataTableFilterState,
+} from "../DataTable";
+import "./dataTableFilters.css";
+export type DataTableFiltersProps = {
+  currentFilters: DataTableFilterState;
+  setCurrentFilters: React.Dispatch<React.SetStateAction<DataTableFilterState>>;
+};
+export const DataTableFilters = ({
+  currentFilters,
+  setCurrentFilters,
+}: DataTableFiltersProps) => {
+  const isDateRangeFilterValue = (
+    value: DataTableFilterState[string],
+  ): value is DataTableDateRangeFilterValue => {
+    return (
+      typeof value === "object" &&
+      value !== null &&
+      "startDate" in value &&
+      "endDate" in value
+    );
+  };
+
+  const getDisplayValue = (value: DataTableFilterState[string]) => {
+    if (isDateRangeFilterValue(value)) {
+      if (value.startDate && value.endDate) {
+        return `${value.startDate} - ${value.endDate}`;
+      }
+
+      if (value.startDate) {
+        return `a partir de ${value.startDate}`;
+      }
+
+      if (value.endDate) {
+        return `jusqu'au ${value.endDate}`;
+      }
+
+      return "";
+    }
+
+    return String(value ?? "");
+  };
+
+  const generateColor = (str: string): string => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    const hue = hash % 360;
+    return `hsl(${hue}, 80%, 30%)`;
+  };
+
+  const removeFilters = (key: string) => {
+    setCurrentFilters((prev: any) => {
+      const { [key]: _removed, ...rest } = prev;
+      return rest;
+    });
+  };
+  if (!currentFilters || Object.keys(currentFilters).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="badge-filters">
+      {Object.keys(currentFilters).map((key) => {
+        const value = getDisplayValue(currentFilters[key]);
+        const displayValue =
+          value.length > 20 ? value.substring(0, 20) + "..." : value;
+
+        return (
+          <Badge
+            onRemove={() => removeFilters(key)}
+            className="mr-2"
+            title={`${key} : ${displayValue}`}
+            color={generateColor(key)}
+            key={key}
+          />
+        );
+      })}
+
+      <Icon
+        classIcon="bi-x badge-filters-clear"
+        onClick={() => setCurrentFilters({})}
+      />
+    </div>
+  );
+};

package/src/dataTable/dataTableFilters/dataTableFilters.css

@@ -0,0 +1,16 @@
+.badge-filters {
+  border-radius: 4px;
+  padding: 0.25rem;
+  border: 1px solid #dedede;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  position: sticky;
+  left: 0;
+  .badge-filters-clear {
+    padding: 0.05rem;
+    border: 1px solid #dedede;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+}

package/src/dataTable/dataTableLoading/DataTableLoading.tsx

@@ -1,21 +1,10 @@
 type DataTableLoadingProps = {
-  columns: any[];
-  actions: any[];
   emptyMessage?: string;
 };
-export const DataTableLoading = ({
-  columns,
-  actions,
-  emptyMessage,
-}: DataTableLoadingProps) => {
+export const DataTableLoading = ({ emptyMessage }: DataTableLoadingProps) => {
   return (
-    <tr>
-      <td
-        align="center"
-        colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-      >
-        <div className="mt-3">{emptyMessage || "Aucune donnée disponible"}</div>
-      </td>
-    </tr>
+    <div className="data-table-empty-state-content mt-3">
+      {emptyMessage || "Aucune donnée disponible"}
+    </div>
   );
 };