meteor-autoform-documents
View documents, create new documents or update documents within your autoform.
Installation
Install via
meteor add jkuester:autoform-documents
Usage
The following example uses a SimpleSchema
based schema that can be passed for example to a quickForm
.
Consider the following collection:
1{ 2 doc: { 3 // we will only store the id of the doc 4 // to keep the database clean and tidy 5 type: String, 6 7 // you could justr display the name of the other collection 8 label: 'Doc from another collection', 9 10 autoform: { 11 // required to load the template 12 type: 'documents', 13 14 // Methods are required to handle 15 // the findOne, insert, update, remove 16 // of the external collection without 17 // coupling the collection to the template. 18 // All methods work with the three examples below 19 methods: { 20 21 // example 1: get from synced client 22 // note, there is a callback in case the doc is not 23 // synced via subscription but retrieved e.g. by method 24 get (docId, callback) { 25 callback(null, SomeCollection.findOne(docId)) 26 }, 27 28 // example 2: externally call the method 29 insert (insertDoc, callback) { 30 Meteor.call('insertSomeDoc', insertDoc, callback) 31 }, 32 33 // example 3: pass only the method name 34 // and the method will be called from the template. 35 // note, that the arguments which are passed to the 36 // method are designed in accordance to the 37 // AutoForm.getFormValues insertDoc / updateDoc 38 update: 'someUpdateMethodName', 39 }, 40 41 // a schema of the other collection is required to 42 // render to form for the external docs correctly 43 schema: SomeCollection.schema, 44 45 // provide a first option like for any other 46 // select based component in AutoForm 47 firstOption: () => i18n.get('form.selectOne'), 48 49 // provide the list of selectable docs, 50 // this example assumes, that there are fields 51 // like title or description but you can choose any 52 // values you like. 53 options() { 54 return SomeCollection 55 .find() 56 .fetch() 57 .map(doc => ({ 58 value: doc._id, 59 label: doc.title, 60 description: doc.description 61 })) 62 }, 63 64 // you can configure appearance 65 // and labeling of the submit button 66 buttons: { 67 insert: { 68 classes: 'btn btn-success', 69 label: () => i18n.get('actions.insert') 70 }, 71 update: { 72 classes: 'btn btn-primary', 73 label: () => i18n.get('actions.update') 74 } 75 } 76 } 77 } 78}
Bootstrap Bug
Note, that there is a bootstrap bug for Modals that are placed within a list-group-item. The bug applies for this template, if it is used within an array (Autoform displays it using a list-group). To prevent the bug, you need to add the following line to your application's CSS:
1.list-group-item, .list-group-item:hover{ z-index: auto; }
Changelog
1.4.1
- delete also existing schemas by instanceId in onDestroyed
- fix existing value not set to hidden input bug using onRendered
1.4.0
- invalid state handling added
- fixed schema and modal bugs when multiple instances of the template are used in a form
- submit button styling via schema added
- included formIsValid check for every submit
- fix borders for lists
- removed unused css
- added formIsValid helper to check form and add sticky validation errors
- methods args for template can now be meteor method names or external functions
- html layout bootstrap 4 compatible modal
- removed unused test file
- extracted autoform extension def into own file
1.3.0
- Set existing value (e.g. in updte form) before autorun so deselecting value is supported
- Optionally map a "description" field
Lince
MIT, See License File