|
1 | 1 | # AutoForm Picker
|
2 | 2 |
|
3 |
| -Meteor AutoForm plugin which allow to pick (or create new) document from given Mongo Collection. |
| 3 | +Meteor AutoForm widget which allow to pick (or create new) document from given Mongo Collection. |
4 | 4 |
|
5 | 5 | ## Motivation
|
6 | 6 |
|
7 |
| -We needed an AutoForm plugin which would: |
| 7 | +We needed an AutoForm plugin which: |
8 | 8 | - would allow to select some value from given collection
|
9 |
| - - work with big amount of data (e.g. 100 000 entries/docs) |
10 |
| - - would allow to create new document in DB right from plugin |
| 9 | + - could work with big amount of data (e.g. 100 000 entries/docs) |
| 10 | + - while filtering/searching, would transliterate search phrase |
| 11 | + - would allow to create new document in DB right from widget |
11 | 12 |
|
12 |
| -The closest solution would use `aldeed:autoform-select2`, but it's not good when you work with big amount of data (it's not good idea to subscribe for 100 000 docs and find/filter them on client. Also it not support possibility to create new document/enty in DB while filling form. |
| 13 | +The closest solution at that time was `aldeed:autoform-select2`, but it's not good when you work with big amount of data (it's not good idea to subscribe for 100 000 docs and find/filter them on client. Also autoform-select2 not support possibility to create new document/enty in DB while filling form. |
13 | 14 |
|
14 | 15 | ## How does it work? (Features)
|
15 | 16 |
|
16 |
| -- Creates index of fields we will search from. |
17 |
| -- Do filter/search on server and then send to client only max 20 filtered results. |
18 |
| -- Uses quickForm to create new entry into DB (you can also create own form with autoForm if you need). |
| 17 | +- Creates index of fields we will use to search/filter. |
| 18 | +- Do filter/search on server and then send to client max 20 filtered results. |
| 19 | +- Supports transliteration. E.g. allow search for `Rīga` by typing `riga` or `Рига`. |
| 20 | +- Uses quickForm to create new entry into DB (you can also create own form template with autoForm if you need). |
| 21 | + |
19 | 22 |
|
20 | 23 | ## Usage manual
|
21 | 24 |
|
22 |
| -1. Install packages: `meteor add chompomonim:autoform-picker` |
| 25 | +1. Install package: `meteor add nous:autoform-picker` (previously known as `chompomonim:autoform-picker`) |
23 | 26 |
|
24 |
| -1. To have possibility to search on server and have needed indexes, you'll need to add `@searchIn.register "CollectionName" right after creating it. E.g.: |
25 |
| - |
26 |
| - ``` CoffeeScript |
27 |
| -class @ClientBase |
28 |
| - name: -> "#{@first_name} #{@last_name}" |
29 |
| - ... |
30 |
| - |
31 |
| -@Clients = new Mongo.Collection 'clients', |
32 |
| - transform: (doc) -> _.extend new ClientBase, doc |
33 |
| - |
34 |
| -if Meteor.isServer |
35 |
| - @searchIn.register "Clients", -> |
36 |
| - name: "#{@first_name} #{@last_name}" |
37 |
| - code: @code |
38 |
| - id: @id.toString() |
39 |
| - contacts: (@contacts?.emails ? []).join(' ') |
| 27 | +1. To get possibility to search on server (using some kind of index), you'll need to register your Collection: |
| 28 | + |
| 29 | + ``` JavaScript |
| 30 | + // lib/collection.js |
| 31 | +import { Meteor } from 'meteor/meteor'; |
| 32 | +import { Mongo } from 'meteor/mongo'; |
| 33 | +import { SimpleSchema } from 'meteor/aldeed:simple-schema'; |
| 34 | +import searchIn from 'meteor/nous:search-in'; |
| 35 | + |
| 36 | +/* This is optional. In case you use Colection transformations, we also support them. |
| 37 | +export class ClientBase { |
| 38 | + get name() { |
| 39 | + return `${this.first_name} ${this.last_name}` |
| 40 | + } |
| 41 | + ... |
| 42 | +} |
| 43 | +
|
| 44 | +export const Clients = new Mongo.Collection('clients', { |
| 45 | + transform: function(doc) { |
| 46 | + return _.extend(new ClientBase, doc) |
| 47 | + } |
| 48 | +}); |
| 49 | +*/ |
| 50 | + |
| 51 | +export const Clients = new Mongo.Collection('clients'); |
| 52 | + |
| 53 | +// Your schema here |
| 54 | + |
| 55 | +if (Meteor.isServer) { |
| 56 | + searchIn.register(Clients, function () { |
| 57 | + return { |
| 58 | + name: `${this.first_name} ${this.last_name}`, |
| 59 | + address: this.address, |
| 60 | + email: ((this.emails != null) ? this.emails : []).join(' ') |
| 61 | + } |
| 62 | + }); |
| 63 | +} |
40 | 64 | ```
|
41 | 65 |
|
42 |
| -1. In your schema you should add `toic-picker` autoform type. |
43 |
| - |
44 |
| -```CoffeeScript |
45 |
| -@SomeSchema = new SimpleSchema |
| 66 | +1. In your schema you should add `toic-picker` autoform type. |
| 67 | + |
| 68 | +```JavaScript |
| 69 | + |
| 70 | +SomeSchema = new SimpleSchema({ |
| 71 | + ... |
| 72 | + client_id: { |
| 73 | + type: String, |
| 74 | + regEx: SimpleSchema.RegEx.Id, |
| 75 | + autoform: { |
| 76 | + type: "toic-picker", |
| 77 | + afFieldInput: { |
| 78 | + collection: 'clients', // Collection name |
| 79 | + choose: ()=> function () { return this.name }, // What you want to see as a item name/label of select results. Yes, it's function as a parametr for other function. |
| 80 | + class: ()=> ClientBase, // (optional) Function which returns collection base. |
| 81 | + fields: ["name", "category_ids"] // (optional) If you'll use default template (quickForm), you can select which fielts do you need there. |
| 82 | + } |
| 83 | + } |
| 84 | + } |
| 85 | +}) |
46 | 86 | ...
|
47 |
| - client_id: |
48 |
| - type: String |
49 |
| - regEx: SimpleSchema.RegEx.Id |
50 |
| - autoform: |
51 |
| - type: "toic-picker" |
52 |
| - afFieldInput: |
53 |
| - collection: 'Clients' # Collection name |
54 |
| - class: => @ClientBase # Collection's class (if needed) |
55 |
| - choose: -> -> "#{@name}" # What you want to see as a label of select. Yes, it's function as a parametr for other function. |
56 |
| - inline_template: 'clientAddInsidePicker' # (optional), if you need some additional template. |
57 |
| - fields: ["name", "category_ids"] # (optional) I you'll use default template (quickForm), you can select which fielts do you need there. |
58 |
| - ... |
59 | 87 | ```
|
60 | 88 |
|
| 89 | +Example project: https://github.com/chompomonim/autoform-picker-example |
0 commit comments