feat(admin): Choose a color for a sale

simde-utc · Dec 20, 2020 · f5aee84 · f5aee84
1 parent ce994cf
commit f5aee84
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 149 deletions.
diff --git a/package.json b/package.json
@@ -12,14 +12,14 @@
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.16.1",
     "material-table": "^1.69.1",
+    "material-ui-color": "^0.4.6",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.4",
     "redux": "^4.0.5",
     "redux-promise-middleware": "^6.1.0",
-    "redux-thunk": "^2.3.0",
     "use-deep-compare-effect": "^1.4.0"
   },
   "scripts": {

diff --git a/src/components/common/FieldGenerator.jsx b/src/components/common/FieldGenerator.jsx
@@ -1,147 +1,165 @@
-import React from 'react';
-import {
-	TextField, Checkbox, FormControlLabel,
-	FormControl, InputLabel, Select, MenuItem, Chip
-} from '@material-ui/core';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
-// import CheckInput from './CheckInput';
-
-class FieldGenerator {
-
-	// TODO Finish error texts
-
-	constructor(store, errors, onChange, keyPrefix = null, defaultProps = null) {
-		this.store = store;
-		this.errors = errors;
-		this.onChange = onChange;
-		this.keyPrefix = keyPrefix;
-		this.defaultProps = defaultProps;
-	}
-
-	onChangeDatetime = name => value => {
-		const fakeEvent = { target: { name, value } };
-		return this.onChange(fakeEvent);
-	}
-
-	getKey = (key) => (this.keyPrefix ? `${this.keyPrefix}.${key}` : key)
-
-	getValue = (key, params) => (
-		key.split('.').reduce((props, step) => props[step], this.store) || params.default
-	)
-
-	getProps = (props) => (
-		this.defaultProps ? { ...this.defaultProps, ...props } : props
-	)
-
-	displayErrors = (key) => (
-		this.errors[key] ? this.errors[key].join('<br>') : ''
-	)
-
-	text = (key, label, props = {}) => (
-		<TextField
-			label={label}
-			name={this.getKey(key)}
-			value={this.getValue(key, props) || ''}
-			onChange={this.onChange}
-			error={Boolean(this.errors[key])}
-			helperText={this.displayErrors(key)}
-			{...this.getProps(props)}
-		/>
-	)
-
-	number = (key, label, props = {}) => (
-		<TextField
-			label={label}
-			name={this.getKey(key)}
-			value={this.getValue(key, props) || 0}
-			onChange={this.onChange}
-			type="number"
-			error={Boolean(this.errors[key])}
-			helperText={this.displayErrors(key)}
-			{...this.getProps(props)}
-		/>
-	)
-
-	boolean = (key, label, props = {}) => (
-		<FormControlLabel
-			label={label}
-			// error={Boolean(this.errors[key])}
-			// helperText={this.displayErrors(key)}
-			control={
-				<Checkbox
-					name={this.getKey(key)}
-					checked={this.getValue(key, props) || false}
-					onChange={this.onChange}
-					{...this.getProps(props)}
-				/>
-			}
-		/>
-	)
-
-	datetime = (key, label, props = {}) => (
-		<KeyboardDateTimePicker
-			label={label}
-			value={this.getValue(key, props) || new Date()}
-			onChange={this.onChangeDatetime(this.getKey(key))}
-			format="yyyy/MM/dd hh:mm:ss"
-			showTodayButton
-			{...this.getProps(props)}
-		/>
-	)
-
-	select = (key, label, choices, props = {}) => (
-		<FormControl error={Boolean(this.errors[key])}>
-			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
-			<Select
-				name={this.getKey(key)}
-				value={this.getValue(key, props) || ''}
-				onChange={this.onChange}
-				labelId={this.getKey(key)}
-				// helperText={this.displayErrors(key)}
-				{...this.getProps(props)}
-			>
-				{Object.values(choices).map(choice => (
-					<MenuItem
-						key={choice.value}
-						value={choice.value}
-					>
-						{choice.label}
-					</MenuItem>
-				))}
-			</Select>
-		</FormControl>
-	)
-
-	selectChips = (key, label, choices, props = {}) => (
-		<FormControl error={Boolean(this.errors[key])}>
-			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
-			<Select
-				multiple
-				name={this.getKey(key)}
-				value={this.getValue(key, props) || ''}
-				onChange={this.onChange}
-				labelId={this.getKey(key)}
-				// helperText={this.displayErrors(key)}
-                renderValue={selected => (
-                    <div>
-                        {selected.map(value => (
-                            <Chip key={value} label={choices[value].label} />
-                        ))}
-                    </div>
-                )}
-				{...this.getProps(props)}
-			>
-				{Object.values(choices).map(choice => (
-					<MenuItem
-						key={choice.value}
-						value={choice.value}
-					>
-						{choice.label}
-					</MenuItem>
-				))}
-			</Select>
-		</FormControl>
-	)
-}
-
-export default FieldGenerator;
+import React from 'react';
+import {
+	TextField, Checkbox, FormControlLabel,
+	FormControl, InputLabel, Select, MenuItem, Chip
+} from '@material-ui/core';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { ColorPicker } from 'material-ui-color';
+// import CheckInput from './CheckInput';
+
+class FieldGenerator {
+
+	// TODO Finish error texts
+
+	constructor(store, errors, onChange, keyPrefix = null, defaultProps = null) {
+		this.store = store;
+		this.errors = errors;
+		this.onChange = onChange;
+		this.keyPrefix = keyPrefix;
+		this.defaultProps = defaultProps;
+	}
+
+	onChangeDatetime = name => value => {
+		const fakeEvent = { target: { name, value } };
+		return this.onChange(fakeEvent);
+	}
+
+	onChangeColor = name => color => {
+		const fakeEvent = { target: { name, value: `#${color.hex}` } };
+		return this.onChange(fakeEvent);
+	}
+
+	getKey = (key) => (this.keyPrefix ? `${this.keyPrefix}.${key}` : key)
+
+	getValue = (key, params) => (
+		key.split('.').reduce((props, step) => props[step], this.store) || params.default
+	)
+
+	getProps = (props) => (
+		this.defaultProps ? { ...this.defaultProps, ...props } : props
+	)
+
+	displayErrors = (key) => (
+		this.errors[key] ? this.errors[key].join('<br>') : ''
+	)
+
+	text = (key, label, props = {}) => (
+		<TextField
+			label={label}
+			name={this.getKey(key)}
+			value={this.getValue(key, props) || ''}
+			onChange={this.onChange}
+			error={Boolean(this.errors[key])}
+			helperText={this.displayErrors(key)}
+			{...this.getProps(props)}
+		/>
+	)
+
+	number = (key, label, props = {}) => (
+		<TextField
+			label={label}
+			name={this.getKey(key)}
+			value={this.getValue(key, props) || 0}
+			onChange={this.onChange}
+			type="number"
+			error={Boolean(this.errors[key])}
+			helperText={this.displayErrors(key)}
+			{...this.getProps(props)}
+		/>
+	)
+
+	boolean = (key, label, props = {}) => (
+		<FormControlLabel
+			label={label}
+			// error={Boolean(this.errors[key])}
+			// helperText={this.displayErrors(key)}
+			control={
+				<Checkbox
+					name={this.getKey(key)}
+					checked={this.getValue(key, props) || false}
+					onChange={this.onChange}
+					{...this.getProps(props)}
+				/>
+			}
+		/>
+	)
+
+	datetime = (key, label, props = {}) => (
+		<KeyboardDateTimePicker
+			label={label}
+			value={this.getValue(key, props) || new Date()}
+			onChange={this.onChangeDatetime(this.getKey(key))}
+			format="yyyy/MM/dd hh:mm:ss"
+			showTodayButton
+			{...this.getProps(props)}
+		/>
+	)
+
+	select = (key, label, choices, props = {}) => (
+		<FormControl error={Boolean(this.errors[key])}>
+			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
+			<Select
+				name={this.getKey(key)}
+				value={this.getValue(key, props) || ''}
+				onChange={this.onChange}
+				labelId={this.getKey(key)}
+				// helperText={this.displayErrors(key)}
+				{...this.getProps(props)}
+			>
+				{Object.values(choices).map(choice => (
+					<MenuItem
+						key={choice.value}
+						value={choice.value}
+					>
+						{choice.label}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	)
+
+	selectChips = (key, label, choices, props = {}) => (
+		<FormControl error={Boolean(this.errors[key])}>
+			<InputLabel htmlFor={this.getKey(key)}>{label}</InputLabel>
+			<Select
+				multiple
+				name={this.getKey(key)}
+				value={this.getValue(key, props) || ''}
+				onChange={this.onChange}
+				labelId={this.getKey(key)}
+				// helperText={this.displayErrors(key)}
+				renderValue={selected => (
+					<div>
+						{selected.map(value => (
+							<Chip key={value} label={choices[value].label} />
+						))}
+					</div>
+				)}
+				{...this.getProps(props)}
+			>
+				{Object.values(choices).map(choice => (
+					<MenuItem
+						key={choice.value}
+						value={choice.value}
+					>
+						{choice.label}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	)
+
+	color = (key, label, props = {}) => (
+		<FormControl error={Boolean(this.errors[key])}>
+			<InputLabel htmlFor={this.getKey(key)} shrink>{label}</InputLabel>
+			<div className="MuiInput-formControl">
+				<ColorPicker
+					value={this.getValue(key, props) || '#ffffff'}
+					onChange={this.onChangeColor(this.getKey(key))}
+				/>
+			</div>
+		</FormControl>
+	)
+}
+
+export default FieldGenerator;
diff --git a/src/pages/admin/SaleEditor/DetailsEditor.jsx b/src/pages/admin/SaleEditor/DetailsEditor.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Paper, Grid, Button } from '@material-ui/core';
 
-import { LoadingButton } from 'components/common/Buttons';
 import FieldGenerator from 'components/common/FieldGenerator';
+import { LoadingButton } from 'components/common/Buttons';
 import { mergeClasses, useFormStyles } from 'utils/styles';
 
 export default function DetailsEditor({ disabled, editing, isCreator, ...props }) {
@@ -20,6 +20,7 @@ export default function DetailsEditor({ disabled, editing, isCreator, ...props }
 					{Field.text('id', 'ID', onlyCreate)}
 					{Field.select('association', 'Association', props.assos, onlyCreate)}
 					{Field.text('description', 'Description', { required: true, multiline: true, rows: 4 })}
+					{Field.color('color', 'Couleur')}
 				</Grid>
 
 				<Grid item xs sm={6} className={mergeClasses(classes, 'column', 'controls')}>

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -65,6 +65,8 @@ export const BLANK_SALE_DETAILS = {
 
 	begin_at: null,
 	end_at: null,
+
+	color:"",
 };
 
 export const BLANK_ITEMGROUP = {