-
diff --git a/imports/plugins/included/product-variant/client/templates/products/productDetail/variants/variantForm/childVariant.js b/imports/plugins/included/product-variant/client/templates/products/productDetail/variants/variantForm/childVariant.js
index 3fbfcb2973b..2ff2057a36c 100644
--- a/imports/plugins/included/product-variant/client/templates/products/productDetail/variants/variantForm/childVariant.js
+++ b/imports/plugins/included/product-variant/client/templates/products/productDetail/variants/variantForm/childVariant.js
@@ -1,19 +1,37 @@
import { $ } from "meteor/jquery";
import { Template } from "meteor/templating";
import { Meteor } from "meteor/meteor";
+import { ReactiveDict } from "meteor/reactive-dict";
import { Reaction, i18next } from "/client/api";
import { ReactionProduct } from "/lib/api";
import { Media } from "/lib/collections";
import { Icon } from "/imports/plugins/core/ui/client/components";
+import { Validation } from "@reactioncommerce/reaction-collections";
+import { ProductVariant } from "/lib/collections/schemas/products";
function productHandle() {
const selectedProduct = ReactionProduct.selectedProduct();
return selectedProduct.__published && selectedProduct.__published.handle || selectedProduct.handle;
}
+
+Template.childVariantForm.onCreated(function () {
+ this.validation = new Validation(ProductVariant);
+ this.state = new ReactiveDict();
+ this.state.setDefault({
+ validationStatus: {}
+ });
+});
+
+
/**
* childVariantForm onRendered
*/
-Template.onRendered(function () {
+Template.childVariantForm.onRendered(function () {
+ const validationStatus = this.validation.validate(this.data);
+
+ this.state.set("validationStatus", validationStatus);
+ this.state.set("variant", this.data);
+
this.autorun(() => {
const selectedVariantId = Reaction.Router.getParam("variantId");
@@ -88,6 +106,26 @@ Template.childVariantForm.helpers({
}
return "panel-default";
+ },
+ hasValidationMessage(fieldName) {
+ const instance = Template.instance();
+ const validationStatus = instance.state.get("validationStatus");
+
+ if (validationStatus && validationStatus.messages && validationStatus.messages[fieldName]) {
+ return validationStatus.messages[fieldName];
+ }
+
+ return false;
+ },
+ hasErrorClassName(fieldName) {
+ const instance = Template.instance();
+ const validationStatus = instance.state.get("validationStatus");
+
+ if (validationStatus && validationStatus.messages && validationStatus.messages[fieldName]) {
+ return "has-error";
+ }
+
+ return false;
}
});
@@ -111,12 +149,25 @@ Template.childVariantForm.events({
const value = Template.instance().$(event.currentTarget).val();
const field = Template.instance().$(event.currentTarget).attr("name");
- Meteor.call("products/updateProductField", variant._id, field, value,
- error => {
- if (error) {
- Alerts.toast(error.message, "error");
- }
- });
+ const variantToValidate = template.state.get("variant") || variant;
+ const updated = {
+ ...variantToValidate,
+ [field]: value
+ };
+ const validationStatus = template.validation.validate(updated);
+
+ template.state.set("validationStatus", validationStatus);
+ template.state.set("variant", updated);
+
+ if (validationStatus.isValid === true) {
+ Meteor.call("products/updateProductField", variant._id, field, value,
+ error => {
+ if (error) {
+ Alerts.toast(error.message, "error");
+ }
+ });
+ }
+
return ReactionProduct.setCurrentVariant(variant._id);
},
"click .js-child-variant-heading": function (event, instance) {
diff --git a/imports/plugins/included/product-variant/client/templates/products/productGrid/controls.html b/imports/plugins/included/product-variant/client/templates/products/productGrid/controls.html
deleted file mode 100644
index 5b8635fa673..00000000000
--- a/imports/plugins/included/product-variant/client/templates/products/productGrid/controls.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
- {{#if hasControl }}
-
-
-
- {{#if product.isDeleted}}
-
- Archived
-
- {{/if}}
-
- {{#if hasChanges}}
-
{{> React VisibilityButton}}
- {{/if}}
-
-
diff --git a/imports/plugins/included/product-variant/client/templates/products/productGrid/controls.js b/imports/plugins/included/product-variant/client/templates/products/productGrid/controls.js
deleted file mode 100644
index 5fa3f16ce46..00000000000
--- a/imports/plugins/included/product-variant/client/templates/products/productGrid/controls.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import _ from "lodash";
-import { Session } from "meteor/session";
-import { Template } from "meteor/templating";
-import { ReactiveDict } from "meteor/reactive-dict";
-import { Reaction } from "/lib/api";
-import { IconButton } from "/imports/plugins/core/ui/client/components";
-
-Template.gridControls.onCreated(function () {
- this.state = new ReactiveDict();
-
- this.autorun(() => {
- if (this.data.product) {
- const selectedProducts = Session.get("productGrid/selectedProducts");
- const isSelected = _.isArray(selectedProducts) ? selectedProducts.indexOf(this.data.product._id) >= 0 : false;
-
- this.state.set("isSelected", isSelected);
- }
- });
-});
-
-Template.gridControls.onRendered(function () {
- return this.$("[data-toggle='tooltip']").tooltip({
- position: "top"
- });
-});
-
-
-Template.gridControls.helpers({
- checked: function () {
- return Template.instance().state.equals("isSelected", true);
- },
-
- isVisible() {
- const currentData = Template.currentData();
- return currentData && currentData.product && currentData.product.isVisible;
- },
-
- hasControl() {
- if (Reaction.hasOwnerAccess()) {
- return true;
- }
-
- const instance = Template.instance();
- const shopId = Reaction.getShopId();
-
- return (
- Reaction.hasPermission("createProduct") &&
- // does product belong to this shop seller
- shopId === instance.data.product.shopId
- );
- },
-
- hasChanges() {
- const { product } = Template.currentData();
- if (product.__draft) {
- return true;
- }
-
- return false;
- },
-
- VisibilityButton() {
- return {
- component: IconButton,
- icon: "",
- onIcon: "",
- status: "info"
- };
- }
-});
diff --git a/imports/plugins/included/product-variant/components/products.js b/imports/plugins/included/product-variant/components/products.js
index 8ebfdbe9dca..dc12d8b722d 100644
--- a/imports/plugins/included/product-variant/components/products.js
+++ b/imports/plugins/included/product-variant/components/products.js
@@ -69,7 +69,7 @@ class ProductsComponent extends Component {
render() {
if (this.props.ready()) {
return (
-
+
{this.renderProductGrid()}
{this.renderLoadMoreProductsButton()}
{this.renderSpinner()}
diff --git a/imports/plugins/included/product-variant/components/variantForm.js b/imports/plugins/included/product-variant/components/variantForm.js
index 3bff0a07544..09d01c36baf 100644
--- a/imports/plugins/included/product-variant/components/variantForm.js
+++ b/imports/plugins/included/product-variant/components/variantForm.js
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
import { isEqual } from "lodash";
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui";
-import update from "react/lib/update";
import { formatPriceString } from "/client/api";
import {
Button,
@@ -55,7 +54,7 @@ class VariantForm extends Component {
super(props);
this.state = {
- expandedCard: this.fieldGroupForFieldName(props.editFocus),
+ expandedCard: "variantDetails",
variant: props.variant,
inventoryPolicy: props.variant.inventoryPolicy,
taxable: props.variant.taxable,
@@ -74,10 +73,11 @@ class VariantForm extends Component {
}
}
}
- const cardGroupName = this.fieldGroupForFieldName(nextProps.editFocus);
this.setState({
- expandedCard: cardGroupName,
+ inventoryManagement: nextProps.variant.inventoryManagement,
+ inventoryPolicy: nextProps.variant.inventoryPolicy,
+ taxable: nextProps.variant.taxable,
variant: nextProps.variant
});
}
@@ -110,9 +110,11 @@ class VariantForm extends Component {
if (fieldRef) {
const input = fieldRef.refs.input;
+ const isFieldValid = this.props.validation.isFieldValid(fieldName);
+ const flashColor = isFieldValid ? "#f0fff4" : "#ffeeef";
Velocity.RunSequence([
- { e: input, p: { backgroundColor: "#e2f2e2" }, o: { duration: 200 } },
+ { e: input, p: { backgroundColor: flashColor }, o: { duration: 200 } },
{ e: input, p: { backgroundColor: "#fff" }, o: { duration: 100 } }
]);
}
@@ -123,51 +125,52 @@ class VariantForm extends Component {
}
handleFieldChange = (event, value, field) => {
- const newState = update(this.state, {
+ this.setState(({ variant }) => ({
variant: {
- $merge: {
- [field]: value
- }
+ ...variant,
+ [field]: value
}
- });
-
- this.setState(newState);
+ }));
}
handleFieldBlur = (event, value, field) => {
if (this.props.onVariantFieldSave) {
- this.props.onVariantFieldSave(this.variant._id, field, value);
+ this.props.onVariantFieldSave(this.variant._id, field, value, this.state.variant);
}
}
handleSelectChange = (value, field) => {
- this.handleFieldChange(event, value, field);
-
- if (this.props.onVariantFieldSave) {
- this.props.onVariantFieldSave(this.variant._id, field, value);
- }
+ this.setState(({ variant }) => ({
+ variant: {
+ ...variant,
+ [field]: value
+ }
+ }), () => {
+ if (this.props.onVariantFieldSave) {
+ this.props.onVariantFieldSave(this.variant._id, field, value, this.state.variant);
+ }
+ });
}
handleCheckboxChange = (event, value, field) => {
- this.setState({
- [field]: value
- });
+ this.setState(({ variant }) => ({
+ variant: {
+ ...variant,
+ [field]: value
+ }
+ }));
this.handleFieldBlur(event, value, field);
}
- handleCardExpand(cardName) {
- if (this.props.onCardExpand) {
- this.props.onCardExpand(cardName);
+ handleCardExpand = (event, card, cardName, isExpanded) => {
+ if (typeof this.props.onCardExpand === "function") {
+ this.props.onCardExpand(isExpanded ? cardName : undefined);
}
}
- isExpanded(groupName) {
- if (this.state.expandedCard && this.state.expandedCard === groupName) {
- return true;
- }
-
- return false;
+ isExpanded = (groupName) => {
+ return this.state.expandedCard === groupName;
}
renderTaxCodeField() {
@@ -198,6 +201,7 @@ class VariantForm extends Component {
onBlur={this.handleFieldBlur}
onChange={this.handleFieldChange}
onReturnKeyDown={this.handleFieldBlur}
+ validation={this.props.validation}
/>
);
}
@@ -253,6 +257,7 @@ class VariantForm extends Component {
);
}
+
return (
);
@@ -275,8 +281,10 @@ class VariantForm extends Component {
return (
@@ -345,6 +355,7 @@ class VariantForm extends Component {
onBlur={this.handleFieldBlur}
onChange={this.handleFieldChange}
onReturnKeyDown={this.handleFieldBlur}
+ validation={this.props.validation}
/>
@@ -362,6 +373,7 @@ class VariantForm extends Component {
onBlur={this.handleFieldBlur}
onChange={this.handleFieldChange}
onReturnKeyDown={this.handleFieldBlur}
+ validation={this.props.validation}
/>