show add project button when there is more than one project (#5396)

DARPA-ASKEM · Nov 6, 2024 · f03b026 · f03b026
1 parent 6e31188
commit f03b026
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 50 deletions.
diff --git a/packages/client/hmi-client/src/components/code/tera-code.vue b/packages/client/hmi-client/src/components/code/tera-code.vue
@@ -165,7 +165,7 @@ import ContextMenu from 'primevue/contextmenu';
 import Dropdown from 'primevue/dropdown';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
@@ -449,28 +449,13 @@ watch(
 const isRenamingCode = ref(false);
 
 const optionsMenu = ref();
-const optionsMenuItems = ref([
+const optionsMenuItems = ref<any[]>([
 	{
 		icon: 'pi pi-pencil',
 		label: 'Rename',
 		command() {
 			isRenamingCode.value = true;
 		}
-	},
-	{
-		icon: 'pi pi-plus',
-		label: 'Add to project',
-		items:
-			useProjects()
-				.allProjects.value?.filter((project) => project.id !== useProjects().activeProject.value?.id)
-				.map((project) => ({
-					label: project.name,
-					command: async () => {
-						const response = await useProjects().addAsset(AssetType.Code, props.assetId, project.id);
-						if (response) logger.info(`Added asset to ${project.name}`);
-						else logger.error('Failed to add asset to project');
-					}
-				})) ?? []
 	}
 ]);
 const optionsMenuPt = {
@@ -482,6 +467,23 @@ const optionsMenuPt = {
 const toggleOptionsMenu = (event) => {
 	optionsMenu.value.toggle(event);
 };
+
+onMounted(async () => {
+	const addProjectMenuItems = (await useProjects().getAllExceptActive()).map((project) => ({
+		label: project.name,
+		command: async () => {
+			const response = await useProjects().addAsset(AssetType.Code, props.assetId, project.id);
+			if (response) logger.info(`Added asset to ${project.name}`);
+			else logger.error('Failed to add asset to project');
+		}
+	}));
+	if (addProjectMenuItems.length === 0) return;
+	optionsMenuItems.value.splice(1, 0, {
+		icon: 'pi pi-plus',
+		label: 'Add to project',
+		items: addProjectMenuItems
+	});
+});
 </script>
 
 <style scoped>

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, watch } from 'vue';
+import { computed, PropType, ref, watch, onMounted } from 'vue';
 import { cloneDeep, isEmpty, isEqual } from 'lodash';
 import {
 	downloadRawFile,
@@ -134,7 +134,7 @@ const optionsMenuPt = {
 		class: 'max-h-30rem overflow-y-scroll'
 	}
 };
-const optionsMenuItems = ref([
+const optionsMenuItems = ref<any[]>([
 	{
 		icon: 'pi pi-pencil',
 		label: 'Rename',
@@ -143,20 +143,6 @@ const optionsMenuItems = ref([
 			newName.value = dataset.value?.name ?? '';
 		}
 	},
-	{
-		icon: 'pi pi-plus',
-		label: 'Add to project',
-		items:
-			useProjects()
-				.allProjects.value?.filter((project) => project.id !== useProjects().activeProject.value?.id)
-				.map((project) => ({
-					label: project.name,
-					command: async () => {
-						const response = await useProjects().addAsset(AssetType.Dataset, props.assetId, project.id);
-						if (response) logger.info(`Added asset to ${project.name}`);
-					}
-				})) ?? []
-	},
 	{
 		icon: 'pi pi-download',
 		label: 'Download',
@@ -294,6 +280,22 @@ function getRawContent() {
 	}
 }
 
+onMounted(async () => {
+	const addProjectMenuItems = (await useProjects().getAllExceptActive()).map((project) => ({
+		label: project.name,
+		command: async () => {
+			const response = await useProjects().addAsset(AssetType.Dataset, props.assetId, project.id);
+			if (response) logger.info(`Added asset to ${project.name}`);
+		}
+	}));
+	if (addProjectMenuItems.length === 0) return;
+	optionsMenuItems.value.splice(1, 0, {
+		icon: 'pi pi-plus',
+		label: 'Add to project',
+		items: addProjectMenuItems
+	});
+});
+
 // Whenever assetId changes, fetch dataset with that ID
 watch(
 	() => props.assetId,

diff --git a/packages/client/hmi-client/src/components/model/tera-model.vue b/packages/client/hmi-client/src/components/model/tera-model.vue
@@ -81,7 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, watch } from 'vue';
+import { computed, PropType, ref, watch, onMounted } from 'vue';
 import { cloneDeep, isEmpty, isEqual } from 'lodash';
 import Button from 'primevue/button';
 import ContextMenu from 'primevue/contextmenu';
@@ -155,7 +155,8 @@ function onModalSave(event: any) {
 // User menu
 const toggleOptionsMenu = (event) => optionsMenu.value.toggle(event);
 const optionsMenu = ref();
-const optionsMenuItems = computed(() => [
+// TODO: Could be moved into tera-asset.vue
+const optionsMenuItems = ref<any[]>([
 	{
 		icon: 'pi pi-pencil',
 		label: 'Rename',
@@ -164,20 +165,6 @@ const optionsMenuItems = computed(() => [
 			newName.value = temporaryModel.value?.header.name ?? '';
 		}
 	},
-	{
-		icon: 'pi pi-plus',
-		label: 'Add to project',
-		items:
-			useProjects()
-				.allProjects.value?.filter((project) => project.id !== useProjects().activeProject.value?.id)
-				.map((project) => ({
-					label: project.name,
-					command: async () => {
-						const response = await useProjects().addAsset(AssetType.Model, props.assetId, project.id);
-						if (response) logger.info(`Added asset to ${project.name}`);
-					}
-				})) ?? []
-	},
 	{
 		icon: 'pi pi-download',
 		label: 'Download',
@@ -226,8 +213,24 @@ async function fetchModel() {
 	temporaryModel.value = cloneDeep(model.value);
 }
 
+onMounted(async () => {
+	const addProjectMenuItems = (await useProjects().getAllExceptActive()).map((project) => ({
+		label: project.name,
+		command: async () => {
+			const response = await useProjects().addAsset(AssetType.Model, props.assetId, project.id);
+			if (response) logger.info(`Added asset to ${project.name}`);
+		}
+	}));
+	if (addProjectMenuItems.length === 0) return;
+	optionsMenuItems.value.splice(1, 0, {
+		icon: 'pi pi-plus',
+		label: 'Add to project',
+		items: addProjectMenuItems
+	});
+});
+
 watch(
-	() => [props.assetId],
+	() => props.assetId,
 	async () => {
 		// Reset view of model page
 		isRenaming.value = false;

diff --git a/packages/client/hmi-client/src/composables/project.ts b/packages/client/hmi-client/src/composables/project.ts
@@ -16,6 +16,7 @@ const TIMEOUT_MS = 100;
 
 const projectLoading = shallowRef<boolean>(false);
 const allProjects = shallowRef<Project[] | null>(null);
+let areProjectsLoaded = false;
 
 export function useProjects() {
 	/**
@@ -49,9 +50,25 @@ export function useProjects() {
 	 */
 	async function getAll(): Promise<Project[]> {
 		allProjects.value = (await ProjectService.getAll()) as Project[];
+		areProjectsLoaded = true;
 		return allProjects.value;
 	}
 
+	/**
+	 * Return all projects except the active project.
+	 * @returns Project[]
+	 */
+	async function getAllExceptActive(): Promise<Project[]> {
+		return new Promise((resolve) => {
+			const interval = setInterval(() => {
+				if (areProjectsLoaded) {
+					clearInterval(interval);
+					resolve(allProjects.value?.filter((project) => project.id !== activeProjectId.value) ?? []);
+				}
+			}, TIMEOUT_MS);
+		});
+	}
+
 	/**
 	 * Return Active Project Name or empty string
 	 * @returns string
@@ -241,6 +258,7 @@ export function useProjects() {
 		projectLoading,
 		get,
 		getAll,
+		getAllExceptActive,
 		getActiveProjectAssets,
 		getActiveProjectName,
 		addAsset,