1
0
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:
vincent 2022-09-16 15:58:18 +02:00 committed by Sylvain
parent b7e128a63c
commit d0e68fbf21

View File

@ -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>