by
13 | // default, and provide enter and leave animations, though these could be overridden if it makes
14 | // sense for your use case. A position: 'relative' style is also applied by default since the loading
15 | // effect requires position: 'absolute' on the child.
16 | //
17 | // This component defines a "duration" property that is used for both the enter and leave animation
18 | // durations.
19 | //
20 | // Use the property "opaque" if the children have opaque backgrounds. This will make the new element
21 | // come in 100% opacity and fade the old element out from on top of it. (Without this, opaque
22 | // elements end up bleeding the background behind the LoadingCrossfadeComponent through.)
23 |
24 | var React = require('react');
25 | var _ = require('lodash');
26 | //var VelocityTransitionGroup = require('velocity-transition-group');
27 | import { VelocityTransitionGroup } from 'velocity-react';
28 |
29 | var LoadingCrossfadeComponent = React.createClass({
30 | displayName: 'LoadingCrossfadeComponent',
31 |
32 | propTypes: {
33 | opaque: React.PropTypes.bool,
34 | duration: React.PropTypes.number,
35 | // At most 1 child should be supplied at a time, though the animation does correctly handle
36 | // elements moving in and out faster than the duration (so you can have 2 leaving elements
37 | // simultaneously, for example).
38 | children: React.PropTypes.element,
39 | },
40 |
41 | getDefaultProps: function () {
42 | return {
43 | duration: 350,
44 | };
45 | },
46 |
47 | render: function () {
48 | // We pull style out explicitly so that we can merge the position: 'relative' over any provided
49 | // value. position: 'relative' lets us absolutely-position the leaving child during the fade.
50 | var style = _.defaults((this.props.style || {}), { position: 'relative' });
51 |
52 | var transitionGroupProps = _.defaults(_.omit(this.props, _.keys(this.constructor.propTypes), 'style'), {
53 | component: 'div',
54 | style: style,
55 |
56 | enter: {
57 | animation: { opacity: 1 },
58 | duration: this.props.duration,
59 | style: {
60 | // If we're animating opaque backgrounds then we just render the new element under the
61 | // old one and fade out the old one. Without this, at e.g. the crossfade midpoint of
62 | // 50% opacity for old and 50% opacity for new, the parent background ends up bleeding
63 | // through 25%, which makes things look not smooth at all.
64 | opacity: this.props.opaque ? 1 : 0,
65 |
66 | // We need to clear out all the styles that "leave" puts on the element.
67 | position: 'relative',
68 | top: '',
69 | left: '',
70 | bottom: '',
71 | right: '',
72 | zIndex: '',
73 | },
74 | },
75 |
76 | leave: {
77 | animation: { opacity: 0 },
78 | duration: this.props.duration,
79 | style: {
80 | // 'absolute' so the 2 elements overlap for a crossfade
81 | position: 'absolute',
82 | top: 0,
83 | left: 0,
84 | bottom: 0,
85 | right: 0,
86 | zIndex: 1,
87 | },
88 | },
89 | });
90 |
91 | return React.createElement(VelocityTransitionGroup, transitionGroupProps, this.props.children);
92 | },
93 | });
94 |
95 | module.exports = LoadingCrossfadeComponent;
96 |
--------------------------------------------------------------------------------
/imports/ui/customers/CustomerEditForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import TextInput from '../components/TextInput.jsx';
4 | import DateInput from '../components/DateInput.jsx';
5 | import SelectInput from '../components/SelectInput.jsx';
6 |
7 |
8 | const CustomerEditForm = React.createClass({
9 | propTypes: {
10 | customer: React.PropTypes.object.isRequired,
11 | onChange: React.PropTypes.func.isRequired,
12 | onSave: React.PropTypes.func.isRequired,
13 | salesRegionOptions: React.PropTypes.array.isRequired,
14 | errors: React.PropTypes.object,
15 | isValid: React.PropTypes.bool
16 | },
17 |
18 | onSave(event) {
19 | event.preventDefault();
20 |
21 | this.props.onSave(this.props.customer);
22 | },
23 |
24 | onChange(event) {
25 | this.callOnChange(event.target.name, event.target.value);
26 | },
27 |
28 | onSelectChange(newValue) {
29 | this.callOnChange(newValue.name, newValue.selectedOption[newValue.valueKey]);
30 | },
31 |
32 | callOnChange(name, value) {
33 | // create a single row array with the data in
34 | this.props.onChange(this.props.customer, [{name, value}]);
35 | },
36 |
37 | render() {
38 | //console.log("CustomerEditComponent.render() props: ", this.props);
39 |
40 | let errors = {};
41 | if (this.props.errors) {
42 | errors = this.props.errors;
43 | }
44 |
45 | return (
46 |
107 | );
108 | }
109 | });
110 |
111 | module.exports = CustomerEditForm;
112 |
113 |
114 |
--------------------------------------------------------------------------------
/imports/api/orders/server/publications.js:
--------------------------------------------------------------------------------
1 | import Orders from '../order';
2 |
3 | const OrderPublicFields = {
4 | customerId: 1,
5 | customerName: 1,
6 | deliveryDate: 1,
7 | notes: 1,
8 | deliveryAddress1: 1,
9 | deliveryAddress2: 1,
10 | deliveryAddress3: 1,
11 | county: 1,
12 | postcode: 1,
13 | totalValue: 1,
14 | createdAt: 1,
15 | orderLines: [{
16 | _id: 1,
17 | productId: 1,
18 | description: 1,
19 | quantity: 1,
20 | unitPrice: 1,
21 | lineValue: 1,
22 | createdAt: 1
23 | }]
24 | }
25 |
26 | const OrdersListFields = {
27 | createdAt: 1,
28 | customerName: 1,
29 | totalValue: 1
30 | }
31 |
32 | Meteor.publish('Orders.public', function () {
33 | return Orders.find(
34 | {},
35 | {
36 | fields: OrdersListFields
37 | }
38 | );
39 | });
40 |
41 | Meteor.publish('Orders.topOrders', function (numberToReturn) {
42 | return Orders.find(
43 | {},
44 | {
45 | sort: {totalValue: -1},
46 | limit: numberToReturn,
47 | fields: OrdersListFields
48 | }
49 | );
50 | });
51 |
52 | Meteor.publish('Order.get', function (id) {
53 | //console.log("Order.get ", Orders.find({_id: id}).fetch());
54 | return Orders.find(
55 | {
56 | _id: id
57 | },
58 | {
59 | fields: OrderPublicFields
60 | }
61 | );
62 | });
63 |
64 | Meteor.publish('Order.customerTotals', function (customerId) {
65 | //console.log("Order.customerTotals ");
66 |
67 | var pipeline = [
68 | {$group: {_id: null, ordersTotalValue: {$sum: "$totalValue"}}}
69 | ];
70 |
71 | var result = Orders.aggregate(pipeline, {customerId});
72 | //console.log("Order.customerTotals:", JSON.stringify(result[0]), null, 2);
73 | //console.log("Order.customerTotals:", result);
74 |
75 | return result;
76 | });
77 |
78 | Meteor.publish('Orders.fullTextSearch', function (searchValue) {
79 | //console.log("Orders.fullTextSearch - "
80 | // + searchTerm + " - ", Orders.find({name: new RegExp(searchTerm)}).fetch());
81 |
82 | return Orders.find(
83 | { $text: {$search: searchValue} },
84 | {
85 | // `fields` is where we can add MongoDB projections. Here we're causing
86 | // each document published to include a property named `score`, which
87 | // contains the document's search rank, a numerical value, with more
88 | // relevant documents having a higher score.
89 | fields: {
90 | score: { $meta: "textScore" }
91 | },
92 | // This indicates that we wish the publication to be sorted by the
93 | // `score` property specified in the projection fields above.
94 | sort: {
95 | score: { $meta: "textScore" }
96 | }
97 | }
98 | );
99 | });
100 |
101 | Meteor.methods({
102 | 'Orders.fullTextSearch.method'({ searchValue }) {
103 |
104 | if (Meteor.isServer) {
105 | const results = Orders.find(
106 | {$text: {$search: searchValue}},
107 | {
108 | // `fields` is where we can add MongoDB projections. Here we're causing
109 | // each document published to include a property named `score`, which
110 | // contains the document's search rank, a numerical value, with more
111 | // relevant documents having a higher score.
112 | fields: {
113 | score: {$meta: "textScore"},
114 | // Only return the fields needed for the search results control:
115 | customerName: 1,
116 | createdAt: 1
117 | },
118 | // This indicates that we wish the publication to be sorted by the
119 | // `score` property specified in the projection fields above.
120 | sort: {
121 | score: {$meta: "textScore"}
122 | }
123 | }
124 | );
125 | //console.log('Orders.fullTextSearch results ', results.fetch());
126 |
127 | return results.fetch();
128 | }
129 | }
130 | });
--------------------------------------------------------------------------------
/imports/ui/sales/OrderContainer.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import OrderHeaderEdit from './OrderHeaderEdit.jsx';
5 | import OrderLinesList from './OrderLinesList.jsx';
6 | import SalesRegions from '../../api/sales-regions/sales-region';
7 |
8 | import { saveOrder, editOrder, selectOrder,
9 | selectNewOrder, editOrderLine, editOrderLineProduct,
10 | addNewOrderLine, deleteOrderLine, } from '../redux/order-actions.jsx';
11 |
12 |
13 | export const OrderContainer = React.createClass({
14 |
15 | componentWillMount() {
16 | //console.log("OrderContainer.componentWillMount()", this.props);
17 |
18 | const orderId = FlowRouter.getParam('_id');
19 |
20 | if (orderId) {
21 | this.sub = Meteor.subscribe('Order.get', orderId, this.setOrderInState);
22 | } else {
23 | this.props.selectNewOrder();
24 | }
25 |
26 | },
27 |
28 | setOrderInState() {
29 | //console.log("setOrderInState");
30 | this.props.selectOrder(FlowRouter.getParam('_id'));
31 | },
32 |
33 | componentWillUnmount() {
34 | if (this.sub) {
35 | this.sub.stop();
36 | }
37 | },
38 |
39 | shouldComponentUpdate() {
40 | //console.log("shouldComponentUpdate", this.sub);
41 | return (!this.sub || this.sub.ready);
42 | },
43 |
44 | render() {
45 | //console.log("OrderContainer.render()", this.props);
46 | if (this.sub && !this.sub.ready) {
47 | return (
Loading );
48 | }
49 |
50 | const pageHeader = (FlowRouter.getParam('_id')) ? "Sales Order" : "New Sales Order";
51 |
52 | return (
53 |
86 | );
87 | }
88 | });
89 |
90 | OrderContainer.propTypes = {
91 | order: PropTypes.object,
92 | onSave: PropTypes.func.isRequired,
93 | onChange: PropTypes.func.isRequired,
94 | selectOrder: PropTypes.func.isRequired,
95 | selectNewOrder: PropTypes.func.isRequired,
96 | editOrderLine: PropTypes.func.isRequired,
97 | editOrderLineProduct: PropTypes.func.isRequired,
98 | addNewOrderLine: PropTypes.func.isRequired,
99 | deleteOrderLine: PropTypes.func.isRequired
100 | };
101 |
102 | function mapStateToProps(state) {
103 | //console.log("OrderContainer.mapStateToProps", state);
104 | return {
105 | order: state.orderBeingEdited.order
106 | };
107 | }
108 |
109 | function mapDispatchToProps(dispatch) {
110 | //console.log("OrderContainer.mapDispatchToProps", OrderActions.orderSave)
111 | return;
112 | }
113 |
114 | export default connect(mapStateToProps, {
115 | onSave: saveOrder,
116 | onChange: editOrder,
117 | selectOrder,
118 | selectNewOrder,
119 | editOrderLine,
120 | editOrderLineProduct,
121 | addNewOrderLine,
122 | deleteOrderLine
123 |
124 | })(OrderContainer);
--------------------------------------------------------------------------------
/lib/collection-schema.js:
--------------------------------------------------------------------------------
1 | Schemas = {};
2 |
3 | Schemas.CustomerCompaniesSchema = new SimpleSchema({
4 |
5 | name: {
6 | type: String,
7 | max: 100,
8 | optional: false,
9 | label: "Customer name"
10 | },
11 |
12 | email: {
13 | type: String,
14 | max: 100,
15 | regEx: SimpleSchema.RegEx.Email,
16 | optional: true
17 | },
18 |
19 | postcode: {
20 | type: String,
21 | max: 10,
22 | optional: true
23 | },
24 |
25 | salesRegionId: {
26 | type: String,
27 | max: 100,
28 | optional: true,
29 | regEx: SimpleSchema.RegEx.Id,
30 | label: "Sales region"
31 | },
32 |
33 | nextContactDate: {
34 | type: Date,
35 | optional: true
36 | },
37 |
38 | ordersCount: {
39 | type: Number,
40 | optional: true,
41 | decimal: false,
42 | defaultValue: 0
43 | },
44 |
45 | ordersTotalValue: {
46 | type: Number,
47 | optional: true,
48 | decimal: true,
49 | defaultValue: 0
50 | },
51 |
52 | createdAt: {
53 | type: Date,
54 | optional: false,
55 | label: "Date created",
56 | defaultValue: new Date()
57 | }
58 |
59 |
60 | });
61 |
62 |
63 | Schemas.SalesRegionSchema = new SimpleSchema({
64 |
65 | name: {
66 | type: String,
67 | max: 100,
68 | optional: false
69 | },
70 |
71 | createdAt: {
72 | type: Date,
73 | optional: false,
74 | label: "Date created"
75 | }
76 | });
77 |
78 |
79 | Schemas.ProductSchema = new SimpleSchema({
80 |
81 | name: {
82 | type: String,
83 | max: 100,
84 | optional: false
85 | },
86 |
87 | price: {
88 | type: Number,
89 | optional: false,
90 | decimal: true
91 | },
92 |
93 | createdAt: {
94 | type: Date,
95 | optional: false,
96 | label: "Date created"
97 | }
98 | });
99 |
100 | Schemas.OrderLineSchema = new SimpleSchema({
101 |
102 | _id: {
103 | type: String,
104 | max: 100,
105 | optional: false
106 | },
107 |
108 | productId: {
109 | type: String,
110 | optional: true,
111 | regEx: SimpleSchema.RegEx.Id,
112 | label: "Product"
113 | },
114 |
115 | description: {
116 | type: String,
117 | optional: false,
118 | min: 1
119 | },
120 |
121 | quantity: {
122 | type: Number,
123 | optional: false
124 | },
125 |
126 | unitPrice: {
127 | type: Number,
128 | optional: false,
129 | decimal: true
130 | },
131 |
132 | lineValue: {
133 | type: Number,
134 | optional: true,
135 | decimal: true
136 | },
137 |
138 | createdAt: {
139 | type: Date,
140 | optional: false,
141 | label: "Date created"
142 | }
143 | });
144 |
145 | Schemas.OrderSchema = new SimpleSchema({
146 |
147 | customerId: {
148 | type: String,
149 | max: 100,
150 | regEx: SimpleSchema.RegEx.Id,
151 | label: "Customer",
152 | optional: true
153 | },
154 |
155 | customerName: {
156 | type: String,
157 | optional: true
158 | },
159 |
160 | deliveryDate: {
161 | type: Date,
162 | optional: true
163 | },
164 |
165 | notes: {
166 | type: String,
167 | optional: true
168 | },
169 |
170 | deliveryAddress1: {
171 | type: String,
172 | optional: false,
173 | min: 1
174 | },
175 |
176 | deliveryAddress2: {
177 | type: String,
178 | optional: true
179 | },
180 |
181 | deliveryAddress3: {
182 | type: String,
183 | optional: true
184 | },
185 |
186 | town: {
187 | type: String,
188 | optional: true
189 | },
190 |
191 | county: {
192 | type: String,
193 | optional: true
194 | },
195 |
196 | postcode: {
197 | type: String,
198 | optional: true,
199 | max: 10
200 | },
201 |
202 | totalValue: {
203 | type: Number,
204 | optional: true,
205 | decimal: true
206 | },
207 |
208 | createdAt: {
209 | type: Date,
210 | optional: false,
211 | label: "Date created"
212 | },
213 |
214 | orderLines: {
215 | type: [ Schemas.OrderLineSchema ],
216 | optional: true
217 | }
218 | });
219 |
220 | //export default Schemas;
--------------------------------------------------------------------------------
/imports/ui/redux/customer_actions.jsx:
--------------------------------------------------------------------------------
1 | // action creators are functions that take a param and return
2 | // an 'action' that is consumed by a reducer. This may seem like
3 | // unneeded boilerplate but it's **really** nice to have a file
4 | // with *all* possible ways to mutate the state of the app.
5 |
6 | import { trackCollection } from 'meteor/skinnygeek1010:flux-helpers';
7 | import Alert from 'react-s-alert';
8 |
9 | import { validateItemAndAddValidationResults } from '../../../lib/validation-helpers';
10 | import CustomerCompanies from '../../api/customers/customer-company';
11 | import { upsert, remove } from '../../api/customers/methods';
12 |
13 | //Redux
14 | Meteor.startup(function () { // work around files not being defined yet
15 | //console.log("Meteor.startup(function ()");
16 |
17 | if (Meteor.isClient) { // work around not having actions in /both folder
18 | //console.log("ActionCreators Meteor.startup isClient");
19 | // trigger action when this changes
20 | trackCollection(CustomerCompanies, customersCollectionChanged);
21 | }
22 | });
23 |
24 |
25 | // used when a mongo customers collection changes
26 | export function customersCollectionChanged(newDocs) {
27 | //console.log("Actions.customersCollectionChanged ", newDocs);
28 | return (dispatch, getState) => {
29 | dispatch({
30 | type: 'CUSTOMERS_COLLECTION_CHANGED',
31 | collection: newDocs
32 | });
33 | }
34 | };
35 |
36 |
37 | // doesn't return payload because our collection watcher
38 | // will send a CHANGED action and update the store
39 | export function saveCustomer(customer) {
40 | //console.log("saveCustomer: ", customer);
41 | return (dispatch, getState) => {
42 |
43 | // call the method for upserting the data
44 | upsert.call({
45 | customerId: customer._id,
46 | data: customer
47 | }, (err, res) => {
48 | if (err) {
49 | // TODO call FAILED action on error
50 | console.log("error saving customer", err.message);
51 | Alert.error("error saving customer " + err.message);
52 | } else {
53 | FlowRouter.go("/");
54 | Alert.success("Save successful");
55 | dispatch({
56 | type: 'SAVE_CUSTOMER'
57 | });
58 | }
59 | });
60 | }
61 | }
62 |
63 | function dispatchCustomerChange(customer, newValues) {
64 | //console.log("inner");
65 | return {
66 | type: 'EDIT_CUSTOMER',
67 | customer
68 | };
69 | }
70 |
71 | export function editCustomer(customer, newValues) {
72 | //console.log("Actions.editCustomer() event.target:" + newValues);
73 | return (dispatch, getState) => {
74 | const customer = _.clone(getState().userInterface.customerBeingEdited);
75 |
76 | // loop each change and apply to our clone
77 | for (let newValue of newValues) {
78 | customer[newValue.name] = newValue.value;
79 | }
80 |
81 | // validate and set error messages
82 | validateItemAndAddValidationResults(customer, Schemas.CustomerCompaniesSchema);
83 |
84 | dispatch({
85 | type: 'EDIT_CUSTOMER',
86 | customer
87 | });
88 | }
89 | }
90 |
91 | function loadCustomerToEdit(customerId) {
92 | //console.log("loadCustomerToEdit");
93 | const customer = CustomerCompanies.findOne({_id: customerId})
94 | //console.log("loadCustomerToEdit ", customer);
95 |
96 | // perform initial validation and set error messages
97 | validateItemAndAddValidationResults(customer, Schemas.CustomerCompaniesSchema);
98 |
99 | return {
100 | type: 'SELECT_CUSTOMER',
101 | customer
102 | };
103 | }
104 |
105 | export function selectCustomer(customerId) {
106 | //console.log("Actions.selectCustomer: " + customerId.toString());
107 | return (dispatch, getState) => {
108 | dispatch(loadCustomerToEdit(customerId));
109 | }
110 | };
111 |
112 | export function selectNewCustomer() {
113 | //console.log("Actions.selectNewCustomer ")
114 | return (dispatch, getState) => {
115 |
116 | const customer = {
117 | name: "",
118 | email: "",
119 | postcode: "",
120 | salesRegionId: "",
121 | nextContactDate: new Date(),
122 | createdAt: new Date(),
123 | errors: {}
124 | };
125 |
126 | dispatch({
127 | type: 'SELECT_CUSTOMER',
128 | customer
129 | });
130 | }
131 | };
132 |
133 |
--------------------------------------------------------------------------------
/imports/ui/sales/OrderLineEdit.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import accounting from 'accounting';
3 |
4 | import AsyncSelectInput from '../components/AsyncSelectInput.jsx';
5 | import NumberInput from '../components/NumberInput.jsx';
6 | import GridRow from '../components/grid/GridRow.jsx'
7 | import GridColumn from '../components/grid/GridColumn.jsx'
8 |
9 | import Products from '../../api/products/products';
10 |
11 |
12 | const OrderLineEdit = React.createClass({
13 | propTypes: {
14 | orderLine: React.PropTypes.object,
15 | onChange: React.PropTypes.func.isRequired,
16 | onProductChange: React.PropTypes.func.isRequired,
17 | deleteOrderLine: React.PropTypes.func,
18 | errors: React.PropTypes.object.isRequired
19 | },
20 |
21 | getInitialState() {
22 | //console.log("OrderLineEdit.getInitialState", this.props);
23 |
24 | return {
25 | errors: {},
26 | isValid: false
27 | };
28 | },
29 |
30 | handleChange(event) {
31 | const field = event.target.name;
32 | const value = event.target.value;
33 |
34 | this.props.onChange(this.props.orderLine._id, field, value);
35 | },
36 |
37 | handleProductChange(selectedItem) {
38 | this.props.onProductChange(this.props.orderLine._id, selectedItem);
39 | },
40 |
41 | deleteLine() {
42 | this.props.deleteOrderLine(this.props.orderLine._id);
43 | },
44 |
45 | getProducts: function getProducts(input) {
46 | //console.log("OrderHeaderEdit.getProducts()", input);
47 | const handle = Meteor.subscribe('Products.searchByName', input);
48 | return Products.find().fetch();
49 | },
50 |
51 | render() {
52 | //console.log("OrderLineEdit props: ", this.props);
53 |
54 | const value = {
55 | _id: this.props.orderLine.productId ? this.props.orderLine.productId : null,
56 | name: this.props.orderLine.description
57 | };
58 |
59 |
60 | let errors = {};
61 | if (this.props.errors) {
62 | errors = this.props.errors;
63 | }
64 |
65 | // only show the delete button if we are passed in a delete method
66 | let deleteButton;
67 | if (this.props.deleteOrderLine) {
68 | deleteButton =
69 |
;
76 | }
77 |
78 | return (
79 |
80 |
81 |
82 |
83 |
96 |
97 |
105 |
106 |
107 |
117 |
118 |
119 |
120 | {accounting.formatMoney(this.props.orderLine.unitPrice * this.props.orderLine.quantity, '£')}
121 |
122 |
123 |
124 |
125 | {deleteButton}
126 |
127 |
128 |
129 | );
130 | }
131 | });
132 |
133 | export default OrderLineEdit;
134 |
--------------------------------------------------------------------------------
/imports/startup/server/fixtures.js:
--------------------------------------------------------------------------------
1 | import Products from '../../api/products/products';
2 | import Orders from '../../api/orders/order';
3 | import CustomerCompanies from '../../api/customers/customer-company';
4 | import SalesRegions from '../../api/sales-regions/sales-region';
5 |
6 |
7 | // if the database is empty on server start, create some sample data.
8 | Meteor.startup(() => {
9 | //console.log("fixtures Meteor.startup");
10 |
11 | // Add default admin account
12 | if (Meteor.users.find().count() === 0) {
13 | Accounts.createUser({
14 | username: 'default@admin',
15 | email: 'default@admin.com',
16 | password: 'default@admin'
17 | });
18 | }
19 |
20 |
21 | CustomerCompanies._ensureIndex({"name":"text", "email":"text", "postcode":"text"});
22 | //In Meteor Mongo: Orders._dropIndexes();
23 | Orders._ensureIndex({"customerName":"text", "postcode":"text", "orderLines.description":"text"});
24 | //In Meteor Mongo: Orders.createIndex({customerName:"text", postcode:"text", "orderLines.description":"text"});
25 | Products._ensureIndex({"name":"text"});
26 |
27 |
28 | if (CustomerCompanies.find().count() === 0) {
29 | const data = [
30 | {
31 | name: "Smiths Fabrication Ltd",
32 | email: "info@smiths.com",
33 | postcode: "OX10 4RT"
34 | },
35 | {
36 | name: "Bob's Bricks",
37 | email: "sales@bobsbricks.co.uk",
38 | postcode: "BR1 3EY"
39 | },
40 | {
41 | name: 'Parkers & Co',
42 | email: "info@parkers.co",
43 | postcode: "W1 8QT"
44 | }
45 | ];
46 |
47 | let timestamp = (new Date()).getTime();
48 |
49 | data.forEach((customer) => {
50 | CustomerCompanies.insert({
51 | name: customer.name,
52 | email: customer.email,
53 | postcode: customer.postcode,
54 | createdAt: new Date(timestamp)
55 | });
56 |
57 | //console.log("added customer: ", customer);
58 | });
59 | }
60 |
61 |
62 | if (SalesRegions.find().count() === 0) {
63 | const data = [
64 | {
65 | name: "North West"
66 | },
67 | {
68 | name: "North East"
69 | },
70 | {
71 | name: "Scotland"
72 | },
73 | {
74 | name: "South East"
75 | },
76 | {
77 | name: "Wales"
78 | },
79 | {
80 | name: "Southern Ireland"
81 | },
82 | {
83 | name: "Nothern Ireland"
84 | },
85 | {
86 | name: "South West"
87 | },
88 | {
89 | name: 'London'
90 | }
91 | ];
92 |
93 | let timestamp = (new Date()).getTime();
94 |
95 | data.forEach((item) => {
96 | SalesRegions.insert({
97 | name: item.name,
98 | createdAt: new Date(timestamp)
99 | });
100 |
101 | //console.log("added customer: ", customer);
102 | });
103 | }
104 |
105 |
106 |
107 |
108 | if (Products.find().count() === 0) {
109 | const data = [
110 | {
111 | name: "Olive-spantles (jigged & onioned)",
112 | price: 35
113 | },
114 | {
115 | name: "Grommet",
116 | price: 12.60
117 | },
118 | {
119 | name: "Grollings",
120 | price: 35
121 | },
122 | {
123 | name: "Copper pipe",
124 | price: 18.35
125 | },
126 | {
127 | name: "Fleeling wire (coaxial)",
128 | price: 4.30
129 | },
130 | {
131 | name: "Gruddock paper",
132 | price: 1.95
133 | },
134 | {
135 | name: "Bevelled spill-trunion",
136 | price: 18.40
137 | },
138 | {
139 | name: "Satchel-arm",
140 | price: 35
141 | },
142 | {
143 | name: 'Clip-jawed double lock brace',
144 | price: 3.99
145 | }
146 | ];
147 |
148 | let timestamp = (new Date()).getTime();
149 |
150 | data.forEach((item) => {
151 | Products.insert({
152 | name: item.name,
153 | price: item.price,
154 | createdAt: new Date(timestamp)
155 | });
156 |
157 | //console.log("added customer: ", customer);
158 | });
159 | }
160 | });
161 |
--------------------------------------------------------------------------------
/client/css/react-selectCOPY.min.css:
--------------------------------------------------------------------------------
1 | .Select,.Select-control{position:relative}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f6f6f6}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-placeholder,.Select-value{left:0;position:absolute;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#08c #0099e6 #0099e6;box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 0 5px -1px rgba(0,136,204,.5)}.Select-placeholder{bottom:0;color:#aaa;line-height:34px;padding-left:10px;padding-right:10px;right:0}.has-value>.Select-control>.Select-placeholder{color:#333}.Select-value{color:#aaa;padding:8px 52px 8px 10px;right:-15px}.Select-arrow-zone,.Select-clear-zone,.Select-loading,.Select-loading-zone{position:relative;vertical-align:middle}.has-value>.Select-control>.Select-value{color:#333}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;height:34px;margin:0;outline:0;padding:0;-webkit-appearance:none}.is-focused .Select-input>input{cursor:text}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{cursor:pointer;display:table-cell;text-align:center;width:16px}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;cursor:pointer;display:table-cell;text-align:center;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{cursor:pointer;display:table-cell;text-align:center;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{box-sizing:border-box;color:#666;cursor:pointer;display:block;padding:8px 10px}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-focused{background-color:#f2f9fc;color:#333}.Select-option.is-disabled{color:#ccc;cursor:not-allowed}.Select-noresults,.Select-search-prompt,.Select-searching{box-sizing:border-box;color:#999;cursor:default;display:block;padding:8px 10px}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input,.Select-item{margin-left:5px}.Select-item{background-color:#f2f9fc;border-radius:2px;border:1px solid #c9e6f2;color:#08c;display:inline-block;font-size:.9em;margin-top:5px;vertical-align:top}.Select-item-icon,.Select-item-label{display:inline-block;vertical-align:middle}.Select-item-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select-item-label .Select-item-label__a{color:#08c;cursor:pointer}.Select-item-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c9e6f2;padding:1px 5px 3px}.Select-item-icon:focus,.Select-item-icon:hover{background-color:#ddeff7;color:#0077b3}.Select-item-icon:active{background-color:#c9e6f2}.Select--multi.is-disabled .Select-item{background-color:#f2f2f2;border:1px solid #d9d9d9;color:#888}.Select--multi.is-disabled .Select-item-icon{cursor:not-allowed;border-right:1px solid #d9d9d9}.Select--multi.is-disabled .Select-item-icon:active,.Select--multi.is-disabled .Select-item-icon:focus,.Select--multi.is-disabled .Select-item-icon:hover{background-color:#f2f2f2}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
--------------------------------------------------------------------------------
/imports/ui/redux/reducers.jsx:
--------------------------------------------------------------------------------
1 | // reducers allow you to 'slice' off a part of the single state object which
2 | // lets you think about the domain in a smaller picture. You could use one
3 | // reducer in a small app like this but in large apps this reducer could be
4 | // several hundred lines. See store.jsx to see how these reducers get 'combined'
5 | // into one single app state. We'll use two reducers, one for transient state
6 | // that the UI uses (selected id,name) and one for data (coming from Mongo)
7 |
8 | import { combineReducers } from 'redux';
9 |
10 | Reducers = {};
11 |
12 | let initialInterfaceState = {
13 | customerBeingEdited: {},
14 | orderList: {
15 | expanded: false
16 | },
17 | customerList: {
18 | expanded: false
19 | }
20 | };
21 |
22 | // helper to *copy* old state and merge new data with it
23 | function merge(oldState, newState) {
24 | return _.extend({}, oldState, newState);
25 | }
26 |
27 | // these reducers *must* be pure to use time-travel dev-tools
28 | // never directly mutate the `state` param, use merge instead
29 |
30 | const userInterface = function userInterface(state = initialInterfaceState, action) {
31 | //console.log("reducers.userInterface action:", {state, action});
32 |
33 | switch (action.type) {
34 | case 'SELECT_CUSTOMER':
35 | //console.log("userInterface SELECT_CUSTOMER, action:", action);
36 |
37 | return merge(state, {
38 | customerBeingEdited: action.customer
39 | });
40 | case 'EDIT_CUSTOMER':
41 | //console.log("userInterface EDIT_CUSTOMER, customer:", state.customerBeingEdited);
42 |
43 | // merge in our newly edited data
44 | return merge(state, { customerBeingEdited: action.customer });
45 | case 'TOGGLE_ORDER_LIST_EXPANDED':
46 | const orderList = _.clone(state.orderList);
47 | orderList.expanded = !orderList.expanded;
48 | return merge(state, { orderList });
49 | case 'TOGGLE_CUSTOMER_LIST_EXPANDED':
50 | const customerList = _.clone(state.customerList);
51 | customerList.expanded = !customerList.expanded;
52 | return merge(state, { customerList });
53 | default:
54 | return state;
55 | }
56 | };
57 |
58 |
59 | let initialOrderState = {
60 | order: { status: "initial state"}
61 | };
62 |
63 | const orderBeingEdited = function orderBeingEdited(state = initialOrderState, action) {
64 | //console.log("reducers.userInterface action:", {state, action});
65 |
66 | switch (action.type) {
67 | case 'SELECT_ORDER':
68 | //console.log("orderBeingEdited SELECT_ORDER, action:", action);
69 |
70 | return merge(state, {
71 | order: action.order
72 | });
73 | case 'EDIT_ORDER':
74 | //console.log("orderBeingEdited EDIT_ORDER, order:", action.order);
75 |
76 | // merge in our newly edited data
77 | return merge(state, { order: action.order });
78 | default:
79 | return state;
80 | }
81 | };
82 |
83 |
84 | // using the ES6 default params instead of the manual check like above
85 |
86 | const customer = function customer(state = {}, action) {
87 | //console.log("reducers.customer", {state, action});
88 |
89 | switch (action.type) {
90 | case 'SAVE_CUSTOMER':
91 | // normally in redux you would update and merge state here but
92 | // since have minimongo to do that for us we'll just wait for the
93 | // flux-helper to fire a COLLECTION_CHANGED dispatch after the
94 | // increment update. Since we're doing that we'll just return the old
95 | // state to prevent the UI from re-rendering twice.
96 | return state;
97 | case 'CUSTOMERS_COLLECTION_CHANGED':
98 | //console.log("reducers.customer CUSTOMERS_COLLECTION_CHANGED", {state, action});
99 |
100 | // we don't have to merge the single doc that changes since minimongo
101 | // keeps the entire cache for us. We'll just return the new minimongo state
102 | // We *could* also return another fetch if sorting wasn't so easy here
103 | //let docs = _.clone(action.collection); // clone to prevent mutating action!!
104 | //return docs[0]; //.sort((a,b) => b.score - a.score);
105 | //return _.clone(action.collection);
106 | return state;
107 | default:
108 | return state;
109 | }
110 | };
111 |
112 |
113 | const order = function order(state = {}, action) {
114 | //console.log("reducers.order", {state, action});
115 |
116 | switch (action.type) {
117 | case 'SAVE_ORDER':
118 | return state;
119 | case 'ORDERS_COLLECTION_CHANGED':
120 | //console.log("reducers.order ORDERS_COLLECTION_CHANGED", {state, action});
121 | return state;
122 | default:
123 | return state;
124 | }
125 | };
126 |
127 |
128 | const rootReducer = combineReducers({
129 | userInterface,
130 | customer,
131 | order,
132 | orderBeingEdited
133 | });
134 |
135 | export default rootReducer;
136 |
--------------------------------------------------------------------------------
/imports/ui/app/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
3 | import { Provider } from 'react-redux';
4 | import Alert from 'react-s-alert';
5 |
6 | //import debugOnly from 'meteor/msavin:debugonly'; // not working on web deploy yet by the looks of things
7 |
8 | import DevTools from '../redux/DevTools.jsx';
9 | import GlobalSearch from '../search/GlobalSearch.jsx';
10 |
11 | import store from '../redux/store.jsx';
12 |
13 | import AccountsButton from '../security/accounts-button.jsx';
14 |
15 |
16 | Meteor.subscribe("SalesRegions.All");
17 | Meteor.subscribe("Orders.All");
18 |
19 |
20 | const ContentContainer = React.createClass({
21 | render() {
22 | //console.log("ContentContainer.render()", this.props.children);
23 |
24 | return (
25 |
26 |
32 | {React.cloneElement(this.props.children, {
33 | key: this.props.children.key
34 | })}
35 |
36 |
37 | );
38 | }
39 |
40 | });
41 |
42 | function renderDevTools() {
43 | //if (debugOnly) {
44 | return
;
45 | //}
46 | }
47 |
48 | export const Layout = ({content}) => (
49 |
50 |
51 |
52 |
53 |
54 | {/* Navigation */}
55 |
56 | {/* Nav Header */}
57 |
58 |
60 | Toggle navigation
61 |
65 |
simple crm
66 |
67 |
90 |
91 |
106 |
107 | {/* /.sidebar-collapse */}
108 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | {content}
119 |
120 |
121 |
122 | {/* /#page-wrapper */}
123 |
124 |
130 | { renderDevTools() }
131 |
133 | );
--------------------------------------------------------------------------------
/imports/startup/client/routes.jsx:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | * General note on passing data to templates: Do not subscribe to
4 | * data in the routes, this is an anti-pattern,
5 | * https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management
6 | * */
7 |
8 | import React from 'react';
9 | import ReactDOM from 'react-dom';
10 | import { mount } from 'react-mounter';
11 |
12 | import { Layout } from './../../ui/app/Layout.jsx';
13 | import Dashboard from '../../ui/dashboard/Dashboard.jsx';
14 | import AppNotFound from './../../ui/app/app-not-found.jsx';
15 | import ProductsListWrapper from './../../ui/products/products-list-wrapper.jsx';
16 | import Test1 from './../../ui/app/test1.jsx';
17 | import Test2 from './../../ui/app/test2.jsx';
18 | import CustomerContainer from './../../ui/customers/CustomerContainer.jsx';
19 | import AllCustomersContainer from './../../ui/customers/AllCustomersContainer.jsx';
20 | import OrderContainer from './../../ui/sales/OrderContainer.jsx';
21 | import AllOrdersContainer from './../../ui/sales/AllOrdersContainer.jsx';
22 | import Login from './../../ui/security/login.jsx';
23 | import Register from './../../ui/security/register.jsx';
24 |
25 | import store from './../../ui/redux/store.jsx';
26 |
27 |
28 | // Redirect unauthed users to login page
29 | const authenticatedRedirect = () => {
30 | if (!Meteor.loggingIn() && !Meteor.userId()) {
31 | FlowRouter.go( 'Login' );
32 | }
33 | };
34 |
35 | // Set group using previous re-direct
36 | const authenticatedRoutes = FlowRouter.group({
37 | name: 'authenticated',
38 | triggersEnter: [ authenticatedRedirect ]
39 | });
40 |
41 | // Public Login page
42 | FlowRouter.route("/login", {
43 | name: "Login",
44 | action() {
45 | //console.log("route ", this.name);
46 | mount(Login);
47 | }
48 | });
49 |
50 | authenticatedRoutes.route("/register", {
51 | name: "Register",
52 | action() {
53 | //console.log("route ", this.name);
54 | mount(Layout, {
55 | content: (
)
56 | });
57 |
58 | }
59 | });
60 |
61 |
62 | authenticatedRoutes.route("/", {
63 | name: "Home",
64 | action() {
65 | //console.log("route ", this.name);
66 | mount(Layout, {
67 | content: (
)
68 | });
69 | }
70 | });
71 |
72 | authenticatedRoutes.route('/customers/:_id', {
73 | name: 'CustomerCompany.edit',
74 | action() {
75 | //console.log("route ", this.name);
76 | mount(Layout, {
77 | content: (
)
78 | });
79 | }
80 | });
81 |
82 | authenticatedRoutes.route("/addCustomer", {
83 | name: "addCustomer",
84 | action() {
85 | //console.log("route ", this.name);
86 | mount(Layout, {
87 | content: ()
88 | });
89 | }
90 | });
91 |
92 | authenticatedRoutes.route("/allCustomers", {
93 | name: "allCustomers",
94 | action() {
95 | //console.log("route ", this.name);
96 | mount(Layout, {
97 | content: ()
98 | });
99 | }
100 | });
101 |
102 | authenticatedRoutes.route('/products/', {
103 | name: 'productsList',
104 | action() {
105 | //console.log("route ", this.name);
106 | mount(Layout, {
107 | content: ()
128 | });
129 | }
130 | });
131 |
132 | authenticatedRoutes.route("/addOrder", {
133 | name: "addOrder",
134 | action() {
135 | //console.log("route ", this.name);
136 | mount(Layout, {
137 | content: ()
138 | });
139 | }
140 | });
141 |
142 | authenticatedRoutes.route("/allOrders", {
143 | name: "allOrders",
144 | action() {
145 | //console.log("route ", this.name);
146 | mount(Layout, {
147 | content: ()
148 | });
149 | }
150 | });
151 |
152 | authenticatedRoutes.route("/test1", {
153 | name: "test1",
154 | action() {
155 | //console.log("route ", this.name);
156 | mount(Layout, {
157 | content: (
68 |
85 |
86 |
87 |
88 |
91 |
92 |
95 |
96 |
98 |
99 |
101 |
102 |
104 |
105 |
107 |
108 |
109 |
110 | Total value:
111 | {accounting.formatMoney(this.props.order.totalValue, "£")}
112 |
113 |
114 |
115 |
Cancel
116 |
117 |
119 |
120 |
{this.props.label ? this.props.label : humanize(this.props.name)}
64 | );
65 | }
66 | },
67 |
68 | render() {
69 | //console.log("AsyncSelectInput.render() - value=", this.props.value)
70 |
71 | // This is for bootstrap, we want to wrap our label and textbox in a 'form-group'
72 | // class, and also to add 'has-error' (which gives us a red outline) if the data is in error
73 | var wrapperClass = 'form-group';
74 | if (this.props.error && this.props.error.length > 0) {
75 | wrapperClass += " " + 'has-error';
76 | }
77 |
78 | const humanizedName = humanize(this.props.name);
79 |
80 | return (
81 |
82 | {this.renderLabel()}
83 |
84 |
99 |
100 | {this.props.error}
101 |
102 |
103 |
78 |
79 |
80 |
89 |
90 |
99 |
100 |
110 |
111 | Update Item
112 |
113 |
114 | ;
115 | } else {
116 | return
118 |
119 |
120 | { item.name}
121 |
122 |
123 | { accounting.formatMoney(item.price, "£") }
124 |
125 |
126 | { item.createdAt.toLocaleDateString() }
127 |
128 |
129 | Edit Item
130 |
131 |
132 | ;
133 | }
134 | },
135 |
136 | render() {
137 | //console.log("render()", this.props);
138 |
139 | return (
140 |
141 |
142 |
143 |
144 |
145 |
146 | Name
147 |
148 |
149 | Price
150 |
151 |
152 | Created
153 |
154 |
155 |
156 |
157 |
158 | {this.props.items.map((item) => {
159 | return this.renderItemOrEditField(item);
160 | })}
161 |
162 |
{option.name} ;
122 | } else if (option.isCustomer) {
123 | return https://github.com/tomRedox/simpleCRM/tree/master/imports/ui and the API is here https://github.com/tomRedox/simpleCRM/tree/master/imports/api
39 |
40 | ## Technology
41 | This version of Simple CRM uses the following stack/technologies:
42 |
43 | - Meteor 1.3
44 | - MongoDB
45 | - React for the view layer
46 | - Redux for the application state
47 |
48 | ## Installation
49 | The instructions below assume you've already installed Meteor on your machine.
50 |
51 | 1. Clone this repository to your machine: `git clone https://github.com/tomRedox/simpleCRM.git`
52 | 2. Change to the project's directory: `cd simpleCRM`
53 | 3. Install the version of Meteor used by this project: `meteor update --release 1.3-beta.12` (you can have multiple versions of Meteor installed on a machine, so this shouldn't upset any other projects. Meteor stores which version to user for a particular project in the .meteor/release file)
54 | 4. Install the npm modules used by the project: `npm install`
55 |
56 | Then run the project with `meteor`. The login credentials are: email: default@admin.com password: default@admin.
57 |
58 | ## Meteor
59 | The app is running on Meteor 1.3 Beta 12 and will not work with Meteor 1.2.
60 |
61 | I've tried to adopt the standards laid down in the Meteor guide, especially:
62 |
63 | - Application structure that uses main.js entry points and puts the rest of the code in imports directories (ES2015)
64 | - Container pattern
65 | - Template level data subscriptions
66 | - Use of MDG validated methods
67 | - No AutoPublish or Insecure
68 |
69 | ## React/Redux
70 | The view layer is built in React, with each component in its own file. I've tried to follow React best practice, although defining exactly what constitutes best practice at present is difficult as React and Redux are still changing so often.
71 |
72 | I've used Redux for managing the application state. However, I do not put the stored data in the state, I leave MiniMongo out of Redux altogether. I do copy data into the state while it's being edited however, I do this to make the record being edited non-reactive during the edit (I don't want the data the user sees to change while they are editing it) and in order to allow real-time data validation.
73 |
74 | There is also a ["no-redux" branch](https://github.com/tomRedox/simpleCRM/tree/no-redux) that features the older working version of the system before I switched over to Redux. That may be interesting to those wishing to see what an app looks like with and without Redux. I won't be maintaining the no-redux branch, it's just for info.
75 |
76 | ## UI Design
77 | At the moment I've done the basics to get things up and running, but little in the way of design work has gone into the project so far.
78 |
79 | The design consists of:
80 |
81 | - Material design-esque theme from Bootswatch
82 | - Parts of the SB Admin 2 Bootstrap theme
83 |
84 | I have also experimented with the excellent [Material-UI React component library](http://www.material-ui.com/#/) and I may adopt that at some point. There is a separate branch for that work
85 |
86 | ## Security
87 |
88 | The app now has security based on Meteor's in-built security API. The login credentials are:
89 | email: default@admin.com
90 | password: default@admin
91 |
92 | ## Testing
93 | There are a couple of unit tests for the business logic in the lib folder. The testing has been built using the instructions in the [draft Testing chapter of the Meteor Guide](https://github.com/meteor/guide/blob/testing-modules-content/content/testing.md).
94 |
95 | To run the tests open up a second command window and type:
96 | `meteor test --driver-package avital:mocha --port 3100`
97 | This starts the test runner which will automatically rerun the tests as required.
98 |
99 | You can then view the test results at [http://localhost:3100/](http://localhost:3100/).
100 |
101 | ## Todo
102 | I need to feed the changes from our production dev back into this project, namely:
103 | - [ ] ES6 syntax
104 | - [ ] Functional stateless components
105 | - [ ] Meteor 1.3 final
106 | - [ ] Updates to the testing frameworks
107 |
108 | Other broad areas still to be looked at in the project are:
109 |
110 | - [ ] IsDirty checking to warn before navigation when changes have been made
111 | - [x] Unit tests
112 | - [ ] End-to-end/integration test
113 | - [ ] Add [Airbnb's linting](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)
114 | - [ ] Security - only return and write data for logged in users
115 | - [ ] Security - add Admin role, only Admin to be able edit the Products list
116 | - [ ] Charts
117 | - [ ] Paper reporting
118 | - [ ] Excel export
119 | - [ ] Improve/fix the transition animations
120 | - [ ] Customer deletion
121 | - [ ] Customer search page - allow search on address, name and postcode
122 | - [ ] Pagination on All Customers and All Orders pages
123 | - [ ] Sorting options on lists
124 |
125 | ## Learning resources used in this solution
126 | I am hugely grateful to the Meteor community and the members of the SpaceDojo/Meteor Club Slack channel for all their help getting up to speed on everything.
127 |
128 | These are some of the many resources that have really helped me:
129 |
130 | ### General Meteor stuff
131 | - [Meteor Guide](http://guide.meteor.com/)
132 | - [Meteor Guide 1.3 (draft)](http://guide.meteor.com/v1.3)
133 | - [Meteor Forums](https://forums.meteor.com/)
134 | - [Rob Conery's Building a Realtime Web Application with Meteor.js Pluralsight course](https://app.pluralsight.com/library/courses/meteorjs-web-application/table-of-contents)
135 | - [SpaceDojo](http://spacedojo.com/) and the [SpaceDojo community](https://www.patreon.com/meteorclub?ty=c)
136 | - [Meteor Chef](https://themeteorchef.com/)
137 | - [Meteor Chef - Click to edit fields in react](https://themeteorchef.com/snippets/click-to-edit-fields-in-react/)
138 | - [Stack Overflow](http://stackoverflow.com/)
139 |
140 | ### React (non Meteor specific)
141 | - [Cory House's Building Applications with React and Flux Pluralsight course](https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents)
142 | - [Official React documentation](https://facebook.github.io/react/docs/getting-started.html)
143 | - [Official Redux documentation](http://redux.js.org/docs)
144 |
145 | ### React in Meteor
146 | - [The official guidance from the draft Meteor Guide for Meteor 1.3](http://guide.meteor.com/v1.3/react.html)
147 | - [The official React example app, main React branch](https://github.com/meteor/todos/tree/react)
148 | - [The official React example app, React with Tests branch](https://github.com/meteor/todos/tree/react-testing)
149 | - [Discussion of the Container pattern and how to stop React components rendering before the data is available](https://thoughts.spacedojo.com/meteor-1-3-and-react-composition-with-reactive-data-b0bb3282fea#.a5yqn4j83)
150 |
151 | ### Redux in Meteor - the path to enlightenment
152 | If you don't know Redux yet, then learn:
153 | - [Learn it from the master, Dan Abromov's EggHeads Redux video series](https://egghead.io/series/getting-started-with-redux)
154 |
155 | Start with this series:
156 | - [Abhi Aiyer's How we Redux series - Part 1](https://medium.com/modern-user-interfaces/how-we-redux-part-1-introduction-18a24c3b7efe#.4xzqhtyea)
157 | - [Abhi Aiyer's How we Redux series - Part 2](https://medium.com/modern-user-interfaces/how-we-redux-part-2-setup-c6aa726fa79e#.kpun54ox5)
158 | - [Abhi Aiyer's How we Redux series - Part 3](https://medium.com/modern-user-interfaces/how-we-redux-part-3-domain-890964824fec#.ujuwer38a)
159 | - [Abhi Aiyer's How we Redux series - Part 4](https://medium.com/modern-user-interfaces/how-we-redux-part-4-reducers-and-stores-f4a0ebcdc22a#.frb4di9zz)
160 | - [Abhi Aiyer's How we Redux series - Part 5](https://medium.com/modern-user-interfaces/how-we-redux-part-5-components-bddd737022e1#.1w2j8scwd)
161 | - [How we Redux example app repo](https://github.com/abhiaiyer91/How-We-Redux-Todos)
162 |
163 | But also open up this example and have it to refer to too:
164 | - [ffxSam's ffx-meteor-react-boilerplate - great thunk examples](https://github.com/ffxsam/ffx-meteor-react-boilerplate/blob/example/client/actions/colors.js)
165 |
166 | And also this is really useful:
167 | - [AdamBrodzinski's meteor-flux-helpers](https://github.com/AdamBrodzinski/meteor-flux-helpers/blob/master/flux-helpers.js)
168 | - [Discussion of meteor-flux-helpers](https://forums.meteor.com/t/flux-helpers-package/7814/5)
169 | - [Redux version of meteor-flux-helpers example app](https://github.com/AdamBrodzinski/meteor-flux-leaderboard/tree/redux)
170 |
171 | Other useful bits:
172 | - [Redux approach in Meteor discussion](https://forums.meteor.com/t/redux-approach-on-meteor/8441/17)
173 |
174 | ## About Redox Software Ltd
175 | We write bespoke line of business software for small and medium size businesses.
176 |
177 | Read all about us at [http://www.redox-software.co.uk/](http://www.redox-software.co.uk/).
178 |
179 |
--------------------------------------------------------------------------------