[WIP] Download contract

frontend/src/components/Contracts/Row/index.tsx

@@ -1,8 +1,9 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { type Contract } from "@/services/resources/contracts";
-import { IconX } from "@tabler/icons-react";
+import { IconDownload, IconX } from "@tabler/icons-react";
 import { t } from "@/config/i18n";
-import { useDeleteContract } from "@/services/api";
+import { useDeleteContract, useGetContractFile } from "@/services/api";
+import { useCallback } from "react";
 
 export type ContractRowProps = {
     contract: Contract;
@@ -12,7 +13,19 @@ export default function ContractRow({ contract }: ContractRowProps) {
     // const [searchParams] = useSearchParams();
     const deleteMutation = useDeleteContract();
     // const navigate = useNavigate();
+    const {refetch, isFetching} = useGetContractFile(contract.id)
+    const handleDownload = useCallback(async () => {
+        const { data } = await refetch();
+        if (!data)
+            return;
 
+        const url = URL.createObjectURL(data.blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = data.filename;
+        link.click();
+        URL.revokeObjectURL(url);
+    }, [useGetContractFile])
     return (
         <Table.Tr key={contract.id}>
             <Table.Td>
@@ -37,6 +50,20 @@ export default function ContractRow({ contract }: ContractRowProps) {
                         <IconEdit />
                     </ActionIcon>
                 </Tooltip> */}
+                <Tooltip
+                    label={t("download contract")}
+                >
+                    <ActionIcon
+                        size="sm"
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            handleDownload()
+                        }}
+                    >
+                        <IconDownload/>
+                    </ActionIcon>
+                </Tooltip>
                 <Tooltip label={t("remove contract", { capfirst: true })}>
                     <ActionIcon
                         color="red"

frontend/src/components/Navbar/index.tsx

@@ -21,7 +21,7 @@ export function Navbar() {
             </Group>
             <NavLink
                 className={"navLink"}
-                aria-label={t("login with keycloak")}
+                aria-label={t("login with keycloak", { capfirst: true })}
                 to={`${Config.backend_uri}/auth/login`}
             >
                 {t("login with keycloak", { capfirst: true })}

frontend/src/pages/Dashboard/index.tsx

@@ -14,7 +14,7 @@ export default function Dashboard() {
             defaultValue={"help"}
             onChange={(value) => navigate(`/dashboard/${value}`)}
         >
-            <Tabs.List>
+            <Tabs.List mb="md">
                 <Tabs.Tab value="help">{t("help", { capfirst: true })}</Tabs.Tab>
                 <Tabs.Tab value="productors">{t("productors", { capfirst: true })}</Tabs.Tab>
                 <Tabs.Tab value="products">{t("products", { capfirst: true })}</Tabs.Tab>

frontend/src/services/api.ts

@@ -586,6 +586,25 @@ export function useGetContract(
     });
 }
 
+
+export function useGetContractFile(
+    id?: number,
+) {
+    return useQuery({
+        queryKey: ["contract"],
+        queryFn: () => fetch(`${Config.backend_uri}/contracts/${id}/file`)
+            .then(async (res) => {
+            const blob = await res.blob();
+            const disposition = res.headers.get("Content-Disposition");
+            const filename = disposition && disposition?.includes("filename=") ? 
+                disposition.split("filname=")[1].replace(/"/g, "") :
+                `contract_${id}.pdf`
+            return {blob, filename};
+        }),
+        enabled: !!id,
+    });
+}
+
 export function useCreateContract() {
     const queryClient = useQueryClient();