.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
         { "allowWholeFile": true }
       ],
     "@typescript-eslint/no-empty-interface": 1, // empty Interfaces will be only warnings for now.
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }], // will only ignore variables that start with an underscore _
     "vue/multi-word-component-names": "off"
   },
 }

package.json

 {
   "name": "ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,9 @@
     "axios": "^0.26.1",
     "bootstrap": "^4.6.1",
     "bootstrap-icons": "^1.8.1",
-    "bootstrap-vue": "^2.21.2",
+    "bootstrap-vue": "^2.22.0",
     "core-js": "^3.21.1",
+    "deep-object-diff": "^1.1.7",
     "file-saver": "^2.0.5",
     "http-status-codes": "^2.2.0",
     "jose": "^4.6.0",

src/App.vue

 <template>
   <div id="app">
     <Navbar />
-    <LoadingIndicator :show="loading" />
+    <LoadingIndicator />
     <main>
       <div class="mr-0 d-flex">
         <SidebarMenu class="mr-2" />
@@ -14,7 +14,6 @@
       </div>
     </main>
     <ExpiryToast />
-    <!--DevFooter /-->
   </div>
 </template>
 
@@ -22,9 +21,9 @@
 import { defineComponent } from "vue-demi";
 
 // import the main store
-import { useMainStore } from "@/store/index";
-import { useProjectStore } from "@/modules/project/store";
-import { useUserStore } from "@/modules/user/store";
+import useMainStore from "@/store/index";
+import useProjectStore from "@/modules/project/store";
+import useUserStore from "@/modules/user/store";
 
 export default defineComponent({
   setup() {
@@ -40,10 +39,6 @@ export default defineComponent({
   },
 
   computed: {
-    loading(): boolean {
-      return this.mainStore.coscine.loading.counter > 0;
-    },
-
     loggedIn(): boolean {
       return this.mainStore.loggedIn;
     },

src/components.d.ts

@@ -9,7 +9,6 @@ declare module "vue" {
     CoscineFormGroup: typeof import("./components/CoscineFormGroup.vue")["default"];
     CoscineHeadline: typeof import("./components/CoscineHeadline.vue")["default"];
     CoscineModal: typeof import("./components/CoscineModal.vue")["default"];
-    DevFooter: typeof import("./components/DevFooter.vue")["default"];
     ExpiryToast: typeof import("./components/ExpiryToast.vue")["default"];
     LoadingIndicator: typeof import("./components/LoadingIndicator.vue")["default"];
     LoadingSpinner: typeof import("./components/LoadingSpinner.vue")["default"];

src/components/BreadCrumbs.vue

@@ -23,11 +23,11 @@
 import { defineComponent } from "vue-demi";
 
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 // import the project store
-import { useProjectStore } from "@/modules/project/store";
+import useProjectStore from "@/modules/project/store";
 // import the resource store
-import { useResourceStore } from "@/modules/resource/store";
+import useResourceStore from "@/modules/resource/store";
 
 import type {
   ProjectObject,
@@ -84,10 +84,13 @@ export default defineComponent({
                       projectName: this.project
                         ? this.project.displayName
                         : path,
-                      resourceName: this.resource
-                        ? `${this.resource.type?.displayName?.toUpperCase()}: ${
-                            this.resource.displayName
-                          }`
+                      resourceName:
+                        this.resource && this.resource.type
+                          ? `${this.$t(
+                              "resourceTypes." +
+                                this.resource.type.displayName +
+                                ".displayName"
+                            )}: ${this.resource.displayName}`
                           : path,
                     }
                   ).toString()

src/components/CoscineFormGroup.vue

@@ -4,14 +4,36 @@
     :label-for="labelFor"
     :label-cols-sm="labelColsSm"
     :label-align-sm="labelAlignSm"
-    :label="label"
   >
+    <!-- Loading Skeleton -->
     <b-skeleton-wrapper :loading="isLoading">
       <template #loading>
         <b-skeleton :type="type" animation="fade"></b-skeleton>
       </template>
-      <slot></slot>
+      <slot />
     </b-skeleton-wrapper>
+
+    <!-- Label Template -->
+    <template #label>
+      <!-- Label -->
+      <span id="label" class="text-break">{{ label }}</span>
+
+      <div class="d-inline ml-1" v-if="info">
+        <!-- Information Circle Icon -->
+        <b-icon icon="info-circle" :id="labelFor" />
+
+        <!-- Popover -->
+        <b-popover
+          over
+          :target="labelFor"
+          triggers="hover focus"
+          placement="bottom"
+        >
+          <!-- Popover Contents -->
+          <slot name="popover" />
+        </b-popover>
+      </div>
+    </template>
   </b-form-group>
 </template>
 
@@ -21,6 +43,10 @@ import { defineComponent } from "vue-demi";
 export default defineComponent({
   name: "CoscineFormGroup",
   props: {
+    info: {
+      default: false,
+      type: Boolean,
+    },
     isLoading: {
       default: false,
       type: Boolean,
@@ -38,7 +64,7 @@ export default defineComponent({
       type: String,
     },
     type: {
-      default: "text",
+      default: "input",
       type: String,
     },
     labelColsSm: {

src/components/CoscineHeadline.vue

 <template>
-  <p class="h4 mt-3 text-left">{{ headline }}:</p>
+  <p :class="`${h} mt-3 text-left`">{{ headline }}:</p>
 </template>
 
 <script lang="ts">
@@ -9,6 +9,10 @@ export default {
       default: "",
       type: String,
     },
+    h: {
+      default: "h4",
+      type: String,
+    },
   },
 };
 </script>

src/components/DevFooter.vue

-<template>
-  <footer class="fixed-bottom mb-5">
-    <b-row align-h="center">
-      <b-card class="progress-bar-striped bg-light border-warning w-50">
-        <b-card-sub-title class="text-center">Dev-Footer:</b-card-sub-title>
-        <hr class="mt-1 mb-1 b-1" />
-        <nav
-          class="flex flex-wrap items-center justify-center text-base md:ml-auto"
-        >
-          <RouterLink
-            v-for="(route, index) in routes"
-            :key="index"
-            class="mr-4 font-semibold cursor-pointer"
-            :class="{
-              'text-blue-500 hover:blue-300': route.name === currentRoute,
-              'hover:text-gray-800 dark:text-gray-800 dark:hover:text-gray-500':
-                route.name !== currentRoute,
-            }"
-            :to="{ name: route.name }"
-          >
-            {{ route.name }}
-          </RouterLink>
-
-          <RouterLink
-            class="flex items-center justify-center mx-2 text-black w-9 dark:text-black"
-            to="/broken"
-          >
-            <b-icon icon="hammer" />
-          </RouterLink>
-          <button
-            @click="toggleLighting"
-            class="flex items-center justify-center mx-2 w-9 focus:outline-none"
-          >
-            <b-icon icon="sun" variant="warning" v-if="isDark" />
-            <b-icon icon="moon" variant="secondary" v-else />
-          </button>
-
-          <button
-            @click="toggleLoading"
-            class="flex items-center justify-center mx-2 w-9 focus:outline-none"
-          >
-            <b-icon icon="pause-fill" variant="warning" v-if="loading" />
-            <b-icon icon="skip-forward-fill" v-else />
-          </button>
-        </nav>
-      </b-card>
-    </b-row>
-  </footer>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from "vue-demi";
-import { routes } from "@/router";
-import { useDark, useToggle } from "@vueuse/core";
-
-// import the main store
-import { useMainStore } from "@/store/index";
-
-import { RouteConfig } from "vue-router";
-
-export default defineComponent({
-  setup: (_, ctx) => {
-    // Import config from .evn
-    const appName = import.meta.env.VITE_APP_NAME;
-    let availableRoutes = [] as RouteConfig[];
-
-    let processRoutes = function (input: RouteConfig[]) {
-      let filterEntries = function (route: RouteConfig) {
-        if (
-          route.name !== undefined &&
-          route.name !== "not-found" &&
-          route.name !== "pid-page"
-        ) {
-          return route;
-        } else {
-          return undefined;
-        }
-      };
-      input.forEach((route) => {
-        if (route.children !== undefined) {
-          processRoutes(route.children);
-        } else {
-          const temp = filterEntries(route);
-          if (temp !== undefined) {
-            availableRoutes.push(temp);
-          }
-        }
-      });
-    };
-
-    const mainStore = useMainStore();
-
-    processRoutes(routes);
-    const currentRoute = computed(() => ctx.root.$route.name);
-
-    const isDark = useDark();
-    const toggleLighting = useToggle(isDark);
-
-    return {
-      appName,
-      routes: availableRoutes,
-      currentRoute,
-      toggleLighting,
-      isDark,
-      mainStore,
-    };
-  },
-  computed: {
-    loading(): boolean {
-      return this.mainStore.$state.coscine.loading.counter > 0;
-    },
-  },
-  methods: {
-    toggleLoading() {
-      if (this.loading) {
-        this.mainStore.decreasePageLoadingContent();
-      } else {
-        this.mainStore.increasePageLoadingContent();
-      }
-    },
-  },
-});
-</script>

src/components/ExpiryToast.vue

@@ -28,8 +28,8 @@ import { defineComponent } from "@vue/composition-api";
 import * as jose from "jose";
 import moment from "moment";
 
-import { useMainStore } from "@/store/index";
-import { useLoginStore } from "@/modules/login/store";
+import useMainStore from "@/store/index";
+import useLoginStore from "@/modules/login/store";
 
 export default defineComponent({
   setup() {

src/components/LoadingIndicator.vue

@@ -6,13 +6,38 @@
 </template>
 
 <script lang="ts">
+import useAdminStore from "@/modules/admin/store";
+import useErrorStore from "@/modules/error/store";
+import useLoginStore from "@/modules/login/store";
+import useMainStore from "@/store";
+import usePidStore from "@/modules/pid/store";
+import useProjectStore from "@/modules/project/store";
+import useResourceStore from "@/modules/resource/store";
+import useSearchStore from "@/modules/search/store";
+import useUserStore from "@/modules/user/store";
+
+import { loadingCounterEventHandler } from "@/plugins/loadingCounter";
 import { defineComponent } from "vue-demi";
 
 export default defineComponent({
-  props: {
-    show: {
-      default: false,
-      type: Boolean,
+  setup() {
+    const mainStore = useMainStore();
+
+    loadingCounterEventHandler(useAdminStore);
+    loadingCounterEventHandler(useErrorStore);
+    loadingCounterEventHandler(useLoginStore);
+    loadingCounterEventHandler(usePidStore);
+    loadingCounterEventHandler(useProjectStore);
+    loadingCounterEventHandler(useResourceStore);
+    loadingCounterEventHandler(useSearchStore);
+    loadingCounterEventHandler(useUserStore);
+
+    return { mainStore };
+  },
+
+  computed: {
+    show(): boolean {
+      return this.mainStore.isLoading;
     },
   },
 });

src/components/Navbar.vue

@@ -118,11 +118,11 @@
 <script lang="ts">
 import { defineComponent } from "vue-demi";
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 // import the login store
-import { useLoginStore } from "@/modules/login/store";
+import useLoginStore from "@/modules/login/store";
 // import the user store
-import { useUserStore } from "@/modules/user/store";
+import useUserStore from "@/modules/user/store";
 import type { UserObject } from "@coscine/api-client/dist/types/Coscine.Api.User";
 
 export default defineComponent({

src/components/SidebarMenu.vue

@@ -27,11 +27,11 @@ import "bootstrap-icons/font/fonts/bootstrap-icons.woff";
 import "bootstrap-icons/font/fonts/bootstrap-icons.woff2";
 
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 // import the project store
-import { useProjectStore } from "@/modules/project/store";
+import useProjectStore from "@/modules/project/store";
 // import the resource store
-import { useResourceStore } from "@/modules/resource/store";
+import useResourceStore from "@/modules/resource/store";
 
 import type {
   ProjectObject,
@@ -149,8 +149,12 @@ export default defineComponent({
             child: this.resources.map((resource) => {
               return {
                 title:
-                  (resource.type?.displayName
-                    ? resource.type.displayName.toUpperCase() + ": "
+                  (resource.type
+                    ? `${this.$t(
+                        "resourceTypes." +
+                          resource.type.displayName +
+                          ".displayName"
+                      )}: `
                     : "") + resource.displayName,
                 href: {
                   name: "resource-page",

src/components/banner/Maintenance.vue

 <template>
   <b-alert
     v-if="visibility"
-    :show="
-      visibility && maintenance.type !== undefined && maintenance.type !== null
-    "
+    :show="show"
     @dismissed="saveVisibility"
     dismissible
     variant="warning"
@@ -21,7 +19,7 @@
 <script lang="ts">
 import { defineComponent } from "vue-demi";
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 import type { MaintenanceReturnObject } from "@coscine/api-client/dist/types/Coscine.Api.Notices";
 
 export default defineComponent({
@@ -44,9 +42,12 @@ export default defineComponent({
       return (
         this.mainStore.coscine.banner.maintenanceVisibility !==
           this.mainStore.coscine.banner.dateString &&
-        this.mainStore.coscine.banner.dateString !== ""
+        this.mainStore.coscine.banner.dateString.trim() !== ""
       );
     },
+    show(): boolean {
+      return this.visibility && this.maintenance.type ? true : false;
+    },
   },
 
   watch: {

src/components/banner/Pilot.vue

@@ -7,7 +7,7 @@
     variant="warning"
   >
     <i18n path="banner.pilot.pilotBannerText" tag="p">
-      <template v-slot:link>
+      <template #link>
         <a :href="$t('email.serviceDeskMailTo')" target="_blank">{{
           $t("email.serviceDeskName")
         }}</a>
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue-demi";
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 export default defineComponent({
   setup() {
     const mainStore = useMainStore();

src/i18n/de.ts

@@ -44,13 +44,17 @@ export default {
 
   buttons: {
     addUser: "Benutzer hinzufügen",
+    archive: "@:(default.archive)",
     back: "Zurück",
     cancel: "Abbrechen",
     close: "Schließen",
+    confirm: "Bestätigen",
     connect: "Verbinden",
     connected: "Verbunden",
     copyMetadata: "Metadaten kopieren",
+    create: "Erstellen",
     delete: "Löschen",
+    next: "Weiter",
     reset: "Zurücksetzen",
     import: "Importieren",
     invite: "Einladen",
@@ -61,13 +65,16 @@ export default {
     save: "Speichern",
     submit: "Abschicken",
     tokenCreate: "Zugriffstoken erstellen",
+    unarchive: "Archivieren rückgängig",
   } as VueI18n.LocaleMessageObject,
 
   default: {
-    serviceDeskEmail: "servicedesk@rwth-aachen.de",
     archive: "Archivieren",
     archived: "Archiviert",
+    help: "Hilfe",
     loading: "Laden...",
+    or: "ODER",
+    none: "k. A.",
   },
 
   toast: {
@@ -76,7 +83,7 @@ export default {
       message: "Um weiterzuarbeiten, loggen Sie sich erneut ein:",
       link: "@:(nav.userLogIn)",
     },
-    save: {
+    onSave: {
       success: {
         title: "Änderungen erfolgreich",
         message: "Die Daten wurden erfolgreich gespeichert.",
@@ -84,7 +91,18 @@ export default {
       failure: {
         title: "Fehler beim Speichern",
         message:
-          "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Falls der Fehler weiterhin auftritt, wenden Sie sich bitte an @:(default.serviceDeskEmail).",
+          "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Falls der Fehler weiterhin auftritt, wenden Sie sich bitte an @:(email.serviceDeskEmail).",
+      },
+    },
+    onDelete: {
+      success: {
+        title: "Löschung erfolgreich",
+        message: "Die Daten wurden erfolgreich gelöscht.",
+      },
+      failure: {
+        title: "Fehler beim Löschen",
+        message:
+          "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Falls der Fehler weiterhin auftritt, wenden Sie sich bitte an @:(email.serviceDeskEmail).",
       },
     },
   },
@@ -115,7 +133,7 @@ export default {
     },
   },
 
-  ResourceTypes: {
+  resourceTypes: {
     rds: {
       displayName: "RWTH-FDS-Web",
       fullName: "Forschungsdatenspeicher (FDS)",
@@ -214,8 +232,9 @@ export default {
   },
 
   email: {
-    serviceDeskName: "Servicedesk",
+    serviceDeskEmail: "servicedesk@rwth-aachen.de",
     serviceDeskMailTo:
-      "mailto:servicedesk@itc.rwth-aachen.de?subject=CoScInE%20Pilot%20Program",
+      "mailto:servicedesk@rwth-aachen.de?subject=CoScInE%20Pilot%20Program",
+    serviceDeskName: "Servicedesk",
   },
 } as VueI18n.LocaleMessageObject;

src/i18n/en.ts

@@ -42,13 +42,17 @@ export default {
 
   buttons: {
     addUser: "Add User",
+    archive: "@:(default.archive)",
     back: "Back",
     cancel: "Cancel",
     close: "Close",
+    confirm: "Confirm",
     connect: "Connect",
     connected: "Connected",
     copyMetadata: "Copy Metadata",
+    create: "Create",
     delete: "Delete",
+    next: "Next",
     reset: "Reset",
     import: "Import",
     invite: "Invite",
@@ -59,12 +63,16 @@ export default {
     save: "Save",
     submit: "Submit",
     tokenCreate: "Create Access Token",
+    unarchive: "Unarchive",
   } as VueI18n.LocaleMessageObject,
 
   default: {
     archive: "Archive",
     archived: "Archived",
+    help: "Help",
     loading: "Loading...",
+    or: "OR",
+    none: "n/a",
   },
 
   toast: {
@@ -81,7 +89,18 @@ export default {
       failure: {
         title: "Error on saving",
         message:
-          "An error occured. Please try again. If the error persists, please contact @:(default.serviceDeskEmail).",
+          "An error occured. Please try again. If the error persists, please contact @:(email.serviceDeskEmail).",
+      },
+    },
+    onDelete: {
+      success: {
+        title: "Deleted successfully",
+        message: "The data has been deleted successfully.",
+      },
+      failure: {
+        title: "Error on deletion",
+        message:
+          "An error occured. Please try again. If the error persists, please contact @:(email.serviceDeskEmail).",
       },
     },
   },
@@ -112,7 +131,7 @@ export default {
     },
   },
 
-  ResourceTypes: {
+  resourceTypes: {
     rds: {
       displayName: "RWTH-RDS-Web",
       fullName: "Research Data Storage (RDS)",
@@ -210,8 +229,9 @@ export default {
   },
 
   email: {
-    serviceDeskName: "Servicedesk",
+    serviceDeskEmail: "servicedesk@rwth-aachen.de",
     serviceDeskMailTo:
-      "mailto:servicedesk@itc.rwth-aachen.de?subject=CoScInE%20Pilot%20Program",
+      "mailto:servicedesk@rwth-aachen.de?subject=Coscine%20Pilot%20Program",
+    serviceDeskName: "Servicedesk",
   },
 } as VueI18n.LocaleMessageObject;

src/modules/admin/AdminModule.vue

@@ -6,12 +6,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue-demi";
-import { AdminI18nMessages } from "./i18n";
 
 // import the store for current module
-import { useAdminStore } from "./store";
+import useAdminStore from "./store";
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 
 export default defineComponent({
   setup() {
@@ -20,7 +19,6 @@ export default defineComponent({
 
     return { mainStore, adminStore };
   },
-  i18n: { messages: AdminI18nMessages },
 
   created() {
     this.initialize();

src/modules/admin/pages/Admin.vue

@@ -4,9 +4,9 @@
       class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
     >
       <div>
-        <CoscineHeadline :headline="$parent.$t('page.admin.title')" />
+        <CoscineHeadline :headline="$t('page.admin.title')" />
         <p class="mb-8 leading-relaxed dark:text-white">
-          {{ $parent.$t("page.admin.description") }}
+          {{ $t("page.admin.description") }}
         </p>
         <img alt="From Coscine Old" src="@/assets/images/Admin.png" />
       </div>
@@ -19,9 +19,9 @@ import { defineComponent } from "vue-demi";
 import CoscineHeadline from "@/components/CoscineHeadline.vue";
 
 // import the store for current module
-import { useAdminStore } from "../store";
+import useAdminStore from "../store";
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 
 export default defineComponent({
   setup() {

src/modules/admin/routes.ts

@@ -3,6 +3,8 @@ import { RouteConfig } from "vue-router";
 const AdminModule = () => import("./AdminModule.vue");
 const Admin = () => import("./pages/Admin.vue");
 
+import { AdminI18nMessages } from "@/modules/admin/i18n/index";
+
 export const AdminRoutes: RouteConfig[] = [
   {
     path: "/admin",
@@ -12,6 +14,7 @@ export const AdminRoutes: RouteConfig[] = [
       breadCrumb: "admin",
       requiresAdmin: true,
       requiresAuth: true,
+      i18n: AdminI18nMessages,
     },
     children: [
       {

src/modules/error/ErrorModule.vue

@@ -6,12 +6,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue-demi";
-import { ErrorI18nMessages } from "./i18n";
 
 // import the store for current module
-import { useErrorStore } from "./store";
+import useErrorStore from "./store";
 // import the main store
-import { useMainStore } from "@/store/index";
+import useMainStore from "@/store/index";
 
 export default defineComponent({
   setup() {
@@ -20,7 +19,6 @@ export default defineComponent({
 
     return { mainStore, errorStore };
   },
-  i18n: { messages: ErrorI18nMessages },
 
   created() {
     this.initialize();