UI change - Input field error background (#5424)

DARPA-ASKEM · Nov 11, 2024 · f8c27ff · f8c27ff
1 parent c04906f
commit f8c27ff
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 11 deletions.
diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -948,6 +948,7 @@ $petri-inputBox: var(--surface-0);
 	--warning-color: #FFAB00;
 	--surface-error: #FDDDD3;
 	--error-color: #F35625;
+	--error-background: rgba(243, 215, 208, 0.5);
 	--error-border-color: #F89A7C;
 	--surface-hover: var(--gray-100);
 	--surface-secondary: #f9fbfa;

diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
@@ -42,8 +42,16 @@
 			margin: 0;
 			&::-webkit-inner-spin-button,
 			&::-webkit-outer-spin-button {
-			-webkit-appearance: none;
-	}
+					-webkit-appearance: none;
+			}
+		}
+
+		& > input.empty, &.empty {
+			background-color: var(--error-background);
+			border-color: var(--error-border-color);
+		}
+		& > input.empty-value {
+			background-color: transparent;
 		}
 	}
 

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
@@ -20,6 +20,7 @@
 				<span class="expression">
 					<tera-input-text
 						label="Expression"
+						error-empty
 						:model-value="getInitialExpression(modelConfiguration, initialId)"
 						@update:model-value="emit('update-expression', { id: initialId, value: $event })"
 					/>

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
@@ -42,12 +42,12 @@
 						:options="distributionTypeOptions()"
 						class="mr-3"
 					/>
-
 					<!-- Constant -->
 					<tera-input-number
 						v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
 						label="Constant"
 						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
+						error-empty
 						@update:model-value="
 							emit('update-parameter', {
 								id: parameterId,
@@ -60,6 +60,7 @@
 						<tera-input-number
 							label="Min"
 							:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
+							error-empty
 							@update:model-value="
 								emit('update-parameter', {
 									id: parameterId,
@@ -71,6 +72,7 @@
 						<tera-input-number
 							label="Max"
 							:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
+							error-empty
 							@update:model-value="
 								emit('update-parameter', {
 									id: parameterId,
@@ -205,6 +207,11 @@ onMounted(async () => {
 .parameter-entry {
 	border-left: 4px solid var(--surface-300);
 	padding-left: var(--gap-4);
+
+	&.empty-input {
+		border-left: 4px solid var(--error-color);
+		padding-left: var(--gap-4);
+	}
 }
 
 header {

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="tera-input">
 		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
-		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
+		<main :class="[{ error: getErrorMessage }, { empty: isEmptyError }]" @click.self.stop="focusInput">
 			<i v-if="icon" :class="icon" />
 			<input
-				:class="$attrs.class"
+				:class="[$attrs.class, { 'empty-value': isEmptyError }]"
 				@click.stop
 				ref="inputField"
 				:disabled="getDisabled"
@@ -24,14 +24,15 @@
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
-import { isNaN, toNumber } from 'lodash';
+import { isNaN, toNumber, isEmpty } from 'lodash';
 import { CSSProperties, computed, ref, watch } from 'vue';
 
 const props = defineProps<{
 	modelValue: number | undefined;
 	label?: string;
 	icon?: string;
 	errorMessage?: string;
+	errorEmpty?: boolean;
 	disabled?: boolean;
 	placeholder?: string;
 	autoWidth?: boolean;
@@ -46,12 +47,15 @@ const getDisabled = props.disabled ?? false;
 const focusInput = () => {
 	inputField.value?.focus();
 };
+
+const input = computed(() => displayValue()?.toString());
+const isEmptyError = computed(() => props.errorEmpty && isEmpty(input.value));
+
 // Computed property to dynamically adjust the input's style based on the autoWidth prop
 const inputStyle = computed(() => {
 	const style: CSSProperties = {};
-	const value = displayValue()?.toString();
 	if (props.autoWidth) {
-		const textToMeasure = value || props.placeholder;
+		const textToMeasure = input.value || props.placeholder;
 		// Estimate the width based on the length of the text to measure.
 		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
 		style.width = `${width}px`; // Dynamically set the width

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
@@ -1,11 +1,12 @@
 <template>
 	<div class="tera-input">
 		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
-		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
+		<main :class="[{ error: getErrorMessage }, { empty: isEmptyError }]" @click.self.stop="focusInput">
 			<i v-if="icon" :class="icon" />
 			<input
 				v-bind="$attrs"
 				ref="inputField"
+				:class="[{ 'empty-value': isEmptyError }]"
 				:disabled="getDisabled"
 				:placeholder="placeholder"
 				:style="inputStyle"
@@ -31,6 +32,7 @@ const props = defineProps<{
 	label?: string;
 	icon?: string;
 	errorMessage?: string;
+	errorEmpty?: boolean;
 	disabled?: boolean;
 	placeholder?: string;
 	autoWidth?: boolean;
@@ -47,12 +49,13 @@ const focusInput = () => {
 	inputField.value?.focus();
 };
 
+const input = computed(() => displayValue()?.toString());
+
 // Computed property to dynamically adjust the input's style based on the autoWidth prop
 const inputStyle = computed(() => {
 	const style: CSSProperties = {};
-	const value = displayValue()?.toString();
 	if (props.autoWidth) {
-		const textToMeasure = value || props.placeholder;
+		const textToMeasure = input.value || props.placeholder;
 		// Estimate the width based on the length of the text to measure.
 		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
 		style.width = `${width}px`; // Dynamically set the width
@@ -63,6 +66,7 @@ const inputStyle = computed(() => {
 });
 
 const getErrorMessage = computed(() => props.errorMessage);
+const isEmptyError = computed(() => props.errorEmpty && isEmpty(input.value));
 
 function displayValue() {
 	// only format value if input is focused