timesheet rendering

Author: clstaudt

notebooks/walkthrough/03-timetracking.ipynb

@@ -300,15 +300,19 @@
   {
    "cell_type": "markdown",
    "id": "910771d5-2f8d-4f7a-ad26-b180eddca0c4",
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "source": [
     "... or render it to a file:"
    ]
   },
   {
    "cell_type": "markdown",
    "id": "4247beb1-b36c-4bad-8cb5-9655a83583f4",
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "source": [
     "_Set the path to a folder where you want your invoices to appear_:"
    ]
@@ -357,19 +361,17 @@
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "3b5bacc7-c361-45e3-821c-affb6a79975d",
+   "cell_type": "markdown",
+   "id": "5f2c80aa-5ad4-4662-be17-44813b0c67ef",
    "metadata": {},
-   "outputs": [],
    "source": [
-    "!qlmanage -p {invoice_path}"
+    "_Your turn:_"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "688a97b8-cd72-4211-8e7a-6e6cd4ab99b7",
+   "id": "9042bde9-bc0e-4957-9c55-a3e7ba42cefc",
    "metadata": {},
    "outputs": [],
    "source": []

notebooks/walkthrough/04-invoicing.ipynb

@@ -0,0 +1,68 @@
+# HTML invoice template
+
+This repo contains an HTML invoice template you can customize to fit your business needs.
+
+The template is meant to be used either in a browser, or rendered as a PDF with Anvil's [HTML to PDF API](https://www.useanvil.com/docs/api/generate-pdf#html--css-to-pdf).
+
+Here it is rendered in a browser:
+
+<img width="772" alt="HTML invoice template" src="https://user-images.githubusercontent.com/69169/115467239-0ac27c00-a1e6-11eb-836b-190bf0ab264d.png" />
+
+And rendered as a PDF via the HTML to PDF API:
+
+<img width="744" alt="HTML to PDF invoice" src="https://user-images.githubusercontent.com/69169/115467145-e5357280-a1e5-11eb-942b-2e1a0361252b.png" />
+
+## Rendering as a PDF
+
+You can render the invoice with vanilla HTML and CSS or with React and styled-components. For use with React, see the [react-pdf](./react-pdf/README.md) directory.
+
+First [sign up](https://app.useanvil.com/signup) for Anvil and get your [API key](https://www.useanvil.com/docs/api/getting-started#api-key).
+
+There is an [example node script](./generate-pdf.js) you can use to generate the PDF from vanilla HTML and CSS. Run the following command at the root of this repo
+
+```sh
+$ ANVIL_API_TOKEN=<YOURKEY> node ./generate-pdf.js && open ./generate.output.pdf
+```
+
+Vanilla HTML and CSS for the invoice template is in the root of this repo. Feel free to view and edit these files to change the output PDF:
+
+* [invoice.html](./invoice.html) - the invoice's HTML
+* [invoice.css](./invoice.css) - the invoice's CSS
+* [invoice-pdf.css](./invoice-pdf.css) - the invoice's PDF-specific CSS
+
+The script simply reads the HTML and CSS from this repo, then generates a PDF.
+
+```js
+function buildHTMLToPDFPayload () {
+  const html = fs.readFileSync('./invoice.html').toString()
+  const css =
+    fs.readFileSync('./invoice.css').toString() +
+    fs.readFileSync('./invoice-pdf.css').toString()
+  return {
+    type: 'html',
+    title: 'HTML Invoice',
+    data: {
+      html,
+      css,
+    },
+  }
+}
+const exampleData = buildHTMLToPDFPayload()
+const { statusCode, data, errors } = await client.generatePDF(exampleData)
+```
+
+## Running in a browser
+
+Just get a server running at the root of this repo, and visit `index.html`. e.g.
+
+```sh
+python -m SimpleHTTPServer 8080
+```
+
+Visit http://localhost:8080
+
+See [index.html](https://github.com/anvilco/html-pdf-invoice-template/blob/main/index.html) for more information
+
+## License
+
+MIT

templates/timesheet-anvil/README.md

@@ -0,0 +1,55 @@
+// Generate a PDF from the HTML code in this repo.
+//
+// Usage:
+// ANVIL_API_TOKEN=<YOURKEY> node ./generate-pdf.js && open ./generate.output.pdf
+
+const fs = require('fs')
+const path = require('path')
+const Anvil = require('@anvilco/anvil')
+
+const apiKey = process.env.ANVIL_API_TOKEN
+
+function buildHTMLToPDFPayload () {
+  const html = fs.readFileSync('./invoice.html').toString()
+  const css =
+    fs.readFileSync('./invoice.css').toString() +
+    fs.readFileSync('./invoice-pdf.css').toString()
+  return {
+    type: 'html',
+    title: 'HTML Invoice',
+    data: {
+      html,
+      css,
+    },
+    page: {
+      marginLeft: '60px',
+      marginRight: '60px',
+    },
+  }
+}
+
+async function main () {
+  const client = new Anvil({
+    apiKey,
+  })
+
+  const exampleData = buildHTMLToPDFPayload()
+  const { statusCode, data, errors } = await client.generatePDF(exampleData)
+
+  if (statusCode === 200) {
+    const scriptDir = __dirname
+    const outputFilePath = path.join(scriptDir, 'generate.output.pdf')
+    fs.writeFileSync(outputFilePath, data, { encoding: null })
+  } else {
+    console.log(statusCode, JSON.stringify(errors || data, null, 2))
+  }
+}
+
+main()
+  .then(() => {
+    process.exit(0)
+  })
+  .catch((err) => {
+    console.log(err.stack || err.message)
+    process.exit(1)
+  })

templates/timesheet-anvil/generate-pdf.js

@@ -0,0 +1,40 @@
+{
+  "name": "html-pdf-invoice-template",
+  "version": "1.0.0",
+  "description": "An HTML invoice template for use in a browser and with HTML to PDF generation.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "react:generate-pdf": "yarn babel-node ./react-pdf/generate-pdf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anvilco/html-pdf-invoice-template.git"
+  },
+  "keywords": [
+    "pdf",
+    "html",
+    "api",
+    "invoice",
+    "template"
+  ],
+  "author": "Anvil Inc.",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/anvilco/html-pdf-invoice-template/issues"
+  },
+  "homepage": "https://github.com/anvilco/html-pdf-invoice-template#readme",
+  "dependencies": {
+    "@anvilco/anvil": "^2.8.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/node": "^7.14.9",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5"
+  }
+}

templates/timesheet-anvil/img/heart.png

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ]
+}

