feat: improve tera-toggleable-input (#4464)

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

@@ -4,6 +4,7 @@
 		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
 			<i v-if="icon" :class="icon" />
 			<input
+				v-bind="$attrs"
 				ref="inputField"
 				:disabled="getDisabled"
 				:placeholder="placeholder"
@@ -12,11 +13,8 @@
 				:value="displayValue()"
 				@click.stop
 				@focus="onFocus"
-				@focusout="$emit('focusout', $event)"
 				@blur="onBlur"
 				@input="updateValue"
-				@keyup="$emit('keyup', $event)"
-				@keypress="$emit('keypress', $event)"
 			/>
 		</main>
 		<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
@@ -40,7 +38,7 @@ const props = defineProps<{
 	charactersToReject?: string[];
 }>();
 
-const emit = defineEmits(['update:model-value', 'focusout', 'keyup', 'blur', 'focus', 'keypress']);
+const emit = defineEmits(['update:model-value', 'blur', 'focus']);
 const inputField = ref<HTMLInputElement | null>(null);
 const getDisabled = props.disabled ?? false;
 const isFocused = ref(false);

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

@@ -0,0 +1,77 @@
+<template>
+	<div v-if="isEditing" v-bind="$attrs" class="flex align-items-center gap-1">
+		<tera-input-text
+			ref="inputRef"
+			:model-value="modelValue"
+			@update:model-value="emit('update:model-value', $event)"
+			@keydown="handleKeyDown"
+		/>
+		<Button text icon="pi pi-times" @click="onCancel" />
+		<Button text icon="pi pi-check" @click="onConfirm" />
+	</div>
+	<Button v-else :class="$attrs.class" class="text-to-edit" text @click="onEdit">
+		<component class="btn-content" :is="tag">{{ modelValue }}</component>
+		<i class="pi pi-pencil" />
+	</Button>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, ComponentPublicInstance } from 'vue';
+import Button from 'primevue/button';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+
+const props = withDefaults(
+	defineProps<{
+		modelValue: string;
+		tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+	}>(),
+	{
+		tag: 'span'
+	}
+);
+
+const emit = defineEmits(['update:model-value']);
+
+let initialValue = '';
+
+const inputRef = ref<ComponentPublicInstance<typeof TeraInputText> | null>(null);
+const isEditing = ref(false);
+
+const onEdit = async () => {
+	initialValue = props.modelValue;
+	isEditing.value = true;
+	await nextTick();
+	inputRef.value?.$el.querySelector('input')?.focus();
+};
+
+const onConfirm = () => {
+	isEditing.value = false;
+};
+
+const onCancel = () => {
+	emit('update:model-value', initialValue); // Revert changes
+	isEditing.value = false;
+};
+
+const handleKeyDown = (event: KeyboardEvent) => {
+	if (event.key === 'Enter') onConfirm();
+	else if (event.key === 'Escape') onCancel();
+};
+</script>
+
+<style scoped>
+button.text-to-edit {
+	display: flex;
+	gap: var(--gap-3);
+	width: fit-content;
+	padding: var(--gap-2);
+
+	& > .btn-content {
+		color: var(--text-color);
+	}
+
+	& > .pi {
+		color: var(--text-color-subdued);
+	}
+}
+</style>

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-card.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="intervention-card">
 		<header class="flex align-items-center">
-			<tera-toggleable-edit
+			<tera-toggleable-input
 				class="mr-auto"
 				:model-value="intervention.name"
 				@update:model-value="onUpdateName($event)"
@@ -139,7 +139,7 @@
 </template>
 
 <script setup lang="ts">
-import TeraToggleableEdit from '@/components/widgets/tera-toggleable-edit.vue';
+import TeraToggleableInput from '@/components/widgets/tera-toggleable-input.vue';
 import Button from 'primevue/button';
 import RadioButton from 'primevue/radiobutton';
 import { computed } from 'vue';

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue

@@ -54,26 +54,36 @@
 			</tera-drilldown-section>
 			<tera-drilldown-section>
 				<template v-if="selectedPolicy?.id">
