mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-12 23:09:03 +01:00
(quality) Refacto/style active orders list's filters
This commit is contained in:
parent
b7e128a63c
commit
d0e68fbf21
@ -15,6 +15,7 @@ import { FormInput } from '../form/form-input';
|
|||||||
import OrderAPI from '../../api/order';
|
import OrderAPI from '../../api/order';
|
||||||
import { Order, OrderIndexFilter } from '../../models/order';
|
import { Order, OrderIndexFilter } from '../../models/order';
|
||||||
import { FabPagination } from '../base/fab-pagination';
|
import { FabPagination } from '../base/fab-pagination';
|
||||||
|
import { X } from 'phosphor-react';
|
||||||
|
|
||||||
declare const Application: IApplication;
|
declare const Application: IApplication;
|
||||||
|
|
||||||
@ -121,7 +122,7 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onError }) => {
|
|||||||
/**
|
/**
|
||||||
* Clear filter by type
|
* Clear filter by type
|
||||||
*/
|
*/
|
||||||
const removefilter = (filterType: string) => {
|
const removeFilter = (filterType: string, state?: string) => {
|
||||||
return () => {
|
return () => {
|
||||||
setFilters(draft => {
|
setFilters(draft => {
|
||||||
draft.page = 1;
|
draft.page = 1;
|
||||||
@ -131,10 +132,13 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onError }) => {
|
|||||||
draft.reference = '';
|
draft.reference = '';
|
||||||
setReference('');
|
setReference('');
|
||||||
break;
|
break;
|
||||||
case 'states':
|
case 'states': {
|
||||||
draft.states = [];
|
const s = [...draft.states];
|
||||||
setStates([]);
|
s.splice(states.indexOf(state), 1);
|
||||||
|
setStates(s);
|
||||||
|
draft.states = s;
|
||||||
break;
|
break;
|
||||||
|
}
|
||||||
case 'user':
|
case 'user':
|
||||||
delete draft.user_id;
|
delete draft.user_id;
|
||||||
delete draft.user;
|
delete draft.user;
|
||||||
@ -259,12 +263,6 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onError }) => {
|
|||||||
<FabButton onClick={clearAllFilters} className="is-black">{t('app.admin.store.orders.filter_clear')}</FabButton>
|
<FabButton onClick={clearAllFilters} className="is-black">{t('app.admin.store.orders.filter_clear')}</FabButton>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div>
|
|
||||||
{filters.reference && <div>{filters.reference} <i onClick={removefilter('reference')}>x</i></div>}
|
|
||||||
{filters.states.length > 0 && <div>{filters.states.join(', ')} <i onClick={removefilter('states')}>x</i></div>}
|
|
||||||
{filters.user_id > 0 && <div>{user?.name} <i onClick={removefilter('user')}>x</i></div>}
|
|
||||||
{filters.period_from && <div>{filters.period_from} - {filters.period_to} <i onClick={removefilter('period')}>x</i></div>}
|
|
||||||
</div>
|
|
||||||
<div className="accordion">
|
<div className="accordion">
|
||||||
<AccordionItem id={0}
|
<AccordionItem id={0}
|
||||||
isOpen={accordion[0]}
|
isOpen={accordion[0]}
|
||||||
@ -342,12 +340,33 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onError }) => {
|
|||||||
selectValue={filters.sort === 'ASC' ? 1 : 0}
|
selectValue={filters.sort === 'ASC' ? 1 : 0}
|
||||||
onSelectOptionsChange={handleSorting}
|
onSelectOptionsChange={handleSorting}
|
||||||
/>
|
/>
|
||||||
|
<div className='features'>
|
||||||
|
{filters.reference && <div className='features-item'>
|
||||||
|
<p>{filters.reference}</p>
|
||||||
|
<button onClick={removeFilter('reference')}><X size={16} weight="light" /></button>
|
||||||
|
</div>}
|
||||||
|
{filters.states?.map((f, index) => (
|
||||||
|
<div key={index} className='features-item'>
|
||||||
|
<p>{f}</p>
|
||||||
|
<button onClick={removeFilter('states', f)}><X size={16} weight="light" /></button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{filters.user_id > 0 && <div className='features-item'>
|
||||||
|
<p>{user?.name}</p>
|
||||||
|
<button onClick={removeFilter('user')}><X size={16} weight="light" /></button>
|
||||||
|
</div>}
|
||||||
|
{filters.period_from && <div className='features-item'>
|
||||||
|
<p>{filters.period_from} - {filters.period_to}</p>
|
||||||
|
<button onClick={removeFilter('period')}><X size={16} weight="light" /></button>
|
||||||
|
</div>}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="orders-list">
|
<div className="orders-list">
|
||||||
{orders.map(order => (
|
{orders.map(order => (
|
||||||
<OrderItem key={order.id} order={order} currentUser={currentUser} />
|
<OrderItem key={order.id} order={order} currentUser={currentUser} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{orders.length > 0 &&
|
{pageCount > 1 &&
|
||||||
<FabPagination pageCount={pageCount} currentPage={filters.page} selectPage={handlePagination} />
|
<FabPagination pageCount={pageCount} currentPage={filters.page} selectPage={handlePagination} />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user