.yarnrc.yml

 packageExtensions:
+  "@graphy/content.xml.scribe@*":
+    dependencies:
+      "@graphy/core.class.scribable": "*"
   "fork-ts-checker-webpack-plugin@*":
     dependencies:
       "vue-template-compiler": "*"

package.json

 {
   "name": "ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -10,13 +10,19 @@
     "lint:fix": "eslint './src/**/*.{js,ts,tsx,vue,md}' --fix"
   },
   "dependencies": {
-    "@coscine/api-client": "^2.0.0",
-    "@coscine/form-generator": "^1.18.0",
+    "@coscine/api-client": "^2.2.0",
+    "@coscine/form-generator": "^2.0.0",
+    "@rdfjs-elements/formats-pretty": "^0.4.3",
+    "@rdfjs/data-model": "^1.2.0",
+    "@rdfjs/dataset": "^1.1.0",
+    "@vuelidate/core": "^2.0.0-alpha.41",
+    "@vuelidate/validators": "^2.0.0-alpha.29",
     "@vueuse/core": "^6.5.3",
     "axios": "^0.26.1",
     "bootstrap": "4.6.1",
     "bootstrap-icons": "^1.8.1",
     "bootstrap-vue": "^2.22.0",
+    "buffer": "^6.0.3",
     "core-js": "^3.21.1",
     "file-saver": "^2.0.5",
     "http-status-codes": "^2.2.0",
@@ -26,10 +32,13 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "pinia": "^2.0.12",
+    "rdf-ext": "^2.0.1",
+    "rdf-parse": "^1.8.0",
     "rdf-validate-shacl": "^0.4.3",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "semantic-release": "^19.0.2",
+    "stream-to-string": "^1.2.0",
     "uuid": "^8.3.2",
     "vite-aliases": "^0.9.1",
     "vue": "^2.6.14",
@@ -38,10 +47,12 @@
     "vue-multiselect": "^2.1.6",
     "vue-router": "^3.5.3",
     "vue-select": "^3.18.3",
-    "vue-sidebar-menu": "^4.8.1",
-    "vuelidate": "^0.7.7"
+    "vue-sidebar-menu": "^4.8.1"
   },
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@rollup/plugin-replace": "^4.0.0",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^7.0.4",
@@ -49,10 +60,10 @@
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@types/file-saver": "^2.0.5",
     "@types/lodash": "^4.14.178",
+    "@types/rdf-ext": "^1.3.11",
     "@types/rdf-validate-shacl": "^0.4.0",
     "@types/uuid": "^8.3.4",
     "@types/vue-select": "^3.16.0",
-    "@types/vuelidate": "^0.7.15",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
     "@vue/cli-plugin-eslint": "^4.5.15",
@@ -68,9 +79,11 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.5.0",
     "prettier": "^2.5.1",
+    "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
+    "rollup-plugin-polyfill-node": "^0.9.0",
     "typescript": "^4.5.4",
-    "unplugin-vue-components": "0.17.11",
+    "unplugin-vue-components": "^0.19.6",
     "vite": "^2.8.6",
     "vite-plugin-vue2": "^1.9.3",
     "vite-plugin-windicss": "^1.8.3",

src/App.vue

@@ -4,7 +4,7 @@
     <LoadingIndicator />
     <main>
       <div class="mr-0 d-flex">
-        <SidebarMenu class="pr-2" />
+        <SidebarMenu class="mr-2" />
         <div class="container-fluid px-5">
           <Pilot />
           <Maintenance />
@@ -25,7 +25,6 @@ import { defineComponent } from "vue-demi";
 import useMainStore from "@/store/index";
 import useProjectStore from "@/modules/project/store";
 import useUserStore from "@/modules/user/store";
