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.id }>
                Edit Task { state.current.name }
            </virtual>
            <virtual if={ !state.current.id }>
                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">
                    requestHandlers
                    <select class="field-choice" name="requestHandler">
                        <option></option>
                        <option value="{ requestHandler.file }" each={ requestHandler in state.requestHandlers } selected={ action === state.current.requestHandler }>
                            { requestHandler.name }
                        </option>
                    </select>
                    <field-error name="requestHandlers"></field-error>
                </label>
            </div>
            <div class="field-group">
                <label class="field-label">
                    actionHandlers
                    <select class="field-choice" name="action">
                        <option></option>
                        <option value="{ actionHandler.file }" each={ actionHandler in state.actionHandlers } selected={ action === state.current.actionHandler }>
                            { actionHandler.name }
                        </option>
                    </select>
                    <field-error name="actionHandlers"></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: '',
                        requestHandlers: '',
                        actionHandlers: '',
                        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': {

                        }
                    })

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

                        // add notification
                        notificationStore.danger('Error! Check your input!')

                        this.update()
                    })

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

                    this.getRequestHandlers()
                    this.getActionHandlers()
                 },

                 getRequestHandlers()
                 {
                     fetch('/api/v1/handler/request',  {
                             'method': 'GET'
                         })
                         .then((response) => response.json())
                         .then((response) => {
                             this.state.requestHandlers = response.data
                             this.update()
                         })
                 },

                 getActionHandlers()
                 {
                     fetch('/api/v1/handler/action',  {
                             'method': 'GET'
                         })
                         .then((response) => response.json())
                         .then((response) => {
                             this.state.actionHandlers = response.data
                             this.update()
                         })
                 },

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

                     fetch('/api/v1/task', {
                            'method': 'POST',
                            'body': JSON.stringify(data)
                        })
                        .then((response) => response.json())
                        .then((response) => {

                            // stop loading
                            this.state.isLoading = false

                            // add id to current
                            this.state.current.id = response.data.id
                            this.update()
                        })
                 }
            }
        }

    </script>
</app-task-form>