@medusajs/dashboard 0.0.1

package/src/components/table/data-table/data-table-filter/number-filter.tsx

@@ -0,0 +1,372 @@
+import { EllipseMiniSolid, XMarkMini } from "@medusajs/icons"
+import { Input, Label, Text, clx } from "@medusajs/ui"
+import * as Popover from "@radix-ui/react-popover"
+import * as RadioGroup from "@radix-ui/react-radio-group"
+import { debounce } from "lodash"
+import {
+  ChangeEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react"
+import { useTranslation } from "react-i18next"
+
+import { useSelectedParams } from "../hooks"
+import { useDataTableFilterContext } from "./context"
+import { IFilter } from "./types"
+
+type NumberFilterProps = IFilter
+
+type Comparison = "exact" | "range"
+type Operator = "lt" | "gt" | "eq"
+
+export const NumberFilter = ({
+  filter,
+  prefix,
+  openOnMount,
+}: NumberFilterProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(openOnMount)
+
+  const { key, label } = filter
+
+  const { removeFilter } = useDataTableFilterContext()
+  const selectedParams = useSelectedParams({
+    param: key,
+    prefix,
+    multiple: false,
+  })
+
+  const currentValue = selectedParams.get()
+
+  const [operator, setOperator] = useState<Comparison | undefined>(
+    getOperator(currentValue)
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnChange = useCallback(
+    debounce((e: ChangeEvent<HTMLInputElement>, operator: Operator) => {
+      const value = e.target.value
+      const curr = JSON.parse(currentValue?.join(",") || "{}")
+      const isCurrentNumber = !isNaN(Number(curr))
+
+      const handleValue = (operator: Operator) => {
+        if (!value && isCurrentNumber) {
+          selectedParams.delete()
+          return
+        }
+
+        if (curr && !value) {
+          delete curr[operator]
+          selectedParams.add(JSON.stringify(curr))
+          return
+        }
+
+        if (!curr) {
+          selectedParams.add(JSON.stringify({ [operator]: value }))
+          return
+        }
+
+        selectedParams.add(JSON.stringify({ ...curr, [operator]: value }))
+      }
+
+      switch (operator) {
+        case "eq":
+          if (!value) {
+            selectedParams.delete()
+          } else {
+            selectedParams.add(value)
+          }
+          break
+        case "lt":
+        case "gt":
+          handleValue(operator)
+          break
+      }
+    }, 500),
+    [selectedParams, currentValue]
+  )
+
+  useEffect(() => {
+    return () => {
+      debouncedOnChange.cancel()
+    }
+  }, [debouncedOnChange])
+
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open)
+
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+
+    if (!open && !currentValue.length) {
+      timeoutId = setTimeout(() => {
+        removeFilter(key)
+      }, 200)
+    }
+  }
+
+  const handleRemove = () => {
+    selectedParams.delete()
+    removeFilter(key)
+  }
+
+  const operators: { operator: Comparison; label: string }[] = [
+    {
+      operator: "exact",
+      label: t("filters.compare.exact"),
+    },
+    {
+      operator: "range",
+      label: t("filters.compare.range"),
+    },
+  ]
+
+  const GT_KEY = `${key}-gt`
+  const LT_KEY = `${key}-lt`
+  const EQ_KEY = key
+
+  return (
+    <Popover.Root modal open={open} onOpenChange={handleOpenChange}>
+      <NumberDisplay
+        label={label}
+        value={currentValue}
+        onRemove={handleRemove}
+      />
+      <Popover.Portal>
+        <Popover.Content
+          data-name="number_filter_content"
+          align="start"
+          sideOffset={8}
+          collisionPadding={24}
+          className={clx(
+            "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] w-[300px] divide-y overflow-y-auto rounded-lg outline-none"
+          )}
+          onInteractOutside={(e) => {
+            if (e.target instanceof HTMLElement) {
+              if (
+                e.target.attributes.getNamedItem("data-name")?.value ===
+                "filters_menu_content"
+              ) {
+                e.preventDefault()
+              }
+            }
+          }}
+        >
+          <div className="p-1">
+            <RadioGroup.Root
+              value={operator}
+              onValueChange={(val) => setOperator(val as Comparison)}
+              className="flex flex-col items-start"
+              orientation="vertical"
+              autoFocus
+            >
+              {operators.map((o) => (
+                <RadioGroup.Item
+                  key={o.operator}
+                  value={o.operator}
+                  className="txt-compact-small hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg grid w-full grid-cols-[20px_1fr] gap-2 rounded-[4px] px-2 py-1.5 text-left outline-none"
+                >
+                  <div className="size-5">
+                    <RadioGroup.Indicator>
+                      <EllipseMiniSolid />
+                    </RadioGroup.Indicator>
+                  </div>
+                  <span className="w-full">{o.label}</span>
+                </RadioGroup.Item>
+              ))}
+            </RadioGroup.Root>
+          </div>
+          <div>
+            {operator === "range" ? (
+              <div className="px-1 pb-3 pt-1" key="range">
+                <div className="px-2 py-1.5">
+                  <Label size="xsmall" weight="plus" htmlFor={GT_KEY}>
+                    {t("filters.compare.greaterThan")}
+                  </Label>
+                </div>
+                <div className="px-2 py-0.5">
+                  <Input
+                    name={GT_KEY}
+                    size="small"
+                    type="number"
+                    defaultValue={getValue(currentValue, "gt")}
+                    onChange={(e) => debouncedOnChange(e, "gt")}
+                  />
+                </div>
+                <div className="px-2 py-1.5">
+                  <Label size="xsmall" weight="plus" htmlFor={LT_KEY}>
+                    {t("filters.compare.lessThan")}
+                  </Label>
+                </div>
+                <div className="px-2 py-0.5">
+                  <Input
+                    name={LT_KEY}
+                    size="small"
+                    type="number"
+                    defaultValue={getValue(currentValue, "lt")}
+                    onChange={(e) => debouncedOnChange(e, "lt")}
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="px-1 pb-3 pt-1" key="exact">
+                <div className="px-2 py-1.5">
+                  <Label size="xsmall" weight="plus" htmlFor={EQ_KEY}>
+                    {label}
+                  </Label>
+                </div>
+                <div className="px-2 py-0.5">
+                  <Input
+                    name={EQ_KEY}
+                    size="small"
+                    type="number"
+                    defaultValue={getValue(currentValue, "eq")}
+                    onChange={(e) => debouncedOnChange(e, "eq")}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
+
+const NumberDisplay = ({
+  label,
+  value,
+  onRemove,
+}: {
+  label: string
+  value?: string[]
+  onRemove: () => void
+}) => {
+  const { t } = useTranslation()
+  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    onRemove()
+  }
+
+  const parsed = JSON.parse(value?.join(",") || "{}")
+  let displayValue = ""
+
+  if (typeof parsed === "object") {
+    const parts = []
+    if (parsed.gt) {
+      parts.push(t("filters.compare.greaterThanLabel", { value: parsed.gt }))
+    }
+
+    if (parsed.lt) {
+      parts.push(
+        t("filters.compare.lessThanLabel", {
+          value: parsed.lt,
+        })
+      )
+    }
+
+    displayValue = parts.join(` ${t("filters.compare.andLabel")} `)
+  }
+
+  if (typeof parsed === "number") {
+    displayValue = parsed.toString()
+  }
+
+  return (
+    <Popover.Trigger
+      asChild
+      className={clx(
+        "bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-pointer select-none items-center rounded-md",
+        "hover:bg-ui-bg-field-hover",
+        "data-[state=open]:bg-ui-bg-field-hover"
+      )}
+    >
+      <div>
+        <div
+          className={clx("flex items-center justify-center px-2 py-1", {
+            "border-r": !!value,
+          })}
+        >
+          <Text size="small" weight="plus" leading="compact">
+            {label}
+          </Text>
+        </div>
+        {!!value && (
+          <div className="border-r p-1 px-2">
+            <Text
+              size="small"
+              weight="plus"
+              leading="compact"
+              className="text-ui-fg-muted"
+            >
+              {t("general.is")}
+            </Text>
+          </div>
+        )}
+        {value && (
+          <div className="flex items-center">
+            <div className="border-r p-1 px-2">
+              <Text size="small" weight="plus" leading="compact">
+                {displayValue}
+              </Text>
+            </div>
+          </div>
+        )}
+        {value && (
+          <div>
+            <button
+              onClick={handleRemove}
+              className={clx(
+                "text-ui-fg-muted transition-fg flex items-center justify-center p-1",
+                "hover:bg-ui-bg-subtle-hover",
+                "active:bg-ui-bg-subtle-pressed active:text-ui-fg-base"
+              )}
+            >
+              <XMarkMini />
+            </button>
+          </div>
+        )}
+      </div>
+    </Popover.Trigger>
+  )
+}
+
+const parseValue = (value: string[] | null | undefined) => {
+  if (!value) {
+    return undefined
+  }
+
+  const val = value.join(",")
+  if (!val) {
+    return undefined
+  }
+
+  return JSON.parse(val)
+}
+
+const getValue = (
+  value: string[] | null | undefined,
+  key: Operator
+): number | undefined => {
+  const parsed = parseValue(value)
+
+  if (typeof parsed === "object") {
+    return parsed[key]
+  }
+  if (typeof parsed === "number" && key === "eq") {
+    return parsed
+  }
+
+  return undefined
+}
+
+const getOperator = (value?: string[] | null): Comparison | undefined => {
+  const parsed = parseValue(value)
+
+  return typeof parsed === "object" ? "range" : "exact"
+}

package/src/components/table/data-table/data-table-filter/select-filter.tsx

@@ -0,0 +1,262 @@
+import { CheckMini, EllipseMiniSolid, XMarkMini } from "@medusajs/icons"
+import { Text, clx } from "@medusajs/ui"
+import * as Popover from "@radix-ui/react-popover"
+import { Command } from "cmdk"
+import { MouseEvent, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import { useSelectedParams } from "../hooks"
+import { useDataTableFilterContext } from "./context"
+import { IFilter } from "./types"
+
+interface SelectFilterProps extends IFilter {
+  options: { label: string; value: unknown }[]
+  multiple?: boolean
+  searchable?: boolean
+}
+
+export const SelectFilter = ({
+  filter,
+  prefix,
+  multiple,
+  searchable,
+  options,
+  openOnMount,
+}: SelectFilterProps) => {
+  const [open, setOpen] = useState(openOnMount)
+  const [search, setSearch] = useState("")
+  const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null)
+
+  const { t } = useTranslation()
+  const { removeFilter } = useDataTableFilterContext()
+
+  const { key, label } = filter
+  const selectedParams = useSelectedParams({ param: key, prefix, multiple })
+  const currentValue = selectedParams.get()
+
+  const labelValues = currentValue
+    .map((v) => options.find((o) => o.value === v)?.label)
+    .filter(Boolean) as string[]
+
+  const handleRemove = () => {
+    selectedParams.delete()
+    removeFilter(key)
+  }
+
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open)
+
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+
+    if (!open && !currentValue.length) {
+      timeoutId = setTimeout(() => {
+        removeFilter(key)
+      }, 200)
+    }
+  }
+
+  const handleClearSearch = () => {
+    setSearch("")
+
+    if (searchRef) {
+      searchRef.focus()
+    }
+  }
+
+  const handleSelect = (value: unknown) => {
+    const isSelected = selectedParams.get().includes(String(value))
+
+    if (isSelected) {
+      selectedParams.delete(String(value))
+    } else {
+      selectedParams.add(String(value))
+    }
+  }
+
+  return (
+    <Popover.Root modal open={open} onOpenChange={handleOpenChange}>
+      <SelectDisplay
+        label={label}
+        value={labelValues}
+        onRemove={handleRemove}
+      />
+      <Popover.Portal>
+        <Popover.Content
+          hideWhenDetached
+          align="start"
+          sideOffset={8}
+          collisionPadding={8}
+          className={clx(
+            "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout z-[1] h-full max-h-[200px] w-[300px] overflow-hidden rounded-lg outline-none"
+          )}
+          onInteractOutside={(e) => {
+            if (e.target instanceof HTMLElement) {
+              if (
+                e.target.attributes.getNamedItem("data-name")?.value ===
+                "filters_menu_content"
+              ) {
+                e.preventDefault()
+                e.stopPropagation()
+              }
+            }
+          }}
+        >
+          <Command className="h-full">
+            {searchable && (
+              <div className="border-b p-1">
+                <div className="grid grid-cols-[1fr_20px] gap-x-2 rounded-md px-2 py-1">
+                  <Command.Input
+                    ref={setSearchRef}
+                    value={search}
+                    onValueChange={setSearch}
+                    className="txt-compact-small placeholder:text-ui-fg-muted bg-transparent outline-none"
+                    placeholder="Search"
+                  />
+                  <div className="flex h-5 w-5 items-center justify-center">
+                    <button
+                      disabled={!search}
+                      onClick={handleClearSearch}
+                      className={clx(
+                        "transition-fg text-ui-fg-muted focus-visible:bg-ui-bg-base-pressed rounded-md outline-none",
+                        {
+                          invisible: !search,
+                        }
+                      )}
+                    >
+                      <XMarkMini />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+            <Command.Empty className="txt-compact-small flex items-center justify-center p-1">
+              <span className="w-full px-2 py-1 text-center">
+                {t("general.noResultsTitle")}
+              </span>
+            </Command.Empty>
+            <Command.List className="h-full max-h-[163px] min-h-[0] overflow-auto p-1 outline-none">
+              {options.map((option) => {
+                const isSelected = selectedParams
+                  .get()
+                  .includes(String(option.value))
+
+                return (
+                  <Command.Item
+                    key={String(option.value)}
+                    className="bg-ui-bg-base hover:bg-ui-bg-base-hover aria-selected:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center gap-x-2 rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none"
+                    value={option.label}
+                    onSelect={() => {
+                      handleSelect(option.value)
+                    }}
+                  >
+                    <div
+                      className={clx(
+                        "transition-fg flex h-5 w-5 items-center justify-center",
+                        {
+                          "[&_svg]:invisible": !isSelected,
+                        }
+                      )}
+                    >
+                      {multiple ? <CheckMini /> : <EllipseMiniSolid />}
+                    </div>
+                    {option.label}
+                  </Command.Item>
+                )
+              })}
+            </Command.List>
+          </Command>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
+
+type SelectDisplayProps = {
+  label: string
+  value?: string | string[]
+  onRemove: () => void
+}
+
+export const SelectDisplay = ({
+  label,
+  value,
+  onRemove,
+}: SelectDisplayProps) => {
+  const { t } = useTranslation()
+  const v = value ? (Array.isArray(value) ? value : [value]) : null
+  const count = v?.length || 0
+
+  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    onRemove()
+  }
+
+  return (
+    <Popover.Trigger asChild>
+      <div
+        className={clx(
+          "bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-pointer select-none items-center overflow-hidden rounded-md",
+          "hover:bg-ui-bg-field-hover",
+          "data-[state=open]:bg-ui-bg-field-hover"
+        )}
+      >
+        <div
+          className={clx(
+            "flex items-center justify-center whitespace-nowrap px-2 py-1",
+            {
+              "border-r": count > 0,
+            }
+          )}
+        >
+          <Text size="small" weight="plus" leading="compact">
+            {label}
+          </Text>
+        </div>
+        <div className="flex w-full items-center overflow-hidden">
+          {count > 0 && (
+            <div className="border-r p-1 px-2">
+              <Text
+                size="small"
+                weight="plus"
+                leading="compact"
+                className="text-ui-fg-muted"
+              >
+                {t("general.is")}
+              </Text>
+            </div>
+          )}
+          {count > 0 && (
+            <div className="flex-1 overflow-hidden border-r p-1 px-2">
+              <Text
+                size="small"
+                leading="compact"
+                weight="plus"
+                className="truncate text-nowrap"
+              >
+                {v?.join(", ")}
+              </Text>
+            </div>
+          )}
+        </div>
+        {v && v.length > 0 && (
+          <div>
+            <button
+              onClick={handleRemove}
+              className={clx(
+                "text-ui-fg-muted transition-fg flex items-center justify-center p-1",
+                "hover:bg-ui-bg-subtle-hover",
+                "active:bg-ui-bg-subtle-pressed active:text-ui-fg-base"
+              )}
+            >
+              <XMarkMini />
+            </button>
+          </div>
+        )}
+      </div>
+    </Popover.Trigger>
+  )
+}