Download PDF

apps/www/.content-collections/generated/index.js

@@ -1,4 +1,4 @@
-// generated by content-collections at Tue Jul 30 2024 11:03:01 GMT+0200 (Central European Summer Time)
+// generated by content-collections at Wed Jul 31 2024 07:46:36 GMT+0200 (Central European Summer Time)
 
 import allDocs from "./allDocs.js";
 import allMetas from "./allMetas.js";

apps/www/package.json

@@ -72,6 +72,7 @@
     "react-leaflet": "^4.2.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
+    "react-to-pdf": "^1.0.1",
     "react-wrap-balancer": "^1.1.0",
     "recharts": "^2.12.7",
     "sharp": "^0.32.6",

apps/www/src/app/(settings)/settings/import/_components/ConnectorButton.tsx

@@ -40,7 +40,16 @@ const ConnectorButton: React.FC<ConnectorButtonProps> = ({
   const handleOAuth = async () => {
     setIsLoading(true)
     try {
-      const response = await axios.get(`/api/oauth/${serviceName}/initiate`)
+      const response = await axios.get(`/api/oauth/${serviceName}/initiate`, {
+        headers: {
+          "Cache-Control": "no-cache",
+          Pragma: "no-cache",
+          Expires: "0",
+        },
+        params: {
+          _: new Date().getTime(),
+        },
+      })
       console.debug("YYY: Axios URL content:", response)
       const data = response.data
       window.location.href = data.url

apps/www/src/app/(tenant)/tenant/[id]/contract/editor/page.tsx

@@ -18,39 +18,6 @@ export default async function TenantEditPage({
 
   try {
     const tenantDetails = await getTenantDetails(tenantId)
-
-    // const missingFields: string[] = []
-    // if (!tenantDetails?.contacts || tenantDetails.contacts.length === 0) {
-    //   missingFields.push("Du må legge til kontaktperson")
-    // }
-    // if (!tenantDetails?.contracts || tenantDetails.contracts.length === 0) {
-    //   missingFields.push("Du må legge til kontrakt")
-    // }
-
-    // if (missingFields.length > 0) {
-    //   return (
-    //     <DashboardShell>
-    //       <DashboardHeader
-    //         heading="Kontrakter"
-    //         text="Du må fikse følgende før du kan lage kontrakt."
-    //       />
-    //       <EmptyPlaceholder>
-    //         <EmptyPlaceholder.Icon name="help" />
-    //         <EmptyPlaceholder.Title>Du mangler følgende</EmptyPlaceholder.Title>
-    //         <EmptyPlaceholder.Description>
-    //           <ul>
-    //             {missingFields.map((field, index) => (
-    //               <li className="font-bold" key={index}>
-    //                 {field}
-    //               </li>
-    //             ))}
-    //           </ul>
-    //         </EmptyPlaceholder.Description>
-    //       </EmptyPlaceholder>
-    //     </DashboardShell>
-    //   )
-    // }
-
     const contractContent = generateContractContent(tenantDetails)
 
     return (

apps/www/src/components/editor/TenantEditor.tsx

@@ -1,20 +1,69 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
+import { FileDown, Loader2 } from "lucide-react"
+import { usePDF } from "react-to-pdf"
+
+import { Button } from "@dingify/ui/components/button"
 
 import Editor from "@/components/editor/editor"
 
 const TenantEditor = ({ contractContent }) => {
   const [value, setValue] = useState(contractContent)
+  const [isExporting, setIsExporting] = useState(false)
+  const pdfContentRef = useRef(null)
+
+  const tenantName =
+    contractContent.match(/2\.1 Navn\/Firma: (.*?) \(Leietaker\)/)?.[1] ||
+    "Leieavtale"
+
+  const { toPDF, targetRef } = usePDF({
+    filename: `${tenantName.replace(/\s+/g, "_")}_kontrakt.pdf`,
+    method: "save",
+    page: { format: "A4" },
+  })
+
+  useEffect(() => {
+    if (pdfContentRef.current) {
+      pdfContentRef.current.innerHTML = value
+    }
+  }, [value])
+
+  const exportToPDF = async () => {
+    setIsExporting(true)
+    await toPDF()
+    setIsExporting(false)
+  }
 
   return (
-    <div>
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <Button onClick={exportToPDF} disabled={isExporting}>
+          {isExporting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Lager PDF...
+            </>
+          ) : (
+            <>
+              <FileDown className="mr-2 h-4 w-4" />
+              Last ned PDF
+            </>
+          )}
+        </Button>
+      </div>
       <Editor
         content={value}
         onChange={setValue}
         placeholder="Write your post here..."
       />
-      {/* <Tiptap /> */}
+      <div ref={targetRef} style={{ position: "absolute", left: "-9999px" }}>
+        <div
+          ref={pdfContentRef}
+          className="prose max-w-none"
+          style={{ width: "210mm", padding: "20mm" }}
+        />
+      </div>
     </div>
   )
 }

apps/www/src/components/editor/editor.tsx

@@ -1,34 +1,40 @@
-import React from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
+import React from "react"
+import { EditorContent, useEditor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
 
-import EditorToolbar from "./toolbar/editor-toolbar";
+import EditorToolbar from "./toolbar/editor-toolbar"
 
 interface EditorProps {
-  content: string;
-  placeholder?: string;
-  onChange: (value: string) => void;
+  content: string
+  placeholder?: string
+  onChange: (value: string) => void
+  hideToolbar?: boolean
 }
 
-export const Editor = ({ content, placeholder, onChange }: EditorProps) => {
+export const Editor = ({
+  content,
+  placeholder,
+  onChange,
+  hideToolbar = false,
+}: EditorProps) => {
   const editor = useEditor({
     extensions: [StarterKit],
     content: content,
     onUpdate: ({ editor }) => {
-      onChange(editor.getHTML());
+      onChange(editor.getHTML())
     },
-  });
+  })
 
-  if (!editor) return <></>;
+  if (!editor) return <></>
 
   return (
     <div className="prose w-full max-w-none rounded-md border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
-      <EditorToolbar editor={editor} />
+      {!hideToolbar && <EditorToolbar editor={editor} />}
       <div className="rounded-md border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
         <EditorContent editor={editor} placeholder={placeholder} />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Editor;
+export default Editor