feat: added bookmarks for project and table pages, refactored landing…

… page (#3850)
obiba · May 30, 2024 · 2a6a458 · 2a6a458
1 parent dd1a875
commit 2a6a458
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 44 deletions.
diff --git a/opal-core-ws/src/main/java/org/obiba/opal/web/system/subject/BookmarkResourceImpl.java b/opal-core-ws/src/main/java/org/obiba/opal/web/system/subject/BookmarkResourceImpl.java
@@ -46,7 +46,7 @@ public void setPrincipal(String principal) {
 
   @Override
   public void setPath(String path) {
-    this.path = path;
+    this.path = path.startsWith("/") ? path : "/" + path;
   }
 
   @Override

diff --git a/opal-ui/src/components/BookmarkIcon.vue b/opal-ui/src/components/BookmarkIcon.vue
@@ -0,0 +1,33 @@
+<template>
+  <q-icon
+    :name="name"
+    :color="color"
+    :title="$t(title)"
+    size="sm"
+    class="on-right"
+    @click="authStore.toggleBookmark(props.resource)"
+  />
+</template>
+
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'BookmarkIcon',
+});
+</script>
+<script setup lang="ts">
+interface BookmarkIconProps {
+  resource: string;
+}
+
+const props = defineProps<BookmarkIconProps>();
+
+const authStore = useAuthStore();
+
+const name = computed(() => authStore.isBookmarked(props.resource) ? 'star' : 'star_outline');
+
+const color = computed(() => authStore.isBookmarked(props.resource) ? 'warning' : 'grey-5');
+
+const title = computed(() => authStore.isBookmarked(props.resource) ? 'bookmarked_item' : 'bookmark_item');
+</script>
diff --git a/opal-ui/src/components/BookmarksList.vue b/opal-ui/src/components/BookmarksList.vue
@@ -0,0 +1,47 @@
+<template>
+  <q-list separator v-if="bookmarks.length">
+    <q-item-label header class="text-uppercase">{{ $t('bookmarks') }}</q-item-label>
+    <q-item
+      v-for="bookmark in bookmarks"
+      :key="bookmark.link"
+    >
+      <q-item-section>
+        <q-item-label><router-link :to="bookmark.link">{{ bookmark.title }}</router-link></q-item-label>
+        <q-item-label caption lines="2">{{ bookmark.caption }}</q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<script lang="ts">
+import { BookmarkDto, BookmarkDto_ResourceType } from 'src/models/Opal';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'BookmarksList',
+});
+</script>
+<script setup lang="ts">
+const authStore = useAuthStore();
+
+const bookmarks = computed(() => authStore.bookmarks.map((bookmark) => ({
+  title: getTitle(bookmark),
+  caption: bookmark.type,
+  link: getLink(bookmark)
+})));
+
+function getTitle(bookmark: BookmarkDto) {
+  const title = bookmark.links.find((link) => link.rel === bookmark.resource).link;
+  if (bookmark.type === BookmarkDto_ResourceType.TABLE) {
+    const dsName = bookmark.links.find((link) => link.rel !== bookmark.resource).link;
+    return `${dsName}.${title}`;
+  }
+  return title;
+}
+
+function getLink(bookmark: BookmarkDto) {
+  const link = bookmark.resource;
+  if (bookmark.type === BookmarkDto_ResourceType.TABLE)
+    return link.replace(/\/datasource\//g, '/project/')
+  return link;
+}
+</script>
diff --git a/opal-ui/src/i18n/en/index.js b/opal-ui/src/i18n/en/index.js
@@ -249,4 +249,7 @@ export default {
   id_column_name: 'ID column name',
   id_column_name_hint: 'Name of the column that identifies the entity. If not provided, the default name applies.',
   export_tables_task_created: 'Export tables task created with identifier [ {id} ].',
+  bookmarks: 'Stars',
+  bookmark_item: 'Star this item',
+  bookmarked_item: 'Item starred',
 };
diff --git a/opal-ui/src/i18n/fr/index.js b/opal-ui/src/i18n/fr/index.js
@@ -242,4 +242,7 @@ export default {
   username: 'Nom d\'utilisateur',
   password: 'Mot de passe',
   auth_method: 'Méthode d\'authentification',
+  bookmarks: 'Favoris',
+  bookmark_item: 'Ajouter aux favoris',
+  bookmarked_item: 'Favori enregistré',
 };
diff --git a/opal-ui/src/layouts/MainLayout.vue b/opal-ui/src/layouts/MainLayout.vue
@@ -107,7 +107,7 @@ const localeOptions = computed(() => {
 const leftDrawerOpen = ref(false);
 
 onMounted(() => {
-  authStore.userProfile().catch(() => {
+  authStore.userProfile().then(() => authStore.loadBookmarks()).catch(() => {
     router.push('/signin');
   });
 });

diff --git a/opal-ui/src/pages/IndexPage.vue b/opal-ui/src/pages/IndexPage.vue
@@ -6,48 +6,32 @@
       </q-breadcrumbs>
     </q-toolbar>
     <q-page class="q-pa-md">
-      <div class="row">
-        <div class="col-md-auto col-sm-auto col-xs-12">
-          <q-card class="on-left bg-primary text-white q-mb-md o-card">
-            <q-card-section>
-              <div class="text-caption">{{  $t('projects_caption') }}</div>
-            </q-card-section>
-            <q-separator/>
-            <q-card-actions>
-              <div class="text-subtitle2">
-                {{ $t('projects') }}
-                <q-btn
-                  flat
-                  rounded
-                  icon="arrow_forward"
-                  size="sm"
-                  class="q-pa-sm bg-grey-4 text-grey-10 q-ml-sm"
-                  to="/projects"
-                ></q-btn>
-              </div>
-            </q-card-actions>
-          </q-card>
+      <div class="row q-col-gutter-lg q-mb-lg">
+        <div class="col-6 col-sm-6 col-xs-12">
+          <q-list separator>
+            <q-item-label header class="text-uppercase">{{ $t('data_management') }}</q-item-label>
+            <q-item>
+              <q-item-section>
+                <q-item-label><router-link to="/projects">{{ $t('projects') }}</router-link></q-item-label>
+                <q-item-label caption lines="2">{{ $t('projects_caption') }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label><router-link to="/files">{{ $t('files') }}</router-link></q-item-label>
+                <q-item-label caption lines="2">{{ $t('files_caption') }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label><router-link to="/tasks">{{ $t('tasks') }}</router-link></q-item-label>
+                <q-item-label caption lines="2">{{ $t('tasks_caption') }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
         </div>
-        <div class="col-md-auto col-sm-auto col-xs-12">
-          <q-card class="on-left bg-warning text-black q-mb-md o-card">
-            <q-card-section>
-              <div class="text-caption">{{ $t('files_caption') }}</div>
-            </q-card-section>
-            <q-separator/>
-            <q-card-actions>
-              <div class="text-subtitle2">
-                {{ $t('files') }}
-                <q-btn
-                  flat
-                  rounded
-                  icon="arrow_forward"
-                  size="sm"
-                  class="q-pa-sm bg-grey-4 text-grey-10 q-ml-sm"
-                  :to="`/files/home/${username}`"
-                ></q-btn>
-              </div>
-            </q-card-actions>
-          </q-card>
+        <div class="col-6 col-sm-6 col-xs-12">
+          <bookmarks-list/>
         </div>
       </div>
       <div>
@@ -58,9 +42,14 @@
 </template>
 
 <script setup lang="ts">
+import BookmarksList from 'src/components/BookmarksList.vue';
 const authStore = useAuthStore();
 
 const username = computed(() =>
   authStore.profile?.principal ? authStore.profile.principal : ''
 );
+
+onMounted(() => {
+  authStore.loadBookmarks();
+});
 </script>
diff --git a/opal-ui/src/pages/ProjectPage.vue b/opal-ui/src/pages/ProjectPage.vue
@@ -13,6 +13,7 @@
         size="sm"
         class="on-right"
       />
+      <bookmark-icon :resource="`/project/${name}`" />
     </q-toolbar>
     <q-page class="q-pa-md">
       <div class="text-h5 q-mb-md">
@@ -76,6 +77,7 @@
 </template>
 
 <script setup lang="ts">
+import BookmarkIcon from 'src/components/BookmarkIcon.vue';
 import { projectStatusColor } from 'src/utils/colors';
 
 const route = useRoute();

diff --git a/opal-ui/src/pages/ProjectTablePage.vue b/opal-ui/src/pages/ProjectTablePage.vue
@@ -17,6 +17,7 @@
         size="sm"
         class="on-right"
       />
+      <bookmark-icon :resource="`/datasource/${dsName}/table/${tName}`" />
     </q-toolbar>
     <q-page class="q-pa-md">
       <div class="text-h5">
@@ -90,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+import BookmarkIcon from 'src/components/BookmarkIcon.vue';
 import TableVariables from 'src/components/datasource/TableVariables.vue';
 import TableValues from 'src/components/datasource/TableValues.vue';
 import FieldsList, { FieldItem } from 'src/components/FieldsList.vue';

diff --git a/opal-ui/src/stores/auth.ts b/opal-ui/src/stores/auth.ts
@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/api';
-import { SubjectProfileDto } from 'src/models/Opal';
+import { BookmarkDto, SubjectProfileDto } from 'src/models/Opal';
 
 export const useAuthStore = defineStore('auth', () => {
   const sid = ref('');
   const version = ref('');
   const profile = ref<SubjectProfileDto>({} as SubjectProfileDto);
+  const bookmarks = ref<BookmarkDto[]>([]);
 
   function reset() {
     sid.value = '';
@@ -52,14 +53,41 @@ export const useAuthStore = defineStore('auth', () => {
     });
   }
 
+  function isBookmarked(resource: string) {
+    return bookmarks.value.find((b) => b.resource === resource) !== undefined;
+  }
+
+  async function toggleBookmark(resource: string) {
+    if (isBookmarked(resource)) {
+      return api.delete(`/system/subject-profile/_current/bookmark${resource}`).then(() => {
+        return loadBookmarks();
+      });
+    } else {
+      return api.post('/system/subject-profile/_current/bookmarks', {}, { params: { resource } }).then(() => {
+        return loadBookmarks();
+      });
+    }
+  }
+
+  async function loadBookmarks() {
+    return api.get('/system/subject-profile/_current/bookmarks').then((response) => {
+      bookmarks.value = response.data;
+      return response.data;
+    });
+  }
+
   return {
     sid,
     version,
     profile,
     isAuthenticated,
+    bookmarks,
     signin,
     signout,
     userProfile,
+    isBookmarked,
+    loadBookmarks,
+    toggleBookmark,
     reset,
   };
 });