-					<tera-toggleable-edit
+					<tera-toggleable-input
 						v-if="selectedPolicy?.name"
+						class="mt-1"
 						:model-value="selectedPolicy.name"
 						@update:model-value="onChangeName"
 						tag="h4"
 					/>
 					<Accordion multiple :active-index="[0, 1]">
 						<AccordionTab>
 							<template #header>
-								Description
-								<Button v-if="!isEditingDescription" icon="pi pi-pencil" text @click.stop="onEditDescription" />
-								<template v-else>
+								<Button v-if="!isEditingDescription" class="start-edit" text @click.stop="onEditDescription">
+									<h5 class="btn-content">Description</h5>
+									<i class="pi pi-pencil" />
+								</Button>
+								<span v-else class="confirm-cancel">
+									<span>Description</span>
 									<Button icon="pi pi-times" text @click.stop="isEditingDescription = false" />
 									<Button icon="pi pi-check" text @click.stop="onConfirmEditDescription" />
-								</template>
+								</span>
 							</template>
 							<p class="description text" v-if="!isEditingDescription">
 								{{ selectedPolicy?.description }}
 							</p>
-							<Textarea v-else class="w-full" placeholder="Enter a description" v-model="newDescription" />
+							<Textarea
+								v-else
+								ref="descriptionTextareaRef"
+								class="w-full"
+								placeholder="Enter a description"
+								v-model="newDescription"
+							/>
 						</AccordionTab>
 						<AccordionTab header="Charts">
 							<ul class="flex flex-column gap-2">
@@ -121,13 +131,13 @@
 </template>
 
 <script setup lang="ts">
+import _, { cloneDeep, groupBy, isEmpty, isEqual } from 'lodash';
+import { computed, onMounted, ref, watch, nextTick, ComponentPublicInstance } from 'vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import { WorkflowNode } from '@/types/workflow';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
-import { computed, onMounted, ref, watch } from 'vue';
 import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';
-import _, { cloneDeep, groupBy, isEmpty, isEqual } from 'lodash';
 import Button from 'primevue/button';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import { getInterventionPoliciesForModel, getModel } from '@/services/model';
@@ -136,7 +146,7 @@ import { logger } from '@/utils/logger';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import { useConfirm } from 'primevue/useconfirm';
 import { getParameters, getStates } from '@/model-representation/service';
-import TeraToggleableEdit from '@/components/widgets/tera-toggleable-edit.vue';
+import TeraToggleableInput from '@/components/widgets/tera-toggleable-input.vue';
 import {
 	createInterventionPolicy,
 	getInterventionPolicyById,
@@ -190,6 +200,7 @@ const selectedOutputId = ref<string>('');
 const selectedPolicy = ref<InterventionPolicy | null>(null);
 
 const newDescription = ref('');
+const descriptionTextareaRef = ref<ComponentPublicInstance<typeof Textarea> | null>(null);
 const isEditingDescription = ref(false);
 const isSaved = computed(
 	() =>
@@ -340,9 +351,11 @@ const onChangeName = async (name: string) => {
 	await fetchInterventionPolicies(selectedPolicy.value.modelId);
 };
 
-const onEditDescription = () => {
+const onEditDescription = async () => {
 	isEditingDescription.value = true;
 	newDescription.value = selectedPolicy.value?.description ?? '';
+	await nextTick();
+	descriptionTextareaRef.value?.$el.focus();
 };
 
 const onConfirmEditDescription = async () => {
@@ -419,4 +432,28 @@ section {
 	gap: var(--gap);
 	padding: 0 var(--gap);
 }
+
+button.start-edit {
+	display: flex;
+	gap: var(--gap-3);
+	width: fit-content;
+	padding: var(--gap-2);
+
+	& > .btn-content {
+		color: var(--text-color);
+	}
+
+	& > .pi {
+		color: var(--text-color-subdued);
+	}
+}
+
+.confirm-cancel {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-1);
+	& > span {
+		margin-left: var(--gap-2);
+	}
+}
 </style>