admin/zapishis-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FloatingActionPanel: block buttons while pending request

Browse Source
This commit is contained in:
vchikalkin 2025-06-26 13:50:13 +03:00
parent 46ab2d67dc
commit 8cc7c37f18
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/components/orders/order-buttons.tsx
View File

@ -11,7 +11,7 @@ export function OrderButtons({ documentId }: Readonly<OrderComponentProps>) {
const { data: { order } = {} } = useOrderQuery({ documentId });
const { mutate: updateSlot } = useOrderMutation({ documentId });
const { isPending, mutate: updateSlot } = useOrderMutation({ documentId });
if (!order) return null;
@ -36,6 +36,7 @@ export function OrderButtons({ documentId }: Readonly<OrderComponentProps>) {
return (
<FloatingActionPanel
isLoading={isPending}
onCancel={
isCancelled || (!isMaster && isCancelling) || isCompleted ? undefined : () => handleCancel()
}

5
apps/web/components/schedule/slot-buttons.tsx
View File

@ -10,9 +10,9 @@ import { useRouter } from 'next/navigation';
export function SlotButtons({ documentId }: Readonly<SlotComponentProps>) {
const { data: { slot } = {} } = useSlotQuery({ documentId });
const { mutate: updateSlot } = useSlotMutation({ documentId });
const { isPending: isPendingUpdate, mutate: updateSlot } = useSlotMutation({ documentId });
const { mutate: deleteSlot } = useSlotDelete({ documentId });
const { isPending: isPendingDelete, mutate: deleteSlot } = useSlotDelete({ documentId });
const router = useRouter();
@ -38,6 +38,7 @@ export function SlotButtons({ documentId }: Readonly<SlotComponentProps>) {
return (
<FloatingActionPanel
isLoading={isPendingUpdate || isPendingDelete}
isOpen={isOpened}
onDelete={hasOrders ? undefined : () => handleDeleteSlot()}
onToggle={() => {

7
apps/web/components/shared/action-panel.tsx
View File

@ -5,6 +5,7 @@ import { Card } from '@repo/ui/components/ui/card';
import { Ban, Check, Lock, RotateCcw, Trash2, Unlock } from 'lucide-react';
type FloatingActionPanelProps = {
readonly isLoading?: boolean;
readonly isOpen?: boolean;
readonly onCancel?: () => void;
readonly onConfirm?: () => void;
@ -14,6 +15,7 @@ type FloatingActionPanelProps = {
};
export default function FloatingActionPanel({
isLoading = false,
isOpen,
onCancel,
onConfirm,
@ -38,6 +40,7 @@ export default function FloatingActionPanel({
: 'bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700'
}
`}
disabled={isLoading}
onClick={onToggle}
size="sm"
>
@ -59,6 +62,7 @@ export default function FloatingActionPanel({
{onRepeat && (
<Button
className="w-full rounded-2xl bg-purple-500 text-sm text-white transition-all duration-200 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 sm:w-auto"
disabled={isLoading}
onClick={onRepeat}
size="sm"
>
@ -71,6 +75,7 @@ export default function FloatingActionPanel({
{onDelete && (
<Button
className="w-full rounded-2xl bg-orange-500 text-sm text-white transition-all duration-200 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 sm:w-auto"
disabled={isLoading}
onClick={onDelete}
size="sm"
>
@ -83,6 +88,7 @@ export default function FloatingActionPanel({
{onCancel && (
<Button
className="w-full rounded-2xl bg-red-500 text-sm text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 sm:w-auto"
disabled={isLoading}
onClick={onCancel}
size="sm"
>
@ -95,6 +101,7 @@ export default function FloatingActionPanel({
{onConfirm && (
<Button
className="w-full rounded-2xl bg-green-600 text-sm text-white shadow-lg transition-all duration-200 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 sm:w-auto"
disabled={isLoading}
onClick={onConfirm}
size="sm"
>