-//import "@/assets/scss/_custom.scss";
 
 export default defineComponent({
   setup() {
@@ -82,6 +81,11 @@ export default defineComponent({
   margin-bottom: 10px;
   height: 1px;
   width: 100%;
-  border-top: 1px solid #bebbbb;
+  border-top: 1px solid var(--light);
+}
+
+#card-deck {
+  /* Used to align the cards' and container's left edges */
+  margin: 0em -0.5em;
 }
 </style>

src/assets/css/_custom.css

+:root {
+  --navbar-height: 2.5rem;
+  --loading-indicator-height: 3px;
+  --loading-indicator-margin: 1rem;
+  --sidebar-offset-top: calc(var(--navbar-height) + var(--loading-indicator-height) + var(--loading-indicator-margin));
+  --sidebar-height: calc(100vh - var(--navbar-height) - calc(var(--loading-indicator-height) + var(--loading-indicator-margin)))
+}
\ No newline at end of file

src/components.d.ts

 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
+import "@vue/runtime-core";
 
-declare module 'vue' {
+declare module "@vue/runtime-core" {
   export interface GlobalComponents {
-    BreadCrumbs: typeof import('./components/elements/BreadCrumbs.vue')['default']
-    CoscineCard: typeof import('./components/coscine/CoscineCard.vue')['default']
-    CoscineFormGroup: typeof import('./components/coscine/CoscineFormGroup.vue')['default']
-    CoscineHeadline: typeof import('./components/coscine/CoscineHeadline.vue')['default']
-    CoscineModal: typeof import('./components/coscine/CoscineModal.vue')['default']
-    ExpiryToast: typeof import('./components/toasts/ExpiryToast.vue')['default']
-    LoadingIndicator: typeof import('./components/elements/LoadingIndicator.vue')['default']
-    LoadingSpinner: typeof import('./components/coscine/LoadingSpinner.vue')['default']
-    Maintenance: typeof import('./components/banner/Maintenance.vue')['default']
-    MultiSelect: typeof import('./components/coscine/MultiSelect.vue')['default']
-    Navbar: typeof import('./components/elements/Navbar.vue')['default']
-    NotificationToast: typeof import('./components/toasts/NotificationToast.vue')['default']
-    Pilot: typeof import('./components/banner/Pilot.vue')['default']
-    SidebarMenu: typeof import('./components/elements/SidebarMenu.vue')['default']
+    BAlert: typeof import("bootstrap-vue")["BAlert"];
+    BBadge: typeof import("bootstrap-vue")["BBadge"];
+    BBreadcrumb: typeof import("bootstrap-vue")["BBreadcrumb"];
+    BBreadcrumbItem: typeof import("bootstrap-vue")["BBreadcrumbItem"];
+    BButton: typeof import("bootstrap-vue")["BButton"];
+    BButtonGroup: typeof import("bootstrap-vue")["BButtonGroup"];
+    BCard: typeof import("bootstrap-vue")["BCard"];
+    BCardBody: typeof import("bootstrap-vue")["BCardBody"];
+    BCardGroup: typeof import("bootstrap-vue")["BCardGroup"];
+    BCardText: typeof import("bootstrap-vue")["BCardText"];
+    BCol: typeof import("bootstrap-vue")["BCol"];
+    BCollapse: typeof import("bootstrap-vue")["BCollapse"];
+    BContainer: typeof import("bootstrap-vue")["BContainer"];
+    BDropdown: typeof import("bootstrap-vue")["BDropdown"];
+    BDropdownDivider: typeof import("bootstrap-vue")["BDropdownDivider"];
+    BDropdownItem: typeof import("bootstrap-vue")["BDropdownItem"];
+    BForm: typeof import("bootstrap-vue")["BForm"];
+    BFormCheckbox: typeof import("bootstrap-vue")["BFormCheckbox"];
+    BFormDatepicker: typeof import("bootstrap-vue")["BFormDatepicker"];
+    BFormFile: typeof import("bootstrap-vue")["BFormFile"];
+    BFormGroup: typeof import("bootstrap-vue")["BFormGroup"];
+    BFormInput: typeof import("bootstrap-vue")["BFormInput"];
+    BFormRadioGroup: typeof import("bootstrap-vue")["BFormRadioGroup"];
+    BFormSelect: typeof import("bootstrap-vue")["BFormSelect"];
+    BFormSelectOption: typeof import("bootstrap-vue")["BFormSelectOption"];
+    BFormTag: typeof import("bootstrap-vue")["BFormTag"];
+    BFormTags: typeof import("bootstrap-vue")["BFormTags"];
+    BFormText: typeof import("bootstrap-vue")["BFormText"];
+    BFormTextarea: typeof import("bootstrap-vue")["BFormTextarea"];
+    BIcon: typeof import("bootstrap-vue")["BIcon"];
+    BIconLink45deg: typeof import("bootstrap-vue")["BIconLink45deg"];
+    BInputGroup: typeof import("bootstrap-vue")["BInputGroup"];
+    BInputGroupAppend: typeof import("bootstrap-vue")["BInputGroupAppend"];
+    BLink: typeof import("bootstrap-vue")["BLink"];
+    BModal: typeof import("bootstrap-vue")["BModal"];
+    BNavbar: typeof import("bootstrap-vue")["BNavbar"];
+    BNavbarBrand: typeof import("bootstrap-vue")["BNavbarBrand"];
+    BNavbarNav: typeof import("bootstrap-vue")["BNavbarNav"];
+    BNavbarToggle: typeof import("bootstrap-vue")["BNavbarToggle"];
+    BNavForm: typeof import("bootstrap-vue")["BNavForm"];
+    BNavItem: typeof import("bootstrap-vue")["BNavItem"];
+    BNavItemDropdown: typeof import("bootstrap-vue")["BNavItemDropdown"];
+    BOverlay: typeof import("bootstrap-vue")["BOverlay"];
+    BPagination: typeof import("bootstrap-vue")["BPagination"];
+    BPopover: typeof import("bootstrap-vue")["BPopover"];
+    BProgress: typeof import("bootstrap-vue")["BProgress"];
+    BProgressBar: typeof import("bootstrap-vue")["BProgressBar"];
+    BreadCrumbs: typeof import("./components/elements/BreadCrumbs.vue")["default"];
+    BRow: typeof import("bootstrap-vue")["BRow"];
+    BSkeleton: typeof import("bootstrap-vue")["BSkeleton"];
+    BSkeletonTable: typeof import("bootstrap-vue")["BSkeletonTable"];
+    BSkeletonWrapper: typeof import("bootstrap-vue")["BSkeletonWrapper"];
+    BSpinner: typeof import("bootstrap-vue")["BSpinner"];
+    BTab: typeof import("bootstrap-vue")["BTab"];
+    BTable: typeof import("bootstrap-vue")["BTable"];
+    BTabs: typeof import("bootstrap-vue")["BTabs"];
+    BToast: typeof import("bootstrap-vue")["BToast"];
+    BTooltip: typeof import("bootstrap-vue")["BTooltip"];
+    CoscineCard: typeof import("./components/coscine/CoscineCard.vue")["default"];
+    CoscineFormGroup: typeof import("./components/coscine/CoscineFormGroup.vue")["default"];
+    CoscineHeadline: typeof import("./components/coscine/CoscineHeadline.vue")["default"];
+    CoscineModal: typeof import("./components/coscine/CoscineModal.vue")["default"];
+    ExpiryToast: typeof import("./components/toasts/ExpiryToast.vue")["default"];
+    LoadingIndicator: typeof import("./components/elements/LoadingIndicator.vue")["default"];
+    LoadingSpinner: typeof import("./components/coscine/LoadingSpinner.vue")["default"];
+    Maintenance: typeof import("./components/banner/Maintenance.vue")["default"];
+    MultiSelect: typeof import("./components/coscine/MultiSelect.vue")["default"];
+    Navbar: typeof import("./components/elements/Navbar.vue")["default"];
+    NotificationToast: typeof import("./components/toasts/NotificationToast.vue")["default"];
+    Pilot: typeof import("./components/banner/Pilot.vue")["default"];
+    SidebarMenu: typeof import("./components/elements/SidebarMenu.vue")["default"];
   }
 }
 
-export { }
+export {};

src/components/elements/LoadingIndicator.vue

 <template>
-  <div id="loading-indicator">
+  <div>
     <div v-if="show" class="indicator indicator-active" />
     <div v-else class="indicator bg-light" />
   </div>
@@ -47,8 +47,9 @@ export default defineComponent({
 .indicator {
   position: relative;
   width: 100%;
-  height: 3px;
-  margin-bottom: 1rem;
+  /* Heights defined as variables in "@/assets/css/_custom.css" */
+  height: var(--loading-indicator-height);
+  margin-bottom: var(--loading-indicator-margin);
 }
 .indicator-active {
   background-color: #e9ecef;
@@ -57,7 +58,7 @@ export default defineComponent({
   width: 40%;
   content: "";
   position: absolute;
-  background-color: #00549f;
+  background-color: var(--primary);
   top: 0;
   left: 0;
   bottom: 0;

src/components/elements/SidebarMenu.vue

@@ -184,6 +184,7 @@ export default defineComponent({
                       class: "vsm--badge_default",
                     }
                   : undefined,
+                exactPath: true,
               };
             }) as Array<SidebarItem>,
           },
@@ -291,10 +292,18 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "/src/assets/scss/_custom.scss";
 
+.v-sidebar-menu {
+  height: var(--sidebar-height);
+  border-radius: 0rem 0.25rem 0.25rem 0rem;
+  background: $light;
+}
+.v-sidebar-menu ::v-deep .vsm--toggle-btn {
+  border-radius: 0rem 0rem 0.25rem 0rem;
+  background-color: var(--secondary);
+}
 .v-sidebar-menu.vsm_expanded {
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(100vh - 50px - 30px);
 }
 .v-sidebar-menu ::v-deep .vsm--badge {
   background-color: #ffc107;
@@ -336,4 +345,9 @@ export default defineComponent({
   box-shadow: 3px 0px 0px 0px $primary inset;
   -webkit-box-shadow: 3px 0px 0px 0px $primary inset;
 }
+.v-sidebar-menu ::v-deep .vsm--link_level-2.vsm--link_active {
+  // Use this to edit the second level element when active
+  background-color: var(--primary);
+  color: $white;
+}
 </style>

src/i18n/de.ts

@@ -156,58 +156,58 @@ export default {
 
   resourceTypes: {
     rdsrwth: {
-      displayName: "RWTH-FDS-Web",
-      fullName: "Forschungsdatenspeicher (FDS)",
+      displayName: "RWTH-RDS-Web",
+      fullName: "Research Data Storage (RDS)",
       description:
-        "Forschungsdatenspeicher (FDS) ist objektbasierter Speicher für Forschungsdaten. Sie können FDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
+        "Research Data Storage (RDS) ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
     },
     rdsude: {
-      displayName: "UDE-FDS-Web",
-      fullName: "Forschungsdatenspeicher (FDS)",
+      displayName: "UDE-RDS-Web",
+      fullName: "Research Data Storage (RDS)",
       description:
-        "Forschungsdatenspeicher (FDS) Universität Duisburg-Essen ist objektbasierter Speicher für Forschungsdaten. Sie können FDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
+        "Research Data Storage (RDS) Universität Duisburg-Essen ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
     },
     rdstudo: {
-      displayName: "TUDO-FDS-Web",
-      fullName: "Forschungsdatenspeicher (FDS)",
+      displayName: "TUDO-RDS-Web",
+      fullName: "Research Data Storage (RDS)",
       description:
-        "Forschungsdatenspeicher (FDS) Technische Universität Dortmund ist objektbasierter Speicher für Forschungsdaten. Sie können FDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
+        "Research Data Storage (RDS) Technische Universität Dortmund ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
     },
     rdsnrw: {
-      displayName: "NRW-FDS-Web",
-      fullName: "Forschungsdatenspeicher (FDS)",
+      displayName: "NRW-RDS-Web",
+      fullName: "Research Data Storage (RDS)",
       description:
-        "Forschungsdatenspeicher (FDS) Nordrhein-Westfalen ist objektbasierter Speicher für Forschungsdaten. Sie können FDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
+        "Research Data Storage (RDS) Nordrhein-Westfalen ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Resourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
     },
     s3: {
       displayName: "S3 Bucket",
       fullName: "S3 Bucket (S3)",
       description:
-        "S3 Buckets (S3) sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Forschungsdatenspeicher (FDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein gesondertes Antragsverfahren und ein Datenmanagementplan (DMP) notwendig, um sicherzustellen, dass die Daten die in S3 Buckets gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
+        "S3 Buckets (S3) sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein gesondertes Antragsverfahren und ein Datenmanagementplan (DMP) notwendig, um sicherzustellen, dass die Daten die in S3 Buckets gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
     rdss3rwth: {
-      displayName: "RWTH-FDS-S3",
-      fullName: "FDS-S3-Ressource (S3)",
+      displayName: "RWTH-RDS-S3",
+      fullName: "RDS-S3-Ressource (S3)",
       description:
-        "FDS-S3 sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Forschungsdatenspeicher (FDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in FDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
+        "RDS-S3 sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
     rdss3ude: {
-      displayName: "UDE-FDS-S3",
-      fullName: "FDS-S3-Ressource (S3)",
+      displayName: "UDE-RDS-S3",
+      fullName: "RDS-S3-Ressource (S3)",
       description:
-        "FDS-S3 Universität Duisburg-Essen sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Forschungsdatenspeicher (FDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in FDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
+        "RDS-S3 Universität Duisburg-Essen sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
     rdss3tudo: {
-      displayName: "TUDO-FDS-S3",
-      fullName: "FDS-S3-Ressource (S3)",
+      displayName: "TUDO-RDS-S3",
+      fullName: "RDS-S3-Ressource (S3)",
       description:
-        "FDS-S3 Technische Universität Dortmund sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Forschungsdatenspeicher (FDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in FDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
+        "RDS-S3 Technische Universität Dortmund sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
     rdss3nrw: {
-      displayName: "NRW-FDS-S3",
-      fullName: "FDS-S3-Ressource (S3)",
+      displayName: "NRW-RDS-S3",
+      fullName: "RDS-S3-Ressource (S3)",
       description:
-        "FDS-S3 Nordrhein-Westfalen sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Forschungsdatenspeicher (FDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in FDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
+        "RDS-S3 Nordrhein-Westfalen sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
     gitlab: {
       displayName: "Gitlab",

src/main.ts

@@ -14,8 +14,12 @@ import router from "@/router";
 /* Bootstrap Vue */
 import "@/plugins/bootstrap-vue";
 
+/* Stream Polyfill */
+import "@/plugins/stream-poly";
+
 /* Corporate Design */
 import "@/assets/scss/_custom.scss";
+import "@/assets/css/_custom.css";
 
 /* Other */
 import App from "@/App.vue";

src/modules/project/i18n/de.ts

@@ -18,7 +18,7 @@ export default {
       title: "Projekt erstellen",
 
       affiliationMessage:
-        "Als Mitglied der RWTH Aachen wird Ihr Projekt mit einem Speicherplatz von 25 GB für FDS-Web-Speicher ausgestattet.",
+        "Als Mitglied der RWTH Aachen wird Ihr Projekt mit einem Speicherplatz von 25 GB für RDS-Web-Speicher ausgestattet.",
       loadingSpinnerProjectCreation:
         "Die Projekterstellung kann derzeit bis zu einer Minute dauern. Vielen Dank für Ihre Geduld.",
 
@@ -233,6 +233,10 @@ export default {
       projectMetadataVisibility: "Sichtbarkeit der Metadaten",
       projectMetadataVisibilityLabel:
         "@:(form.project.projectMetadataVisibility)@:(form.project.labelSymbol)",
+      projectMetadataVisibilityLabelPopover:
+        "Für weitere Informationen zur Sichtbarkeit siehe",
+      projectMetadataVisibilityLabelPopoverUrl:
+        "https://help.itc.rwth-aachen.de/service/b2b7729fd93f4c7080b475776f6b5d87/article/9e6423ff3ce7455fa91a713a3091d1e4/",
 
       projectGrantId: "Grant ID",
       projectGrantIdHelp:

src/modules/project/i18n/en.ts

@@ -228,6 +228,10 @@ export default {
       projectMetadataVisibility: "Metadata Visibility",
       projectMetadataVisibilityLabel:
         "@:(form.project.projectMetadataVisibility)@:(form.project.labelSymbol)",
+      projectMetadataVisibilityLabelPopover:
+        "For more information on visibility see",
+      projectMetadataVisibilityLabelPopoverUrl:
+        "https://help.itc.rwth-aachen.de/en/service/b2b7729fd93f4c7080b475776f6b5d87/article/9e6423ff3ce7455fa91a713a3091d1e4/",
 
       projectGrantId: "Grant ID",
       projectGrantIdHelp:

src/modules/project/pages/CreateProject.vue

@@ -65,8 +65,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue-demi";
-import { Validation } from "vuelidate";
-
 import moment from "moment";
 import FormNaming from "./components/FormNaming.vue";
 import FormMetadata from "./components/FormMetadata.vue";
@@ -85,6 +83,7 @@ import useMainStore from "@/store/index";
 import useResourceStore from "@/modules/resource/store";
 import { navigateToProject } from "@/router";
 import useNotificationStore from "@/store/notification";
+import type { Validation } from "@vuelidate/core";
 
 export default defineComponent({
   components: {
@@ -159,8 +158,8 @@ export default defineComponent({
       this.formValidations.metadata.$touch();
       // Check if there are errors in each form and if they were changed
       if (
-        this.formValidations.naming.$anyError ||
-        this.formValidations.metadata.$anyError ||
+        this.formValidations.naming.$invalid ||
+        this.formValidations.metadata.$invalid ||
         (!this.formValidations.naming.$anyDirty &&
           !this.formValidations.metadata.$anyDirty)
       ) {

src/modules/project/pages/ListProjects.vue

@@ -2,7 +2,7 @@
   <div id="project">
     <CoscineHeadline :headline="$tc('page.listProjects.title', 0)" />
     <div class="list">
-      <b-card-group deck>
+      <b-card-group id="card-deck" deck>
         <CoscineCard
           :title="$t('page.listProjects.addProject')"
           type="create"

src/modules/project/pages/ProjectPage.vue

@@ -6,7 +6,7 @@
         <CoscineHeadline :headline="$tc('page.project.resource', 2)" />
 
         <div class="list">
-          <b-card-group deck>
+          <b-card-group id="card-deck" deck>
             <CoscineCard
               :title="$t('page.project.addResource')"
               type="create"
@@ -49,7 +49,7 @@
       <CoscineHeadline :headline="$tc('page.project.subProject', 0)" />
 
       <div class="list">
-        <b-card-group deck>
+        <b-card-group id="card-deck" deck>
           <CoscineCard
             :title="$t('page.listProjects.addProject')"
             type="create"

src/modules/project/pages/Settings.vue

@@ -71,8 +71,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue-demi";
-import { Validation } from "vuelidate";
-
 import FormNaming from "./components/FormNaming.vue";
 import FormMetadata from "./components/FormMetadata.vue";
 import DeleteProjectModal from "./components/modals/DeleteProjectModal.vue";
@@ -90,6 +88,7 @@ import type {
 } from "@coscine/api-client/dist/types/Coscine.Api.Project";
 import { navigateToProject } from "@/router";
 import useNotificationStore from "@/store/notification";
+import type { Validation } from "@vuelidate/core";
 
 export default defineComponent({
   components: {
@@ -223,8 +222,8 @@ export default defineComponent({
       this.formValidations.metadata.$touch();
       // Check if there are errors in each form and if they were changed
       if (
-        this.formValidations.naming.$anyError ||
-        this.formValidations.metadata.$anyError ||
+        this.formValidations.naming.$invalid ||
+        this.formValidations.metadata.$invalid ||
         (!this.formValidations.naming.$anyDirty &&
           !this.formValidations.metadata.$anyDirty)
       ) {

src/modules/project/pages/components/FormMetadata.vue

@@ -45,18 +45,15 @@
             : null
         "
         :placeholder="$t('form.project.projectPrincipleInvestigators')"
-        :maxlength="
-          maxLengthFromValidation($v.projectForm.principleInvestigators)
-        "
+        :maxlength="$v.projectForm.principleInvestigators.maxLength.$params.max"
         required
         :disabled="disabled"
       />
       <div class="invalid-tooltip">
         {{
           $t("form.project.projectPrincipleInvestigatorsHelp", {
-            maxLength: maxLengthFromValidation(
-              $v.projectForm.principleInvestigators
-            ),
+            maxLength:
+              $v.projectForm.principleInvestigators.maxLength.$params.max,
           })
         }}
       </div>
@@ -209,14 +206,14 @@
         <template #maxElements>
           {{
             $t("form.project.projectKeywordsHelp", {
-              maxLength: maxLengthFromValidation($v.projectForm.keywords),
+              maxLength: $v.projectForm.keywords.maxLength.$params.max,
             })
           }}
         </template>
         <template #noOptions>
           {{
             $t("form.project.projectKeywordsEmpty", {
-              maxLength: maxLengthFromValidation($v.projectForm.keywords),
+              maxLength: $v.projectForm.keywords.maxLength.$params.max,
             })
           }}
         </template>
@@ -230,7 +227,21 @@
       :label="$t('form.project.projectMetadataVisibilityLabel')"
       :is-loading="isLoading"
       type="input"
+      :info="true"
     >
+      <template #popover>
+        {{ $t("form.project.projectMetadataVisibilityLabelPopover") }}
+        <b-link
+          :href="
+            $t(
+              'form.project.projectMetadataVisibilityLabelPopoverUrl'
+            ).toString()
+          "
+          target="_blank"
+          >{{ $t("default.help") }}
+        </b-link>
+      </template>
+
       <b-form-radio-group
         v-model="selectedVisibility"
         name="radios-stacked"
@@ -257,14 +268,14 @@
           $v.projectForm.grantId.$dirty ? !$v.projectForm.grantId.$error : null
         "
         :placeholder="$t('form.project.projectGrantId')"
-        :maxlength="maxLengthFromValidation($v.projectForm.grantId)"
+        :maxlength="$v.projectForm.grantId.maxLength.$params.max"
         required
         :disabled="disabled"
       />
       <div class="invalid-tooltip">
         {{
           $t("form.project.projectGrantIdHelp", {
-            maxLength: maxLengthFromValidation($v.projectForm.grantId),
+            maxLength: $v.projectForm.grantId.maxLength.$params.max,
           })
         }}
       </div>
@@ -273,9 +284,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue-demi";
-import { Validation, validationMixin } from "vuelidate";
-import { required, maxLength } from "vuelidate/lib/validators";
+import { defineComponent, PropType, reactive, ref } from "vue-demi";
+import { required, maxLength } from "@vuelidate/validators";
+import { useVuelidate, Validation, ValidationArgs } from "@vuelidate/core";
 import moment from "moment";
 import "@/plugins/deprecated/vue-multiselect";
 
@@ -292,7 +303,6 @@ import useProjectStore from "../../store";
 import useMainStore from "@/store/index";
 
 export default defineComponent({
-  mixins: [validationMixin],
   props: {
     value: {
       type: Object as PropType<ProjectObject>,
@@ -318,46 +328,35 @@ export default defineComponent({
     },
   },
   emits: {
-    validation: (input: Validation) => {
-      return input ? true : false;
-    },
+    validation: (_: ValidationArgs) => null,
   },
 
-  setup() {
+  setup(props) {
     const mainStore = useMainStore();
     const projectStore = useProjectStore();
 
-    return { mainStore, projectStore };
-  },
-
-  validations: {
-    projectForm: {
-      principleInvestigators: {
-        required,
-        maxLength: maxLength(500),
-      },
-      startDate: {
-        required,
-      },
-      endDate: {
-        required,
-      },
-      disciplines: {
-        required,
-      },
-      organizations: {
-        required,
+    /*
+      Definition of the validation rules and initial state
+      will enable proper typings in the code
+    */
+    const state = reactive({
+      projectForm: ref(props.value),
+    });
+    const rules = {
+      projectForm: {
+        principleInvestigators: { required, maxLength: maxLength(500) },
+        startDate: { required },
+        endDate: { required },
+        disciplines: { required },
+        organizations: { required },
+        keywords: { maxLength: maxLength(1000) },
+        visibility: { required },
+        grantId: { maxLength: maxLength(500) },
       },
-      keywords: {
-        maxLength: maxLength(1000),
-      },
-      visibility: {
-        required,
-      },
-      grantId: {
-        maxLength: maxLength(500),
-      },
-    },
+    };
+    const $v = useVuelidate(rules, state) as Validation<typeof rules>;
+
+    return { mainStore, projectStore, $v };
   },
 
   data() {
@@ -458,19 +457,6 @@ export default defineComponent({
       }
     },
 
-    maxLengthFromValidation(validation: Validation): string {
-      let value = "";
-      try {
-        const prop: string = validation.$params.maxLength.max.toString();
-        if (prop) {
-          value = prop;
-        }
-      } catch (error) {
-        return value;
-      }
-      return value;
-    },
-
     limitKeywords(values: []): number | null {
       // Should the max number of allowed characters is exceeded, prevent the addition of further tags
       if (this.$v.projectForm.keywords?.$invalid) {

src/modules/project/pages/components/FormNaming.vue

@@ -17,7 +17,7 @@
             : null
         "
         :placeholder="$t('form.project.projectName')"
-        :maxlength="maxLengthFromValidation($v.projectForm.projectName)"
+        :maxlength="$v.projectForm.projectName.maxLength.$params.max"
         required
         :disabled="disabled"
         @input="translateProjectNameToDisplayName"
@@ -25,7 +25,7 @@
       <div class="invalid-tooltip">
         {{
           $t("form.project.projectNameHelp", {
-            maxLength: maxLengthFromValidation($v.projectForm.projectName),
+            maxLength: $v.projectForm.projectName.maxLength.$params.max,
           })
         }}
       </div>
@@ -48,7 +48,7 @@
             : null
         "
         :placeholder="$t('form.project.displayName')"
-        :maxlength="maxLengthFromValidation($v.projectForm.displayName)"
+        :maxlength="$v.projectForm.displayName.maxLength.$params.max"
         required
         :disabled="disabled"
         @input="isLockedDisplayName = true"
@@ -56,7 +56,7 @@
       <div class="invalid-tooltip">
         {{
           $t("form.project.displayNameHelp", {
-            maxLength: maxLengthFromValidation($v.projectForm.displayName),
+            maxLength: $v.projectForm.displayName.maxLength.$params.max,
           })
         }}
       </div>
@@ -79,14 +79,14 @@
             : null
         "
         :placeholder="$t('form.project.projectDescription')"
-        :maxlength="maxLengthFromValidation($v.projectForm.description)"
+        :maxlength="$v.projectForm.description.maxLength.$params.max"
         required
         :disabled="disabled"
       />
       <div class="invalid-tooltip">
         {{
           $t("form.project.projectDescriptionHelp", {
-            maxLength: maxLengthFromValidation($v.projectForm.description),
+            maxLength: $v.projectForm.description.maxLength.$params.max,
           })
         }}
       </div>
@@ -95,14 +95,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue-demi";
-import { Validation, validationMixin } from "vuelidate";
-import { required, maxLength } from "vuelidate/lib/validators";
+import { defineComponent, PropType, reactive, ref } from "vue-demi";
+import { required, maxLength } from "@vuelidate/validators";
+import { useVuelidate, Validation, ValidationArgs } from "@vuelidate/core";
 import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
 
 export default defineComponent({
-  mixins: [validationMixin],
-
   props: {
     value: {
       type: Object as PropType<ProjectObject>,
@@ -117,28 +115,27 @@ export default defineComponent({
       type: Boolean,
     },
   },
-
   emits: {
-    validation: (input: Validation) => {
-      return input ? true : false;
-    },
+    validation: (_: ValidationArgs) => null,
   },
 
-  validations: {
-    projectForm: {
-      projectName: {
-        required,
-        maxLength: maxLength(200),
-      },
-      displayName: {
-        required,
-        maxLength: maxLength(25),
-      },
-      description: {
-        required,
-        maxLength: maxLength(5000),
+  setup(props) {
+    /*
+      Definition of the validation rules and initial state
+      will enable proper typings in the code
+    */
+    const state = reactive({
+      projectForm: ref(props.value),
+    });
+    const rules = {
+      projectForm: {
+        projectName: { required, maxLength: maxLength(200) },
+        displayName: { required, maxLength: maxLength(25) },
+        description: { required, maxLength: maxLength(5000) },
       },
-    },
+    };
+    const $v = useVuelidate(rules, state) as Validation<typeof rules>;
+    return { $v };
   },
 
   data() {
@@ -158,19 +155,6 @@ export default defineComponent({
   },
 
   methods: {
-    maxLengthFromValidation(validation: Validation): string {
-      let value = "";
-      try {
-        const prop: string = validation.$params.maxLength.max.toString();
-        if (prop) {
-          value = prop;
-        }
-      } catch (error) {
-        return value;
-      }
-      return value;
-    },
-
     translateProjectNameToDisplayName() {
       if (!this.isLockedDisplayName && this.projectForm.projectName) {
         this.projectForm.displayName = this.projectForm.projectName.substring(

src/modules/project/pages/components/MembersTable.vue

@@ -241,7 +241,7 @@ th {
   vertical-align: middle;
   text-align: center;
 }
-.rolesTable >>> td >>> .noOverflow {
+.rolesTable >>> td .noOverflow {
   text-overflow: clip;
 }
 .leftActionBtn {

src/modules/resource/components/create-resource/Configuration.vue

@@ -7,7 +7,23 @@
         label-for="ResourceTypes"
         :label="$t('page.createResource.configuration.labels.resourceType')"
         :is-loading="isLoading"
+        :info="true"
       >
+        <template #popover>
+          {{
+            $t("page.createResource.configuration.labels.resourceTypePopover")
+          }}
+          <b-link
+            :href="
+              $t(
+                'page.createResource.configuration.labels.resourceTypePopoverUrl'
+              ).toString()
+            "
+            target="_blank"
+            >{{ $t("default.help") }}
+          </b-link>
+        </template>
+
         <multiselect
           v-if="resourceTypes.length > 1"
           id="ResourceTypes"
@@ -35,7 +51,7 @@
         </multiselect>
 
         <!-- Resource Text Field (see condition) -->
-        <b-input
+        <b-form-input
           v-else-if="resourceTypes.length === 1"
           id="ResourceType"
           v-model="selectedResourceType.iDisplayName"

src/modules/resource/components/create-resource/General.vue

@@ -3,11 +3,12 @@
     <!-- Form -->
     <b-form id="edit_form" @submit.stop.prevent="next">
       <!-- Resource Name -->
-      <coscine-form-group
+      <CoscineFormGroup
         :mandatory="true"
         label-for="ResourceName"
         :label="$t('form.resource.resourceNameLabel')"
         :is-loading="isLoading"
+        type="input"
       >
         <b-form-input
           id="ResourceName"
@@ -18,7 +19,7 @@
               : null
           "
           :placeholder="$t('form.resource.resourceName')"
-          :maxlength="maxLengthFromValidation($v.resourceForm.resourceName)"
+          :maxlength="$v.resourceForm.resourceName.maxLength.$params.max"
           required
           :readonly="readonly"
           @input="translateResourceNameToDisplayName"
@@ -26,11 +27,11 @@
         <div class="invalid-tooltip">
           {{
             $t("form.resource.resourceNameHelp", {
-              maxLength: maxLengthFromValidation($v.resourceForm.resourceName),
+              maxLength: $v.resourceForm.resourceName.maxLength.$params.max,
             })
           }}
         </div>
-      </coscine-form-group>
+      </CoscineFormGroup>
 
       <!-- Display Name -->
       <CoscineFormGroup
@@ -38,6 +39,7 @@
         label-for="DisplayName"
         :label="$t('form.resource.displayNameLabel')"
         :is-loading="isLoading"
+        type="input"
       >
         <b-form-input
           id="DisplayName"
@@ -48,7 +50,7 @@
               : null
           "
           :placeholder="$t('form.resource.displayName')"
-          :maxlength="maxLengthFromValidation($v.resourceForm.displayName)"
+          :maxlength="$v.resourceForm.displayName.maxLength.$params.max"
           required
           :readonly="readonly"
           @input="isLockedDisplayName = true"
@@ -56,18 +58,19 @@
         <div class="invalid-tooltip">
           {{
             $t("form.resource.displayNameHelp", {
-              maxLength: maxLengthFromValidation($v.resourceForm.displayName),
+              maxLength: $v.resourceForm.displayName.maxLength.$params.max,
             })
           }}
         </div>
       </CoscineFormGroup>
 
       <!-- Description -->
-      <coscine-form-group
+      <CoscineFormGroup
         :mandatory="true"
         label-for="Description"
         :label="$t('form.resource.resourceDescriptionLabel')"
         :is-loading="isLoading"
+        type="input"
       >
         <b-form-textarea
           id="Description"
@@ -78,21 +81,21 @@
               : null
           "
           :placeholder="$t('form.resource.resourceDescription')"
-          :maxlength="maxLengthFromValidation($v.resourceForm.description)"
+          :maxlength="$v.resourceForm.description.maxLength.$params.max"
           required
           :readonly="readonly"
         />
         <div class="invalid-tooltip">
           {{
             $t("form.resource.resourceDescriptionHelp", {
-              maxLength: maxLengthFromValidation($v.resourceForm.description),
+              maxLength: $v.resourceForm.description.maxLength.$params.max,
             })
           }}
         </div>
-      </coscine-form-group>
+      </CoscineFormGroup>
 
       <!-- Discipline -->
-      <coscine-form-group
+      <CoscineFormGroup
         :mandatory="true"
         label-for="Discipline"
         :label="$t('form.resource.resourceDisciplineLabel')"
@@ -121,10 +124,10 @@
             </div>
           </template>
         </multiselect>
-      </coscine-form-group>
+      </CoscineFormGroup>
 
       <!-- Keywords -->
-      <coscine-form-group
+      <CoscineFormGroup
         label-for="Keywords"
         :label="$t('form.resource.resourceKeywordsLabel')"
         :is-loading="isLoading"
@@ -146,27 +149,37 @@
           <template #maxElements>
             {{
               $t("form.resource.resourceKeywordsHelp", {
-                maxLength: maxLengthFromValidation($v.resourceForm.keywords),
+                maxLength: $v.resourceForm.keywords.maxLength.$params.max,
               })
             }}
           </template>
           <template #noOptions>
             {{
               $t("form.resource.resourceKeywordsEmpty", {
-                maxLength: maxLengthFromValidation($v.resourceForm.keywords),
+                maxLength: $v.resourceForm.keywords.maxLength.$params.max,
               })
             }}
           </template>
         </multiselect>
-      </coscine-form-group>
+      </CoscineFormGroup>
 
       <!-- Visibility -->
-      <coscine-form-group
+      <CoscineFormGroup
         :mandatory="true"
         label-for="Visibility"
         :label="$t('form.resource.resourceMetadataVisibilityLabel')"
         :is-loading="isLoading"
+        :info="true"
       >
+        <template #popover>
+          {{ $t("form.resource.resourceMetadataPopover") }}
+          <b-link
+            :href="$t('form.resource.resourceMetadataPopoverUrl').toString()"
+            target="_blank"
+            >{{ $t("default.help") }}
+          </b-link>
+        </template>
+
         <b-form-radio-group
           v-model="selectedVisibility"
           name="radios-stacked"
@@ -177,10 +190,10 @@
           :disabled="readonly"
           @change="setVisibility(selectedVisibility)"
         />
-      </coscine-form-group>
+      </CoscineFormGroup>
 
       <!-- License -->
-      <coscine-form-group
+      <CoscineFormGroup
         label-for="ResourceLicense"
         :label="$t('form.resource.resourceLicenseLabel')"
         :is-loading="isLoading"
@@ -215,10 +228,10 @@
             </option>
           </template>
         </b-form-select>
-      </coscine-form-group>
+      </CoscineFormGroup>
 
       <!-- Internal Rules for Reuse -->
-      <coscine-form-group
+      <CoscineFormGroup
         label-for="InternalRulesForReuse"
         :label="$t('form.resource.resourceReuseLabel')"
         :is-loading="isLoading"
@@ -241,31 +254,29 @@
               : null
           "
           :placeholder="$t('form.resource.resourceReuse')"
-          :maxlength="maxLengthFromValidation($v.resourceForm.usageRights)"
+          :maxlength="$v.resourceForm.usageRights.maxLength.$params.max"
           required
           :readonly="readonly"
         />
         <div class="invalid-tooltip">
           {{
             $t("form.resource.resourceReuseHelp", {
-              maxLength: maxLengthFromValidation($v.resourceForm.usageRights),
+              maxLength: $v.resourceForm.usageRights.maxLength.$params.max,
             })
           }}
         </div>
-      </coscine-form-group>
+      </CoscineFormGroup>
     </b-form>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue-demi";
+import { defineComponent, PropType, reactive, ref } from "vue-demi";
 // import the store for current module
 import useResourceStore from "../../store";
 import useProjectStore from "@/modules/project/store";
 // import the main store
 import useMainStore from "@/store/index";
-import { Validation, validationMixin } from "vuelidate";
-import { required, maxLength } from "vuelidate/lib/validators";
 import "@/plugins/deprecated/vue-multiselect";
 import type {
   DisciplineObject,
@@ -274,9 +285,12 @@ import type {
   VisibilityObject,
 } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
 import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
+import CoscineFormGroup from "@/components/coscine/CoscineFormGroup.vue";
+import { useVuelidate, Validation, ValidationArgs } from "@vuelidate/core";
+import { required, maxLength } from "@vuelidate/validators";
 
 export default defineComponent({
-  mixins: [validationMixin],
+  components: { CoscineFormGroup },
   props: {
     value: {
       type: Object as PropType<ResourceObject>,
@@ -293,47 +307,36 @@ export default defineComponent({
   },
   emits: {
     valid: (_: boolean) => null,
-    validation: (input: Validation) => {
-      return input ? true : false;
-    },
+    validation: (_: ValidationArgs) => null,
     input: (_: ResourceObject) => null,
   },
-  setup() {
+  setup(props) {
     const mainStore = useMainStore();
     const projectStore = useProjectStore();
     const resourceStore = useResourceStore();
 
-    return { mainStore, projectStore, resourceStore };
-  },
-
-  validations: {
-    resourceForm: {
-      resourceName: {
-        required,
-        maxLength: maxLength(200),
-      },
-      displayName: {
-        required,
-        maxLength: maxLength(25),
-      },
-      description: {
-        required,
-        maxLength: maxLength(5000),
-      },
-      disciplines: {
-        required,
+    /*
+      Definition of the validation rules and initial state
+      will enable proper typings in the code
+    */
+    const state = reactive({
+      resourceForm: ref(props.value),
+    });
+    const rules = {
+      resourceForm: {
+        resourceName: { required, maxLength: maxLength(200) },
+        displayName: { required, maxLength: maxLength(25) },
+        description: { required, maxLength: maxLength(5000) },
+        disciplines: { required },
+        keywords: { maxLength: maxLength(1000) },
+        license: {},
+        visibility: { required },
+        usageRights: { maxLength: maxLength(500) },
       },
-      license: {},
-      keywords: {
-        maxLength: maxLength(1000),
-      },
-      visibility: {
-        required,
-      },
-      usageRights: {
-        maxLength: maxLength(500),
-      },
-    },
+    };
+    const $v = useVuelidate(rules, state) as Validation<typeof rules>;
+
+    return { mainStore, projectStore, resourceStore, $v };
   },
 
   data() {
@@ -367,7 +370,7 @@ export default defineComponent({
       locale = locale.charAt(0).toUpperCase() + locale.slice(1);
       return `displayName${locale}`;
     },
-    valid(): boolean {
+    isValid(): boolean {
       return !this.$v.resourceForm.$invalid;
     },
   },
@@ -408,8 +411,8 @@ export default defineComponent({
       },
       deep: true,
     },
-    valid() {
-      this.$emit("valid", this.valid);
+    "$v.resourceForm.$invalid"() {
+      this.$emit("valid", !this.$v.resourceForm.$invalid);
     },
   },
 
@@ -433,19 +436,6 @@ export default defineComponent({
       }
     },
 
-    maxLengthFromValidation(validation: Validation): string {
-      let value = "";
-      try {
-        const prop: string = validation.$params.maxLength.max.toString();
-        if (prop) {
-          value = prop;
-        }
-      } catch (error) {
-        return value;
-      }
-      return value;
-    },
-
     limitKeywords(values: []): number | null {
       // Should the max number of allowed characters is exceeded, prevent the addition of further tags
       if (this.$v.resourceForm.keywords?.$invalid) {