When I try to edit the collection, I found the “Mod on _id not allowed” error.
Anyway, it successfully save to the collection.
Please help me to solve this problem.
Code is below:
EditCustomer.js
import React from 'react';
import PropTypes from 'prop-types'
import { createContainer } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor';
import { Customers } from '../../api/customers';
import CustomerEditor from '../../components/CustomerEditor';
const EditCustomer = ({ cust, history }) => (cust ? (
<div className="EditCustomer">
<h4 className="page-header">{`Editing "${cust.custId}"`}</h4>
<CustomerEditor cust={cust} history={history} />
</div>
) : <NotFound />);
EditCustomer.propTypes = {
cust: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
export default createContainer(({ match }) => {
const customerId = match.params._id;
const subscription = Meteor.subscribe('customers.view', customerId);
return {
cust: Customers.findOne(customerId),
};
}, EditCustomer);
CustomerEditor.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import validate from '../modules/validate';
class CustomerEditor extends Component {
componentDidMount() {
const component = this;
validate(component.form, {
rules: {
custId: {
required: true,
},
firstname: {
required: true,
},
lastname: {
required: false,
},
phoneno: {
required: false,
},
email: {
required: false,
},
address: {
required: false,
},
remark: {
required: false,
},
},
messages: {
custId: {
required: 'Need a customer ID in here',
},
firstname: {
required: 'Need a First Name',
},
},
submitHandler() { component.handleSubmit(); },
});
}
handleSubmit() {
const { history } = this.props;
const existingCustomer = this.props.cust && this.props.cust._id;
const methodToCall = existingCustomer ? 'customers.update' : 'customers.insert';
const cust = {
custId: this.custId.value.trim(),
firstname: this.firstname.value.trim(),
lastname: this.lastname.value.trim(),
phoneno: this.phoneno.value.trim(),
email: this.email.value.trim(),
address: this.address.value.trim(),
remark: this.remark.value.trim(),
};
if (existingCustomer) cust._id = existingCustomer;
Meteor.call(methodToCall, cust, (error, customerId) => {
if (error) {
console.log('danger');
} else {
const confirmation = existingCustomer ? 'customer updated!' : 'Customer added!';
this.form.reset();
console.log('success');
history.push(`/customers/${customerId}`);
}
});
}
render() {
const { cust } = this.props;
return (
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
<FormGroup>
<ControlLabel>Customer ID</ControlLabel>
<input
type="text"
className="form-control"
name="custId"
ref={custId => (this.custId = custId)}
defaultValue={cust && cust.custId}
/>
</FormGroup>
<FormGroup>
<ControlLabel>First Name</ControlLabel>
<input
type="text"
className="form-control"
name="firstname"
ref={firstname => (this.firstname = firstname)}
defaultValue={cust && cust.firstname}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Last Name</ControlLabel>
<input
type="text"
className="form-control"
name="lastname"
ref={lastname => (this.lastname = lastname)}
defaultValue={cust && cust.lastname}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Phone Number</ControlLabel>
<input
type="text"
className="form-control"
name="phoneno"
ref={phoneno => (this.phoneno = phoneno)}
defaultValue={cust && cust.phoneno}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Email</ControlLabel>
<input
type="text"
className="form-control"
name="email"
ref={email => (this.email = email)}
defaultValue={cust && cust.email}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Address</ControlLabel>
<input
type="text"
className="form-control"
name="address"
ref={address => (this.address = address)}
defaultValue={cust && cust.address}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Remark</ControlLabel>
<input
type="text"
className="form-control"
name="remark"
ref={remark => (this.remark = remark)}
defaultValue={cust && cust.remark}
/>
</FormGroup>
<Button type="submit" bsStyle="success">
{cust && cust._id ? 'Save Changes' : 'Add Customer'}
</Button>
</form>);
}
}
CustomerEditor.defaultProps = {
cust: { custId: '', firtname: '' },
};
CustomerEditor.propTypes = {
cust: PropTypes.object,
history: PropTypes.object.isRequired,
};
export default CustomerEditor;
api/customer.js
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';
export const Customers = new Mongo.Collection('customers');
Meteor.methods({
'customers.insert': function customersInsert(cust) {
check(cust, {
custId: String,
firstname: String,
lastname: String,
phoneno: String,
email: String,
address: String,
remark: String,
});
try {
return Customers.insert({ owner: this.userId, ...cust });
} catch (exception) {
throw new Meteor.Error('500', exception);
}
},
'customers.update': function customersUpdate(cust) {
check(cust, {
_id: String,
custId: String,
firstname: String,
lastname: String,
phoneno: String,
email: String,
address: String,
remark: String,
});
try {
const customerId = cust._id;
Customers.update(customerId, { $set: cust });
return customerId;
} catch (exception) {
throw new Meteor.Error('500', exception);
}
},
'customers.remove': function customerRemove(customerId) {
check(customerId, String);
try {
return Customers.remove(customerId);
} catch (exception) {
throw new Meteor.Error('500', exception);
}
},
});