refactor rename asset (#5625)

Co-authored-by: Cole Blanchard <cblanchard@Coles-MacBook-Pro.local>

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

@@ -7,18 +7,16 @@
 			shadow: applyShadow
 		}"
 	>
-		<!-- put the buttons above the title if there is an overline -->
-		<div v-if="overline" class="row">
-			<span class="overline">{{ overline }}</span>
-			<slot name="edit-buttons" />
-		</div>
 		<!--For naming asset such as model or code file-->
 		<div class="row">
-			<slot name="name-input" />
-			<h4 v-if="!isNamingAsset" :class="{ shrink: shrinkHeader }">
-				{{ name }}
-			</h4>
-			<slot v-if="!overline" name="edit-buttons" />
+			<tera-toggleable-input
+				v-if="[ProjectPages.OVERVIEW, AssetType.Dataset, AssetType.Model].includes(pageType) && name"
+				:model-value="name"
+				tag="h4"
+				@update:model-value="onRename"
+			/>
+			<h4 v-else>{{ name }}</h4>
+			<slot name="edit-buttons" />
 		</div>
 		<!--put model contributors here too-->
 		<span v-if="authors" class="authors">
@@ -67,7 +65,9 @@ import { ProjectPages } from '@/types/Project';
 import { AssetType } from '@/types/Types';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
