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

3 years ago
<app-task-form>
3 years ago
<app-sidebar form-id="app-task-form" open={ state.isOpen } close={ () => { handleClose() } }>
3 years ago
3 years ago
<!-- slot:title -->
3 years ago
<span slot="title">
<virtual if={ state.current.name }>
Edit Task { state.current.name }
</virtual>
<virtual if={ !state.current.name }>
New Task
</virtual>
</span>
3 years ago
<!-- slot:header -->
<form id="app-task-form" class="form" slot="form" onsubmit={ (event) => { state.validator.submit(event) } }>
3 years ago
<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
3 years ago
<select class="field-choice" name="requestHandler">
3 years ago
<option></option>
<option each={ handler in state.requestHandlers }></option>
</select>
3 years ago
<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>
3 years ago
</label>
</div>
</form>
</app-sidebar>
<script>
3 years ago
import * as riot from 'riot'
3 years ago
import FormValidator from '@tiny-components/validator/src/formValidator.js'
import taskFormStore from './../stores/taskForm.js'
3 years ago
import sidebar from './../mixins/sidebar.js'
3 years ago
3 years ago
import FieldError from '@tiny-components/validator/src/fieldError.riot'
3 years ago
riot.register('field-error', FieldError)
/**
*
*
*/
3 years ago
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)
{
}
}
3 years ago
}
</script>
</app-task-form>