@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/report/components/report-page-container.tsx

@@ -0,0 +1,179 @@
+import {
+  IconChevronDown,
+  IconFileSpreadsheet,
+  IconMinus,
+  IconPercentage,
+  IconPlus,
+  IconPrinter,
+} from '@tabler/icons-react';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Label,
+  Popover,
+  ScrollArea,
+  Separator,
+  Toggle,
+} from 'erxes-ui/components';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { useQueryState } from 'erxes-ui/hooks/use-query-state';
+import { PageContainer } from 'erxes-ui/modules/layout';
+import { printSettingsAtom } from '../states/reportSettingsState';
+
+export const ReportPageContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [inPreview, setInPreview] = useQueryState<boolean>('inPreview');
+  const [{ printsize, showTableLayoutOnEveryPage }, setPrintSettings] =
+    useAtom(printSettingsAtom);
+  useEffect(() => {
+    if (!inPreview) {
+      setInPreview(true);
+    }
+  }, []);
+
+  const printsizeToFontSize = (size: number) => {
+    const margin = (100 - size) / 10;
+
+    return `${12 - margin}px`;
+  };
+
+  const handlePrintsizeChange = (size: number) => {
+    if (size < 60) {
+      return;
+    }
+
+    if (size > 160) {
+      return;
+    }
+
+    setPrintSettings((prev) => ({ ...prev, printsize: size }));
+  };
+
+  return (
+    <PageContainer className="h-dvh print:h-auto print:block">
+      <header className="flex items-center justify-between h-13 px-3 box-border shrink-0 bg-sidebar overflow-auto styled-scroll print:hidden">
+        <div className="flex items-center gap-2 flex-none pr-8">
+          <Button variant="ghost">Report</Button>
+          <Separator.Inline />
+          <Toggle pressed={!!inPreview} onPressedChange={setInPreview}>
+            {inPreview ? 'hide sidebar' : 'show sidebar'}
+          </Toggle>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <Button
+            variant="secondary"
+            size="icon"
+            className="bg-border"
+            onClick={() => handlePrintsizeChange(printsize - 10)}
+          >
+            <IconMinus />
+          </Button>
+          <div className="relative">
+            <Input className="w-20 pr-8 text-center" value={printsize} />
+            <Button
+              variant="secondary"
+              size="icon"
+              className="absolute right-0.5 top-0.5 hover:bg-muted"
+            >
+              <IconPercentage />
+            </Button>
+          </div>
+          <Button
+            variant="secondary"
+            size="icon"
+            className="bg-border"
+            onClick={() => handlePrintsizeChange(printsize + 10)}
+          >
+            <IconPlus />
+          </Button>
+        </div>
+        <div className="flex items-center gap-3">
+          <Button variant="outline">
+            <IconFileSpreadsheet />
+            Export to excel
+          </Button>
+          <div className="inline-flex rounded shadow-sm">
+            <Button
+              onClick={() => window.print()}
+              variant="ghost"
+              className="rounded-r-none"
+            >
+              <IconPrinter />
+              Print
+            </Button>
+            <Separator orientation="vertical" className="h-7" />
+            <Popover>
+              <Popover.Trigger asChild>
+                <Button variant="ghost" size="icon" className="rounded-l-none">
+                  <IconChevronDown />
+                </Button>
+              </Popover.Trigger>
+              <Popover.Content>
+                <Label variant="peer" className="font-medium">
+                  Print settings
+                </Label>
+                <div className="flex flex-col gap-2 pt-4 pb-2">
+                  <Label>Table</Label>
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="show-table-header-on-every-page"
+                      checked={showTableLayoutOnEveryPage}
+                      onCheckedChange={(value) =>
+                        setPrintSettings((prev) => ({
+                          ...prev,
+                          showTableLayoutOnEveryPage: !!value,
+                        }))
+                      }
+                    />
+                    <Label
+                      variant="peer"
+                      htmlFor="show-table-header-on-every-page"
+                    >
+                      Show table layout on every page
+                    </Label>
+                  </div>
+                </div>
+              </Popover.Content>
+            </Popover>
+          </div>
+        </div>
+      </header>
+      <Separator />
+      <ReportStyle />
+      <ScrollArea className="bg-sidebar flex-auto">
+        <div
+          className="m-4 bg-background shadow-sm mx-auto max-w-5xl pl-15 p-8 print:shadow-none"
+          style={{ fontSize: printsizeToFontSize(printsize) }}
+        >
+          {children}
+        </div>
+      </ScrollArea>
+    </PageContainer>
+  );
+};
+
+export const ReportStyle = () => {
+  return (
+    <style>
+      {`
+        @page {
+          margin: 0;
+          background: white;
+          margin-top: 5mm; 
+        }
+  
+        
+        table { page-break-after: auto; }
+        table tr { page-break-inside: avoid; page-break-after: auto; }
+        table td { page-break-inside: avoid; page-break-after: auto; }
+        
+      `}
+    </style>
+  );
+};

