super-hog/packages/frontend/js/components/task-form.riot

<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>