Commit a5b77bd9 authored by Remy Huet's avatar Remy Huet

Add filter form and search in API with filters

parent 988b50a5
Pipeline #32611 passed with stage
in 1 minute and 4 seconds
import axios from 'axios';
/* eslint-disable import/no-unresolved */
import env from '../env';
/* eslint-enable import/no-unresolved */
export function fetchMaterials(token, filters) {
let args = '';
Object.entries(filters).forEach((element) => {
args += `filter[${element[0]}]=${element[1]}&`;
});
return {
type: 'FETCH_MATERIALS',
payload: axios.get(`${env.api_uri}/api/v1/materials?${args}`,
{
headers: { Authorization: `Bearer ${token}` },
}),
};
}
export function temp() {}
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Form, Input, Button } from 'semantic-ui-react';
import Dropdown from './CustomDropdown';
function MaterialsFilter({ categoriesOptions, infrastructuresOptions, handleSubmit }) {
return (
<Form onSubmit={handleSubmit}>
<Form.Group fluid>
<Form.Field>
<Field name="category_id" component={Dropdown} placeholder="Catégorie" search selection clearable options={categoriesOptions} />
</Form.Field>
<Form.Field>
<Field name="infrastructure_id" component={Dropdown} placeholder="Infrastructure" search selection clearable options={infrastructuresOptions} />
</Form.Field>
<Form.Field>
<Field name="search" component={Input} placeholder="Filtre" icon="filter" />
</Form.Field>
<Button primary type="submit" icon="search" floated="right" />
</Form.Group>
</Form>
);
}
MaterialsFilter.propTypes = {
categoriesOptions: PropTypes.arrayOf(
PropTypes.shape({
key: PropTypes.number.isRequired,
id: PropTypes.number.isRequired,
text: PropTypes.string.isRequired,
}),
).isRequired,
infrastructuresOptions: PropTypes.arrayOf(
PropTypes.shape({
key: PropTypes.number.isRequired,
id: PropTypes.number.isRequired,
text: PropTypes.string.isRequired,
}),
).isRequired,
handleSubmit: PropTypes.func.isRequired,
};
export default reduxForm({
form: 'materialsFilter',
})(MaterialsFilter);
......@@ -2,11 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
Container, Dimmer, Loader, Divider, Dropdown,
Container, Dimmer, Loader, Divider,
} from 'semantic-ui-react';
import MaterialsFilter from '../forms/MaterialsFilter';
import { fetchCategories } from '../actions/categoriesActions';
import { fetchInfrastructures } from '../actions/infrastructuresActions';
import { fetchMaterials } from '../actions/materialsActions';
function Materials({
dispatch,
......@@ -26,18 +28,22 @@ function Materials({
dispatch(fetchInfrastructures(userToken));
}
const categoryOptions = categories.map(({ name, id }) => ({
const categoriesOptions = categories.map(({ name, id }) => ({
key: id,
value: id,
text: name,
}));
const infrastructureOptions = infrastructures.map(({ name, id }) => ({
const infrastructuresOptions = infrastructures.map(({ name, id }) => ({
key: id,
value: id,
text: name,
}));
const handleFilterSubmit = (values) => {
dispatch(fetchMaterials(userToken, values));
};
return (
<Container style={{ margin: '1em' }}>
{(categoriesFetching || infrastructuresFetching) && (
......@@ -46,8 +52,12 @@ function Materials({
</Dimmer>
)}
<Dropdown search selection clearable options={categoryOptions} />
<Dropdown search selection clearable options={infrastructureOptions} />
<MaterialsFilter
categoriesOptions={categoriesOptions}
infrastructuresOptions={infrastructuresOptions}
onSubmit={handleFilterSubmit}
/>
<Divider clearing />
</Container>
);
......
......@@ -4,10 +4,12 @@ import { reducer as formReducer } from 'redux-form';
import user from './userReducer';
import categories from './categoriesReducer';
import infrastructures from './infrastructuresReducer';
import materials from './materialsReducer';
export default combineReducers({
user,
categories,
infrastructures,
materials,
form: formReducer,
});
const initialState = {
fetching: false,
fetched: false,
action: null,
success: null,
info: null,
material: {},
materials: [],
};
export default function reducer(state = initialState, action) {
switch (action.type) {
case 'FETCH_MATERIALS_PENDING': {
return {
...state,
fetching: true,
fetched: false,
action: null,
success: null,
info: null,
};
}
case 'FETCH_MATERIALS_FULFILLED': {
return {
...state,
fetching: false,
fetched: true,
materials: action.payload.data.data,
};
}
default: {
return state;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment