realtimex-crm 0.1.2

package/src/components/admin/export-button.tsx

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { Download } from "lucide-react";
+import type { Exporter } from "ra-core";
+import {
+  fetchRelatedRecords,
+  useDataProvider,
+  useNotify,
+  useListContext,
+  Translate,
+} from "ra-core";
+import { Button } from "@/components/ui/button";
+
+/**
+ * A button that exports list data to a file.
+ *
+ * Respects current filters and sort order, with configurable maximum results.
+ * Use a custom exporter to customize the result and fetch related records.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/exportbutton/ ExportButton documentation}
+ *
+ * @example
+ * import { CreateButton, ExportButton, TopToolbar } from '@/components/admin';
+ *
+ * const PostListActions = () => (
+ *   <>
+ *     <FilterButton />
+ *     <CreateButton />
+ *     <ExportButton />
+ *   </>
+ * );
+ *
+ * export const PostList = () => (
+ *   <List actions={<PostListActions />}>
+ *     ...
+ *   </List>
+ * );
+ */
+export const ExportButton = (props: ExportButtonProps) => {
+  const {
+    maxResults = 1000,
+    onClick,
+    label = "ra.action.export",
+    icon = defaultIcon,
+    exporter: customExporter,
+    meta,
+    className = "cursor-pointer",
+  } = props;
+  const {
+    filter,
+    filterValues,
+    resource,
+    sort,
+    exporter: exporterFromContext,
+    total,
+  } = useListContext();
+  const exporter = customExporter || exporterFromContext;
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      dataProvider
+        .getList(resource, {
+          sort,
+          filter: filter ? { ...filterValues, ...filter } : filterValues,
+          pagination: { page: 1, perPage: maxResults },
+          meta,
+        })
+        .then(
+          ({ data }) =>
+            exporter &&
+            exporter(
+              data,
+              fetchRelatedRecords(dataProvider),
+              dataProvider,
+              resource,
+            ),
+        )
+        .catch((error) => {
+          console.error(error);
+          notify("HTTP Error", { type: "error" });
+        });
+      if (typeof onClick === "function") {
+        onClick(event);
+      }
+    },
+    [
+      dataProvider,
+      exporter,
+      filter,
+      filterValues,
+      maxResults,
+      notify,
+      onClick,
+      resource,
+      sort,
+      meta,
+    ],
+  );
+
+  return (
+    <Button
+      variant="outline"
+      onClick={handleClick}
+      disabled={total === 0}
+      className={className}
+    >
+      {icon}
+      <Translate i18nKey={label}>Export</Translate>
+    </Button>
+  );
+};
+
+const defaultIcon = <Download />;
+
+export interface ExportButtonProps {
+  className?: string;
+  exporter?: Exporter;
+  icon?: React.ReactNode;
+  label?: string;
+  maxResults?: number;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  resource?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  meta?: any;
+}

