feat: initial commit

.env

@@ -0,0 +1,2 @@
+VUE_APP_I18N_LOCALE=en
+VUE_APP_I18N_FALLBACK_LOCALE=en

.gitignore

@@ -1,104 +1,9 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
+# npm
+node_modules
+npm-debug.log
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# ide
+/.idea/
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
+# misc
+package-lock.json

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - lts/*

README.md

@@ -1,2 +1,29 @@
-# vip-report-template
-Report template for Variant Call Format (VCF) Report generator
+# Variant Interpretation Pipeline - VCF Report Generator
+See https://github.com/molgenis/vip-report#readme
+See https://github.com/molgenis/vip-report-api#readme
+
+## Report Template
+Report template that can be used to generate a report for any VCF (Variant Call Format) file.
+
+### Project setup
+```
+npm install
+```
+
+#### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+#### Compiles and minifies for production
+```
+npm run build
+```
+
+#### Lints and fixes files
+```
+npm run lint
+```
+
+#### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/). 

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "presets": [
+    "@vue/cli-plugin-babel/preset"
+  ]
+}

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@molgenis/vip-report-template",
+  "version": "0.0.1",
+  "description": "Report Template for Variant Call Format (VCF) Report Generator",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/molgenis/vip-report-template.git"
+  },
+  "license": "LGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/molgenis/vip-report-template/issues"
+  },
+  "homepage": "https://github.com/molgenis/vip-report-template#readme",
+  "dependencies": {
+    "@molgenis/vip-report-api": "0.0.1",
+    "bootstrap-vue": "^2.1.0",
+    "core-js": "^3.6.4",
+    "html-webpack-plugin": "latest",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.17.3",
+    "vue-select": "^3.10.3"
+  },
+  "devDependencies": {
+    "@babel/polyfill": "^7.7.0",
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "babel-eslint": "^10.1.0",
+    "bootstrap": "^4.3.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "html-webpack-inline-source-plugin": "0.0.10",
+    "mutationobserver-shim": "^0.3.3",
+    "popper.js": "^1.16.0",
+    "portal-vue": "^2.1.6",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-bootstrap-vue": "~0.6.0",
+    "vue-cli-plugin-i18n": "~1.0.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- blank embedded favicon -->
+    <link rel="icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" type="image/x-icon">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,39 @@
+<template>
+    <div id="app">
+        <b-container fluid>
+            <b-alert v-if="reportRecords < totalRecords" show dismissible variant="warning">
+                {{ $t('variantWarning', [reportRecords, totalRecords]) }}
+            </b-alert>
+            <b-alert v-if="reportSamples < totalSamples" show dismissible variant="warning">
+                {{ $t('sampleWarning', [reportSamples, totalSamples]) }}
+            </b-alert>
+            <SampleNav/>
+        </b-container>
+    </div>
+</template>
+
+<script>
+    import SampleNav from "./components/SampleNav";
+
+    export default {
+        name: 'App',
+        components: {SampleNav},
+        data: function () {
+            return {
+                reportRecords: null,
+                totalRecords: null,
+                reportSamples: null,
+                totalSamples: null
+            }
+        },
+        async created() {
+            const records = await this.$api.get('records', {size: 0})
+            this.reportRecords = records.page.totalElements
+            this.totalRecords = records.total
+
+            const samples = await this.$api.get('samples', {size: 0})
+            this.reportSamples = samples.page.totalElements
+            this.totalSamples = samples.total
+        }
+    }
+</script>