feat: purchase-plans page global update
This commit is contained in:
ivannoskov
235
components/format-selector.tsx
Normal file
235
components/format-selector.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Pencil, Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
interface FormatSelectorProps {
|
||||
value: string | null | undefined;
|
||||
isEditing: boolean;
|
||||
canEdit: boolean;
|
||||
onEdit: () => void;
|
||||
onChange: (value: string | null) => void;
|
||||
onCloseEdit: () => void;
|
||||
}
|
||||
|
||||
interface FormatOption {
|
||||
label: string;
|
||||
topHours: number;
|
||||
feedHours: number | null;
|
||||
}
|
||||
|
||||
const FORMAT_OPTIONS: FormatOption[] = [
|
||||
{ label: "1/24", topHours: 1, feedHours: 24 },
|
||||
{ label: "1/48", topHours: 1, feedHours: 48 },
|
||||
{ label: "1/72", topHours: 1, feedHours: 72 },
|
||||
{ label: "1/7 дней", topHours: 1, feedHours: 168 },
|
||||
{ label: "1/без удаления", topHours: 1, feedHours: null },
|
||||
];
|
||||
|
||||
function parseFormat(format: string | null | undefined): { topHours: number; feedHours: number | null } | null {
|
||||
if (!format) return null;
|
||||
|
||||
const match = format.match(/^(\d+)\/(\d+(?:\s*дней)?|без\s*удаления)$/i);
|
||||
if (!match) return null;
|
||||
|
||||
const topHours = parseInt(match[1], 10);
|
||||
let feedHours: number | null = null;
|
||||
|
||||
if (match[2].toLowerCase().includes('без')) {
|
||||
feedHours = null;
|
||||
} else if (match[2].includes('дней')) {
|
||||
feedHours = parseInt(match[2], 10) * 24;
|
||||
} else {
|
||||
feedHours = parseInt(match[2], 10);
|
||||
}
|
||||
|
||||
return { topHours, feedHours };
|
||||
}
|
||||
|
||||
function formatToString(topHours: number, feedHours: number | null): string {
|
||||
if (feedHours === null) {
|
||||
return "1/без удаления";
|
||||
}
|
||||
if (feedHours >= 168) {
|
||||
const days = feedHours / 24;
|
||||
return `1/${days} дней`;
|
||||
}
|
||||
return `1/${feedHours}`;
|
||||
}
|
||||
|
||||
function findMatchingOption(topHours: number, feedHours: number | null): string | null {
|
||||
const option = FORMAT_OPTIONS.find(
|
||||
o => o.topHours === topHours && o.feedHours === feedHours
|
||||
);
|
||||
return option?.label || null;
|
||||
}
|
||||
|
||||
function FormatOptionItem({
|
||||
option,
|
||||
isSelected,
|
||||
onClick,
|
||||
}: {
|
||||
option: FormatOption;
|
||||
isSelected: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex items-center justify-between px-3 py-2 text-sm rounded-md transition-colors w-full",
|
||||
isSelected ? "bg-muted font-medium" : "hover:bg-muted/50"
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
{isSelected && <Check className="h-4 w-4" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormatSelector({
|
||||
value,
|
||||
isEditing,
|
||||
canEdit,
|
||||
onEdit,
|
||||
onChange,
|
||||
onCloseEdit,
|
||||
}: FormatSelectorProps) {
|
||||
const [showCustom, setShowCustom] = useState(false);
|
||||
const [customTop, setCustomTop] = useState("");
|
||||
const [customFeedText, setCustomFeedText] = useState("");
|
||||
|
||||
const parsed = parseFormat(value);
|
||||
const matchedOption = parsed ? findMatchingOption(parsed.topHours, parsed.feedHours) : null;
|
||||
|
||||
const handleSelectPreset = (option: FormatOption) => {
|
||||
const formatStr = formatToString(option.topHours, option.feedHours);
|
||||
onChange(formatStr);
|
||||
onCloseEdit();
|
||||
};
|
||||
|
||||
const handleSelectCustom = () => {
|
||||
const top = parseInt(customTop, 10);
|
||||
let feed: number | null = null;
|
||||
|
||||
if (customFeedText.toLowerCase().includes('без')) {
|
||||
feed = null;
|
||||
} else if (customFeedText.includes('дней')) {
|
||||
const daysMatch = customFeedText.match(/(\d+)/);
|
||||
if (daysMatch) {
|
||||
feed = parseInt(daysMatch[1], 10) * 24;
|
||||
}
|
||||
} else if (customFeedText) {
|
||||
feed = parseInt(customFeedText, 10);
|
||||
}
|
||||
|
||||
if (!isNaN(top) && feed !== null && !isNaN(feed)) {
|
||||
const formatStr = formatToString(top, feed);
|
||||
onChange(formatStr);
|
||||
onCloseEdit();
|
||||
}
|
||||
};
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm"
|
||||
>
|
||||
<span className="truncate">{value || "Выберите..."}</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-2" align="start">
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs font-medium text-muted-foreground px-2 pb-1">
|
||||
Стандартные форматы
|
||||
</div>
|
||||
{FORMAT_OPTIONS.map((option) => (
|
||||
<FormatOptionItem
|
||||
key={option.label}
|
||||
option={option}
|
||||
isSelected={matchedOption === option.label}
|
||||
onClick={() => handleSelectPreset(option)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="border-t my-2" />
|
||||
|
||||
{!showCustom ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-muted/50 w-full text-left text-muted-foreground"
|
||||
onClick={() => setShowCustom(true)}
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
Свой формат...
|
||||
</button>
|
||||
) : (
|
||||
<div className="px-2 py-2 space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">
|
||||
Свой формат
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Часы"
|
||||
className="h-8 text-xs w-16 shrink-0"
|
||||
value={customTop}
|
||||
onChange={(e) => setCustomTop(e.target.value)}
|
||||
/>
|
||||
<span className="text-xs shrink-0">/</span>
|
||||
<Input
|
||||
placeholder="Часы"
|
||||
className="h-8 text-xs"
|
||||
value={customFeedText}
|
||||
onChange={(e) => setCustomFeedText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 text-xs h-7"
|
||||
onClick={() => setShowCustom(false)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex-1 text-xs h-7"
|
||||
onClick={handleSelectCustom}
|
||||
>
|
||||
Применить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canEdit}
|
||||
className="group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2"
|
||||
onClick={onEdit}
|
||||
>
|
||||
<span className="truncate">{value || "—"}</span>
|
||||
{canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity shrink-0" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user