From c41db4260e29a4cd773c917c608d51cee53b2400 Mon Sep 17 00:00:00 2001
From: Martin Weise <martin.weise@tuwien.ac.at>
Date: Sat, 16 Mar 2024 22:44:04 +0100
Subject: [PATCH] Tweaking the UI a bit with loading animations
---
.../at/tuwien/entities/database/Database.java | 2 +-
.../repository/mdb/DatabaseRepository.java | 2 ++
.../service/impl/MariaDbServiceImpl.java | 2 +-
.../components/database/DatabaseCard.vue | 9 ++++++++-
.../components/database/DatabaseList.vue | 2 +-
.../components/database/DatabaseSkeleton.vue | 20 +++++++++----------
.../components/database/DatabaseToolbar.vue | 15 +++++++++-----
dbrepo-ui/composables/identifier-service.ts | 7 +++++--
.../pages/database/[database_id]/info.vue | 10 ++++++----
dbrepo-ui/pages/index.vue | 4 +++-
10 files changed, 46 insertions(+), 27 deletions(-)
diff --git a/dbrepo-metadata-service/entities/src/main/java/at/tuwien/entities/database/Database.java b/dbrepo-metadata-service/entities/src/main/java/at/tuwien/entities/database/Database.java
index 19b7eae6c9..79f0b0acc5 100644
--- a/dbrepo-metadata-service/entities/src/main/java/at/tuwien/entities/database/Database.java
+++ b/dbrepo-metadata-service/entities/src/main/java/at/tuwien/entities/database/Database.java
@@ -33,7 +33,7 @@ import java.util.UUID;
@UniqueConstraint(columnNames = {"cid", "internalName"})
})
@NamedQueries({
- @NamedQuery(name = "Database.findAll", query = "select d from Database d order by d.created desc"),
+ @NamedQuery(name = "Database.findAllDesc", query = "select d from Database d order by d.created desc"),
@NamedQuery(name = "Database.findByInternalName", query = "select d from Database d where d.internalName = ?1"),
@NamedQuery(name = "Database.findAllOnlyIds", query = "select d.id from Database d order by d.created desc"),
@NamedQuery(name = "Database.findReadAccess", query = "select distinct d from Database d join DatabaseAccess a on a.hdbid = d.id and a.huserid = ?1"),
diff --git a/dbrepo-metadata-service/repositories/src/main/java/at/tuwien/repository/mdb/DatabaseRepository.java b/dbrepo-metadata-service/repositories/src/main/java/at/tuwien/repository/mdb/DatabaseRepository.java
index b912399328..fe17cbc8b2 100644
--- a/dbrepo-metadata-service/repositories/src/main/java/at/tuwien/repository/mdb/DatabaseRepository.java
+++ b/dbrepo-metadata-service/repositories/src/main/java/at/tuwien/repository/mdb/DatabaseRepository.java
@@ -11,6 +11,8 @@ import java.util.UUID;
@Repository
public interface DatabaseRepository extends JpaRepository<Database, Long> {
+ List<Database> findAllDesc();
+
List<Database> findReadAccess(UUID id);
List<Database> findWriteAccess(UUID id);
diff --git a/dbrepo-metadata-service/services/src/main/java/at/tuwien/service/impl/MariaDbServiceImpl.java b/dbrepo-metadata-service/services/src/main/java/at/tuwien/service/impl/MariaDbServiceImpl.java
index a905152e61..3353721f47 100644
--- a/dbrepo-metadata-service/services/src/main/java/at/tuwien/service/impl/MariaDbServiceImpl.java
+++ b/dbrepo-metadata-service/services/src/main/java/at/tuwien/service/impl/MariaDbServiceImpl.java
@@ -76,7 +76,7 @@ public class MariaDbServiceImpl extends HibernateConnector implements DatabaseSe
@Override
public List<Database> findAll() {
- return databaseRepository.findAll();
+ return databaseRepository.findAllDesc();
}
@Override
diff --git a/dbrepo-ui/components/database/DatabaseCard.vue b/dbrepo-ui/components/database/DatabaseCard.vue
index 7dbb6401b4..ea3089fabd 100644
--- a/dbrepo-ui/components/database/DatabaseCard.vue
+++ b/dbrepo-ui/components/database/DatabaseCard.vue
@@ -24,6 +24,7 @@
v-if="!database.is_public"
size="small"
:color="colorVariant"
+ variant="outlined"
:text="$t('toolbars.database.private')"
flat />
<v-chip
@@ -76,7 +77,13 @@ export default {
},
computed: {
colorVariant () {
- return this.$vuetify.theme.global.name.toLowerCase().endsWith('contrast') ? '' : 'secondary'
+ return this.isContrastTheme ? '' : (this.isDarkTheme ? 'tertiary' : 'secondary')
+ },
+ isContrastTheme () {
+ return this.$vuetify.theme.global.name.toLowerCase().endsWith('contrast')
+ },
+ isDarkTheme () {
+ return this.$vuetify.theme.global.name.toLowerCase().startsWith('dark')
}
},
methods: {
diff --git a/dbrepo-ui/components/database/DatabaseList.vue b/dbrepo-ui/components/database/DatabaseList.vue
index c836c2be79..baefecad20 100644
--- a/dbrepo-ui/components/database/DatabaseList.vue
+++ b/dbrepo-ui/components/database/DatabaseList.vue
@@ -2,7 +2,7 @@
<div>
<div
v-if="loading"
- v-for="(idx) in [1,2,3]"
+ v-for="(idx) in [1,2,3,4,5]"
:key="`d-${idx}`">
<DatabaseSkeleton />
</div>
diff --git a/dbrepo-ui/components/database/DatabaseSkeleton.vue b/dbrepo-ui/components/database/DatabaseSkeleton.vue
index 2e691fa98a..2a918c05c3 100644
--- a/dbrepo-ui/components/database/DatabaseSkeleton.vue
+++ b/dbrepo-ui/components/database/DatabaseSkeleton.vue
@@ -1,16 +1,14 @@
<template>
- <v-card variant="flat">
+ <v-card
+ variant="flat"
+ rounded="0">
<v-divider class="mx-4" />
- <v-card-subtitle class="db-subtitle">
- <v-skeleton-loader type="text" :style="randomWidth(100,300)" />
- <v-skeleton-loader type="text" class="pt-2" :style="randomWidth(100,200)" />
- </v-card-subtitle>
- <v-card-text class="db-description">
- <v-skeleton-loader type="chip" />
- <v-skeleton-loader type="text" class="pt-4" :style="randomWidth(800,1000)" />
- <v-skeleton-loader type="text" :style="randomWidth(800,1000)" />
- <v-skeleton-loader type="text" :style="randomWidth(600,1000)" />
- </v-card-text>
+ <v-skeleton-loader
+ type="subtitle"
+ :style="randomWidth(300,500)" />
+ <v-skeleton-loader
+ type="list-item-two-line"
+ :style="randomWidth(500,800)" />
</v-card>
</template>
diff --git a/dbrepo-ui/components/database/DatabaseToolbar.vue b/dbrepo-ui/components/database/DatabaseToolbar.vue
index b48aaa93d5..a4897c120b 100644
--- a/dbrepo-ui/components/database/DatabaseToolbar.vue
+++ b/dbrepo-ui/components/database/DatabaseToolbar.vue
@@ -1,15 +1,20 @@
<template>
- <div v-if="database">
- <v-toolbar flat>
+ <div>
+ <v-toolbar
+ flat>
<v-toolbar-title>
- <span v-if="$vuetify.display.lgAndUp" v-text="database.name" />
- <v-tooltip bottom>
+ <span
+ v-if="database && $vuetify.display.lgAndUp"
+ v-text="database.name" />
+ <v-tooltip
+ v-if="database"
+ bottom>
<template v-slot:activator="{ props }">
<v-icon
class="ml-2"
size="small"
right
- :color="database.is_public ? 'success' : null"
+ :color="database.is_public ? 'success' : 'chip'"
v-bind="props">
{{ database.is_public ? 'mdi-lock-open-outline' : 'mdi-lock-outline' }}
</v-icon>
diff --git a/dbrepo-ui/composables/identifier-service.ts b/dbrepo-ui/composables/identifier-service.ts
index 268dc8d3f7..de406ef7b6 100644
--- a/dbrepo-ui/composables/identifier-service.ts
+++ b/dbrepo-ui/composables/identifier-service.ts
@@ -167,12 +167,15 @@ export const useIdentifierService = (): any => {
}
const filtered = data.descriptions.filter(d => d.language && d.language === 'en')
if (filtered.length === 0) {
- return data.descriptions[0].description
+ return data.descriptions[0]?.description
}
return filtered[0].description
}
- function descriptionShort(description: string): string {
+ function descriptionShort(description: string): string | null {
+ if (!description) {
+ return null
+ }
const targetLength = 280
const lengthMax = 300
if (description.length <= lengthMax) {
diff --git a/dbrepo-ui/pages/database/[database_id]/info.vue b/dbrepo-ui/pages/database/[database_id]/info.vue
index cb3de72ff9..eb1b6f544b 100644
--- a/dbrepo-ui/pages/database/[database_id]/info.vue
+++ b/dbrepo-ui/pages/database/[database_id]/info.vue
@@ -2,7 +2,6 @@
<div>
<DatabaseToolbar />
<v-window
- v-if="database"
v-model="tab">
<v-window-item value="1">
<Summary
@@ -18,12 +17,14 @@
:identifier="identifier" />
</v-card-text>
</v-card>
- <v-divider v-if="hasIdentifier" />
+ <v-divider
+ v-if="hasIdentifier" />
<v-card
:title="$t('pages.database.title')"
variant="flat"
rounded="0">
- <v-card-text>
+ <v-card-text
+ v-if="database">
<v-list
lines="two"
dense>
@@ -114,7 +115,8 @@
:title="$t('pages.container.title')"
variant="flat"
rounded="0">
- <v-card-text>
+ <v-card-text
+ v-if="database">
<v-list dense>
<v-list-item
:title="$t('pages.container.name.title')"
diff --git a/dbrepo-ui/pages/index.vue b/dbrepo-ui/pages/index.vue
index 3b410c1b73..5b4ee9cc9d 100644
--- a/dbrepo-ui/pages/index.vue
+++ b/dbrepo-ui/pages/index.vue
@@ -38,7 +38,7 @@ export default {
},
data () {
return {
- loading: false,
+ loading: true,
dialog: null,
databases: [],
userStore: useUserStore()
@@ -56,10 +56,12 @@ export default {
}
},
mounted () {
+ this.loading = true
const databaseService = useDatabaseService();
databaseService.findAll()
.then((databases) => {
this.databases = databases
+ this.loading = false
})
},
methods: {
--
GitLab