upload

Author: webdevstar

src/admin/client/modules/apps/filter/components/fields.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import messages from 'lib/text';
+import style from './style.css';
+
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+import Toggle from 'material-ui/Toggle';
+
+export default ({
+	active,
+	discontinued,
+	on_sale,
+	stock_status,
+	setActive,
+	setDiscontinued,
+	setOnSale,
+	setStock
+}) => {
+	return (
+		<div className={style.filter}>
+			<Toggle
+				label={messages.products_onlyEnabled}
+				onToggle={(e, value) => {
+					setActive(value);
+				}}
+				toggled={active}
+				className={style.toggle}
+			/>
+			<Toggle
+				label={messages.products_onlyDiscontinued}
+				onToggle={(e, value) => {
+					setDiscontinued(value);
+				}}
+				toggled={discontinued}
+				className={style.toggle}
+			/>
+			<Toggle
+				label={messages.products_onlyOnSale}
+				onToggle={(e, value) => {
+					setOnSale(value);
+				}}
+				toggled={on_sale}
+				className={style.toggle}
+			/>
+			<SelectField
+				value={stock_status}
+				onChange={(event, index, value) => {
+					setStock(value);
+				}}
+				floatingLabelText={messages.products_stockStatus}
+				fullWidth={true}
+			>
+				<MenuItem value={'all'} primaryText={messages.all} />
+				<MenuItem value={'available'} primaryText={messages.products_inStock} />
+				<MenuItem
+					value={'out_of_stock'}
+					primaryText={messages.products_outOfStock}
+				/>
+				<MenuItem
+					value={'backorder'}
+					primaryText={messages.products_backorder}
+				/>
+				<MenuItem value={'preorder'} primaryText={messages.products_preorder} />
+				<MenuItem
+					value={'discontinued'}
+					primaryText={messages.products_discontinued}
+				/>
+			</SelectField>
+		</div>
+	);
+};

src/admin/client/modules/apps/filter/components/style.css

@@ -0,0 +1,7 @@
+.filter {
+  padding: 0 16px;
+}
+
+.toggle {
+  margin-bottom: 16px;
+}

src/admin/client/modules/apps/filter/index.js

@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+import {
+	fetchProducts,
+	setFilterActive,
+	setFilterDiscontinued,
+	setFilterOnSale,
+	setFilterStock
+} from '../actions';
+import Filter from './components/fields';
+
+const mapStateToProps = state => {
+	return {
+		active: state.products.filter_active,
+		discontinued: state.products.filter_discontinued,
+		on_sale: state.products.filter_on_sale,
+		stock_status: state.products.filter_stock_status
+	};
+};
+
+const mapDispatchToProps = dispatch => {
+	return {
+		setActive: value => {
+			dispatch(setFilterActive(value));
+			dispatch(fetchProducts());
+		},
+		setDiscontinued: value => {
+			dispatch(setFilterDiscontinued(value));
+			dispatch(fetchProducts());
+		},
+		setOnSale: value => {
+			dispatch(setFilterOnSale(value));
+			dispatch(fetchProducts());
+		},
+		setStock: value => {
+			dispatch(setFilterStock(value));
+			dispatch(fetchProducts());
+		}
+	};
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Filter);