diff --git a/index.html b/index.html
index 4f3756faff9d827c7c65e9cb4bcc7333443d09e7..8e0a1634324b7233e9015ffb88418736749cf4ab 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.png">
- <title>Coscine UIv2</title>
+ <title>Coscine</title>
</head>
<body class="dark:bg-gray-800">
<noscript>
diff --git a/src/App.vue b/src/App.vue
index 820222908baada51e7c0c115b714fb8f7b798eae..1ed65d809092bc71282c88d2067c420676d937f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,20 @@
<template>
<div id="app">
- <Navbar />
- <LoadingIndicator />
- <main>
- <div class="mr-0 d-flex">
- <SidebarMenu class="mr-2" />
- <div class="container-fluid px-5">
- <Pilot />
- <Maintenance />
- <BreadCrumbs />
- <RouterView />
- </div>
- </div>
+ <header class="coscine-header">
+ <Navbar />
+ <LoadingIndicator />
+ </header>
+ <SidebarMenu />
+ <main
+ :class="sidebarMenuToggled ? 'sidebar-active' : 'sidebar-inactive'"
+ class="coscine-main"
+ >
+ <b-container fluid>
+ <Pilot />
+ <Maintenance />
+ <BreadCrumbs />
+ <RouterView />
+ </b-container>
</main>
<ExpiryToast />
<NotificationToast />
@@ -43,6 +46,10 @@ export default defineComponent({
localeChange(): string {
return this.mainStore.coscine.locale;
},
+
+ sidebarMenuToggled(): boolean {
+ return this.mainStore.sidebarActive;
+ },
},
watch: {
@@ -76,6 +83,18 @@ export default defineComponent({
</script>
<style>
+.coscine-header {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 999;
+}
+
+.coscine-main {
+ margin-top: var(--sidebar-offset-top);
+ padding-right: 1.5rem;
+}
+
.h-divider {
margin-top: 5px;
margin-bottom: 10px;
@@ -84,8 +103,31 @@ export default defineComponent({
border-top: 1px solid var(--light);
}
+a[target="_blank"]:after {
+ /* URL icon styling for a new tab */
+ content: "\F1C0";
+ font-size: 0.8em;
+ color: var(--secondary);
+ font-family: "bootstrap-icons";
+ src: url("bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d")
+ format("woff2"),
+ url("bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
+}
+
#card-deck {
/* Used to align the cards' and container's left edges */
margin: 0em -0.5em;
}
+
+.sidebar-active {
+ padding-left: calc(var(--sidebar-width-active) + var(--sidebar-left-margin));
+ transition: all 0.3s;
+}
+
+.sidebar-inactive {
+ padding-left: calc(
+ var(--sidebar-width-collapsed) + var(--sidebar-left-margin)
+ );
+ transition: all 0.3s;
+}
</style>
diff --git a/src/assets/css/_custom.css b/src/assets/css/_custom.css
index b4bb2390b0dbb343dc1e7a9b04ac96ac6d948f84..70ef8ab13c1812d3a628b3fdc59c9dd8f368003c 100644
--- a/src/assets/css/_custom.css
+++ b/src/assets/css/_custom.css
@@ -1,7 +1,24 @@
:root {
+ /* Background color for static elements (e.g. Sidebar, Breadcrumbs) */
+ --static-element-bg: var(--light);
+
+ /* Navbar and loading indictor definitions */
--navbar-height: 2.5rem;
--loading-indicator-height: 3px;
--loading-indicator-margin: 1rem;
+ --search-bar-width: calc(10rem + 20vw);
+
+ /* Beadcrumb definitions */
+ --breadcrumbs-height: 3rem;
+ --breadcrumbs-margin: 1rem;
+
+ /* Sidebar definitions */
+ --sidebar-width-collapsed: 3rem;
+ --sidebar-default-width: 25rem;
+ --sidebar-width-active: calc(9rem + 10%);
+ --sidebar-left-margin: 0.5rem;
+
+ /* Calculated heights */
--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
diff --git a/src/assets/images/404.jpg b/src/assets/images/404.jpg
deleted file mode 100644
index 89c27f9f17617926bd799d9ddcadb2fc687d4c9c..0000000000000000000000000000000000000000
Binary files a/src/assets/images/404.jpg and /dev/null differ
diff --git a/src/assets/images/Admin.png b/src/assets/images/Admin.png
deleted file mode 100644
index 0b8ec8da9176c0ef839bcac5e5a2abc92ecf94d9..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Admin.png and /dev/null differ
diff --git a/src/assets/images/CreateProject.png b/src/assets/images/CreateProject.png
deleted file mode 100644
index ef7d28c9663121510b605d1b6cab0a18b9210cca..0000000000000000000000000000000000000000
Binary files a/src/assets/images/CreateProject.png and /dev/null differ
diff --git a/src/assets/images/Home.png b/src/assets/images/Home.png
deleted file mode 100644
index 099603cb00d67d4fe0c737b65d97b0d615b4e504..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Home.png and /dev/null differ
diff --git a/src/assets/images/Login.png b/src/assets/images/Login.png
deleted file mode 100644
index 13ce0221ff82b1a8d304d92f045dced2f94e3cb2..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Login.png and /dev/null differ
diff --git a/src/assets/images/Project-Id-CreateResource.png b/src/assets/images/Project-Id-CreateResource.png
deleted file mode 100644
index fb372e34eb29a2261746e35838d6d4d5d64e77ee..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Id-CreateResource.png and /dev/null differ
diff --git a/src/assets/images/Project-Id-Members.png b/src/assets/images/Project-Id-Members.png
deleted file mode 100644
index 5b66b37927cd0634d4f8f71bdb45ee9337a8a412..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Id-Members.png and /dev/null differ
diff --git a/src/assets/images/Project-Id-Quota.png b/src/assets/images/Project-Id-Quota.png
deleted file mode 100644
index 96476d9b946ced5699ecb0490b6fcbdc50a5ceb9..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Id-Quota.png and /dev/null differ
diff --git a/src/assets/images/Project-Id-R-Guid-Settings.png b/src/assets/images/Project-Id-R-Guid-Settings.png
deleted file mode 100644
index ca85f066924d76a2bfc2e2ded1bc0bbef18b3e22..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Id-R-Guid-Settings.png and /dev/null differ
diff --git a/src/assets/images/Project-Id-R-Guid.png b/src/assets/images/Project-Id-R-Guid.png
deleted file mode 100644
index a463c5ad84848a256bc7090994c89de782f510ef..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Id-R-Guid.png and /dev/null differ
diff --git a/src/assets/images/Project-Id-Settings.png b/src/assets/images/Project-Id-Settings.png
deleted file mode 100644
index 1b0e557fad83468774877cffe787141879d6cbe6..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Id-Settings.png and /dev/null differ
diff --git a/src/assets/images/Project-Slug.png b/src/assets/images/Project-Slug.png
deleted file mode 100644
index e21dca86e829008c44664f51779064e1619fab8b..0000000000000000000000000000000000000000
Binary files a/src/assets/images/Project-Slug.png and /dev/null differ
diff --git a/src/assets/images/UserProfile.png b/src/assets/images/UserProfile.png
deleted file mode 100644
index 295dc84530793159b3c608e2292717d7081227eb..0000000000000000000000000000000000000000
Binary files a/src/assets/images/UserProfile.png and /dev/null differ
diff --git a/src/assets/scss/_custom.scss b/src/assets/scss/_custom.scss
index 8292e94f912a178b6f3d0807bedaab9edbd6ce16..0e347619147ffa3f1876b2ffde82c2f9e21619f7 100644
--- a/src/assets/scss/_custom.scss
+++ b/src/assets/scss/_custom.scss
@@ -12,7 +12,7 @@ $white: #fff;
$gray: #646567;
$gray-dark: #333;
$primary: #00549f;
-$secondary: #e1e1e1;
+// $secondary: #e1e1e1;
$success: #57ab27;
$info: #c7ddf2;
$warning: #fc0;
diff --git a/src/components.d.ts b/src/components.d.ts
index 3e6c56844e222a62ff176b88666ae62f46b3062a..6f4dbc45ee21a6b7d1b92c50b9f05a3346ca3596 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -5,64 +5,7 @@ import "@vue/runtime-core";
declare module "@vue/runtime-core" {
export interface GlobalComponents {
- 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"];
diff --git a/src/components/elements/BreadCrumbs.vue b/src/components/elements/BreadCrumbs.vue
index 370f4d86a183b8960819fb94b54894e80732dea6..bd1373475a8bd5fd00d92e4dbbbda0ecbcc91769 100644
--- a/src/components/elements/BreadCrumbs.vue
+++ b/src/components/elements/BreadCrumbs.vue
@@ -1,5 +1,5 @@
<template>
- <b-breadcrumb>
+ <b-breadcrumb class="breadcrumbs">
<b-breadcrumb-item
:to="{ name: 'list-projects' }"
:active="crumbs.length === 0"
@@ -134,3 +134,11 @@ export default defineComponent({
},
});
</script>
+
+<style scoped>
+.breadcrumbs {
+ background-color: var(--static-element-bg);
+ height: var(--breadcrumbs-height);
+ margin-bottom: var(--breadcrumbs-margin);
+}
+</style>
diff --git a/src/components/elements/Navbar.vue b/src/components/elements/Navbar.vue
index dbc49fac3dba560b3f54f501b38696e15ac70f00..00871cff922f5eb7d008f1f88932b4d5f4f6c41b 100644
--- a/src/components/elements/Navbar.vue
+++ b/src/components/elements/Navbar.vue
@@ -1,6 +1,6 @@
<template>
- <header id="header">
- <b-navbar toggleable="md" type="dark" variant="dark">
+ <div id="navbar">
+ <b-navbar toggleable="md" type="dark" variant="dark" sticky>
<!-- Coscine Logo -->
<b-navbar-brand id="coscineLogo">
<RouterLink :to="{ name: 'list-projects' }">
@@ -12,14 +12,18 @@
</RouterLink>
</b-navbar-brand>
- <b-navbar-toggle target="nav-collapse" class="b-0"></b-navbar-toggle
- ><b-collapse id="nav-collapse" is-nav>
+ <b-navbar-toggle target="nav-collapse" class="b-0" />
+ <b-collapse id="nav-collapse" is-nav>
<!-- Search Bar -->
- <b-navbar-nav class="ml-auto">
+ <b-navbar-nav class="ml-auto px-2">
<b-nav-form @submit.stop.prevent="triggerSearch">
- <b-input-group size="sm" style="width: 25rem">
+ <b-input-group size="sm" class="searchBar">
<template #prepend>
- <b-button :disabled="!searchTerm" @click="triggerSearch">
+ <b-button
+ :disabled="!searchTerm"
+ variant="light"
+ @click="triggerSearch"
+ >
<b-icon icon="search" />
</b-button>
</template>
@@ -45,55 +49,54 @@
:key="index"
:disabled="$root.$i18n.locale === locale"
@click="changeLocale(locale)"
- >{{ $t("nav.lang" + locale.toUpperCase()) }}</b-dropdown-item
>
+ {{ $t("nav.lang" + locale.toUpperCase()) }}
+ </b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="?" right>
<!-- Help -->
- <b-dropdown-item :href="$t('nav.url.extrasHelp')" target="_blank">{{
- $t("nav.extrasHelp")
- }}</b-dropdown-item>
+ <b-dropdown-item :href="$t('nav.url.extrasHelp')" target="_blank">
+ {{ $t("nav.extrasHelp") }}
+ </b-dropdown-item>
<!-- Disclaimer -->
<b-dropdown-item
:href="$t('nav.url.extrasDisclaimer')"
target="_blank"
- >{{ $t("nav.extrasDisclaimer") }}</b-dropdown-item
>
+ {{ $t("nav.extrasDisclaimer") }}
+ </b-dropdown-item>
<!-- Imprint -->
<b-dropdown-item
:href="$t('nav.url.extrasImprint')"
target="_blank"
- >{{ $t("nav.extrasImprint") }}</b-dropdown-item
>
+ {{ $t("nav.extrasImprint") }}
+ </b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown v-if="loggedIn" right>
- <template v-if="user" #button-content
- >{{ $t("nav.user", { displayName: user.displayName }) }}
+ <template v-if="user" #button-content>
+ {{ $t("nav.user", { displayName: user.displayName }) }}
</template>
- <template v-else #button-content
- ><b-skeleton
+ <template v-else #button-content>
+ <b-skeleton
animation="fade"
height="1.5rem"
width="10rem"
style="display: inline-flex; margin-bottom: 0rem"
- ></b-skeleton>
+ />
</template>
<!-- UserProfile -->
<b-dropdown-item :to="{ name: 'userprofile' }">
- <!-- :to from this component currently causes two warnings!
- 1. [vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning:
- 2. [vue-router] <router-link>'s event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning:
- -->
{{ $t("nav.userProfile") }}
</b-dropdown-item>
<!-- Divider -->
<b-dropdown-divider />
<!-- Log out -->
- <b-dropdown-item @click="logUserOut">{{
- $t("nav.userLogOut")
- }}</b-dropdown-item>
+ <b-dropdown-item @click="logUserOut">
+ {{ $t("nav.userLogOut") }}
+ </b-dropdown-item>
</b-nav-item-dropdown>
<router-link
@@ -102,14 +105,14 @@
:to="{ name: 'login', query: { redirect: $route.fullPath } }"
custom
>
- <b-nav-item right :disabled="isExactActive" :href="href">{{
- $t("nav.userLogIn")
- }}</b-nav-item>
+ <b-nav-item right :disabled="isExactActive" :href="href">
+ {{ $t("nav.userLogIn") }}
+ </b-nav-item>
</router-link>
</b-navbar-nav>
</b-collapse>
</b-navbar>
- </header>
+ </div>
</template>
<script lang="ts">
@@ -170,7 +173,7 @@ export default defineComponent({
</script>
<style scoped>
-#header .navbar {
+#navbar .navbar {
padding-top: 0;
padding-bottom: 0;
}
@@ -183,5 +186,9 @@ export default defineComponent({
object-fit: cover;
object-position: 0%;
width: 60px;
+ min-width: 60px;
+}
+.searchBar {
+ min-width: var(--search-bar-width);
}
</style>
diff --git a/src/components/elements/SidebarMenu.vue b/src/components/elements/SidebarMenu.vue
index aa057be2e5b735aef501c3d2035c7e440df8342e..8fc80a1b50aa28ebfa72b81dc1e79f3a392eae4d 100644
--- a/src/components/elements/SidebarMenu.vue
+++ b/src/components/elements/SidebarMenu.vue
@@ -2,9 +2,11 @@
<sidebar-menu
:menu="menu"
:collapsed="collapsed"
- :relative="true"
+ :relative="false"
:show-one-child="true"
:disable-hover="false"
+ :width="widthActive"
+ :width-collapsed="widthCollapsed"
theme="white-theme"
@toggle-collapse="collapse"
>
@@ -269,6 +271,22 @@ export default defineComponent({
}
return [];
},
+ widthActive(): string {
+ if (this.sidebarActive) {
+ return getComputedStyle(document.documentElement).getPropertyValue(
+ "--sidebar-width-active"
+ );
+ } else {
+ return getComputedStyle(document.documentElement).getPropertyValue(
+ "--sidebar-default-width"
+ );
+ }
+ },
+ widthCollapsed(): string {
+ return getComputedStyle(document.documentElement).getPropertyValue(
+ "--sidebar-width-collapsed"
+ );
+ },
},
watch: {
collapsed() {
@@ -293,13 +311,14 @@ export default defineComponent({
@import "/src/assets/scss/_custom.scss";
.v-sidebar-menu {
+ top: calc(100vh - var(--sidebar-height));
height: var(--sidebar-height);
border-radius: 0rem 0.25rem 0.25rem 0rem;
- background: $light;
+ background: var(--static-element-bg);
+ z-index: 998;
}
.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;
diff --git a/src/modules/error/pages/NotFound.vue b/src/modules/error/pages/NotFound.vue
index 3a3d13dd786caca739a7d46fde98b2547ee4b2f6..6369e6592ac283c48be16dfb5f2179fbf64952e9 100644
--- a/src/modules/error/pages/NotFound.vue
+++ b/src/modules/error/pages/NotFound.vue
@@ -1,22 +1,9 @@
<template>
- <div>
- <section
- class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
- >
- <div>
- <CoscineHeadline :headline="$t('page.notFound.title')" />
- <p class="mb-8 leading-relaxed dark:text-white">
- {{ $t("page.notFound.description") }}
- </p>
- <img alt="Oopsie!" src="@/assets/images/404.jpg" />
- </div>
- </section>
- </div>
+ <div></div>
</template>
<script lang="ts">
import { defineComponent } from "vue-demi";
-import CoscineHeadline from "@/components/coscine/CoscineHeadline.vue";
// import the store for current module
import useErrorStore from "../store";
@@ -24,9 +11,6 @@ import useErrorStore from "../store";
import useMainStore from "@/store/index";
export default defineComponent({
- components: {
- CoscineHeadline,
- },
setup() {
const mainStore = useMainStore();
const errorStore = useErrorStore();
diff --git a/src/modules/pid/pages/Pid.vue b/src/modules/pid/pages/Pid.vue
index a130096c844edb8cd607925a4c104d512ca3604a..335632fd1df522a40bddc00674ae705b94e5b4a1 100644
--- a/src/modules/pid/pages/Pid.vue
+++ b/src/modules/pid/pages/Pid.vue
@@ -1,21 +1,9 @@
<template>
- <div>
- <section
- class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
- >
- <div>
- <CoscineHeadline :headline="$t('page.pid.title')" />
- <p class="mb-8 leading-relaxed dark:text-white">
- {{ $t("page.pid.description") }}
- </p>
- </div>
- </section>
- </div>
+ <div></div>
</template>
<script lang="ts">
import { defineComponent } from "vue-demi";
-import CoscineHeadline from "@/components/coscine/CoscineHeadline.vue";
// import the store for current module
import usePidStore from "../store";
@@ -23,9 +11,6 @@ import usePidStore from "../store";
import useMainStore from "@/store/index";
export default defineComponent({
- components: {
- CoscineHeadline,
- },
setup() {
const mainStore = useMainStore();
const pidStore = usePidStore();
diff --git a/src/modules/project/ProjectModule.vue b/src/modules/project/ProjectModule.vue
index ad174642c6e1f24a39fca5401c7c27c1e86cf6e0..4c37c6bb4a00dae935b0e2149e08d5fd125625bd 100644
--- a/src/modules/project/ProjectModule.vue
+++ b/src/modules/project/ProjectModule.vue
@@ -98,10 +98,6 @@ export default defineComponent({
if (this.projectStore.roles === null) {
this.projectStore.retrieveRoles();
}
- // Load Invitations for the project if not present
- if (this.projectStore.currentInvitations === null) {
- this.projectStore.retrieveInvitations(this.project);
- }
},
},
});
diff --git a/src/modules/project/pages/CreateProject.vue b/src/modules/project/pages/CreateProject.vue
index a6180ce923d20b65257f8888e2a453672e1d3dbf..0747065ccc7aea8ae94c56f385aae812930b8206 100644
--- a/src/modules/project/pages/CreateProject.vue
+++ b/src/modules/project/pages/CreateProject.vue
@@ -132,26 +132,28 @@ export default defineComponent({
},
},
- async created() {
+ created() {
this.isLoading = true;
-
- // Load Project Visibilities if not present
- if (this.projectStore.visibilities === null) {
- await this.projectStore.retrieveVisibilities();
- }
- // Load Project Disciplines if not present
- if (this.projectStore.disciplines === null) {
- await this.projectStore.retrieveDisciplines();
- }
-
- this.isRWTHMember = await this.projectStore.getIsMemberOfOrganization(
- "https://ror.org/04xfq0f34" // RWTH Aachen University RoR
- );
-
+ this.fetchData();
this.isLoading = false;
},
methods: {
+ async fetchData() {
+ // Load Project Visibilities if not present
+ if (this.projectStore.visibilities === null) {
+ await this.projectStore.retrieveVisibilities();
+ }
+ // Load Project Disciplines if not present
+ if (this.projectStore.disciplines === null) {
+ await this.projectStore.retrieveDisciplines();
+ }
+
+ this.isRWTHMember = await this.projectStore.getIsMemberOfOrganization(
+ "https://ror.org/04xfq0f34" // RWTH Aachen University RoR
+ );
+ },
+
async clickSave() {
// Validate form again
this.formValidations.naming.$touch();
diff --git a/src/modules/project/pages/Members.vue b/src/modules/project/pages/Members.vue
index c942998064a1dc2a96388ee21ddc7c756cfa52ea..ea239bab55975e866c5c4dda7da3f0039e06127c 100644
--- a/src/modules/project/pages/Members.vue
+++ b/src/modules/project/pages/Members.vue
@@ -8,6 +8,7 @@
:member-role="memberRole"
:project="project"
:roles="roles"
+ :is-owner="isOwner"
@addUser="addUser"
@prepareInvitation="prepareInvitation"
@setFilter="setFilter"
@@ -31,6 +32,7 @@
:remove-text="$t('buttons.remove')"
:owner-count="ownerCount"
:owner-role="ownerRole"
+ :is-owner="isOwner"
@tableFilteredRows="onFilteredRows"
@setRole="setRole"
@selectedItem="prepareDeletion"
@@ -38,7 +40,10 @@
</b-tab>
<!-- Invited Users -->
- <b-tab :title="$t('page.members.externalUsersTabTitle')">
+ <b-tab
+ v-if="isOwner"
+ :title="$t('page.members.externalUsersTabTitle')"
+ >
<MembersTable
id="invitationTable"
:headers="invitationHeaders"
@@ -271,6 +276,19 @@ export default defineComponent({
},
];
},
+ isOwner(): boolean | undefined {
+ return this.projectStore.currentUserRoleIsOwner;
+ },
+ },
+
+ created() {
+ // Load Invitations for the project if not present
+ if (
+ this.projectStore.currentInvitations === null &&
+ this.projectStore.currentUserRoleIsOwner
+ ) {
+ this.projectStore.retrieveInvitations(this.project);
+ }
},
methods: {
diff --git a/src/modules/project/pages/Settings.vue b/src/modules/project/pages/Settings.vue
index 464322c6a11d751207dc17563a5982beec5464da..16910799951a610baf6b26265dcc8e711d2987ec 100644
--- a/src/modules/project/pages/Settings.vue
+++ b/src/modules/project/pages/Settings.vue
@@ -160,25 +160,25 @@ export default defineComponent({
},
},
- async created() {
+ created() {
this.isLoading = true;
-
- // Load Project Visibilities if not present
- if (this.projectStore.visibilities === null) {
- await this.projectStore.retrieveVisibilities();
- }
- // Load Project Disciplines if not present
- if (this.projectStore.disciplines === null) {
- await this.projectStore.retrieveDisciplines();
- }
-
+ this.fetchData();
// Fill the project form
this.onProjectLoaded();
-
this.isLoading = false;
},
methods: {
+ async fetchData() {
+ // Load Project Visibilities if not present
+ if (this.projectStore.visibilities === null) {
+ await this.projectStore.retrieveVisibilities();
+ }
+ // Load Project Disciplines if not present
+ if (this.projectStore.disciplines === null) {
+ await this.projectStore.retrieveDisciplines();
+ }
+ },
onProjectLoaded() {
if (this.project) {
this.isLoading = true;
diff --git a/src/modules/project/pages/components/MembersTable.vue b/src/modules/project/pages/components/MembersTable.vue
index ae5037576f12a055b9bcb9b6b781069862d9311e..1e3c85b2688e4e9ceaaf8831700f185860dda832 100644
--- a/src/modules/project/pages/components/MembersTable.vue
+++ b/src/modules/project/pages/components/MembersTable.vue
@@ -36,7 +36,10 @@
v-model="row.item.role.id"
:options="roles"
:disabled="
- ownerCount === 1 && ownerRole && row.item.role.id === ownerRole.id
+ (ownerCount === 1 &&
+ ownerRole &&
+ row.item.role.id === ownerRole.id) ||
+ !isOwner
"
text-field="displayName"
value-field="id"
@@ -61,7 +64,10 @@
variant="danger"
size="sm"
:disabled="
- ownerCount === 1 && ownerRole && row.item.role.id === ownerRole.id
+ (ownerCount === 1 &&
+ ownerRole &&
+ row.item.role.id === ownerRole.id) ||
+ !isOwner
"
@click="deleteItem(row.item)"
>{{ removeText }}</b-button
@@ -171,6 +177,10 @@ export default defineComponent({
default: "user.surname",
type: String,
},
+ isOwner: {
+ default: false,
+ type: Boolean,
+ },
},
data() {
return {
diff --git a/src/modules/project/pages/components/UserSearchRow.vue b/src/modules/project/pages/components/UserSearchRow.vue
index cef3bbf3183518e8eb51aea2ad0ec36076c2a0bb..ccfa856034774f23bd80fcff45987aab1860aa77 100644
--- a/src/modules/project/pages/components/UserSearchRow.vue
+++ b/src/modules/project/pages/components/UserSearchRow.vue
@@ -12,6 +12,7 @@
adaptSelect: true,
'no-results': queriedUsers.length === 0,
}"
+ :disabled="!isOwner"
:options="queriedUsers"
:filter-by="filterMock"
:selectable="(option) => !option.hasProjectRole"
@@ -67,6 +68,7 @@
? memberRole.id
: null
"
+ :disabled="!isOwner"
text-field="displayName"
value-field="id"
@input="setNewRole"
@@ -80,7 +82,7 @@
<b-button
v-if="validInvitation && !validSelection"
name="inviteUserToProject"
- :disabled="!validInvitation"
+ :disabled="!validInvitation || !isOwner"
@click="prepareInvitation(newUserRole)"
>{{ $t("buttons.invite") }}</b-button
>
@@ -88,12 +90,13 @@
<b-button
v-else
name="addUserToProject"
- :disabled="!validSelection"
+ :disabled="!validSelection || !isOwner"
@click="addUser(newUserRole)"
>{{ $t("buttons.addUser") }}</b-button
>
<b-button
name="importUser"
+ :disabled="!isOwner"
@click="$bvModal.show('importUserModal')"
>{{ $t("buttons.import") }}</b-button
>
@@ -155,6 +158,10 @@ export default defineComponent({
default: null,
type: [Array, null] as PropType<RoleObject[] | null>,
},
+ isOwner: {
+ default: false,
+ type: Boolean,
+ },
},
setup() {
const userStore = useUserStore();
@@ -266,10 +273,8 @@ export default defineComponent({
async fetchUserOptions(search: string, loading: (value: boolean) => void) {
if (search && this.project && this.project.id) {
loading(true);
- this.queriedUsers = await this.userStore.getUser(
- search,
- this.project.id
- );
+ this.queriedUsers =
+ (await this.userStore.getUser(search, this.project.id)) ?? [];
loading(false);
if (this.validEmail && this.queriedUsers.length == 0) {
// Add unknown entry as an entry to the list (email address of user to invite)
diff --git a/src/modules/resource/components/create-resource/General.vue b/src/modules/resource/components/create-resource/General.vue
index 51d8a663e3a2931704faeaf879b6a82af023f9d6..bdd6fd2d9f8645b0746731c8caa7d45055b4d24e 100644
--- a/src/modules/resource/components/create-resource/General.vue
+++ b/src/modules/resource/components/create-resource/General.vue
@@ -416,7 +416,7 @@ export default defineComponent({
},
},
- created() {
+ mounted() {
this.initTabContent();
},
@@ -429,6 +429,8 @@ export default defineComponent({
if (this.resourceForm.license && this.resourceForm.license.id) {
this.selectedLicense = this.resourceForm.license.id;
}
+ console.debug("VIS: ", this.resourceForm.visibility);
+ console.debug("VISz: ", this.visibilities);
if (this.resourceForm.visibility && this.resourceForm.visibility.id) {
this.selectedVisibility = this.resourceForm.visibility.id;
} else {
@@ -501,6 +503,7 @@ export default defineComponent({
this.selectedVisibility = visibility.id;
this.resourceForm.visibility = visibility;
}
+ console.debug("DEF VIS: ", this.visibilities);
},
translateResourceNameToDisplayName() {
diff --git a/src/modules/resource/pages/CreateResource.vue b/src/modules/resource/pages/CreateResource.vue
index 4dac3194643864f536bea5c99dcaa297e9801d4c..88370f720742ed332b1ba102037cd8a894179e77 100644
--- a/src/modules/resource/pages/CreateResource.vue
+++ b/src/modules/resource/pages/CreateResource.vue
@@ -171,26 +171,28 @@ export default defineComponent({
},
},
- async created() {
+ created() {
this.isLoading = true;
this.getGroupedApplicationProfilesList();
-
- // Load Project Visibilities if not present
- if (this.projectStore.visibilities === null) {
- await this.projectStore.retrieveVisibilities();
- }
- // Load Project Disciplines if not present
- if (this.projectStore.disciplines === null) {
- await this.projectStore.retrieveDisciplines();
- }
- // Load Project Licenses if not present
- if (this.projectStore.licenses === null) {
- await this.projectStore.retrieveLicenses();
- }
+ this.fetchData();
this.isLoading = false;
},
methods: {
+ async fetchData() {
+ // Load Project Visibilities if not present
+ if (this.projectStore.visibilities === null) {
+ await this.projectStore.retrieveVisibilities();
+ }
+ // Load Project Disciplines if not present
+ if (this.projectStore.disciplines === null) {
+ await this.projectStore.retrieveDisciplines();
+ }
+ // Load Project Licenses if not present
+ if (this.projectStore.licenses === null) {
+ await this.projectStore.retrieveLicenses();
+ }
+ },
async getGroupedApplicationProfilesList() {
let list = await this.resourceStore.getApplicationProfilesList();
if (list) {
diff --git a/src/modules/resource/pages/Settings.vue b/src/modules/resource/pages/Settings.vue
index 4b096661d2511834392d6b058997b38ad93cb10c..53d289cdd43db8c57f53610148a8afa3b7c53469 100644
--- a/src/modules/resource/pages/Settings.vue
+++ b/src/modules/resource/pages/Settings.vue
@@ -195,26 +195,28 @@ export default defineComponent({
},
},
- async created() {
+ created() {
this.isLoading = true;
-
- // Load Project Visibilities if not present
- if (this.projectStore.visibilities === null) {
- await this.projectStore.retrieveVisibilities();
- }
- // Load Project Disciplines if not present
- if (this.projectStore.disciplines === null) {
- await this.projectStore.retrieveDisciplines();
- }
- // Load Project Licenses if not present
- if (this.projectStore.licenses === null) {
- await this.projectStore.retrieveLicenses();
- }
+ this.fetchData();
this.onResourceLoaded();
this.isLoading = false;
},
methods: {
+ async fetchData() {
+ // Load Project Visibilities if not present
+ if (this.projectStore.visibilities === null) {
+ await this.projectStore.retrieveVisibilities();
+ }
+ // Load Project Disciplines if not present
+ if (this.projectStore.disciplines === null) {
+ await this.projectStore.retrieveDisciplines();
+ }
+ // Load Project Licenses if not present
+ if (this.projectStore.licenses === null) {
+ await this.projectStore.retrieveLicenses();
+ }
+ },
onResourceLoaded() {
if (this.resource) {
// Fill the form. Note that regular assignment makes this.resource react on this.resourceForm changes!
diff --git a/src/modules/search/pages/Search.vue b/src/modules/search/pages/Search.vue
index 444fa78ce18188b59478c17066f952f1f59638e2..5d2e7a4ca53d0c9a1c1b3417f840e66968ab616e 100644
--- a/src/modules/search/pages/Search.vue
+++ b/src/modules/search/pages/Search.vue
@@ -2,11 +2,11 @@
<div class="search">
<CoscineHeadline :headline="$t('page.search.title')" />
- <b-row id="mainRow">
+ <b-row id="mainRow" class="m-0">
<!-- Sidebar -->
<Sidebar />
- <b-col ref="rightCol" sm="10" align-self="end" style="height: 100%">
+ <b-col ref="rightCol" sm="10" align-self="end" class="h-100">
<!-- Search Bar Fields -->
<b-row id="searchBarContainer" align-content="center">
<b-col id="searchField" align-self="start" class="pl-0">
@@ -147,7 +147,7 @@
</b-row>
<!-- Pagination -->
- <b-row class="mt-1 mb-1 text-right" align-v="center">
+ <b-row class="my-1 text-right" align-v="center" no-gutters>
<b-col align-self="center" class="p-0" />
<b-col align-self="center" class="p-0">
<b-pagination
@@ -294,12 +294,12 @@ export default defineComponent({
<style scoped>
#mainRow {
- /* this style stretches the page vertically to fit the screen:-moz-animation:
+ /* this style stretches the page vertically to fit the screen:
- container-fluid <-> top = 59px
- mainRow <-> container-fluid = 102px
- mainRow <-> bottom = 62px
*/
- height: calc(100vh - 59px - 102px - 62px);
+ height: calc(100vh - var(--sidebar-offset-top) - 102px - 62px);
}
#pagination {
margin-top: 0.5rem;
diff --git a/src/modules/search/pages/components/Sidebar.vue b/src/modules/search/pages/components/Sidebar.vue
index bc86048f58acb3163f0590eca3eb4bbadcd745ff..216a940e9f66f6936489a2757f2b414eb9ef81c2 100644
--- a/src/modules/search/pages/components/Sidebar.vue
+++ b/src/modules/search/pages/components/Sidebar.vue
@@ -1,5 +1,5 @@
<template>
- <b-col>
+ <b-col class="pl-0">
<b-card
id="sidebarContainer"
class="progress-bar-striped text-center bg-light"
diff --git a/src/plugins/bootstrap-vue.ts b/src/plugins/bootstrap-vue.ts
index ba5ef15694d25d83ae919b2d1a122ac752f3a898..31fd3642950ca49d9b66db184ddc4afdac9fb4a4 100644
--- a/src/plugins/bootstrap-vue.ts
+++ b/src/plugins/bootstrap-vue.ts
@@ -1,7 +1,14 @@
import Vue from "vue";
-import { IconsPlugin } from "bootstrap-vue";
+import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
+
+// From Bootstrap Vue resolver
+// import { IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.min.css";
-Vue.use(IconsPlugin);
+Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);
+
+// From Bootstrap Vue resolver
+// Vue.use(IconsPlugin);
diff --git a/src/util/bootstrap-vue-resolver.ts b/src/util/bootstrap-vue-resolver.ts
index afc4e1dd9702e1cd045e884a62760ce2fe335bf7..018c8d4e20cacee19943772924184e1d47f09080 100644
--- a/src/util/bootstrap-vue-resolver.ts
+++ b/src/util/bootstrap-vue-resolver.ts
@@ -13,3 +13,5 @@ export function BootstrapVueResolver(): ComponentResolver {
},
};
}
+
+// From Bootstrap Vue resolver
diff --git a/vite.config.js b/vite.config.js
index 56ee32f7905e82fce15d97b7c68390f2010248fa..5e155eaec1cece84d6413a3ec1a0bdac129a874f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,7 +12,8 @@ import replace from '@rollup/plugin-replace';
import WindiCSS from "vite-plugin-windicss";
import Components from "unplugin-vue-components/vite";
-import { BootstrapVueResolver } from "./src/util/bootstrap-vue-resolver";
+// From Bootstrap Vue resolver
+// import { BootstrapVueResolver } from "./src/util/bootstrap-vue-resolver";
const config = defineConfig({
resolve: {
@@ -81,23 +82,23 @@ const config = defineConfig({
"Readable$3.call": "Readable$2.call",
'return new Readable$2(options);':
`{
- Object.assign(this, EventEmitter.prototype);
- this.push = Readable$1.prototype.push;
- this.unshift = Readable$1.prototype.unshift;
- this.isPaused = Readable$1.prototype.isPaused;
- this.setEncoding = Readable$1.prototype.setEncoding;
- this.read = Readable$1.prototype.read;
- this.pipe = Readable$1.prototype.pipe;
- this.unpipe = Readable$1.prototype.unpipe;
- this.on = Readable$1.prototype.on;
- this.addListener = Readable$1.prototype.addListener;
- this.resume = Readable$1.prototype.resume;
- this.pause = Readable$1.prototype.pause;
- this.wrap = Readable$1.prototype.wrap;
- this.push = Transform$2.prototype.push;
- this._read = Transform$2.prototype._read;
- this._destroy = Transform$2.prototype._destroy;
- }`
+ Object.assign(this, EventEmitter.prototype);
+ this.push = Readable$1.prototype.push;
+ this.unshift = Readable$1.prototype.unshift;
+ this.isPaused = Readable$1.prototype.isPaused;
+ this.setEncoding = Readable$1.prototype.setEncoding;
+ this.read = Readable$1.prototype.read;
+ this.pipe = Readable$1.prototype.pipe;
+ this.unpipe = Readable$1.prototype.unpipe;
+ this.on = Readable$1.prototype.on;
+ this.addListener = Readable$1.prototype.addListener;
+ this.resume = Readable$1.prototype.resume;
+ this.pause = Readable$1.prototype.pause;
+ this.wrap = Readable$1.prototype.wrap;
+ this.push = Transform$2.prototype.push;
+ this._read = Transform$2.prototype._read;
+ this._destroy = Transform$2.prototype._destroy;
+ }`
},
delimiters: ['', ''],
preventAssignment: false,
@@ -114,7 +115,8 @@ const config = defineConfig({
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
resolvers: [
- BootstrapVueResolver()
+ // From Bootstrap Vue resolver
+ // BootstrapVueResolver()
],
}),
],