package/src/modules/report/components/report-table.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+
+import { cn } from 'erxes-ui/lib/utils';
+
+function ReportTableRoot({
+  className,
+  ...props
+}: React.ComponentProps<'table'>) {
+  return (
+    <table
+      data-slot="table"
+      className={cn(
+        'w-full overflow-hidden caption-bottom text-[1em]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReportTableHeader({
+  className,
+  ...props
+}: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border', className)}
+      {...props}
+    />
+  );
+}
+
+function ReportTableBody({
+  className,
+  ...props
+}: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function ReportTableFooter({
+  className,
+  ...props
+}: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReportTableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReportTableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-[2.5em] px-[0.5em] text-middle align-middle font-medium border',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReportTableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-[0.3em] align-middle border text-[1em] whitespace-normal break-all',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReportTableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-[1em] text-[1em]', className)}
+      {...props}
+    />
+  );
+}
+
+export const ReportTable = Object.assign(ReportTableRoot, {
+  Header: ReportTableHeader,
+  Body: ReportTableBody,
+  Footer: ReportTableFooter,
+  Head: ReportTableHead,
+  Row: ReportTableRow,
+  Cell: ReportTableCell,
+  Caption: ReportTableCaption,
+});

package/src/modules/report/index.ts

@@ -0,0 +1,2 @@
+export * from './components/report-table';
+export * from './components/report-page-container';

package/src/modules/report/states/reportSettingsState.ts

@@ -0,0 +1,9 @@
+import { atomWithStorage } from 'jotai/utils';
+
+export const printSettingsAtom = atomWithStorage<{
+  showTableLayoutOnEveryPage: boolean;
+  printsize: number;
+}>('printSettings', {
+  printsize: 100,
+  showTableLayoutOnEveryPage: true,
+});

package/src/modules/select-operation/components/SelectOperation.tsx

@@ -0,0 +1,167 @@
+import { Badge, Button, Combobox, Form, Popover } from 'erxes-ui/components';
+
+import { Filter } from 'erxes-ui/modules/filter';
+import { RecordTableInlineCell } from 'erxes-ui/modules/record-table';
+
+const FORM_CONTROL_SELECTOR = [
+  'a[href]',
+  'button',
+  'input',
+  'select',
+  'textarea',
+  '[contenteditable="true"]',
+  '[tabindex]',
+].join(',');
+
+const getFocusableFormControls = (form: HTMLFormElement) =>
+  Array.from(form.querySelectorAll<HTMLElement>(FORM_CONTROL_SELECTOR)).filter(
+    (element) =>
+      element.tabIndex >= 0 &&
+      !element.hasAttribute('disabled') &&
+      element.getAttribute('aria-hidden') !== 'true' &&
+      element.getClientRects().length > 0,
+  );
+
+const getPopoverTrigger = (content: HTMLElement) => {
+  if (!content.id) {
+    return;
+  }
+
+  return Array.from(
+    content.ownerDocument.querySelectorAll<HTMLElement>('[aria-controls]'),
+  ).find((element) => element.getAttribute('aria-controls') === content.id);
+};
+
+const handleFormContentTab = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  if (event.key !== 'Tab' || event.defaultPrevented) {
+    return;
+  }
+
+  const trigger = getPopoverTrigger(event.currentTarget);
+  const form = trigger?.closest('form');
+
+  if (!trigger || !form) {
+    return;
+  }
+
+  const controls = getFocusableFormControls(form);
+  const triggerIndex = controls.indexOf(trigger);
+
+  if (triggerIndex === -1) {
+    return;
+  }
+
+  const nextControl = controls[triggerIndex + (event.shiftKey ? -1 : 1)];
+
+  if (!nextControl) {
+    return;
+  }
+
+  event.preventDefault();
+  trigger.click();
+  requestAnimationFrame(() => nextControl.focus());
+};
+
+export enum SelectTriggerVariant {
+  TABLE = 'table',
+  CARD = 'card',
+  DETAIL = 'detail',
+  FORM = 'form',
+  FILTER = 'filter',
+  ICON = 'icon',
+  DEFAULT = 'default',
+}
+
+export const SelectTriggerOperation = ({
+  children,
+  variant,
+}: {
+  children: React.ReactNode;
+  variant: `${SelectTriggerVariant}`;
+}) => {
+  if (variant === SelectTriggerVariant.TABLE) {
+    return (
+      <RecordTableInlineCell.Trigger className="gap-1">
+        {children}
+      </RecordTableInlineCell.Trigger>
+    );
+  }
+  if (variant === SelectTriggerVariant.CARD) {
+    return (
+      <Popover.Trigger asChild>
+        <Badge
+          variant="secondary"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </Badge>
+      </Popover.Trigger>
+    );
+  }
+  if (variant === SelectTriggerVariant.FILTER) {
+    return (
+      <Popover.Trigger asChild>
+        <Filter.BarButton>{children}</Filter.BarButton>
+      </Popover.Trigger>
+    );
+  }
+
+  if (variant === SelectTriggerVariant.FORM) {
+    return (
+      <Form.Control>
+        <Combobox.TriggerBase className="w-fit h-7 font-medium max-w-64">
+          {children}
+        </Combobox.TriggerBase>
+      </Form.Control>
+    );
+  }
+
+  if (variant === SelectTriggerVariant.ICON) {
+    return (
+      <Popover.Trigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </Button>
+      </Popover.Trigger>
+    );
+  }
+
+  return (
+    <Combobox.TriggerBase className="w-fit h-7 shadow-none py-0 pr-0">
+      {children}
+    </Combobox.TriggerBase>
+  );
+};
+
+export const SelectOperationContent = ({
+  variant,
+  children,
+}: {
+  variant: `${SelectTriggerVariant}`;
+  children: React.ReactNode;
+}) => {
+  if (variant === SelectTriggerVariant.TABLE) {
+    return (
+      <RecordTableInlineCell.Content>{children}</RecordTableInlineCell.Content>
+    );
+  }
+  return (
+    <Combobox.Content
+      sideOffset={variant === SelectTriggerVariant.CARD ? 4 : 8}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={
+        variant === SelectTriggerVariant.FORM ? handleFormContentTab : undefined
+      }
+    >
+      {children}
+    </Combobox.Content>
+  );
+};

