Merge branch 'documentaion/25-add-documentation' into 'development'

Resolve "Add documentation in README, DEVELOPING and CHANGELOG"

Closes #25

See merge request denbi/object-storage-access-ui!21

DEVELOPING.md

+# Development Setup
+
+## Install Dependencies
+Install dependencies with `npm`.
+```shell
+npm install
+```
+
+## Environment Setup
+Create the file `.env` with the following (or similar) content. See the [README](README.md) for details on these
+environment variables.
+```
+VITE_API_BASE_URL=http://localhost:9999/api
+VITE_S3_URL=http://localhost:9998
+```
+## Backend Setup
+Clone the [repository](https://gitlab.ub.uni-bielefeld.de/denbi/object-storage-access) for the backend and set up the
+service for developing.
+
+## Run linter and type check
+```shell
+npm run lint
+npm run type-check
+```
+
+## Run Dev Server
+Start the dev service with `npm`
+```shell
+npm run dev
+```
+
+## Create axios client
+To create the axios client from the OpenAPI definition of the backend, start the backend and execute the following command
+```shell
+npm run generate-client
+```

README.md

 # ProxyAPI-UI
 
-This template should help get you started developing with Vue 3 in Vite.
+## Description
 
-## Recommended IDE Setup
+This is the Frontend to manage your S3 Buckets and start Workflows. For further information visit the repository for the
+backend https://gitlab.ub.uni-bielefeld.de/denbi/object-storage-access
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Environment Variables
 
-## Type Support for `.vue` Imports in TS
+These needs to be present when bundling the JavaScript files.   
+This needs to be considered when building docker images.  
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+| Variable            | Default                   | Value     | Description                            |
+|---------------------|---------------------------|-----------|----------------------------------------|
+| `VITE_API_BASE_URL` | http://localhost:9999/api | HTTP URL  | Base URL for the API as backend        |
+| `VITE_S3_URL`       | unset                     | HTTP URL  | URL of the S3 storage to interact with |
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+## Getting started
 
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
+This service depends on multiple other services. See [DEVELOPING.md](DEVELOPING.md) how to set these up for developing
+on your local machine.

package.json

@@ -11,39 +11,39 @@
     "generate-client": "openapi --input http://localhost:9999/api/openapi.json --output src/client --client axios"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.186.0",
-    "@aws-sdk/s3-request-presigner": "^3.186.0",
-    "@aws-sdk/lib-storage": "^3.186.0",
+    "@aws-sdk/client-s3": "^3.216.0",
+    "@aws-sdk/s3-request-presigner": "^3.216.0",
+    "@aws-sdk/lib-storage": "^3.216.0",
     "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.2",
-    "bootstrap-icons": "^1.9.1",
-    "dayjs": "^1.11.5",
+    "bootstrap": "^5.2.3",
+    "bootstrap-icons": "^1.10.2",
+    "dayjs": "^1.11.6",
     "filesize": "^10.0.5",
-    "pinia": "^2.0.23",
-    "vue": "^3.2.40",
-    "vue-router": "^4.1.5",
+    "pinia": "^2.0.26",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6",
     "vue3-cookies": "^1.0.6"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/bootstrap": "^5.2.5",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@types/bootstrap": "^5.2.6",
     "@types/node": "^16.11.45",
-    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.1",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/tsconfig": "^0.1.3",
-    "axios": "^1.1.2",
-    "eslint": "^8.23.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "axios": "^1.2.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-vue": "^9.7.0",
     "npm-run-all": "^4.1.5",
     "openapi-typescript-codegen": "^0.23.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.8.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "sass": "^1.54.9",
+    "sass": "^1.56.1",
     "typescript": "~4.7.4",
-    "vite": "^3.1.7",
-    "vue-tsc": "^0.40.13"
+    "vite": "^3.2.4",
+    "vue-tsc": "^1.0.9"
   }
 }

src/views/LoginView.vue

@@ -36,7 +36,7 @@ onMounted(() => {
       aria-atomic="true"
       class="toast text-bg-danger align-items-center border-0"
       style="--bs-bg-opacity: 0.7"
-      data-bs-config='{"delay":8000}'
+      data-bs-config="{'delay': 8000}"
       data-bs-autohide="true"
       id="loginErrorToast"
     >