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.

207 lines
6.9 KiB

2 years ago
<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>