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.
129 lines
3.9 KiB
129 lines
3.9 KiB
<app-task-form>
|
|
|
|
<app-sidebar form-id="app-task-form" open={ state.isOpen } close={ () => { handleClose() } }>
|
|
|
|
<!-- slot:title -->
|
|
<span slot="title">
|
|
<virtual if={ state.current.name }>
|
|
Edit Task { state.current.name }
|
|
</virtual>
|
|
<virtual if={ !state.current.name }>
|
|
New Task
|
|
</virtual>
|
|
</span>
|
|
|
|
<!-- slot:header -->
|
|
<form id="app-task-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>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
action
|
|
<select class="field-choice" name="action">
|
|
<option></option>
|
|
<option each={ handler in state.actions }></option>
|
|
</select>
|
|
<field-error name="action"></field-error>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
|
|
</app-sidebar>
|
|
|
|
<script>
|
|
|
|
import * as riot from 'riot'
|
|
|
|
import FormValidator from '@tiny-components/validator/src/formValidator.js'
|
|
|
|
import taskFormStore from './../stores/taskForm.js'
|
|
import sidebar from './../mixins/sidebar.js'
|
|
|
|
import FieldError from '@tiny-components/validator/src/fieldError.riot'
|
|
riot.register('field-error', FieldError)
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
|
|
export default () => {
|
|
return {
|
|
|
|
...sidebar,
|
|
|
|
state: {
|
|
requestHandlers: [],
|
|
validator: undefined,
|
|
current: {
|
|
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
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('open', (data) => {
|
|
this.state.isOpen = true
|
|
this.update()
|
|
})
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
handleSuccess(event, data)
|
|
{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</app-task-form> |