Improve lookup props

src/components/EntityLookup.vue

@@ -2,11 +2,12 @@
 	<Lookup
 		:value="value"
 		@input="$emit( 'input', $event )"
-		:error="error"
+		:error="error ? {message: $i18n(error.message), type: error.type} : null"
 		:menu-items="searchResults"
 		:search-input.sync="search"
 		:placeholder="placeholder"
 		:label="label"
+		:disabled="disabled"
 		v-on:scroll="handleScroll"
 	>
 		<template
@@ -89,6 +90,10 @@ export default Vue.extend( {
 			type: Object,
 			default: null,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		label: {
 			type: String,
 			required: true,

src/components/ItemValueLookup.vue

@@ -2,11 +2,12 @@
 	<EntityLookup
 		:value="value"
 		@input="$emit( 'input', $event )"
-		:error="error ? {message: $i18n(error.message), type: error.type} : null"
+		:error="error"
 		:searchForMenuItems="searchForItems"
 		:label="$i18n('query-builder-input-value-label')"
 		:placeholder="$i18n('query-builder-input-value-placeholder')"
 		:no-match-found-message="$i18n('query-builder-item-value-lookup-no-match-found')"
+		:disabled="disabled"
 	/>
 </template>
 
@@ -36,6 +37,10 @@ export default Vue.extend( {
 			type: Object,
 			default: null,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 } );
 </script>

src/components/PropertyLookup.vue

@@ -2,7 +2,7 @@
 	<EntityLookup
 		:value="value"
 		@input="$emit( 'input', $event )"
-		:error="error ? {message: $i18n(error.message), type: error.type} : null"
+		:error="error"
 		:searchForMenuItems="searchForProperties"
 		:label="$i18n('query-builder-property-lookup-label')"
 		:placeholder="$i18n('query-builder-property-lookup-placeholder')"

src/components/QueryCondition.vue

@@ -25,14 +25,11 @@
 				/>
 			</div>
 			<div>
-				<TextInput
+				<StringValueInput
 					class="query-condition__value-input"
-					:label="$i18n('query-builder-input-value-label')"
-					ref="value"
+					:disabled="isTextInputDisabled()"
 					v-model="textInputValue"
 					:error="valueError"
-					:placeholder="$i18n('query-builder-input-value-placeholder')"
-					:disabled="isTextInputDisabled()"
 				/>
 			</div>
 			<div>
@@ -49,8 +46,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { Dropdown, TextInput, Button } from '@wmde/wikit-vue-components';
+import { Dropdown, Button } from '@wmde/wikit-vue-components';
 
+import StringValueInput from '@/components/StringValueInput.vue';
 import DeleteConditionButton from '@/components/DeleteConditionButton.vue';
 import PropertyLookup from '@/components/PropertyLookup.vue';
 import ValueTypeDropDown from '@/components/ValueTypeDropDown.vue';
@@ -85,7 +83,11 @@ export default Vue.extend( {
 			get(): SearchResult | null {
 				return this.$store.getters.property( this.conditionIndex );
 			},
-			set( selectedProperty: SearchResult ): void {
+			set( selectedProperty: SearchResult | null ): void {
+				if ( selectedProperty === null ) {
+					this.$store.dispatch( 'unsetProperty', this.conditionIndex );
+					return;
+				}
 				this.$store.dispatch(
 					'updateProperty',
 					{ property: selectedProperty, conditionIndex: this.conditionIndex },
@@ -128,7 +130,7 @@ export default Vue.extend( {
 		] ),
 	},
 	components: {
-		TextInput,
+		StringValueInput,
 		PropertyLookup,
 		ValueTypeDropDown,
 		DeleteConditionButton,

src/components/StringValueInput.vue

@@ -0,0 +1,37 @@
+<template>
+	<TextInput
+		:label="$i18n('query-builder-input-value-label')"
+		@input="$emit('input', $event)"
+		:value="value"
+		:error="error ? {message: $i18n(error.message), type: error.type} : null"
+		:placeholder="$i18n('query-builder-input-value-placeholder')"
+		:disabled="disabled"
+	/>
+</template>
+
+<script lang="ts">
+
+import { TextInput } from '@wmde/wikit-vue-components';
+import Vue from 'vue';
+
+export default Vue.extend( {
+	name: 'StringValueInput',
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+		error: {
+			type: Object,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	components: {
+		TextInput,
+	},
+} );
+</script>

src/store/actions.ts

@@ -44,11 +44,21 @@ export default ( searchEntityRepository: SearchEntityRepository, metricsCollecto
 		payload: { value: string; conditionIndex: number } ): void {
 		context.commit( 'setValue', payload );
 	},
+	unsetProperty( context: ActionContext<RootState, RootState>, conditionIndex: number ): void {
+		context.commit( 'unsetProperty', conditionIndex );
+		context.commit(
+			'clearFieldErrors',
+			{
+				conditionIndex,
+				errorsToClear: 'property',
+			},
+		);
+	},
 	updateProperty( context: ActionContext<RootState, RootState>,
 		payload: { property: { label: string; id: string; datatype: string }; conditionIndex: number } ): void {
 
 		context.commit( 'setProperty', payload );
-		if ( payload.property && !allowedDatatypes.includes( payload.property.datatype ) ) {
+		if ( !allowedDatatypes.includes( payload.property.datatype ) ) {
 			context.dispatch( 'setConditionAsLimitedSupport', payload.conditionIndex );
 		} else {
 			context.commit(

src/store/mutations.ts

@@ -9,16 +9,15 @@ export default {
 		state.conditionRows[ payload.conditionIndex ].valueData.value = payload.value;
 	},
 	setProperty( state: RootState, payload: { property: Property | null; conditionIndex: number } ): void {
-		if ( !payload.property ) {
-			state.conditionRows[ payload.conditionIndex ].propertyData.isPropertySet = false;
-			return;
-		}
 		state.conditionRows[ payload.conditionIndex ].propertyData = {
 			...state.conditionRows[ payload.conditionIndex ].propertyData,
 			...payload.property,
 		};
 		state.conditionRows[ payload.conditionIndex ].propertyData.isPropertySet = true;
 	},
+	unsetProperty( state: RootState, conditionIndex: number ): void {
+		state.conditionRows[ conditionIndex ].propertyData.isPropertySet = false;
+	},
 	setPropertyValueRelation( state: RootState,
 		payload: { propertyValueRelation: PropertyValueRelation; conditionIndex: number } ): void {
 		state.conditionRows[ payload.conditionIndex ].propertyValueRelationData.value = payload.propertyValueRelation;

tests/unit/components/EntityLookup.spec.ts

@@ -1,13 +1,16 @@
 import EntityLookup from '@/components/EntityLookup.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { Lookup } from '@wmde/wikit-vue-components';
+import Vue from 'vue';
 import i18n from 'vue-banana-i18n';
 import SearchOptions from '@/data-access/SearchOptions';
 
 const localVue = createLocalVue();
-const messages = {};
+const messages = { en: {
+	'some-error-message-key': 'some-error-copy',
+} };
 
-localVue.use( i18n, {
+Vue.use( i18n, {
 	locale: 'en',
 	messages,
 	wikilinks: true,
@@ -75,7 +78,7 @@ describe( 'EntityLookup.vue', () => {
 	it( 'passes error prop down to Lookup', () => {
 		const error = {
 			type: 'error',
-			message: 'some description',
+			message: 'some-error-message-key',
 		};
 
 		const wrapper = shallowMount( EntityLookup, {
@@ -85,6 +88,9 @@ describe( 'EntityLookup.vue', () => {
 			},
 		} );
 
-		expect( wrapper.findComponent( Lookup ).props( 'error' ) ).toStrictEqual( error );
+		expect( wrapper.findComponent( Lookup ).props( 'error' ) ).toStrictEqual( {
+			type: 'error',
+			message: 'some-error-copy',
+		} );
 	} );
 } );

tests/unit/components/PropertyLookup.spec.ts

@@ -68,7 +68,7 @@ describe( 'PropertyLookup.vue', () => {
 		expect( actualSearchOptions ).toStrictEqual( expectedSearchResults );
 	} );
 
-	it( 'passes error prop down to Lookup', () => {
+	it( 'passes error prop down to EntityLookup', () => {
 		const error = {
 			type: 'error',
 			message: 'some description',

tests/unit/components/QueryCondition.spec.ts

@@ -1,6 +1,6 @@
 import DeleteConditionButton from '@/components/DeleteConditionButton.vue';
+import StringValueInput from '@/components/StringValueInput.vue';
 import PropertyValueRelation from '@/data-model/PropertyValueRelation';
-import { TextInput } from '@wmde/wikit-vue-components';
 import Vuex, { Store } from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import PropertyLookup from '@/components/PropertyLookup.vue';
@@ -95,7 +95,7 @@ describe( 'QueryCondition.vue', () => {
 		} );
 		const userInput = 'potato';
 
-		const input = wrapper.findAllComponents( { ref: 'value' } ).at( conditionIndex );
+		const input = wrapper.findComponent( StringValueInput );
 		input.vm.$emit( 'input', userInput );
 
 		expect( store.dispatch ).toHaveBeenCalledWith( 'updateValue', { value: userInput, conditionIndex } );
@@ -145,7 +145,7 @@ describe( 'QueryCondition.vue', () => {
 			type: 'error',
 			message: 'Property Error Message!',
 		} );
-		expect( wrapper.findComponent( TextInput ).props( 'error' ) ).toStrictEqual( {
+		expect( wrapper.findComponent( StringValueInput ).props( 'error' ) ).toStrictEqual( {
 			type: 'warning',
 			message: 'Value Warning Message!',
 		} );

tests/unit/store/actions.spec.ts

@@ -44,6 +44,26 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	it( 'unsetProperty', () => {
+		const context = {
+			commit: jest.fn(),
+		};
+		const conditionIndex = 0;
+		const actions = createActions(
+			services.get( 'searchEntityRepository' ),
+			services.get( 'metricsCollector' ),
+		);
+
+		actions.unsetProperty( context as any, conditionIndex );
+
+		expect( context.commit ).toHaveBeenCalledTimes( 2 );
+		expect( context.commit ).toHaveBeenCalledWith( 'unsetProperty', conditionIndex );
+		expect( context.commit ).toHaveBeenCalledWith( 'clearFieldErrors', {
+			conditionIndex,
+			errorsToClear: 'property',
+		} );
+	} );
+
 	describe( 'updateProperty', () => {
 		it( 'commits the property to the store', () => {
 			const context = {

tests/unit/store/mutations.spec.ts

@@ -64,40 +64,40 @@ describe( 'mutations', () => {
 
 			expect( state.conditionRows[ conditionIndex ].propertyData ).toStrictEqual( expectedProperty );
 		} );
+	} );
 
-		it( 'clears a property from the state', () => {
-			const preExistingPropertyError = { message: 'some error', type: 'warning' } as const;
-			const state: RootState = {
-				conditionRows: [ {
-					valueData: { value: 'foo', valueError: null },
-					propertyData: {
-						id: 'P123',
-						label: 'abc',
-						datatype: 'string',
-						isPropertySet: true,
-						propertyError: preExistingPropertyError,
-					},
-					propertyValueRelationData: { value: PropertyValueRelation.Matching },
-					conditionId: '0.123',
-				} ],
-				limit: 0,
-				useLimit: false,
-				omitLabels: true,
-				errors: [],
-			};
-
-			mutations.setProperty( state, { property: null, conditionIndex: 0 } );
-
-			expect( state.conditionRows[ 0 ].propertyData ).toStrictEqual(
-				{
+	it( 'unsetProperty', () => {
+		const preExistingPropertyError = { message: 'some error', type: 'warning' } as const;
+		const state: RootState = {
+			conditionRows: [ {
+				valueData: { value: 'foo', valueError: null },
+				propertyData: {
 					id: 'P123',
 					label: 'abc',
 					datatype: 'string',
-					isPropertySet: false,
+					isPropertySet: true,
 					propertyError: preExistingPropertyError,
 				},
-			);
-		} );
+				propertyValueRelationData: { value: PropertyValueRelation.Matching },
+				conditionId: '0.123',
+			} ],
+			limit: 0,
+			useLimit: false,
+			omitLabels: false,
+			errors: [],
+		};
+
+		mutations.unsetProperty( state, 0 );
+
+		expect( state.conditionRows[ 0 ].propertyData ).toStrictEqual(
+			{
+				id: 'P123',
+				label: 'abc',
+				datatype: 'string',
+				isPropertySet: false,
+				propertyError: preExistingPropertyError,
+			},
+		);
 	} );
 
 	it( 'addCondition', () => {