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

<app-task-form>

    <app-sidebar form-id="app-task-form" open={ state.isOpen } close={ () => { handleClose() } } loading={ state.isLoading }>

        <!-- 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.isLoading = true; update(); state.validator.submit(event) } }>
            <div class="field-group">
                <label class="field-label">
                    name
                    <input class="field-text" name="name" type="text" value="{ state.current.name }" />
                    <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" value="{ state.current.url }" />
                    <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 value="{ handler }" each={ handler in state.requestHandlers } selected={ action === state.current.requestHandler }></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 value="{ action }" each={ action in state.actions } selected={ action === state.current.action }></option>
                    </select>
                    <field-error name="action"></field-error>
                </label>
            </div>
            <div class="field-group">
                <label class="field-label">
                    options
                    <input type="text" name="options" class="field-text" value="{ JSON.stringify(state.current.options) }" />
                    <field-error name="options"></field-error>
                </label>
            </div>
            <div class="field-group">
                <label class="field-label">
                    timer
                    <input type="text" name="timer" class="field-text" value="{ state.current.timer }" />
                    <field-error name="timer"></field-error>
                </label>
            </div>
        </form>

    </app-sidebar>

    <script>

        import * as riot from 'riot'

        import FormValidator from '@tiny-components/validator/src/formValidator.js'

        // stores
        import taskFormStore from './../stores/taskForm.js'
        import notificationStore from './../stores/notification'

        // mixins
        import sidebar from './../mixins/sidebar.js'

        import FieldError from '@tiny-components/validator/src/fieldError.riot'
        riot.register('field-error', FieldError)

        /**
         *
         *
         */

         export default () => {
             return {

                 ...sidebar,  // adding basic funtion for sidebar

                 state: {
                     requestHandlers: [],
                     validator: undefined,
                     current: {
                         name: '',
                         url: '',
                         requestHandler: '',
                         action: '',
                         options: {

                         },
                         timer: ''
                     }
                 },

                 /**
                  *
                  *
                  */
                 onMounted()
                 {
                     // creating formValidator
                     this.state.validator = new FormValidator(this.$('.form'), {
                         'name': {
                             'presence': true
                         },
                         'url': {
                             'presence': true
                         },
                         'requestHandler': {
                             'presence': true
                         },
                         'action': {
                             'presence': true
                         },
                         'timer': {
                             'presence': true
                         }
                     })

                     // adding on success
                     this.state.validator.onSuccess((event, data) => {
                         this.handleSuccess(event, data)
                     })

                     // adding on success
                     this.state.validator.onError((event, data) => {
                         this.state.isLoading = false
                         notificationStore.danger('Error! Check your input!')

                         this.update()
                     })

                     taskFormStore.on('open', (data) => {
                         this.state.isOpen = true
                         this.update()
                     })
                 },

                 /**
                  *
                  *
                  *
                  */
                 handleSuccess(event, data)
                 {

                 }
             }
        }

    </script>

</app-task-form>