package/src/components/admin/field-toggle.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+import { FieldTitle, useResourceContext } from "ra-core";
+import { GripVertical } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+/**
+ * A toggleable field item with drag-and-drop reordering, used by ColumnsSelector
+ *
+ * @internal
+ */
+export const FieldToggle = (props: FieldToggleProps) => {
+  const { selected, label, onToggle, onMove, source, index } = props;
+  const resource = useResourceContext();
+  const dropIndex = React.useRef<number | null>(null);
+  const x = React.useRef<number | null>(null);
+  const y = React.useRef<number | null>(null);
+
+  const handleDocumentDragOver = React.useCallback((event: DragEvent) => {
+    x.current = event.clientX;
+    y.current = event.clientY;
+  }, []);
+
+  const handleDragStart = () => {
+    document.addEventListener(
+      "dragover",
+      handleDocumentDragOver as EventListener,
+    );
+  };
+
+  const handleDrag = (event: React.DragEvent) => {
+    // imperative DOM manipulations using the native Drag API
+    const selectedItem = event.target as HTMLElement;
+    selectedItem.dataset.dragActive = "true";
+    const list = selectedItem.closest("ul");
+    if (x.current == null || y.current == null) {
+      return;
+    }
+    const elementAtDragCoordinates = document.elementFromPoint(
+      x.current,
+      y.current,
+    );
+    let dropItem =
+      elementAtDragCoordinates === null
+        ? selectedItem
+        : elementAtDragCoordinates.closest("li");
+
+    if (!dropItem) {
+      return;
+    }
+    if (dropItem.classList.contains("dragIcon")) {
+      const parent = dropItem.parentNode;
+      if (parent instanceof HTMLElement) {
+        dropItem = parent;
+      }
+    }
+    if (dropItem === selectedItem) {
+      return;
+    }
+    const dropItemParent = dropItem.parentNode;
+    if (
+      list &&
+      dropItemParent instanceof HTMLElement &&
+      list === dropItemParent.closest("ul")
+    ) {
+      const dataIndex = dropItem.dataset.index;
+      if (dataIndex) {
+        dropIndex.current = parseInt(dataIndex, 10);
+      }
+      if (dropItem === selectedItem.nextSibling) {
+        dropItem = dropItem.nextSibling as HTMLElement;
+      }
+      list.insertBefore(selectedItem, dropItem);
+    }
+  };
+
+  const handleDragEnd = (event: React.DragEvent) => {
+    const selectedItem = event.target as HTMLElement;
+    const list = selectedItem.closest("ul");
+
+    const elementFromPoint =
+      x.current != null && y.current != null
+        ? document.elementFromPoint(x.current, y.current)
+        : null;
+
+    let dropItem =
+      x.current == null || y.current == null || elementFromPoint === null
+        ? selectedItem
+        : elementFromPoint.closest("li");
+
+    if (y.current !== null && list && !dropItem) {
+      const closestUL = selectedItem.closest("ul");
+      if (closestUL && y.current > closestUL.getBoundingClientRect().bottom) {
+        dropItem = list.lastChild as HTMLElement;
+      } else {
+        dropItem = list.firstChild as HTMLElement;
+      }
+    }
+
+    if (dropItem && list && dropItem.closest("ul") === list) {
+      if (onMove) onMove(selectedItem.dataset.index!, dropIndex.current!);
+    } else {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    selectedItem.dataset.dragActive = "false";
+    document.removeEventListener(
+      "dragover",
+      handleDocumentDragOver as EventListener,
+    );
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+
+  return (
+    <li
+      key={source}
+      role="option"
+      draggable={onMove ? "true" : undefined}
+      onDrag={onMove ? handleDrag : undefined}
+      onDragStart={onMove ? handleDragStart : undefined}
+      onDragEnd={onMove ? handleDragEnd : undefined}
+      onDragOver={onMove ? handleDragOver : undefined}
+      data-index={index}
+      className={cn(
+        "flex justify-between items-center py-1",
+        "data-[drag-active=true]:bg-transparent data-[drag-active=true]:text-transparent data-[drag-active=true]:outline data-[drag-active=true]:outline-1 data-[drag-active=true]:outline-border",
+      )}
+    >
+      <label
+        htmlFor={`switch_${index}`}
+        className="flex items-center gap-2 cursor-pointer"
+      >
+        <Switch
+          id={`switch_${index}`}
+          checked={selected}
+          onCheckedChange={onToggle}
+          name={`${index}`}
+        />
+        <span className="text-sm">
+          <FieldTitle label={label} source={source} resource={resource} />
+        </span>
+      </label>
+      {onMove && (
+        <GripVertical className="cursor-move dragIcon w-4 h-4 text-muted-foreground" />
+      )}
+    </li>
+  );
+};
+
+export interface FieldToggleProps {
+  selected: boolean;
+  label: React.ReactNode;
+  onToggle?: (event: boolean) => void;
+  onMove?: (
+    dragIndex: string | number,
+    dropIndex: string | number | null,
+  ) => void;
+  source: string;
+  index: number | string;
+}

package/src/components/admin/file-field.tsx

@@ -0,0 +1,123 @@
+import { HTMLAttributes } from "react";
+import get from "lodash/get";
+import type { ExtractRecordPaths, HintedString } from "ra-core";
+import { useFieldValue, useTranslate } from "ra-core";
+import { cn } from "@/lib/utils";
+import type { FieldProps } from "@/lib/field.type";
+
+/**
+ * Displays a downloadable file link with customizable title and target.
+ *
+ * This field renders file URLs as clickable links that can open in new tabs or trigger downloads.
+ * It supports arrays of files and prevents click bubbling in DataTable rows.
+ * To be used with RecordField or DataTable.Col components, or anywhere a RecordContext is available.
+ *
+ * @see {@link https://marmelab.com/shadcn-admin-kit/docs/filefield/ FileField documentation}
+ *
+ * @example
+ * import { FileField } from '@/components/admin/file-field';
+ *
+ * <FileField source="url" title="title" />
+ *
+ * // renders the record { id: 123, url: 'doc.pdf', title: 'Presentation' } as
+ * <div>
+ *     <a href="doc.pdf" title="Presentation">Presentation</a>
+ * </div>
+ */
+export const FileField = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+>(
+  props: FileFieldProps<RecordType>,
+) => {
+  const {
+    className,
+    empty,
+    title,
+    src,
+    target,
+    download,
+    defaultValue,
+    source,
+    record,
+    ...rest
+  } = props;
+  const sourceValue = useFieldValue({ defaultValue, source, record });
+  const titleValue =
+    useFieldValue({
+      ...props,
+      // @ts-expect-error We ignore here because title might be a custom label or undefined instead of a field name
+      source: title,
+    })?.toString() ?? title;
+  const translate = useTranslate();
+
+  if (
+    sourceValue == null ||
+    (Array.isArray(sourceValue) && sourceValue.length === 0)
+  ) {
+    if (!empty) {
+      return null;
+    }
+
+    return (
+      <div className={cn("inline-block", className)} {...rest}>
+        {typeof empty === "string" ? translate(empty, { _: empty }) : empty}
+      </div>
+    );
+  }
+
+  if (Array.isArray(sourceValue)) {
+    return (
+      <ul className={cn("inline-block", className)} {...rest}>
+        {sourceValue.map((file, index) => {
+          const fileTitleValue = title ? get(file, title, title) : title;
+          const srcValue = src ? get(file, src, title) : title;
+
+          return (
+            <li key={index}>
+              <a
+                href={srcValue}
+                title={fileTitleValue}
+                target={target}
+                download={download}
+                // useful to prevent click bubbling in a DataTable with rowClick
+                onClick={(e) => e.stopPropagation()}
+              >
+                {fileTitleValue}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  return (
+    <div className={cn("inline-block", className)} {...rest}>
+      <a
+        href={sourceValue?.toString()}
+        title={titleValue}
+        target={target}
+        download={download}
+        // useful to prevent click bubbling in a DataTable with rowClick
+        onClick={(e) => e.stopPropagation()}
+      >
+        {titleValue}
+      </a>
+    </div>
+  );
+};
+
+export interface FileFieldProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  RecordType extends Record<string, any> = Record<string, any>,
+> extends FieldProps<RecordType>,
+    HTMLAttributes<HTMLElement> {
+  /**
+   * The source of the link to the file, for an array of files.
+   */
+  src?: string;
+  title?: HintedString<ExtractRecordPaths<RecordType>>;
+  target?: HTMLAnchorElement["target"];
+  download?: HTMLAnchorElement["download"];
+}