-import TeraProgressSpinner from '../widgets/tera-progress-spinner.vue';
+import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
+import TeraToggleableInput from '@/components/widgets/tera-toggleable-input.vue';
+import { isEmpty } from 'lodash';
 
 const props = defineProps({
 	id: {
@@ -78,10 +78,6 @@ const props = defineProps({
 		type: String,
 		default: ''
 	},
-	overline: {
-		type: String,
-		default: null
-	},
 	authors: {
 		type: String,
 		default: null
@@ -100,7 +96,6 @@ const props = defineProps({
 	},
 	// Booleans default to false if not specified
 	showTableOfContents: Boolean,
-	isNamingAsset: Boolean,
 	hideIntro: Boolean,
 	isLoading: Boolean,
 	overflowHidden: Boolean,
@@ -110,7 +105,7 @@ const props = defineProps({
 	}
 });
 
-const emit = defineEmits(['tab-change']);
+const emit = defineEmits(['tab-change', 'rename']);
 
 const slots = useSlots();
 const pageType = useRoute().params.pageType as ProjectPages | AssetType;
@@ -120,7 +115,6 @@ const scrollPosition = ref(0);
 const navIds = ref<Map<string, string>>(new Map());
 const chosenItem = ref<string | null>(null);
 
-const shrinkHeader = computed(() => scrollPosition.value > 20); // Shrink header once we scroll down a bit
 const tabs = computed(() => {
 	if (slots.tabs?.()) {
 		if (slots.tabs().length === 1) {
@@ -166,6 +160,11 @@ function onScroll(event: Event) {
 	chosenItem.value = closestItem;
 }
 
+function onRename(newName: string) {
+	if (!newName || isEmpty(newName)) return;
+	emit('rename', newName);
+}
+
 watch(
 	() => assetElementRef.value,
 	async () => {

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

@@ -3,23 +3,12 @@
 		show-table-of-contents
 		:id="assetId"
 		:is-loading="isDatasetLoading"
-		:is-naming-asset="isRenaming"
-		:name="dataset?.name"
 		:overflow-hidden="selectedTabIndex === 1"
 		:selected-tab-index="selectedTabIndex"
 		@tab-change="(e) => (selectedTabIndex = e.index)"
+		:name="dataset?.name"
+		@rename="updateDatasetName"
 	>
-		<template #name-input>
-			<tera-input-text
-				v-if="isRenaming"
-				v-model.lazy="newName"
-				placeholder="Dataset name"
-				@keyup.enter="updateDatasetName"
-				@keyup.esc="updateDatasetName"
-				auto-focus
-			/>
-			<Button v-if="isRenaming" icon="pi pi-check" rounded text @click="updateDatasetName" />
-		</template>
 		<template #edit-buttons>
 			<Button
 				icon="pi pi-ellipsis-v"
@@ -84,7 +73,6 @@ import { AssetType, type CsvAsset, type Dataset, PresignedURL } from '@/types/Ty
 import TeraAsset from '@/components/asset/tera-asset.vue';
 import { DatasetSource } from '@/types/Dataset';
 import { useProjects } from '@/composables/project';
-import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
 import ContextMenu from 'primevue/contextmenu';
 import Accordion from 'primevue/accordion';
@@ -110,8 +98,6 @@ const props = defineProps({
 const currentActiveIndexes = ref([1, 2, 3, 4]);
 const dataset = ref<Dataset | null>(null);
 const transientDataset = ref<Dataset | null>(null);
-const newName = ref('');
-const isRenaming = ref(false);
 const showSaveModal = ref(false);
 const rawContent = ref<CsvAsset | null>(null);
 const isDatasetLoading = ref(false);
@@ -124,14 +110,6 @@ const optionsMenuPt = {
 	}
 };
 const optionsMenuItems = ref<any[]>([
-	{
-		icon: 'pi pi-pencil',
-		label: 'Rename',
-		command() {
-			isRenaming.value = true;
-			newName.value = dataset.value?.name ?? '';
-		}
-	},
 	{
 		icon: 'pi pi-download',
 		label: 'Download',
@@ -227,12 +205,10 @@ async function updateDatasetContent() {
 	await fetchDataset();
 }
 
-async function updateDatasetName() {
-	if (transientDataset.value && !isEmpty(newName.value)) {
-		transientDataset.value.name = newName.value;
-		await updateDatasetContent();
-	}
-	isRenaming.value = false;
+function updateDatasetName(name: string) {
+	if (!transientDataset.value) return;
+	transientDataset.value.name = name;
+	updateDatasetContent();
 }
 
 function reset() {
@@ -288,7 +264,6 @@ onMounted(async () => {
 watch(
 	() => props.assetId,
 	async () => {
-		isRenaming.value = false;
 		if (props.assetId) {
 			// Empty the dataset and rawContent so previous data is not shown
 			dataset.value = null;

packages/client/hmi-client/src/components/documents/tera-document-asset.vue

@@ -1,10 +1,5 @@
 <template>
-	<tera-asset
-		:id="assetId"
-		:name="document?.name ?? ''"
-		:overline="document?.source ?? ''"
-		:is-loading="documentLoading"
-	>
+	<tera-asset :id="assetId" :name="document?.name ?? ''" :is-loading="documentLoading">
 		<p class="pl-3" v-if="documentLoading">PDF Loading...</p>
 		<tera-pdf-embed
 			v-else-if="view === DocumentView.PDF && pdfLink"

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

@@ -3,36 +3,15 @@
 		v-bind="$attrs"
 		:id="assetId"
 		:is-loading="isModelLoading"
-		:is-naming-asset="isNaming"
-		:name="temporaryModel?.header.name"
 		:show-table-of-contents="!isWorkflow"
+		:name="temporaryModel?.header.name"
+		@rename="updateModelName"
 	>
-		<template #name-input>
-			<tera-input-text
-				v-if="isNaming"
-				v-model.lazy="newName"
-				@keyup.enter="updateModelName"
-				@keyup.esc="updateModelName"
-				auto-focus
-				class="w-4"
-				placeholder="Title of new model"
-			/>
-			<div v-if="isNaming" class="flex flex-nowrap ml-1 mr-3">
-				<Button
-					icon="pi pi-check"
-					rounded
-					text
-					@click="updateModelName"
-					title="This will rename the model and save all current changes."
-				/>
-			</div>
-		</template>
 		<template #edit-buttons>
 			<Button icon="pi pi-ellipsis-v" text rounded @click="toggleOptionsMenu" />
 			<ContextMenu ref="optionsMenu" :model="optionsMenuItems" popup :pt="optionsMenuPt" />
 			<aside class="btn-group">
 				<tera-asset-enrichment :asset-type="AssetType.Model" :assetId="assetId" @finished-job="fetchModel" />
-
 				<Button
 					v-if="isSaveForReuse"
 					label="Save for re-use"
@@ -80,7 +59,6 @@ import Button from 'primevue/button';
 import ContextMenu from 'primevue/contextmenu';
 import TeraAsset from '@/components/asset/tera-asset.vue';
 import TeraAssetEnrichment from '@/components/widgets/tera-asset-enrichment.vue';
-import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraModelDescription from '@/components/model/petrinet/tera-model-description.vue';
 import TeraPetrinetParts from '@/components/model/petrinet/tera-petrinet-parts.vue';
 import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
@@ -118,11 +96,8 @@ const model = ref<Model | null>(null);
 const temporaryModel = ref<Model | null>(null);
 const mmtData = ref<MMT | null>(null);
 
-const newName = ref('New Model');
-const isRenaming = ref(false);
 const isModelLoading = ref(false);
 const showSaveModal = ref(false);
-const isNaming = computed(() => isEmpty(props.assetId) || isRenaming.value);
 const hasChanged = computed(() => !isEqual(model.value, temporaryModel.value));
 const hasEditPermission = useProjects().hasEditPermission();
 
@@ -155,14 +130,6 @@ const toggleOptionsMenu = (event) => optionsMenu.value.toggle(event);
 const optionsMenu = ref();
 // TODO: Could be moved into tera-asset.vue
 const optionsMenuItems = ref<any[]>([
-	{
-		icon: 'pi pi-pencil',
-		label: 'Rename',
-		command() {
-			isRenaming.value = true;
-			newName.value = temporaryModel.value?.header.name ?? '';
-		}
-	},
 	{
 		icon: 'pi pi-download',
 		label: 'Download',
@@ -185,11 +152,9 @@ const optionsMenuPt = {
 	}
 };
 
-async function updateModelName() {
-	if (temporaryModel.value && !isEmpty(newName.value)) {
-		temporaryModel.value.header.name = newName.value;
-	}
-	isRenaming.value = false;
+async function updateModelName(name: string) {
+	if (!temporaryModel.value) return;
+	temporaryModel.value.header.name = name;
 	onSave();
 }
 
@@ -268,7 +233,6 @@ watch(
 		model.value = null;
 		temporaryModel.value = null;
 		mmtData.value = null;
-		isRenaming.value = false;
 		if (!isEmpty(props.assetId)) {
 			isModelLoading.value = true;
 			await fetchModel();

packages/client/hmi-client/src/components/project/tera-project-overview.vue

@@ -1,13 +1,13 @@
 <template>
 	<tera-asset
 		:id="useProjects().activeProject.value?.id"
-		:name="useProjects().activeProject.value?.name"
 		:authors="useProjects().activeProject.value?.authors?.sort().join(', ')"
-		:is-naming-asset="isRenamingProject"
 		:publisher="`Last updated ${DateUtils.formatLong(
 			useProjects().activeProject.value?.updatedOn ?? useProjects().activeProject.value?.createdOn
 		)}`"
 		:is-loading="useProjects().projectLoading.value"
+		:name="useProjects().activeProject.value?.name"
+		@rename="onRenameProject"
 	>
 		<template #edit-buttons>
 			<tera-project-menu :project="useProjects().activeProject.value" />
@@ -23,14 +23,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import * as DateUtils from '@/utils/date';
 import TeraAsset from '@/components/asset/tera-asset.vue';
 import { useProjects } from '@/composables/project';
 import TeraProjectMenu from '@/components/home/tera-project-menu.vue';
 import teraProjectOverviewEditor from '@/components/project/tera-project-overview-editor.vue';
+import { activeProject } from '@/composables/activeProject';
+import { update as updateProject } from '@/services/project';
 
-const isRenamingProject = ref(false);
+const onRenameProject = (newName: string) => {
+	if (!activeProject.value) return;
+	updateProject({ ...activeProject.value, name: newName }).then(() => {
+		useProjects().refresh();
+	});
+};
 </script>
 <style scoped>
 .overview-description {

packages/client/hmi-client/src/components/widgets/tera-toggleable-input.vue

@@ -3,9 +3,9 @@
 		<tera-input-text
 			ref="inputRef"
 			class="w-full"
-			:model-value="modelValue"
-			@update:model-value="emit('update:model-value', $event)"
-			@keydown="handleKeyDown"
+			v-model="newValue"
+			@keydown.enter.stop="handleKeyDown"
+			@keydown.esc.stop="handleKeyDown"
 		/>
 		<Button text icon="pi pi-times" @click="onCancel" />
 		<Button text icon="pi pi-check" @click="onConfirm" />
@@ -33,24 +33,24 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:model-value']);
 
-let initialValue = '';
+const newValue = ref(props.modelValue);
 
 const inputRef = ref<ComponentPublicInstance<typeof TeraInputText> | null>(null);
 const isEditing = ref(false);
 
 const onEdit = async () => {
-	initialValue = props.modelValue;
+	newValue.value = props.modelValue;
 	isEditing.value = true;
 	await nextTick();
 	inputRef.value?.$el.querySelector('input')?.focus();
 };
 
 const onConfirm = () => {
+	emit('update:model-value', newValue.value);
 	isEditing.value = false;
 };
 
 const onCancel = () => {
-	emit('update:model-value', initialValue); // Revert changes
 	isEditing.value = false;
 };