Refine category select tree gutters and tighten activity charts.
Restore RTL tree lines in category dropdowns, require product category on add, and improve chart bar density with Y-axis tooltips. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
b5c2a31262
commit
e324ae5763
@@ -165,6 +165,8 @@ export function AddProductByAiModal({
|
||||
value={categoryId}
|
||||
onChange={setCategoryId}
|
||||
placeholder="Search and select category..."
|
||||
allowEmpty={false}
|
||||
dropdownVariant="inFlow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -121,6 +121,7 @@ export function CategoryModal({
|
||||
value={parentId}
|
||||
onChange={setParentId}
|
||||
placeholder={t('categories.select.search')}
|
||||
dropdownVariant="inFlow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -81,27 +81,95 @@
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: static;
|
||||
margin-top: 6px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
background: var(--elevated-surface);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--glass-shadow);
|
||||
list-style: none;
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdownOverlay {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 120;
|
||||
max-height: min(320px, 50vh);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dropdownInFlow {
|
||||
position: static;
|
||||
margin-top: 6px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.optionItem {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.optionItemGroupEnd {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.treeGutters {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.treeGutter {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.treeGutterContinue::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
|
||||
}
|
||||
|
||||
.treeGutterBranch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
|
||||
}
|
||||
|
||||
.treeGutterBranch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 0;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
background: rgba(148, 163, 184, 0.55);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.treeGutterBranchLast::before {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
padding: 8px 10px;
|
||||
font-size: var(--field-font-size);
|
||||
font-family: var(--font-ui);
|
||||
@@ -113,34 +181,35 @@
|
||||
}
|
||||
|
||||
.optionChild {
|
||||
border-inline-end: 2px solid rgba(var(--primary-rgb) / 0.38);
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
background: rgba(var(--primary-rgb) / 0.03);
|
||||
padding-inline-end: 14px;
|
||||
padding-inline-end: 4px;
|
||||
}
|
||||
|
||||
.optionChildGroupEnd {
|
||||
margin-bottom: 10px;
|
||||
.optionBody {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.optionParent {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.08);
|
||||
}
|
||||
|
||||
.optionChild:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.1);
|
||||
}
|
||||
|
||||
.optionSelected {
|
||||
background: rgba(var(--primary-rgb) / 0.12);
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.optionChild.optionSelected {
|
||||
border-inline-end-color: var(--primary);
|
||||
background: rgba(var(--primary-rgb) / 0.14);
|
||||
.optionParent.optionSelected {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.optionLabel {
|
||||
|
||||
@@ -16,6 +16,8 @@ interface CategorySearchSelectProps {
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
id?: string
|
||||
allowEmpty?: boolean
|
||||
dropdownVariant?: 'overlay' | 'inFlow'
|
||||
}
|
||||
|
||||
function categoryLabel(category: UserProductCategoryOption, isFa: boolean) {
|
||||
@@ -57,7 +59,6 @@ export function flattenCategoryTree(
|
||||
|
||||
walk(null, 0)
|
||||
|
||||
// Orphans whose parent is missing from the list
|
||||
for (const category of categories) {
|
||||
if (category.parentId && !ids.has(category.parentId)) {
|
||||
if (!result.some((item) => item.id === category.id)) {
|
||||
@@ -96,13 +97,37 @@ function filterCategoryTree(
|
||||
return flat.filter((item) => matchedIds.has(item.id))
|
||||
}
|
||||
|
||||
function isLastChildBeforeParent(items: FlatCategoryOption[], index: number): boolean {
|
||||
function isLastChildInGroup(items: FlatCategoryOption[], index: number): boolean {
|
||||
const current = items[index]
|
||||
if (current.depth === 0) return false
|
||||
const next = items[index + 1]
|
||||
return !next || next.depth < current.depth
|
||||
}
|
||||
|
||||
function CategoryTreeGutters({ depth, isLast }: { depth: number; isLast: boolean }) {
|
||||
if (depth === 0) return null
|
||||
|
||||
return (
|
||||
<div className={styles.treeGutters} aria-hidden>
|
||||
{Array.from({ length: depth }, (_, level) => {
|
||||
const isBranchLevel = level === depth - 1
|
||||
return (
|
||||
<span
|
||||
key={level}
|
||||
className={[
|
||||
styles.treeGutter,
|
||||
isBranchLevel ? styles.treeGutterBranch : styles.treeGutterContinue,
|
||||
isBranchLevel && isLast ? styles.treeGutterBranchLast : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CategorySearchSelect({
|
||||
options,
|
||||
value,
|
||||
@@ -110,6 +135,8 @@ export function CategorySearchSelect({
|
||||
disabled = false,
|
||||
placeholder,
|
||||
id,
|
||||
allowEmpty = false,
|
||||
dropdownVariant = 'overlay',
|
||||
}: CategorySearchSelectProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
@@ -152,6 +179,13 @@ export function CategorySearchSelect({
|
||||
setQuery('')
|
||||
}
|
||||
|
||||
const dropdownClassName = [
|
||||
styles.dropdown,
|
||||
dropdownVariant === 'inFlow' ? styles.dropdownInFlow : styles.dropdownOverlay,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.wrapper}
|
||||
@@ -187,7 +221,7 @@ export function CategorySearchSelect({
|
||||
aria-expanded={open}
|
||||
aria-autocomplete="list"
|
||||
/>
|
||||
{value && !open && !disabled ? (
|
||||
{allowEmpty && value && !open && !disabled ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.clearBtn}
|
||||
@@ -205,47 +239,55 @@ export function CategorySearchSelect({
|
||||
</div>
|
||||
|
||||
{open && !disabled ? (
|
||||
<ul className={styles.dropdown} role="listbox">
|
||||
<ul className={dropdownClassName} role="listbox">
|
||||
{filtered.length === 0 ? (
|
||||
<li className={styles.noResults}>{t('customerProducts.form.fields.noCategories')}</li>
|
||||
) : (
|
||||
filtered.map((option, index) => (
|
||||
<li key={option.id}>
|
||||
<button
|
||||
type="button"
|
||||
filtered.map((option, index) => {
|
||||
const isLastChild = isLastChildInGroup(filtered, index)
|
||||
return (
|
||||
<li
|
||||
key={option.id}
|
||||
className={[
|
||||
styles.option,
|
||||
option.depth > 0 ? styles.optionChild : '',
|
||||
isLastChildBeforeParent(filtered, index) ? styles.optionChildGroupEnd : '',
|
||||
value === option.id ? styles.optionSelected : '',
|
||||
styles.optionItem,
|
||||
isLastChild ? styles.optionItemGroupEnd : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
style={
|
||||
option.depth > 0
|
||||
? {
|
||||
marginInlineStart: `${option.depth * 28}px`,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onClick={() => selectOption(option.id)}
|
||||
role="option"
|
||||
aria-selected={value === option.id}
|
||||
>
|
||||
<span className={styles.optionLabel}>
|
||||
{categoryLabel(option, isFa)}
|
||||
</span>
|
||||
{!isFa && option.nameFa ? (
|
||||
<span className={styles.optionSecondary}>{option.nameFa}</span>
|
||||
) : null}
|
||||
{isFa && option.name && option.name !== option.nameFa ? (
|
||||
<span className={styles.optionSecondary} dir="ltr">
|
||||
{option.name}
|
||||
<button
|
||||
type="button"
|
||||
className={[
|
||||
styles.option,
|
||||
option.depth === 0 ? styles.optionParent : styles.optionChild,
|
||||
value === option.id ? styles.optionSelected : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
onClick={() => selectOption(option.id)}
|
||||
role="option"
|
||||
aria-selected={value === option.id}
|
||||
>
|
||||
{option.depth > 0 ? (
|
||||
<CategoryTreeGutters depth={option.depth} isLast={isLastChild} />
|
||||
) : null}
|
||||
<span className={styles.optionBody}>
|
||||
<span className={styles.optionLabel}>
|
||||
{categoryLabel(option, isFa)}
|
||||
</span>
|
||||
{!isFa && option.nameFa ? (
|
||||
<span className={styles.optionSecondary}>{option.nameFa}</span>
|
||||
) : null}
|
||||
{isFa && option.name && option.name !== option.nameFa ? (
|
||||
<span className={styles.optionSecondary} dir="ltr">
|
||||
{option.name}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
overflow: hidden;
|
||||
margin-inline-start: 28px;
|
||||
margin-bottom: 10px;
|
||||
padding-inline-start: 16px;
|
||||
padding-inline-end: 12px;
|
||||
border-inline-end: 2px solid rgba(var(--primary-rgb) / 0.38);
|
||||
padding-inline-start: 22px;
|
||||
padding-inline-end: 8px;
|
||||
border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
@@ -74,13 +75,26 @@
|
||||
}
|
||||
|
||||
.panel {
|
||||
max-height: min(42vh, 320px);
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 120;
|
||||
max-height: min(320px, 50vh);
|
||||
overflow-y: auto;
|
||||
margin-top: 6px;
|
||||
margin-top: 0;
|
||||
padding: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 10px 28px rgba(31, 38, 135, 0.14);
|
||||
}
|
||||
|
||||
.panelInFlow {
|
||||
position: static;
|
||||
margin-top: 6px;
|
||||
max-height: min(42vh, 320px);
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
||||
@@ -106,6 +106,10 @@
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chartWrapScroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -130,37 +134,55 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
.chartDay {
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.chartMonth {
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.group {
|
||||
flex: 1;
|
||||
min-width: 12px;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chartDay .group {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chartMonth .group {
|
||||
flex: 1;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
gap: 2px;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.barWrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -196,12 +218,23 @@
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 7px;
|
||||
border-radius: 4px 4px 2px 2px;
|
||||
flex: 1 1 0;
|
||||
width: 100%;
|
||||
max-width: 8px;
|
||||
min-width: 2px;
|
||||
border-radius: 3px 3px 1px 1px;
|
||||
transition: height 0.3s ease;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.chartMonth .bar {
|
||||
flex: none;
|
||||
width: 10px;
|
||||
max-width: none;
|
||||
min-width: 10px;
|
||||
border-radius: 4px 4px 2px 2px;
|
||||
}
|
||||
|
||||
.barWrap:hover .bar,
|
||||
.barWrap:focus-within .bar {
|
||||
filter: brightness(1.06);
|
||||
@@ -209,6 +242,23 @@
|
||||
|
||||
.barMonth {
|
||||
width: 10px;
|
||||
max-width: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-family: var(--font-ui);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chartMonth .label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.barPrimary {
|
||||
@@ -227,15 +277,6 @@
|
||||
);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-family: var(--font-ui);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { ApiError } from '../lib/api'
|
||||
import type {
|
||||
@@ -12,7 +12,6 @@ import type { BusinessMessageKey } from '../i18n/messages'
|
||||
import styles from './DailyActivityChart.module.css'
|
||||
|
||||
const CHART_HEIGHT = 180
|
||||
const BAR_GAP = 2
|
||||
|
||||
interface DailyActivityChartProps {
|
||||
titleKey: BusinessMessageKey
|
||||
@@ -90,7 +89,6 @@ export function DailyActivityChart({
|
||||
const [secondaryTotal, setSecondaryTotal] = useState(0)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const chartWrapRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
@@ -146,13 +144,6 @@ export function DailyActivityChart({
|
||||
const yAxisTicks = useMemo(() => buildYAxisTicks(maxValue), [maxValue])
|
||||
const chartScaleMax = yAxisTicks[yAxisTicks.length - 1] ?? 1
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading || error) return
|
||||
const wrap = chartWrapRef.current
|
||||
if (!wrap) return
|
||||
wrap.scrollLeft = wrap.scrollWidth
|
||||
}, [isLoading, error, primaryItems, monthItems, granularity])
|
||||
|
||||
const subtitle = useMemo(() => {
|
||||
if (granularity === 'month') {
|
||||
if (monthItems.length === 0) return t(subtitleKey, { from: '…', to: '…' })
|
||||
@@ -209,7 +200,14 @@ export function DailyActivityChart({
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.chartWrap} ref={chartWrapRef}>
|
||||
<div
|
||||
className={[
|
||||
styles.chartWrap,
|
||||
granularity === 'month' ? styles.chartWrapScroll : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
<div
|
||||
className={styles.chartGrid}
|
||||
style={{ height: CHART_HEIGHT }}
|
||||
@@ -225,7 +223,12 @@ export function DailyActivityChart({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`${styles.chart}${granularity === 'month' ? ` ${styles.chartMonth}` : ''}`}
|
||||
className={[
|
||||
styles.chart,
|
||||
granularity === 'month' ? styles.chartMonth : styles.chartDay,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
style={{ height: CHART_HEIGHT + 28 }}
|
||||
role="img"
|
||||
aria-label={t(titleKey)}
|
||||
@@ -247,7 +250,7 @@ export function DailyActivityChart({
|
||||
|
||||
return (
|
||||
<div key={item.monthKey} className={styles.group}>
|
||||
<div className={styles.bars} style={{ gap: BAR_GAP }}>
|
||||
<div className={styles.bars}>
|
||||
<div className={styles.barWrap}>
|
||||
<div
|
||||
className={`${styles.bar} ${styles.barPrimary} ${styles.barMonth}`}
|
||||
@@ -297,7 +300,7 @@ export function DailyActivityChart({
|
||||
|
||||
return (
|
||||
<div key={item.date} className={styles.group}>
|
||||
<div className={styles.bars} style={{ gap: BAR_GAP }}>
|
||||
<div className={styles.bars}>
|
||||
<div className={styles.barWrap}>
|
||||
<div
|
||||
className={`${styles.bar} ${styles.barPrimary}`}
|
||||
|
||||
@@ -36,10 +36,12 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.clearBtn {
|
||||
@@ -69,30 +71,33 @@
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: static;
|
||||
margin-top: 6px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 8px 24px rgba(31, 38, 135, 0.12);
|
||||
list-style: none;
|
||||
padding: 6px;
|
||||
box-shadow: 0 10px 28px rgba(31, 38, 135, 0.14);
|
||||
animation: dropdownIn 0.15s ease;
|
||||
}
|
||||
|
||||
/* Alias — in-flow is the default so search results expand the parent modal. */
|
||||
.dropdownOverlay {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 120;
|
||||
max-height: min(320px, 50vh);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dropdownInFlow {
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
margin-top: 6px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
margin-top: 6px;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
@@ -107,12 +112,67 @@
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
.optionItem {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.optionItemGroupEnd {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.treeGutters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.treeGutter {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.treeGutterContinue::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
|
||||
}
|
||||
|
||||
.treeGutterBranch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
|
||||
}
|
||||
|
||||
.treeGutterBranch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 0;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
background: rgba(148, 163, 184, 0.55);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.treeGutterBranchLast::before {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
padding: 8px 10px;
|
||||
font-size: var(--field-font-size);
|
||||
font-family: var(--font-ui);
|
||||
text-align: start;
|
||||
@@ -123,34 +183,35 @@
|
||||
}
|
||||
|
||||
.optionChild {
|
||||
border-inline-end: 2px solid rgba(var(--primary-rgb) / 0.38);
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
background: rgba(var(--primary-rgb) / 0.03);
|
||||
padding-inline-end: 14px;
|
||||
padding-inline-end: 4px;
|
||||
}
|
||||
|
||||
.optionChildGroupEnd {
|
||||
margin-bottom: 10px;
|
||||
.optionBody {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.optionParent {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.08);
|
||||
}
|
||||
|
||||
.optionChild:hover {
|
||||
background: rgba(var(--primary-rgb) / 0.1);
|
||||
}
|
||||
|
||||
.optionSelected {
|
||||
background: rgba(var(--primary-rgb) / 0.12);
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.optionChild.optionSelected {
|
||||
border-inline-end-color: var(--primary);
|
||||
background: rgba(var(--primary-rgb) / 0.14);
|
||||
.optionParent.optionSelected {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.optionEn {
|
||||
|
||||
@@ -10,13 +10,13 @@ interface SearchableSelectProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
placeholder?: string
|
||||
/** Show "none" option and clear button (e.g. optional brand or category parent picker). */
|
||||
allowEmpty?: boolean
|
||||
/** Overlay floats over content; inFlow expands the parent (use inside modals). */
|
||||
dropdownVariant?: 'overlay' | 'inFlow'
|
||||
}
|
||||
|
||||
function isLastChildBeforeParent<T extends { depth: number }>(
|
||||
items: T[],
|
||||
index: number,
|
||||
): boolean {
|
||||
function isLastChildInGroup<T extends { depth: number }>(items: T[], index: number): boolean {
|
||||
const current = items[index]
|
||||
if (current.depth === 0) return false
|
||||
const next = items[index + 1]
|
||||
@@ -34,12 +34,37 @@ function categoryLabel(cat: FlatCategory, isFa: boolean) {
|
||||
: cat.nameFa
|
||||
}
|
||||
|
||||
function CategoryTreeGutters({ depth, isLast }: { depth: number; isLast: boolean }) {
|
||||
if (depth === 0) return null
|
||||
|
||||
return (
|
||||
<div className={styles.treeGutters} aria-hidden>
|
||||
{Array.from({ length: depth }, (_, level) => {
|
||||
const isBranchLevel = level === depth - 1
|
||||
return (
|
||||
<span
|
||||
key={level}
|
||||
className={[
|
||||
styles.treeGutter,
|
||||
isBranchLevel ? styles.treeGutterBranch : styles.treeGutterContinue,
|
||||
isBranchLevel && isLast ? styles.treeGutterBranchLast : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SearchableSelect({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
allowEmpty = true,
|
||||
dropdownVariant = 'overlay',
|
||||
}: SearchableSelectProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
@@ -84,6 +109,13 @@ export function SearchableSelect({
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const dropdownClassName = [
|
||||
styles.dropdown,
|
||||
dropdownVariant === 'inFlow' ? styles.dropdownInFlow : styles.dropdownOverlay,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper} ref={containerRef} dir={isFa ? 'rtl' : 'ltr'}>
|
||||
<div className={`${styles.inputWrap} ${open ? styles.inputWrapOpen : ''}`}>
|
||||
@@ -101,7 +133,7 @@ export function SearchableSelect({
|
||||
onFocus={handleFocus}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
/>
|
||||
{value && !open && (
|
||||
{allowEmpty && value && !open ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.clearBtn}
|
||||
@@ -110,14 +142,14 @@ export function SearchableSelect({
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
) : null}
|
||||
<ChevronDown size={16} className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`} />
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<ul className={styles.dropdown} role="listbox">
|
||||
{open ? (
|
||||
<ul className={dropdownClassName} role="listbox">
|
||||
{allowEmpty ? (
|
||||
<li>
|
||||
<li className={styles.optionItem}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.option} ${value === '' ? styles.optionSelected : ''}`}
|
||||
@@ -130,52 +162,62 @@ export function SearchableSelect({
|
||||
{filtered.length === 0 ? (
|
||||
<li className={styles.noResults}>{t('categories.select.empty')}</li>
|
||||
) : (
|
||||
filtered.map((cat, index) => (
|
||||
<li key={cat.id}>
|
||||
<button
|
||||
type="button"
|
||||
filtered.map((cat, index) => {
|
||||
const isLastChild = isLastChildInGroup(filtered, index)
|
||||
return (
|
||||
<li
|
||||
key={cat.id}
|
||||
className={[
|
||||
styles.option,
|
||||
cat.depth > 0 ? styles.optionChild : '',
|
||||
isLastChildBeforeParent(filtered, index) ? styles.optionChildGroupEnd : '',
|
||||
value === cat.id ? styles.optionSelected : '',
|
||||
styles.optionItem,
|
||||
isLastChild ? styles.optionItemGroupEnd : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
style={
|
||||
cat.depth > 0
|
||||
? { marginInlineStart: `${cat.depth * 28}px` }
|
||||
: undefined
|
||||
}
|
||||
onClick={() => selectOption(cat.id)}
|
||||
>
|
||||
{isFa ? (
|
||||
<>
|
||||
<span className={styles.optionFa}>{cat.nameFa}</span>
|
||||
{cat.nameEn ? (
|
||||
<button
|
||||
type="button"
|
||||
className={[
|
||||
styles.option,
|
||||
cat.depth === 0 ? styles.optionParent : styles.optionChild,
|
||||
value === cat.id ? styles.optionSelected : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
onClick={() => selectOption(cat.id)}
|
||||
>
|
||||
{cat.depth > 0 ? (
|
||||
<CategoryTreeGutters depth={cat.depth} isLast={isLastChild} />
|
||||
) : null}
|
||||
<span className={styles.optionBody}>
|
||||
{isFa ? (
|
||||
<>
|
||||
<span className={styles.optionSep}>·</span>
|
||||
<span className={styles.optionEn}>{cat.nameEn}</span>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className={styles.optionEn}>{cat.nameEn}</span>
|
||||
{cat.nameFa ? (
|
||||
<>
|
||||
<span className={styles.optionSep}>·</span>
|
||||
<span className={styles.optionFa}>{cat.nameFa}</span>
|
||||
{cat.nameEn ? (
|
||||
<>
|
||||
<span className={styles.optionSep}>·</span>
|
||||
<span className={styles.optionEn}>{cat.nameEn}</span>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<span className={styles.optionEn}>{cat.nameEn}</span>
|
||||
{cat.nameFa ? (
|
||||
<>
|
||||
<span className={styles.optionSep}>·</span>
|
||||
<span className={styles.optionFa}>{cat.nameFa}</span>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -552,6 +552,7 @@ const en = {
|
||||
'products.details.ratingAria': 'Rating {rate} out of 10',
|
||||
|
||||
'products.form.errorOptions': 'Unable to load form options.',
|
||||
'products.form.errorCategory': 'Please select a category.',
|
||||
'products.form.errorSave': 'Unable to save product.',
|
||||
'products.form.thumbnail': 'Thumbnail Image',
|
||||
'products.form.thumbnailUpload': 'Upload thumbnail image',
|
||||
@@ -632,7 +633,7 @@ const en = {
|
||||
'categories.modal.save': 'Save Category',
|
||||
'categories.modal.saving': 'Saving...',
|
||||
'categories.select.search': 'Search categories...',
|
||||
'categories.select.none': '— None (root category) —',
|
||||
'categories.select.none': '— No parent (top-level category) —',
|
||||
'categories.select.empty': 'No categories found',
|
||||
'categories.select.clear': 'Clear selection',
|
||||
|
||||
@@ -2863,6 +2864,7 @@ const fa: Record<MessageKey, string> = {
|
||||
'products.details.ratingAria': 'امتیاز {rate} از ۱۰',
|
||||
|
||||
'products.form.errorOptions': 'بارگذاری گزینههای فرم ممکن نشد.',
|
||||
'products.form.errorCategory': 'لطفاً دستهبندی را انتخاب کنید.',
|
||||
'products.form.errorSave': 'ذخیره محصول ممکن نشد.',
|
||||
'products.form.thumbnail': 'تصویر بندانگشتی',
|
||||
'products.form.thumbnailUpload': 'آپلود تصویر بندانگشتی',
|
||||
@@ -2943,7 +2945,7 @@ const fa: Record<MessageKey, string> = {
|
||||
'categories.modal.save': 'ذخیره دستهبندی',
|
||||
'categories.modal.saving': 'در حال ذخیره...',
|
||||
'categories.select.search': 'جستجوی دستهبندیها...',
|
||||
'categories.select.none': '— بدون والد (دسته اصلی) —',
|
||||
'categories.select.none': '— بدون دسته والد (دسته سطح بالا) —',
|
||||
'categories.select.empty': 'دستهبندیای یافت نشد',
|
||||
'categories.select.clear': 'پاک کردن انتخاب',
|
||||
|
||||
|
||||
@@ -191,6 +191,12 @@ export function AddNewProductPage() {
|
||||
setIsSubmitting(true)
|
||||
setError('')
|
||||
|
||||
if (!categoryId) {
|
||||
setError(t('products.form.errorCategory'))
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const featuredMediaId = await resolveDataUrlToMediaId(
|
||||
thumbnail,
|
||||
@@ -292,6 +298,7 @@ export function AddNewProductPage() {
|
||||
value={categoryId}
|
||||
onChange={setCategoryId}
|
||||
placeholder={t('products.form.categoryPlaceholder')}
|
||||
allowEmpty={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user