Merge pull request #237 from bcgov/feature/tenantUiBackend

Tenant UI structure

services/tenant-ui/.gitignore

@@ -0,0 +1,18 @@
+# Credentials
+.env
+
+# Configurations
+.vscode
+
+# Temporary files
+*.log
+*.swp
+*.zip
+*.tgz
+
+# Temporary Code
+node_modules
+dist
+
+# Test data
+frontend/public/test_schemas.json

services/tenant-ui/README.md

@@ -0,0 +1,55 @@
+# Traction Tenant UI
+
+## Overview
+
+The Tenant UI is a frontend web dashboard that will authenticate a wallet key/secret and allow a user to make calls for that wallet to the Traction API.
+
+The architechture consists of
+- A Node app that serves the frontend, handles environment configuration, and can provide any minimal Tenant-UI-specific business functionality (like sending an email or something)
+- A Vue3 frontend app providing the UI
+
+## Set up your configuration
+In tenant-ui/src/config add a `local.json` file to add any specific config you'd like for your local instance (otheriwse see `default.json` for defaults). At this point the only thing you'll probably want to override is the Traction URL. So your local.json can just look like this for example:
+
+```
+{
+  "server": {
+    "tractionUrl": "https://traction-api-test.apps.silver.devops.gov.bc.ca/"
+  }
+}
+```
+
+## Running the App
+
+To just start up the app on your local navigate a terminal to `services/tenant-ui/` and install the libraries
+
+```bash
+npm ci
+cd frontend
+npm ci
+```
+
+start the API from `services/tenant-ui/`
+```bash
+npm run start
+```
+
+This starts up the API and builds the FE and serves the frontend from [here](localhost:8080)
+
+## Developing
+
+To develop the backend and frontend you'll want hot-reloading and the 2 things run as separate processes so from `services/tenant-ui/` run
+
+```bash
+npm ci
+npm run dev
+```
+
+and then in a separate terminal in `services/tenant-ui/frontend`
+
+```bash
+npm ci
+npm run dev
+```
+
+The Vite hot-module-reload app will serve from [here](http://127.0.0.1:5173/).

services/tenant-ui/config/default.json

@@ -0,0 +1,15 @@
+{
+    "frontend": {
+      "apiPath": "api/",
+      "basePath" : "/"
+    },
+    "server": {
+      "apiPath": "/api",
+      "basePath" : "/",
+      "bodyLimit": "30mb",
+      "logLevel": "http",
+      "port": "8080",
+      "tractionUrl": "http://localhost:5100"
+    }
+  }
+

services/tenant-ui/config/local.json

@@ -0,0 +1,5 @@
+{
+  "server": {
+    "tractionUrl": "https://traction-api-test.apps.silver.devops.gov.bc.ca/"
+  }
+}

services/tenant-ui/frontend/.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# I recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

services/tenant-ui/frontend/.eslintrc

@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-recommended",
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "@vue/prettier",
+      "@vue/prettier/@typescript-eslint"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 2021
+    },
+    "plugins": [
+    ],
+    "rules": {
+    }
+  }

services/tenant-ui/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

services/tenant-ui/frontend/.prettierrc

@@ -0,0 +1,4 @@
+trailingComma: "es5"
+semi: true
+singleQuote: true
+printWidth: 200

services/tenant-ui/frontend/README.md

@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

services/tenant-ui/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>