qantler-flaz-dataview 1.0.0

package/src/MdtActiveFilterBar.jsx

@@ -0,0 +1,263 @@
+import React, { useState } from "react";
+import { ListFilterPlus, X } from "lucide-react";
+import { renderColumnIcon, resolveFilterColumnIcon } from "../../ui/tableColumnIcons";
+import MdtValueEditorPopup from "./MdtValueEditorPopup";
+import MdtFilterColumnPicker from "./MdtFilterColumnPicker";
+import MdtFilterOperatorDropdown from "./MdtFilterOperatorDropdown";
+import { renderFilterChipDisplayValue } from "./filterDisplayUtils";
+import { EDIT_MODE, getColumnFieldVariant } from "./mdtColumnEditUtils";
+import { resolveFilterConfig, getAvailableFilterColumns } from "./mdtFilterUtils";
+import {
+  DEFAULT_DATE_FILTER_OPERATOR,
+  getDateFilterOperatorLabel,
+  isDateLikeFilterColumn,
+} from "./mdtDateFilterUtils";
+
+/**
+ * Active filter chips bar — reusable in table page and Create View modal.
+ */
+const MdtActiveFilterBar = ({
+  filterConfig: filterConfigProp,
+  /** Prefer filterableColumns; visibleColumns kept for backward compatibility. */
+  filterableColumns: filterableColumnsProp,
+  visibleColumns,
+  activeFilters,
+  replacingFilterId,
+  setReplacingFilterId,
+  replaceSearch,
+  setReplaceSearch,
+  valueEditId,
+  setValueEditId,
+  showInnerFilterDropdown,
+  setShowInnerFilterDropdown,
+  innerFilterSearch,
+  setInnerFilterSearch,
+  chipReplaceRef,
+  chipValueRef,
+  innerFilterRef,
+  onRemoveFilter,
+  onClearAll,
+  onAddFilter,
+  onUpdateFilterValue,
+  onUpdateFilterOperator,
+  onReplaceFilterKey,
+  onCloseOtherPopups,
+  onCloseColumnSortPopup,
+  showSaveAs: showSaveAsProp,
+  hasAnyFilterValue = false,
+  onSaveAs,
+  className = "",
+}) => {
+  const config = resolveFilterConfig(filterConfigProp);
+  const columns = filterableColumnsProp ?? visibleColumns ?? [];
+  const showSaveAs = showSaveAsProp ?? config.showSaveAs;
+
+  const replaceColumns = getAvailableFilterColumns(
+    columns,
+    activeFilters.filter((f) => f.id !== replacingFilterId),
+    replaceSearch,
+  );
+
+  const addColumns = getAvailableFilterColumns(columns, activeFilters, innerFilterSearch);
+  const [operatorEditId, setOperatorEditId] = useState(null);
+
+  return (
+    <div className={`mdt-filter-inner${className ? ` ${className}` : ""}`.trim()}>
+      <div className="mdt-filter-left">
+        {activeFilters.map((filter) => {
+          const col = columns.find((c) => c.accessorKey === filter.key);
+          const isDateFilter = isDateLikeFilterColumn(col);
+          const filterOperator =
+            filter.operator ?? DEFAULT_DATE_FILTER_OPERATOR;
+
+          return (
+          <div
+            className="mdt-filter-chip"
+            key={filter.id}
+            style={{ position: "relative" }}
+            ref={replacingFilterId === filter.id ? chipReplaceRef : null}
+          >
+            {config.showChipFieldReplace && (
+              <button
+                type="button"
+                className="mdt-chip-label mdt-chip-label-btn"
+                onClick={() => {
+                  setReplacingFilterId(replacingFilterId === filter.id ? null : filter.id);
+                  setReplaceSearch("");
+                  onCloseOtherPopups?.();
+                }}
+              >
+                <span className="mdt-chip-icon">
+                  {renderColumnIcon(resolveFilterColumnIcon(filter, columns), {
+                    className: "mdt-chip-svg",
+                  })}
+                </span>
+                <span className="mdt-chip-label-text">{filter.label}</span>
+              </button>
+            )}
+
+            {config.showChipFieldReplace && replacingFilterId === filter.id && (
+              <MdtFilterColumnPicker
+                columns={replaceColumns}
+                search={replaceSearch}
+                onSearchChange={setReplaceSearch}
+                onSelectColumn={(col) => {
+                  onReplaceFilterKey(filter.id, col);
+                  setReplacingFilterId(null);
+                  setReplaceSearch("");
+                  setValueEditId(filter.id);
+                }}
+                searchPlaceholder={config.searchPlaceholder}
+                emptyMessage={config.emptyColumnsMessage}
+                dropdownClassName="mdt-filter-dropdown mdt-fd-left mdt-chip-replace-dropdown"
+                align="left"
+              />
+            )}
+
+            {isDateFilter ? (
+              <div
+                className="mdt-chip-op-wrap"
+                style={{ position: "relative" }}
+              >
+                <button
+                  type="button"
+                  className="mdt-chip-op mdt-chip-op-btn"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const opening = operatorEditId !== filter.id;
+                    setOperatorEditId(opening ? filter.id : null);
+                    setReplacingFilterId(null);
+                    onCloseOtherPopups?.();
+                    if (opening) setValueEditId(null);
+                  }}
+                >
+                  {getDateFilterOperatorLabel(filterOperator)}
+                </button>
+                {operatorEditId === filter.id && (
+                  <MdtFilterOperatorDropdown
+                    operator={filterOperator}
+                    onSelect={(op) => {
+                      onUpdateFilterOperator?.(filter.id, op);
+                      setOperatorEditId(null);
+                      setValueEditId(filter.id);
+                    }}
+                    onClose={() => setOperatorEditId(null)}
+                  />
+                )}
+              </div>
+            ) : (
+              <div className="mdt-chip-op">{config.operatorLabel}</div>
+            )}
+
+            <div
+              className="mdt-chip-value-wrap"
+              ref={
+                valueEditId === filter.id && operatorEditId !== filter.id
+                  ? chipValueRef
+                  : null
+              }
+              style={{ position: "relative" }}
+            >
+              <button
+                type="button"
+                className="mdt-chip-value"
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const isOpening = valueEditId !== filter.id;
+                  setValueEditId(isOpening ? filter.id : null);
+                  setReplacingFilterId(null);
+                  onCloseOtherPopups?.();
+                }}
+              >
+                {renderFilterChipDisplayValue(
+                  filter,
+                  columns.find((c) => c.accessorKey === filter.key),
+                )}
+              </button>
+
+              {valueEditId === filter.id && operatorEditId !== filter.id && col && (
+                  <MdtValueEditorPopup
+                    column={col}
+                    mode={EDIT_MODE.FILTER}
+                    value={filter.value}
+                    filterOperator={isDateFilter ? filterOperator : undefined}
+                    onApply={(v) => {
+                      onUpdateFilterValue(filter.id, v);
+                      const variant =
+                        getColumnFieldVariant(col, EDIT_MODE.FILTER) || "text";
+                      const isMulti =
+                        variant === "select" && col?.filterMulti !== false;
+                      if (variant !== "select" || !isMulti) {
+                        setValueEditId(null);
+                      }
+                    }}
+                    onCancel={() => setValueEditId(null)}
+                  />
+              )}
+            </div>
+
+            {config.showChipRemove && (
+              <button
+                type="button"
+                className="mdt-chip-remove"
+                onClick={() => onRemoveFilter(filter.id)}
+              >
+                <X size={14} />
+              </button>
+            )}
+          </div>
+          );
+        })}
+
+        {config.showAddFilter && (
+          <div className="mdt-filter-button-wrap" ref={innerFilterRef}>
+            <button
+              type="button"
+              className="mdt-add-filter"
+              onClick={() => {
+                onCloseColumnSortPopup?.();
+                setShowInnerFilterDropdown((v) => !v);
+              }}
+            >
+              <ListFilterPlus size={16} />
+            </button>
+
+            {showInnerFilterDropdown && (
+              <MdtFilterColumnPicker
+                columns={addColumns}
+                search={innerFilterSearch}
+                onSearchChange={setInnerFilterSearch}
+                onSelectColumn={(col) => {
+                  onAddFilter(col);
+                  setShowInnerFilterDropdown(false);
+                  setInnerFilterSearch("");
+                }}
+                searchPlaceholder={config.searchPlaceholder}
+                emptyMessage={config.emptyMoreMessage}
+                dropdownClassName="mdt-filter-dropdown mdt-fd-left"
+                align="left"
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="mdt-filter-right">
+        {config.showClearAll && (
+          <button type="button" className="mdt-clear-all" onClick={onClearAll}>
+            {config.clearAllLabel}
+          </button>
+        )}
+        {showSaveAs && hasAnyFilterValue && (
+          <button type="button" className="mdt-clear-all" onClick={onSaveAs}>
+            {config.saveAsLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MdtActiveFilterBar;

package/src/MdtBulkSelectionBar.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Trash2 } from "lucide-react";
+import { renderColumnIcon } from "../../ui/tableColumnIcons";
+
+/**
+ * Bottom bulk action bar — shown when one or more rows are selected.
+ * bulkFields: [{ id, label, Icon?, iconName?, column? }]
+ */
+const MdtBulkSelectionBar = ({
+  selectedCount,
+  onClearSelection,
+  bulkFields = [],
+  onBulkFieldClick,
+  onBulkDelete,
+  bulkDeleteDisabled = false,
+  bulkDeleteDisabledReason = "None of the selected items can be deleted.",
+  rightAction = null,
+}) => {
+  if (!selectedCount) return null;
+
+  return (
+    <div className="mdt-bulk-bar" role="toolbar" aria-label="Bulk actions">
+      <div className="mdt-bulk-bar-inner">
+        <div className="mdt-bulk-bar-status">
+          <button
+            type="button"
+            className="mdt-bulk-bar-clear"
+            aria-label="Clear selection"
+            onClick={onClearSelection}
+          />
+          <span className="mdt-bulk-bar-count">
+            {selectedCount} selected
+          </span>
+        </div>
+
+        <div className="mdt-bulk-bar-divider" aria-hidden />
+
+        <div className="mdt-bulk-bar-actions">
+          {onBulkDelete && (
+            <div className="mdt-bulk-bar-icons">
+              <button
+                type="button"
+                className={[
+                  "mdt-bulk-bar-icon-btn",
+                  bulkDeleteDisabled ? "mdt-bulk-bar-icon-btn--disabled" : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                aria-label="Delete"
+                title={bulkDeleteDisabled ? bulkDeleteDisabledReason : "Delete"}
+                disabled={bulkDeleteDisabled}
+                onClick={bulkDeleteDisabled ? undefined : onBulkDelete}
+              >
+                <Trash2 size={16} />
+              </button>
+            </div>
+          )}
+
+          {bulkFields.length > 0 && (
+            <div className="mdt-bulk-bar-fields">
+              {bulkFields.map((field) => {
+                const iconEl = renderColumnIcon(field.icon ?? field.iconName, {
+                  className: "mdt-bulk-field-icon",
+                  size: 14,
+                });
+
+                return (
+                  <button
+                    key={field.id}
+                    type="button"
+                    className="mdt-bulk-field-btn"
+                    onClick={(e) => onBulkFieldClick?.(field.id, field, e)}
+                  >
+                    {iconEl}
+                    <span>{field.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {rightAction && (
+          <div className="mdt-bulk-bar-right">{rightAction}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MdtBulkSelectionBar;

package/src/MdtColumnPickerPopup.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import MdtColumnVisibilityList from "./MdtColumnVisibilityList";
+
+const MdtColumnPickerPopup = ({
+  isOpen,
+  position,
+  columns,
+  hiddenColumns,
+  onToggleColumn,
+  onClose,
+}) => {
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSearch("");
+      return undefined;
+    }
+    const handleOutside = (e) => {
+      if (
+        !e.target.closest(".mdt-column-picker-popup") &&
+        !e.target.closest(".mdt-th-column-picker-btn")
+      ) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !position) return null;
+
+  return createPortal(
+    <div
+      className="mdt-column-picker-popup mdt-column-picker-popup--portal"
+      style={{
+        position: "fixed",
+        top: position.top,
+        left: position.left,
+        zIndex: 300000,
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <MdtColumnVisibilityList
+        columns={columns}
+        hiddenColumns={hiddenColumns}
+        onToggleColumn={onToggleColumn}
+        search={search}
+        onSearchChange={setSearch}
+        showSearch
+      />
+    </div>,
+    document.body,
+  );
+};
+
+export default MdtColumnPickerPopup;

package/src/MdtColumnVisibilityList.jsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import MdtPopupChecklist from "./MdtPopupChecklist";
+
+/**
+ * Column visibility checklist — uses shared popup checklist design.
+ */
+const MdtColumnVisibilityList = ({
+  columns,
+  hiddenColumns,
+  onToggleColumn,
+  search = "",
+  onSearchChange,
+  showSearch = true,
+}) => {
+  const options = useMemo(
+    () =>
+      columns.map((col) => ({
+        key: col.accessorKey,
+        label: col.header,
+        icon: col.headerIcon || col.rowIcon || "default",
+        checked: !hiddenColumns.includes(col.accessorKey),
+      })),
+    [columns, hiddenColumns],
+  );
+
+  return (
+    <MdtPopupChecklist
+      options={options}
+      onToggle={onToggleColumn}
+      search={search}
+      onSearchChange={onSearchChange}
+      showSearch={showSearch}
+      emptyText="No columns found"
+    />
+  );
+};
+
+export default MdtColumnVisibilityList;