You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.3 KiB
122 lines
3.3 KiB
3 years ago
|
<app-task-form>
|
||
|
|
|
||
|
|
<app-sidebar>
|
||
|
|
|
||
|
|
<span slot="title">
|
||
|
|
<virtual if={ state.current.name }>
|
||
|
|
Edit Task { state.current.name }
|
||
|
|
</virtual>
|
||
|
|
<virtual if={ !state.current.name }>
|
||
|
|
New Task
|
||
|
|
</virtual>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<form class="form" slot="form" onsubmit={ (event) => { state.validator.submit(event) } }>
|
||
|
|
<div class="field-group">
|
||
|
|
<label class="field-label">
|
||
|
|
name
|
||
|
|
<input class="field-text" name="name" type="text" />
|
||
|
|
<field-error name="name"></field-error>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="field-group">
|
||
|
|
<label class="field-label">
|
||
|
|
url
|
||
|
|
<input class="field-text" name="url" type="text" />
|
||
|
|
<field-error name="url"></field-error>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="field-group">
|
||
|
|
<label class="field-label">
|
||
|
|
requestHandler
|
||
|
|
<select class="field-choice" name="requesthandler">
|
||
|
|
<option></option>
|
||
|
|
<option each={ handler in state.requestHandlers }></option>
|
||
|
|
</select>
|
||
|
|
<field-error name="requesthandler"></field-error>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</app-sidebar>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import FormValidator from '@tiny-components/validator/src/formValidator.js'
|
||
|
|
import FieldError from '@tiny-components/validator/src/fieldError.riot'
|
||
|
|
|
||
|
|
import taskFormStore from './../stores/taskForm.js'
|
||
|
|
|
||
|
|
import * as riot from 'riot'
|
||
|
|
|
||
|
|
riot.register('field-error', FieldError)
|
||
|
|
riot.mount('field-error')
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
state: {
|
||
|
|
requestHandlers: [],
|
||
|
|
validator: undefined,
|
||
|
|
current: {
|
||
|
|
|
||
|
|
},
|
||
|
|
isOpen: false
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
onMounted()
|
||
|
|
{
|
||
|
|
// creating formValidator
|
||
|
|
this.state.validator = new FormValidator(this.$('.form'), {
|
||
|
|
'name': {
|
||
|
|
'presence': true
|
||
|
|
},
|
||
|
|
'url': {
|
||
|
|
'presence': true
|
||
|
|
},
|
||
|
|
'requestHandler': {
|
||
|
|
'presence': true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// adding on success
|
||
|
|
this.state.validator.onSuccess((event, data) => {
|
||
|
|
this.handleSuccess(event, data)
|
||
|
|
})
|
||
|
|
|
||
|
|
taskFormStore.on('toggle-form', () => {
|
||
|
|
if (this.state.isOpen) {
|
||
|
|
this.state.isOpen = false
|
||
|
|
} else {
|
||
|
|
this.state.isOpen = true
|
||
|
|
}
|
||
|
|
|
||
|
|
this.update()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.update()
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* @param {object} event
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
handleSubmit(event)
|
||
|
|
{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</app-task-form>
|