Project sharing

packages/client/hmi-client/src/components/home/tera-project-menu.vue

@@ -15,6 +15,7 @@ import { computed, ref } from 'vue';
 import { exportProjectAsFile } from '@/services/project';
 import { AcceptedExtensions } from '@/types/common';
 import { MenuItem } from 'primevue/menuitem';
+import useAuthStore from '@/stores/auth';
 
 const props = defineProps<{ project: Project | null }>();
 
@@ -26,8 +27,8 @@ const { isShareDialogVisible, isRemoveDialogVisible, isProjectConfigDialogVisibl
 const isCopying = ref(false);
 
 const menu = ref();
-const renameMenuItem = {
- label: 'Edit project details',
+const editDetailsMenuItem = {
+ label: 'Edit details',
  icon: 'pi pi-pencil',
  command: () => {
  isProjectConfigDialogVisible.value = true;
@@ -41,14 +42,14 @@ const shareMenuItem = {
  }
 };
 const removeMenuItem = {
- label: 'Remove',
+ label: 'Delete',
  icon: 'pi pi-trash',
  command: () => {
  isRemoveDialogVisible.value = true;
  }
 };
 const copyMenuItem = {
- label: 'Copy this project',
+ label: 'Copy',
  icon: 'pi pi-clone',
  command: async () => {
  if (props.project) {
@@ -80,19 +81,20 @@ const downloadMenuItem = {
  }
 };
 
-const separatorMenuItem = { separator: true };
 const projectMenuItems = computed(() => {
- const items: MenuItem[] = [];
- if (props.project?.publicProject || props.project?.userPermission === 'creator') {
- items.push(copyMenuItem);
- items.push(downloadMenuItem);
- }
- if (props.project?.userPermission === 'creator') {
- items.push(renameMenuItem, shareMenuItem, separatorMenuItem, removeMenuItem);
+ // Basic access to public and reader project
+ const items: MenuItem[] = [copyMenuItem, downloadMenuItem];
+
+ // Creator/Editor of the project
+ if (['creator', 'writer'].includes(props.project?.userPermission ?? '')) {
+ items.push(editDetailsMenuItem, shareMenuItem);
  }
- if (props.project?.userPermission === 'writer') {
- items.push(renameMenuItem);
+
+ // Creator of the project, or an admin
+ if (props.project?.userPermission === 'creator' || useAuthStore().isAdmin) {
+ items.push(removeMenuItem);
  }
+
  return items;
 });
 

packages/client/hmi-client/src/components/navbar/tera-navbar.vue

@@ -381,7 +381,7 @@ const userMenuItems = ref([
  command: () => {
  router.push(RoutePath.UserAdmin);
  },
- visible: auth.user?.roles.some((r) => r.name === 'ADMIN')
+ visible: auth.isAdmin
  },
  {
  label: 'Logout',

packages/client/hmi-client/src/page/Home.vue

@@ -97,10 +97,7 @@
  </section>
  <section class="projects">
  <div v-if="!isLoadingProjects && isEmpty(searchedAndFilterProjects)" class="no-projects">
- <Vue3Lottie :animationData="EmptySeed" :height="200" :width="200"></Vue3Lottie>
- <!--
- <img src="@assets/svg/seed.svg" alt="" />
- -->
+ <Vue3Lottie :animationData="EmptySeed" :height="200" :width="200" />
  <template v-if="tab.title === TabTitles.MyProjects">
  <p class="mt-4">
  Get started by creating a
@@ -232,7 +229,11 @@ const viewOptions = ref([
 const myFilteredSortedProjects = computed(() => {
  const projects = useProjects().allProjects.value;
  if (!projects) return [];
- const myProjects = projects.filter(({ userPermission }) => ['creator', 'writer'].includes(userPermission ?? ''));
+ const myProjects = projects.filter(
+ ({ userPermission, publicProject }) =>
+ // I can edit the project, or I can view the project and it's not public
+ ['creator', 'writer'].includes(userPermission ?? '') || (userPermission === 'reader' && !publicProject)
+ );
  return filterAndSortProjects(myProjects);
 });
 

packages/client/hmi-client/src/stores/auth.ts

@@ -3,6 +3,7 @@ import type { User } from '@/types/Types';
 import axios, { AxiosHeaders } from 'axios';
 import { computed, ref } from 'vue';
 import { createOidc, Oidc } from 'oidc-spa';
+import { RoleType } from '@/types/Types';
 
 /**
  * Main store used for authentication
@@ -70,6 +71,11 @@ const useAuthStore = defineStore('auth', () => {
  await loadUserModel();
  };
 
+ const isAdmin = computed(() => {
+ if (!user.value) return false;
+ return user.value?.roles.some((r) => r.name === RoleType.Admin);
+ });
+
  return {
  login,
  logout,
@@ -78,7 +84,8 @@ const useAuthStore = defineStore('auth', () => {
  updateUser,
  loadUserModel,
  userInitials,
- init
+ init,
+ isAdmin
  };
 });