<template>
	<div v-click-outside="hideDelete" class="check" @click="showDelete">
		<Multiselect ref="checkSelector"
			v-model="currentOption"
			:options="options"
			label="name"
			track-by="class"
			:allow-empty="false"
			:placeholder="t('workflowengine', 'Select a filter')"
			@input="updateCheck" />
		<Multiselect v-model="currentOperator"
			:disabled="!currentOption"
			:options="operators"
			class="comparator"
			label="name"
			track-by="operator"
			:allow-empty="false"
			:placeholder="t('workflowengine', 'Select a comparator')"
			@input="updateCheck" />
		<component :is="currentOption.component"
			v-if="currentOperator && currentComponent"
			v-model="check.value"
			:disabled="!currentOption"
			:check="check"
			class="option"
			@input="updateCheck"
			@valid="(valid=true) && validate()"
			@invalid="!(valid=false) && validate()" />
		<input v-else
			v-model="check.value"
			type="text"
			:class="{ invalid: !valid }"
			:disabled="!currentOption"
			:placeholder="valuePlaceholder"
			class="option"
			@input="updateCheck">
		<Actions v-if="deleteVisible || !currentOption">
			<ActionButton icon="icon-close" @click="$emit('remove')" />
		</Actions>
	</div>
</template>

<script>
import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import ClickOutside from 'vue-click-outside'

export default {
	name: 'Check',
	components: {
		ActionButton,
		Actions,
		Multiselect,
	},
	directives: {
		ClickOutside,
	},
	props: {
		check: {
			type: Object,
			required: true,
		},
		rule: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {
			deleteVisible: false,
			currentOption: null,
			currentOperator: null,
			options: [],
			valid: false,
		}
	},
	computed: {
		checks() {
			return this.$store.getters.getChecksForEntity(this.rule.entity)
		},
		operators() {
			if (!this.currentOption) { return [] }
			const operators = this.checks[this.currentOption.class].operators
			if (typeof operators === 'function') {
				return operators(this.check)
			}
			return operators
		},
		currentComponent() {
			if (!this.currentOption) { return [] }
			return this.checks[this.currentOption.class].component
		},
		valuePlaceholder() {
			if (this.currentOption && this.currentOption.placeholder) {
				return this.currentOption.placeholder(this.check)
			}
			return ''
		},
	},
	watch: {
		'check.operator'() {
			this.validate()
		},
	},
	mounted() {
		this.options = Object.values(this.checks)
		this.currentOption = this.checks[this.check.class]
		this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)

		if (this.check.class === null) {
			this.$nextTick(() => this.$refs.checkSelector.$el.focus())
		}
		this.validate()
	},
	methods: {
		showDelete() {
			this.deleteVisible = true
		},
		hideDelete() {
			this.deleteVisible = false
		},
		validate() {
			this.valid = true
			if (this.currentOption && this.currentOption.validate) {
				this.valid = !!this.currentOption.validate(this.check)
			}
			this.check.invalid = !this.valid
			this.$emit('validate', this.valid)
		},
		updateCheck() {
			const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator)
			if (this.check.class !== this.currentOption.class || matchingOperator === -1) {
				this.currentOperator = this.operators[0]
			}
			this.check.class = this.currentOption.class
			this.check.operator = this.currentOperator.operator

			this.validate()

			this.$emit('update', this.check)
		},
	},
}
</script>

<style scoped lang="scss">
	.check {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-right: 20px;
		& > *:not(.close) {
			width: 180px;
		}
		& > .comparator {
			min-width: 130px;
			width: 130px;
		}
		& > .option {
			min-width: 230px;
			width: 230px;
		}
		& > .multiselect,
		& > input[type=text] {
			margin-right: 5px;
			margin-bottom: 5px;
		}

		.multiselect::v-deep .multiselect__content-wrapper li>span,
		.multiselect::v-deep .multiselect__single {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	input[type=text] {
		margin: 0;
	}
	::placeholder {
		font-size: 10px;
	}
	button.action-item.action-item--single.icon-close {
		height: 44px;
		width: 44px;
		margin-top: -5px;
		margin-bottom: -5px;
	}
	.invalid {
		border: 1px solid var(--color-error) !important;
	}
</style>
5620923f631b2e6df5d5cdd'>commit</a><a href='/aspectj.git/diff/docs/teaching/exercises/answers/Answer2f.java?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>diff</a><a href='/aspectj.git/stats/docs/teaching/exercises/answers/Answer2f.java'>stats</a></td><td class='form'><form class='right' method='get' action='/aspectj.git/log/docs/teaching/exercises/answers/Answer2f.java'>
<input type='hidden' name='id' value='10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/aspectj.git/tree/?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>root</a>/<a href='/aspectj.git/tree/docs?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>docs</a>/<a href='/aspectj.git/tree/docs/teaching?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>teaching</a>/<a href='/aspectj.git/tree/docs/teaching/exercises?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>exercises</a>/<a href='/aspectj.git/tree/docs/teaching/exercises/answers?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>answers</a>/<a href='/aspectj.git/tree/docs/teaching/exercises/answers/Answer2f.java?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>Answer2f.java</a></div><div class='content'>blob: 8d984903799f89aca31ec52c2d72e03e350ea957 (<a href='/aspectj.git/plain/docs/teaching/exercises/answers/Answer2f.java?id=10b2f3bfac7e4de7f5620923f631b2e6df5d5cdd'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
</pre></td>
<td class='lines'><pre><code>