From 4cbfea40e42b6ad6dcf5006b1b863b03116aead7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Fagundes?= Date: Thu, 6 Jun 2024 10:28:18 -0300 Subject: [PATCH] feat: added handle print on donation item --- package-lock.json | 11 +++ package.json | 1 + src/hooks/useDonations/types.ts | 8 +- .../DonationHistoryListItem.tsx | 77 ++++++++++++++----- .../DonationHistoryListItem/types.ts | 4 +- 5 files changed, 81 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3e9020bd..97bb118c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "react-input-mask": "^2.0.4", "react-router-dom": "^6.23.0", "react-select": "^5.8.0", + "react-to-print": "^2.15.1", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "yup": "^1.4.0" @@ -5740,6 +5741,16 @@ } } }, + "node_modules/react-to-print": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.15.1.tgz", + "integrity": "sha512-1foogIFbCpzAVxydkhBiDfMiFYhIMphiagDOfcG4X/EcQ+fBPqJ0rby9Wv/emzY1YLkIQy/rEgOrWQT+rBKhjw==", + "license": "MIT", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index bd6d7a11..c1f22314 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react-input-mask": "^2.0.4", "react-router-dom": "^6.23.0", "react-select": "^5.8.0", + "react-to-print": "^2.15.1", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "yup": "^1.4.0" diff --git a/src/hooks/useDonations/types.ts b/src/hooks/useDonations/types.ts index 787e522f..54b76468 100755 --- a/src/hooks/useDonations/types.ts +++ b/src/hooks/useDonations/types.ts @@ -10,11 +10,17 @@ export interface IUseDonationsData { export interface IDonationsData { id: string; - userId: string; + user: { + id: string; + name: string; + lastName: string; + phone: string; + }; status: DonateOrderStatus; shelter: { id: string; name: string; + address: string; }; donationOrderSupplies: { quantity: number; diff --git a/src/pages/DonationsHistory/components/DonationHistoryListItem/DonationHistoryListItem.tsx b/src/pages/DonationsHistory/components/DonationHistoryListItem/DonationHistoryListItem.tsx index 375d3e28..094c6a72 100644 --- a/src/pages/DonationsHistory/components/DonationHistoryListItem/DonationHistoryListItem.tsx +++ b/src/pages/DonationsHistory/components/DonationHistoryListItem/DonationHistoryListItem.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react'; +import { Fragment, createRef, useMemo, useState } from 'react'; import { format } from 'date-fns'; import { ChevronDown, @@ -9,16 +9,29 @@ import { Printer, } from 'lucide-react'; import clsx from 'clsx'; +import { useReactToPrint } from 'react-to-print'; import { IDonationHistoryListItem } from './types'; -import { SupplyMeasureMap } from '@/lib/utils'; +import { SupplyMeasureMap, cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { DonateOrderStatus } from '@/service/donationOrder/types'; import { DonationHistoryStatus } from '../DonationHistoryStatus'; const DonationHistoryListItem = (props: IDonationHistoryListItem) => { - const { data: donation, onCancel, onConfirm, loading } = props; + const { + data: donation, + onCancel, + onConfirm, + loading, + className = '', + ...rest + } = props; const [visible, setVisible] = useState(false); + const divRef = createRef(); + const handlePrint = useReactToPrint({ + removeAfterPrint: true, + onBeforePrint: () => setVisible(true), + }); const accordeonLabel = useMemo( () => (visible ? 'Ocultar itens doados' : 'Mostrar itens doados'), [visible] @@ -28,19 +41,47 @@ const DonationHistoryListItem = (props: IDonationHistoryListItem) => { [visible] ); + if (!donation) return ; + return ( -
- - - -
- - Doação para - -

{donation.shelter.name}

+
+
+

🛟 SOS RS

+

sos-rs.com

+

+ O Rio Grande do Sul agradece sua doação +

+

Cada doação importa

+

Juntos somos mais fortes!

+
+
+ + handlePrint(null, () => divRef.current)} + className="stroke-gray-900 hover:stroke-gray-700 active:stroke-gray-800 h-5 w-5 cursor-pointer print:hidden" + /> + + Doação de +

+ {donation.user.name} {donation.user.lastName} / {donation.user.phone} +

+ para +

+ {donation.shelter.name} em {donation.shelter.address} +

às {format(new Date(donation.createdAt), "HH'h'mm 'de' dd/MM/yy")} @@ -48,13 +89,13 @@ const DonationHistoryListItem = (props: IDonationHistoryListItem) => { -
    +
      {donation.donationOrderSupplies.map((s, idx) => (
    • {
      • ))}
    -
    +