urban-filehub/packages/frontend/js/components/hub/form.riot

<app-hub-form>

    <tiny-sidebar-form form-id="app-hub-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-hub-form" class="form" slot="form" onsubmit={ (event) => { state.isLoading = true; update(); state.validator.submit(event) } }>

            <input type="hidden" name="_id" value="{ state.current._id }" if={ state.current._id } />
            <input type="hidden" name="_rev" value="{ state.current._rev }" if={ state.current._rev } />

            <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">
                    directory
                    <input class="field-text" name="directory" type="text" value="{ state.current.directory }" />
                    <field-error name="directory"></field-error>
                </label>
            </div>
            <div class="field-group">
                <label class="field-label">
                    description
                    <textarea class="field-text" name="description">{ state.current.description }</textarea>
                    <field-error name="description"></field-error>
                </label>
            </div>
        </form>

    </tiny-sidebar-form>

    <script>

        import * as riot from 'riot'

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

        // stores
        import hubStore from './../../stores/hub.js'
        import notificationStore from '@tiny-components/notification/src/notificationStore.js'

        // mixins
        import sidebarFormMixin from '@tiny-components/sidebar-form/src/sidebarFormMixin.js'

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

        /**
         *
         *
         *  @author Björn Hase, <me@herr-hase.wtf>
         *
         */

        export default () => {
            return {

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

                state: {
                    requestHandlers: [],
                    validator: undefined
                },

                /**
                 *
                 *
                 */
                onMounted()
                {
                    // creating formValidator
                    this.state.validator = new FormValidator(this.$('.form'), {
                        'name': {
                            'presence': true
                        },
                        'directory': {
                            'presence': true
                        },
                        'description': {
                            'presence': false
                        }
                    })

                    // 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()
                    })

                    // if open event
                    hubStore.on('open', (data) => {
                        this.state.isOpen = true

                        if (data && data._id) {
                            this.state.current = data
                        }

                        this.update()
                    })
                 },

                 /**
                  *
                  *
                  *
                  */
                 reset()
                 {
                     this.state.current = {
                         name: '',
                         directory: '',
                         description: ''
                     }
                 },

                 /**
                  *  send data to server
                  *
                  *  @param  {object} event
                  *  @param  {object} data
                  *
                  */
                 handleSuccess(event, data)
                 {
                     event.preventDefault()

                     let method = 'POST'

                     // if data has id, change to method for update task
                     if (this.state.current._id) {
                         method = 'PUT'
                     }

                     fetch('/api/hubs/v1', {
                            'method': method,
                            'body': JSON.stringify(data),
                            'headers': {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then((response) => response.json())
                        .then((response) => {

                            // stop loading
                            this.state.isLoading = false

                            // add id to current
                            this.state.current._id = response.data.id
                            this.state.current._rev = response.data.rev

                            this.state.current = Object.assign(this.state.current, data)

                            if (method === 'POST') {
                                notificationStore.success('Success! Task created!')
                            } else {
                                notificationStore.success('Success! Task ' + response.data.name + ' created!')
                            }

                            // fetch for new tasks of component:tasks
                            hubStore.get()

                            this.update()

                            // if button has attribute close
                            if (event.submitter.attributes.close) {
                                this.handleClose()
                            }

                        }).catch((error) => {

                            // stop loading
                            this.state.isLoading = false

                            // show error message
                            notificationStore.danger('Error! Server has a Error, Request can not proceed!')
                            this.update()

                        })
                 }
            }
        }

    </script>
</app-hub-form>