Merge pull request #2 from ocni-dtu/chrk/download_button

added download button

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @ocni-dtu

.github/workflows/deploy-site.yml

@@ -5,6 +5,9 @@ on:
   # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
+  pull_request:
+    branches:
+      - main
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -39,6 +42,9 @@ jobs:
       - name: NPM Install
         run: npm ci
 
+      - name: Check
+        run: npm run check
+
       - name: Build
         run: npm run build
         env:
@@ -47,13 +53,15 @@ jobs:
           VITE_GITHUB_REPO: ${{ vars.VITE_GITHUB_REPO }}
 
       - name: Upload artifact for deployment job
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         uses: actions/upload-artifact@v3
         with:
           name: node-app
           path: ./dist
 
   deploy:
     runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     needs: build
     environment:
       name: github-pages
@@ -63,13 +71,15 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: node-app
+
       - name: Setup Pages
         uses: actions/configure-pages@v3
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          # Upload entire repository
           path: '.'
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2

package.json

@@ -12,6 +12,8 @@
     "lint:fix": "eslint --fix src/**/*.{tsx,ts}",
     "format": "prettier --check \"**/*.{ts,tsx}\"",
     "format:fix": "prettier --write \"**/*.{ts,tsx}\"",
+    "tsc": "tsc --noEmit",
+    "check": "npm run format && npm run lint && npm run tsc",
     "fix": "npm run lint:fix && npm run format:fix"
   },
   "dependencies": {

src/components/searchElement/searchElement.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import React, { Dispatch, SetStateAction, useMemo, useState } from 'react'
 import { ActionIcon, Card, Grid, Tooltip } from '@mantine/core'
-import { IconChartBar, IconMinus, IconPlus } from '@tabler/icons-react'
+import { IconChartBar, IconDownload, IconMinus, IconPlus } from '@tabler/icons-react'
 import { getGitHubFile, SearchItem } from '../../queries'
 import { SearchElementTitle } from '../searchElementTitle'
 import { SearchElementField } from '../searchElementField'
@@ -45,6 +45,17 @@ export const SearchElement = ({
     }
   }
 
+  const handleDownloadClick = () => {
+    const base64doc = btoa(JSON.stringify(data, undefined, 2))
+    const a = document.createElement('a')
+    const e = new MouseEvent('click')
+
+    a.download = `${data.name}.json`
+    a.href = 'data:text/json;base64,' + base64doc
+    a.dispatchEvent(e)
+    window.umami.track(`Download EPD Button - ${data.name} - ${data.id}`)
+  }
+
   const gwpData = useMemo(() => {
     if (!data) {
       return []
@@ -100,6 +111,16 @@ export const SearchElement = ({
                 {expanded ? <IconMinus size='1.1rem' /> : <IconPlus size='1.1rem' />}
               </Tooltip>
             </ActionIcon>
+            <ActionIcon
+              variant='default'
+              style={{ float: 'right' }}
+              sx={{ marginRight: 5 }}
+              onClick={handleDownloadClick}
+            >
+              <Tooltip label='Download EPD'>
+                <IconDownload size='1.1rem' />
+              </Tooltip>
+            </ActionIcon>
             <ActionIcon
               variant='default'
               style={{ float: 'right' }}

src/main.tsx

@@ -15,3 +15,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     </BrowserRouter>
   </React.StrictMode>,
 )
+
+declare global {
+  interface Window {
+    umami: {
+      track: (text: string) => void
+    }
+  }
+}