[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 })}