templates/timesheet-anvil/package.json

@@ -0,0 +1,13 @@
+# React to PDF Invoice
+
+This example uses React and styled-components to generate an invoice PDF. You can use this as a jumping off point to generate a PDF with your own custom React / styled-components code.
+
+To run it, `yarn install` at the root of this repo, then run:
+
+```sh
+ANVIL_API_TOKEN=your_token yarn react:generate-pdf && open ./generate-react.output.pdf
+```
+
+See the [generate-pdf.js](./generate-pdf.js) script, and `components` directory here for the code.
+
+<img width="754" alt="React to HTML to PDF" src="https://user-images.githubusercontent.com/69169/129096427-c32ed4f1-bb7b-4bda-86df-830f9f18a690.png">

templates/timesheet-anvil/react-pdf/.babelrc

@@ -0,0 +1,62 @@
+import React from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+
+import GlobalStyle from './GlobalStyle'
+
+const FooterContainer = styled.div`
+  margin-top: 30px;
+`
+
+const Thanks = styled.div`
+  font-size: 1.125em;
+
+  img {
+    display: inline-block;
+    position: relative;
+    top: 1px;
+    width: 16px;
+    margin-right: 4px;
+  }
+`
+
+const Info = styled.div`
+  position: running(footer);
+  margin-top: -25px;
+  font-size: 0.75em;
+  color: #ccc;
+
+  span {
+    padding: 0 5px;
+    color: black;
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+`
+
+// The `content` here references `position` from the FooterContainer
+const FooterPlacement = createGlobalStyle`
+  @page {
+    @bottom-left {
+      content: element(footer);
+    }
+  }
+`
+
+const Footer = () => (
+  <FooterContainer>
+    <FooterPlacement />
+    <Info>
+      <span>[email protected]</span>|{' '}
+      <span>555 444 6666</span> |{' '}
+      <span>useanvil.com</span>
+    </Info>
+    <Thanks>
+      <img src="https://github.com/anvilco/html-pdf-invoice-template/raw/main/img/heart.png" alt="heart" />
+      <span>Thank you!</span>
+    </Thanks>
+  </FooterContainer>
+)
+
+export default Footer

templates/timesheet-anvil/react-pdf/README.md

@@ -0,0 +1,22 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    font-size: 16px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  table tr td {
+    padding: 0;
+  }
+
+  table tr td:last-child {
+    text-align: right;
+  }
+`
+
+export default GlobalStyle