Commit 808954b3 authored by Benedikt Heinrichs's avatar Benedikt Heinrichs
Browse files

Merge branch 'Product/1463-aims' into 'v0.5'

New: Create Base Frame for the AIMS Frontend

See merge request !2
parents 3aa9e3ea 5d06b4c7
> 1%
last 2 versions
not dead
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
include:
- project: coscine/tools/gitlab-ci-templates
file:
- /docker-runner.yml
- /nodejs.yml
stages:
- build
# there are more stages in the imported file but we only want to import some
# - test
- publish
build-branch:
extends: .build-branch
build-npm-release:
extends: .build-npm-release
publish-gitlab:
extends: .publish-gitlab-release
packageExtensions:
"@vue/cli-service@*":
peerDependencies:
"@vue/cli-plugin-eslint": "*"
"@vue/cli-plugin-router": "*"
"@vue/cli-plugin-typescript": "*"
"fork-ts-checker-webpack-plugin@*":
dependencies:
"vue-template-compiler": "*"
peerDependencies:
"typescript": "*"
"vue-i18n@*":
dependencies:
"vue": "^2.6.12"
"vue-material-design-icons@*":
dependencies:
"vue": "^2.6.12"
"vue-router@*":
dependencies:
"vue": "^2.6.12"
"vuex@*":
dependencies:
"vue": "^2.6.12"
"bootstrap-vue@*":
dependencies:
"vue": "^2.6.12"
"jquery": "*"
# AimsFrontend
# Aims Frontend
This repository contains the common frontend for the AIMS project.
\ No newline at end of file
This repository contains the common frontend for the AIMS project.
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
{
"name": "aimsfrontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@rdfjs/data-model": "^1.2.0",
"@rdfjs/dataset": "^1.1.0",
"bootstrap": "^5.0.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"rdf-ext": "^1.3.1",
"rdf-parse": "^1.8.0",
"vue": "^2.6.12",
"vue-i18n": "^8.24.4",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@types/rdf-ext": "^1.3.8",
"@types/rdf-js": "^4.0.1",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11"
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</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>
<template>
<div id="app">
<!-- TODO: Here the code for the design is put -->
<div id="nav">
<router-link to="/">Home</router-link>
</div>
<b-container>
<b-row>
<b-col align-self="start">
<b-button variant="success">{{ $t("Create") }}</b-button>
</b-col>
<b-col align-self="end">
<b-button variant="primary">{{ $t("Save") }}</b-button>
</b-col>
</b-row>
<!-- TODO: Create some margin between button row and other components -->
<router-view
:applicationProfile="selectedApplicationProfile"
:definition="definition"
@selectApplicationProfile="selectApplicationProfile"
/>
<StoreModal
:applicationProfile="selectedApplicationProfile"
:definition="definition"
/>
</b-container>
</div>
</template>
<script lang="ts">
import DatasetExt from "rdf-ext/lib/Dataset";
import ApplicationProfile from "@/types/applicationProfile";
import ApplicationProfileImpl from "@/classes/ApplicationProfileImpl";
import factory from "rdf-ext";
import Vue from "vue";
import StoreModal from "@/components/ApplicationProfiles/Modals/Store.vue";
import { parseApplicationProfile } from "@/util/linkedData";
export default Vue.extend({
name: "App",
components: {
StoreModal,
},
data() {
return {
definition: factory.dataset() as DatasetExt,
selectedApplicationProfile: new ApplicationProfileImpl(
"",
"",
[]
) as ApplicationProfile,
};
},
watch: {
selectedApplicationProfile() {
this.setDefinition();
},
},
methods: {
selectApplicationProfile(selectedApplicationProfile: ApplicationProfile) {
this.selectedApplicationProfile = selectedApplicationProfile;
},
async setDefinition() {
this.definition = await parseApplicationProfile(
this.selectedApplicationProfile
);
},
},
});
</script>
<!-- TODO: Replace with actual styling -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
import ApplicationProfile from "@/types/applicationProfile";
class ApplicationProfileImpl implements ApplicationProfile {
name: string;
base_url: string;
definition: Array<unknown>;
constructor(name: string, base_url: string, definition: Array<unknown>) {
this.name = name;
this.base_url = base_url;
this.definition = definition;
}
}
export default ApplicationProfileImpl;
<template>
<div>
<SearchAP @applicationProfiles="handleApplicationProfiles" />
<ListAPs
:applicationProfiles="applicationProfiles"
@selectApplicationProfile="selectApplicationProfile"
/>
</div>
</template>
<script lang="ts">
import ApplicationProfile from "@/types/applicationProfile";
import Vue from "vue";
import SearchAP from "@/components/ApplicationProfiles/SearchAP.vue";
import ListAPs from "@/components/ApplicationProfiles/ListAPs.vue";
export default Vue.extend({
name: "APSelection",
data() {
return {
applicationProfiles: [] as Array<ApplicationProfile>,
};
},
components: {
SearchAP,
ListAPs,
},
methods: {
handleApplicationProfiles(applicationProfiles: Array<ApplicationProfile>) {
this.applicationProfiles = applicationProfiles;
},
selectApplicationProfile(applicationProfile: ApplicationProfile) {
this.$emit("selectApplicationProfile", applicationProfile);
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<ul>
<li
v-for="applicationProfile in applicationProfiles"
:key="applicationProfile.base_url"
>
{{ applicationProfile.name }}
<b-button @click="selectApplicationProfile(applicationProfile)"
>Select</b-button
>
</li>
</ul>
</template>
<script lang="ts">
import ApplicationProfile from "@/types/applicationProfile";
import Vue, { PropType } from "vue";
export default Vue.extend({
name: "List",
props: {
applicationProfiles: {
required: true,
type: Array as PropType<ApplicationProfile[]>,
},
},
methods: {
selectApplicationProfile(applicationProfile: ApplicationProfile) {
this.$emit("selectApplicationProfile", applicationProfile);
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<div></div>
</template>
<script lang="ts">
import DatasetExt from "rdf-ext/lib/Dataset";
import ApplicationProfile from "@/types/applicationProfile";
import Vue, { PropType } from "vue";
export default Vue.extend({
name: "Store",
props: {
applicationProfile: {
required: true,
type: Object as PropType<ApplicationProfile>,
},
definition: {
required: true,
default: () => null,
type: Object as PropType<DatasetExt>,
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<div></div>
</template>
<script lang="ts">
import DatasetExt from "rdf-ext/lib/Dataset";
import ApplicationProfile from "@/types/applicationProfile";
import Vue, { PropType } from "vue";
export default Vue.extend({
name: "PropertyDefinition",
props: {
applicationProfile: {
required: true,
type: Object as PropType<ApplicationProfile>,
},
definition: {
required: true,
type: Object as PropType<DatasetExt>,
},
readOnly: {
type: Boolean,
default: false,
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<div>
<div v-if="applicationProfile !== null">
{{ applicationProfile.name }}
<ul v-if="definition !== null">
<li
v-for="entry in definition.match(
null,
factory.namedNode('http://www.w3.org/ns/shacl#path')
)"
:key="entry.subject.value"
>
<div
v-for="name in definition.match(
entry.subject,
factory.namedNode('http://www.w3.org/ns/shacl#name')
)"
:key="name.object.value"
>
{{ name.object.value }}
</div>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import DatasetExt from "rdf-ext/lib/Dataset";
import ApplicationProfile from "@/types/applicationProfile";
import Vue, { PropType } from "vue";
import factory from "rdf-ext";
// For representing the Code of an api, these collection of libraries might be interesting: https://github.com/zazuko/rdfjs-elements
export default Vue.extend({
name: "Representation",
data() {
return {
factory: factory,
};
},
props: {
applicationProfile: {
required: true,
type: Object as PropType<ApplicationProfile>,
},
definition: {
required: true,
type: Object as PropType<DatasetExt>,
},
readOnly: {
type: Boolean,
default: false,
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<div>
<b-form-input v-model="searchString" debounce="1000" />
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { searchApplicationProfiles } from "@/util/api-connection";
export default Vue.extend({
created() {
this.retrieveAPs();
},
data() {
return {
searchString: "",
};
},
name: "Search",
watch: {
searchString() {
this.retrieveAPs();
},
},
methods: {
async retrieveAPs() {
this.$emit(
"applicationProfiles",
await searchApplicationProfiles(this.searchString)
);
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<ul>
<li
v-for="vocabularyTerm in vocabularyTerms"
:key="vocabularyTerm.property"
>
{{ vocabularyTerm.property }}
</li>
</ul>
</template>
<script lang="ts">
import VocabularyTerm from "@/types/vocabularyTerm";
import Vue, { PropType } from "vue";
export default Vue.extend({
name: "ListVocs",
props: {
vocabularyTerms: {
required: true,
type: Array as PropType<VocabularyTerm[]>,
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
<template>
<div>
<b-input v-model="searchString" debounce="1000" />
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { searchVocabularyTerms } from "@/util/api-connection";
export default Vue.extend({
created() {
this.retrieveVocabs();
},
data() {
return {
searchString: "",
};
},
name: "Search",
watch: {
searchString() {
this.retrieveVocabs();
},
},