package/src/modules/select-operation/index.ts

@@ -0,0 +1 @@
+export * from './components/SelectOperation';

package/src/modules/select-tree/components/SelectTree.tsx

@@ -0,0 +1,182 @@
+import React, { useEffect } from 'react';
+
+import { IconCaretDownFilled } from '@tabler/icons-react';
+
+import {
+  Button,
+  ButtonProps,
+  Combobox,
+  Command,
+  Popover,
+} from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import {
+  SelectTreeContext,
+  useSelectTreeContext,
+} from 'erxes-ui/modules/select-tree/context/SelectTreeContext';
+import { useSelectTreeHide } from 'erxes-ui/modules/select-tree/hooks/useSelectTreeHide';
+import { hideChildrenAtomFamily } from '../states/selectTreeStates';
+import { useSetAtom } from 'jotai';
+import { ISelectTreeItem } from '../types/selectTreeTypes';
+import { fixOrder } from 'erxes-ui/utils/fixOrder';
+
+export const SelectTreeRoot = ({
+  id,
+  children,
+  open,
+  onOpenChange,
+  length,
+}: {
+  id: string;
+  children: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  length?: number;
+}) => {
+  return (
+    <SelectTreeProvider id={id} length={length}>
+      <Popover open={open} onOpenChange={onOpenChange} modal>
+        {children}
+      </Popover>
+    </SelectTreeProvider>
+  );
+};
+
+export const SelectTreeProvider = ({
+  id,
+  children,
+  length,
+  ordered,
+}: {
+  id: string;
+  children: React.ReactNode;
+  length?: number;
+  ordered?: boolean;
+}) => {
+  const setHideChildrenState = useSetAtom(hideChildrenAtomFamily(id));
+
+  useEffect(() => {
+    setHideChildrenState([]);
+  }, [length, setHideChildrenState]);
+
+  return (
+    <SelectTreeContext.Provider value={{ id, ordered }}>
+      {children}
+    </SelectTreeContext.Provider>
+  );
+};
+
+export const SelectTreeArrow = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { order: string; hasChildren: boolean }
+>(({ order, hasChildren, ...props }, ref) => {
+  const { toggleHideChildren, isHidden } = useSelectTreeHide(order);
+
+  if (!hasChildren) {
+    return;
+  }
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      {...props}
+      tabIndex={-1}
+      onClick={() => toggleHideChildren(order)}
+      asChild
+    >
+      <div>
+        <IconCaretDownFilled
+          className={cn('transition-transform', isHidden && '-rotate-90')}
+        />
+      </div>
+    </Button>
+  );
+});
+
+export const SelectTreeIndentation = ({ order }: { order: string }) => {
+  const level = order?.match(/[/]/gi)?.length || 0;
+  if (level <= 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full px-3.5 gap-8">
+      {Array.from({ length: level }).map((_, index) => (
+        <div key={index} className="relative">
+          <div className="absolute -top-4 h-8 -left-[0.5px] w-px bg-border flex-none" />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SelectTreeItem = React.forwardRef<
+  React.ElementRef<typeof Command.Item>,
+  React.ComponentPropsWithoutRef<typeof Command.Item> & ISelectTreeItem
+>(({ _id, name, order, hasChildren, selected, ...props }, ref) => {
+  const { ordered } = useSelectTreeContext();
+  const fixedOrder = fixOrder({ order, name });
+
+  const { isHiddenByParent } = useSelectTreeHide(fixedOrder);
+
+  if (!ordered) {
+    return (
+      <SelectTreeCommandItem
+        {...props}
+        _id={_id}
+        name={name}
+        order={order}
+        hasChildren={hasChildren}
+        selected={selected}
+        ref={ref}
+      />
+    );
+  }
+
+  if (isHiddenByParent) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-1 w-full">
+      <SelectTreeIndentation order={fixedOrder ?? ''} />
+      <SelectTreeArrow order={fixedOrder ?? ''} hasChildren={hasChildren} />
+      <SelectTreeCommandItem
+        {...props}
+        _id={_id}
+        name={name}
+        order={order}
+        hasChildren={hasChildren}
+        selected={selected}
+        ref={ref}
+      />
+    </div>
+  );
+});
+
+export const SelectTreeCommandItem = React.forwardRef<
+  React.ElementRef<typeof Command.Item>,
+  React.ComponentPropsWithoutRef<typeof Command.Item> & ISelectTreeItem
+>(({ _id, name, order, hasChildren, selected, children, ...props }, ref) => {
+  return (
+    <Command.Item
+      className={cn(
+        'py-0 items-center flex-1 overflow-hidden justify-start',
+        props.className,
+        selected && 'text-primary',
+      )}
+      {...props}
+      ref={ref}
+    >
+      {children}
+      <Combobox.Check checked={selected} />
+    </Command.Item>
+  );
+});
+
+export const SelectTree = Object.assign(SelectTreeRoot, {
+  Item: SelectTreeItem,
+  Provider: SelectTreeProvider,
+});

package/src/modules/select-tree/context/SelectTreeContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+import { ISelectTreeContext } from 'erxes-ui/modules/select-tree/types/selectTreeTypes';
+
+export const SelectTreeContext = createContext<ISelectTreeContext | null>(null);
+
+export const useSelectTreeContext = () => {
+  const context = useContext(SelectTreeContext);
+  if (!context) {
+    throw new Error(
+      'useSelectTreeContext must be used within a SelectTreeProvider'
+    );
+  }
+  return context;
+};