ui: move hide-completed toggle into filter bar as checkbox next to SMS filter
This commit is contained in:
parent
a3cd0838f0
commit
0cdd9f52a4
|
|
@ -487,27 +487,7 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], totalGroups: totalGr
|
||||||
Перетаскивайте секции за ручку слева, чтобы изменить порядок отображения.
|
Перетаскивайте секции за ручку слева, чтобы изменить порядок отображения.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<Badge tone="neutral">{totalGroupsProp ?? totalGroups} групп</Badge>
|
||||||
<Badge tone="neutral">{totalGroupsProp ?? totalGroups} групп</Badge>
|
|
||||||
{typeof onToggleHideCompleted === "function" && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => onToggleHideCompleted((prev) => !prev)}
|
|
||||||
title={hideCompleted ? "Показать доставленные/отгруженные" : "Скрыть доставленные/отгруженные"}
|
|
||||||
className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition ${
|
|
||||||
hideCompleted
|
|
||||||
? "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text)]"
|
|
||||||
: "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-accent)]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
className={`inline-block h-2 w-2 rounded-full ${hideCompleted ? "bg-[var(--color-accent)]" : "bg-[var(--color-text-muted)]"}`}
|
|
||||||
/>
|
|
||||||
{hideCompleted ? "Скрыть завершённые" : "Показать завершённые"}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<OrderFilters
|
<OrderFilters
|
||||||
|
|
@ -515,6 +495,8 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], totalGroups: totalGr
|
||||||
setFilters={setFilters}
|
setFilters={setFilters}
|
||||||
statusOptions={statusOptions}
|
statusOptions={statusOptions}
|
||||||
cities={cities}
|
cities={cities}
|
||||||
|
hideCompleted={hideCompleted}
|
||||||
|
onToggleHideCompleted={onToggleHideCompleted}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!hasActiveFilters && totalGroups > PAGE_SIZE && (
|
{!hasActiveFilters && totalGroups > PAGE_SIZE && (
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ const DropdownSelect = ({ value, options, onChange, placeholder }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities = [] }) => {
|
export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities = [], hideCompleted = true, onToggleHideCompleted }) => {
|
||||||
const statusValue = filters.displayStatus || filters.status || "all";
|
const statusValue = filters.displayStatus || filters.status || "all";
|
||||||
const selectedStatusLabel = statusOptions.find((option) => option.value === statusValue)?.label || statusValue;
|
const selectedStatusLabel = statusOptions.find((option) => option.value === statusValue)?.label || statusValue;
|
||||||
const [isStatusOpen, setIsStatusOpen] = React.useState(false);
|
const [isStatusOpen, setIsStatusOpen] = React.useState(false);
|
||||||
|
|
@ -196,12 +196,28 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
|
||||||
placeholder="Тип получения"
|
placeholder="Тип получения"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DropdownSelect
|
<div className="flex items-end gap-3">
|
||||||
value={filters.smsStatus || "all"}
|
<DropdownSelect
|
||||||
options={smsProblemOptions}
|
value={filters.smsStatus || "all"}
|
||||||
onChange={(v) => updateFilter("smsStatus", v)}
|
options={smsProblemOptions}
|
||||||
placeholder="Проблемы SMS"
|
onChange={(v) => updateFilter("smsStatus", v)}
|
||||||
/>
|
placeholder="Проблемы SMS"
|
||||||
|
/>
|
||||||
|
{typeof onToggleHideCompleted === "function" && (
|
||||||
|
<label
|
||||||
|
className="mb-0.5 flex shrink-0 cursor-pointer select-none items-center gap-2 text-sm text-[var(--color-text)]"
|
||||||
|
title="Доставленные и отгруженные заказы скрыты"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={hideCompleted}
|
||||||
|
onChange={() => onToggleHideCompleted((prev) => !prev)}
|
||||||
|
className="h-4 w-4 cursor-pointer accent-[var(--color-accent)]"
|
||||||
|
/>
|
||||||
|
<span>Скрыть завершённые</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
className="h-[46px] py-0"
|
className="h-[46px] py-0"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue