From 848be0fd5e47a0d2b5ef2b4f935b4be3cd13e2de Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Wed, 9 Oct 2024 16:14:20 -0400
Subject: [PATCH] More cleaning up! (#5107)

---
 .../documents/tera-document-asset.vue         | 83 +++----------------
 .../hmi-client/src/page/tera-project.vue      | 74 +++++------------
 2 files changed, 33 insertions(+), 124 deletions(-)

diff --git a/packages/client/hmi-client/src/components/documents/tera-document-asset.vue b/packages/client/hmi-client/src/components/documents/tera-document-asset.vue
index 411edbb800..85a72d4ddf 100644
--- a/packages/client/hmi-client/src/components/documents/tera-document-asset.vue
+++ b/packages/client/hmi-client/src/components/documents/tera-document-asset.vue
@@ -1,10 +1,8 @@
 <template>
 	<tera-asset
 		:id="assetId"
-		:feature-config="featureConfig"
 		:name="document?.name ?? ''"
 		:overline="document?.source ?? ''"
-		@close-preview="emit('close-preview')"
 		:is-loading="documentLoading"
 	>
 		<p class="pl-3" v-if="documentLoading">PDF Loading...</p>
@@ -18,48 +16,37 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
-import type { FeatureConfig, ExtractionStatusUpdate } from '@/types/common';
-import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
+import { ref, watch } from 'vue';
 import TeraAsset from '@/components/asset/tera-asset.vue';
-import type { ClientEvent, DocumentAsset } from '@/types/Types';
-import { ClientEventType, ProgressState } from '@/types/Types';
+import TeraTextEditor from '@/components/documents/tera-text-editor.vue';
+import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
 import { downloadDocumentAsset, getDocumentAsset, getDocumentFileAsText } from '@/services/document-assets';
-import { subscribe, unsubscribe } from '@/services/ClientEventService';
-import TeraTextEditor from './tera-text-editor.vue';
+import { type DocumentAsset } from '@/types/Types';
 
 enum DocumentView {
-	EXTRACTIONS = 'Extractions',
 	PDF = 'PDF',
-	TXT = 'Text',
-	NOT_FOUND = 'Not found'
+	TXT = 'Text'
 }
+
 const props = defineProps<{
 	assetId: string;
-	previewLineLimit: number;
-	featureConfig?: FeatureConfig;
 }>();
 
-const emit = defineEmits(['close-preview', 'asset-loaded', 'remove']);
-
 const document = ref<DocumentAsset | null>(null);
+const documentLoading = ref(false);
+const docText = ref<string | null>(null);
 const pdfLink = ref<string | null>(null);
 const view = ref(DocumentView.PDF);
 
-const docText = ref<string | null>(null);
-
-const documentLoading = ref(false);
-
-/* TODO: When fetching a document by id, its id and fileNames don't get returned.
- Once they do see about adjusting the conditionals */
 watch(
 	() => props.assetId,
-	async () => {
-		if (props.assetId) {
+	async (assetId, oldAssetId) => {
+		if (assetId === oldAssetId) return;
+		if (assetId) {
 			view.value = DocumentView.PDF;
 			pdfLink.value = null;
 			documentLoading.value = true;
-			document.value = await getDocumentAsset(props.assetId);
+			document.value = await getDocumentAsset(assetId);
 			const filename = document.value?.fileNames?.[0];
 
 			if (filename?.endsWith('.pdf')) {
@@ -88,50 +75,4 @@ watch(
 	},
 	{ immediate: true }
 );
-
-onUpdated(() => {
-	if (document.value) {
-		emit('asset-loaded');
-	}
-});
-
-onMounted(async () => {
-	await subscribe(ClientEventType.ExtractionPdf, subscribeToExtraction);
-});
-
-async function subscribeToExtraction(event: ClientEvent<ExtractionStatusUpdate>) {
-	if (!event.data || event.data.data.documentId !== props.assetId) return;
-	const status = event.data.state;
-	// FIXME: adding the 'dispatching' check since there seems to be an issue with the status of the extractions.
-	if (status === ProgressState.Complete || event.data.message.includes('Dispatching')) {
-		document.value = await getDocumentAsset(props.assetId);
-	}
-}
-
-onUnmounted(async () => {
-	await unsubscribe(ClientEventType.ExtractionPdf, subscribeToExtraction);
-});
 </script>
-
-<style scoped>
-.extracted-item {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap);
-}
-
-.extracted-item > .extracted-image {
-	display: block;
-	padding: 8px;
-	border: 1px solid var(--gray-200);
-	border-radius: var(--border-radius);
-	object-fit: contain;
-}
-
-.no-extracted-text {
-	color: var(--text-color-subdued);
-	font-size: var(--font-caption);
-	font-style: italic;
-	padding: var(--gap-small);
-}
-</style>
diff --git a/packages/client/hmi-client/src/page/tera-project.vue b/packages/client/hmi-client/src/page/tera-project.vue
index fa9a946178..f8d6d6147f 100644
--- a/packages/client/hmi-client/src/page/tera-project.vue
+++ b/packages/client/hmi-client/src/page/tera-project.vue
@@ -2,10 +2,10 @@
 	<main>
 		<tera-slider-panel
 			v-model:is-open="isResourcesSliderOpen"
+			class="resource-panel"
 			content-width="240px"
-			header="Resources"
 			direction="left"
-			class="resource-panel"
+			header="Resources"
 		>
 			<template v-slot:content>
 				<tera-resource-sidebar
@@ -17,51 +17,42 @@
 				/>
 			</template>
 		</tera-slider-panel>
-		<section class="project-page">
+		<section>
+			<tera-code v-if="pageType === AssetType.Code" :asset-id="assetId" />
+			<tera-dataset v-if="pageType === AssetType.Dataset" :asset-id="assetId" />
+			<tera-document-asset v-if="pageType === AssetType.Document" :assetId="assetId" />
 			<tera-model v-if="pageType === AssetType.Model" :asset-id="assetId" />
-			<tera-code :asset-id="assetId" v-else-if="pageType === AssetType.Code" />
-			<tera-project-overview v-else-if="pageType === ProjectPages.OVERVIEW" />
-			<tera-workflow v-else-if="pageType === AssetType.Workflow" :asset-id="assetId" />
-			<!--Add new process/asset views here-->
-			<template v-else-if="assetId">
-				<tera-document-asset
-					v-if="pageType === AssetType.Document"
-					:assetId="assetId"
-					:previewLineLimit="10"
-					@remove="removeAsset({ assetId, pageType })"
-				/>
-				<tera-dataset v-else-if="pageType === AssetType.Dataset" :asset-id="assetId" />
-			</template>
+			<tera-project-overview v-if="pageType === ProjectPages.OVERVIEW" />
+			<tera-workflow v-if="pageType === AssetType.Workflow" :asset-id="assetId" />
 		</section>
-		<!-- New asset modal -->
 		<tera-save-asset-modal
-			:is-visible="showSaveAssetModal"
-			:assetType="assetTypeToCreate"
 			open-on-save
+			:assetType="assetTypeToCreate"
+			:is-visible="showSaveAssetModal"
 			@close-modal="showSaveAssetModal = false"
 		/>
 	</main>
 </template>
 
 <script setup lang="ts">
+import { isEqual } from 'lodash';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import TeraCode from '@/components/code/tera-code.vue';
 import TeraDataset from '@/components/dataset/tera-dataset.vue';
 import TeraDocumentAsset from '@/components/documents/tera-document-asset.vue';
 import TeraModel from '@/components/model/tera-model.vue';
+import TeraProjectOverview from '@/components/project/tera-project-overview.vue';
+import TeraResourceSidebar from '@/components/project/tera-resource-sidebar.vue';
+import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import TeraWorkflow from '@/components/workflow/tera-workflow.vue';
 import { useProjects } from '@/composables/project';
-import TeraProjectOverview from '@/components/project/tera-project-overview.vue';
-import TeraResourceSidebar from '@/components/project/tera-resource-sidebar.vue';
 import { RouteName } from '@/router/routes';
-import { ProjectPages, isProjectAssetTypes } from '@/types/Project';
-import { AssetType } from '@/types/Types';
 import { AssetRoute } from '@/types/common';
+import { ProjectPages, isProjectAssetTypes } from '@/types/Project';
+import { AssetType, TerariumAsset } from '@/types/Types';
 import { logger } from '@/utils/logger';
-import { isEqual } from 'lodash';
-import { computed, onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -71,8 +62,8 @@ const showSaveAssetModal = ref(false);
 const assetTypeToCreate = ref<AssetType>(AssetType.Model);
 
 const pageType = computed(() => (route.params.pageType as ProjectPages | AssetType) ?? '');
-const assetId = computed(() => (route.params.assetId as string) ?? '');
-const openedAssetRoute = computed(() => ({ pageType: pageType.value, assetId: assetId.value }));
+const assetId = computed(() => (route.params.assetId as TerariumAsset['id']) ?? '');
+const openedAssetRoute = computed(() => ({ pageType: pageType.value, assetId: assetId.value }) as AssetRoute);
 
 function openAsset(assetRoute: AssetRoute) {
 	if (!isEqual(assetRoute, openedAssetRoute.value)) {
@@ -122,34 +113,11 @@ onMounted(() => {
 	outline-color: var(--surface-border);
 }
 
-.tab-group {
-	z-index: 2;
-	isolation: isolate;
-	position: relative;
-}
-
 section {
 	display: flex;
-	flex-direction: column;
 	flex: 1;
+	flex-direction: column;
 	overflow-x: auto;
 	overflow-y: hidden;
 }
-
-.p-tabmenu:deep(.p-tabmenuitem) {
-	display: inline;
-	max-width: 15rem;
-}
-
-.p-tabmenu:deep(.p-tabmenu-nav .p-tabmenuitem .p-menuitem-link) {
-	padding: 1rem;
-	text-decoration: none;
-}
-
-.p-tabmenu:deep(.p-menuitem-text) {
-	height: 1rem;
-	display: inline-block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
 </style>