diff --git a/app/frontend/src/javascript/components/base/fab-state-label.tsx b/app/frontend/src/javascript/components/base/fab-state-label.tsx index ef1d7b053..25fc0a998 100644 --- a/app/frontend/src/javascript/components/base/fab-state-label.tsx +++ b/app/frontend/src/javascript/components/base/fab-state-label.tsx @@ -9,7 +9,6 @@ interface FabStateLabelProps { * Render a label preceded by a bot */ export const FabStateLabel: React.FC = ({ status, background, children }) => { - console.log('status: ', status); return ( {children} diff --git a/app/frontend/src/javascript/components/store/orders.tsx b/app/frontend/src/javascript/components/store/orders.tsx index 93cbd88d1..2402b226c 100644 --- a/app/frontend/src/javascript/components/store/orders.tsx +++ b/app/frontend/src/javascript/components/store/orders.tsx @@ -4,12 +4,15 @@ import { useTranslation } from 'react-i18next'; import { react2angular } from 'react2angular'; import { Loader } from '../base/loader'; import { IApplication } from '../../models/application'; +import { useForm } from 'react-hook-form'; import { FabButton } from '../base/fab-button'; import { StoreListHeader } from './store-list-header'; import { AccordionItem } from './accordion-item'; import { OrderItem } from './order-item'; import { MemberSelect } from '../user/member-select'; import { User } from '../../models/user'; +import { FormInput } from '../form/form-input'; +import { TDateISODate } from '../../typings/date-iso'; declare const Application: IApplication; @@ -35,9 +38,10 @@ type checklistOption = { value: number, label: string }; // TODO: delete next eslint disable // eslint-disable-next-line @typescript-eslint/no-unused-vars const Orders: React.FC = ({ currentUser, onSuccess, onError }) => { - console.log('currentUser: ', currentUser); const { t } = useTranslation('admin'); + const { register, getValues } = useForm(); + const [filters, setFilters] = useImmer(initFilters); const [clearFilters, setClearFilters] = useState(false); const [accordion, setAccordion] = useState({}); @@ -119,6 +123,13 @@ const Orders: React.FC = ({ currentUser, onSuccess, onError }) => { }); }; + /** + * Filter: by period + */ + const handlePeriod = () => { + console.log(getValues(['period_from', 'period_to'])); + }; + /** * Open/close accordion items */ @@ -186,6 +197,27 @@ const Orders: React.FC = ({ currentUser, onSuccess, onError }) => { + +
+
+
+ from + + to + +
+ {t('app.admin.store.orders.filter_apply')} +
+
+
@@ -216,11 +248,15 @@ Application.Components.component('orders', react2angular(OrdersWrapper, ['curren interface Filters { reference: string, status: checklistOption[], - memberId: number + memberId: number, + period_from: TDateISODate, + period_to: TDateISODate } const initFilters: Filters = { reference: '', status: [], - memberId: null + memberId: null, + period_from: null, + period_to: null }; diff --git a/app/frontend/src/javascript/components/store/show-order.tsx b/app/frontend/src/javascript/components/store/show-order.tsx index 17fc7d193..b2aaac940 100644 --- a/app/frontend/src/javascript/components/store/show-order.tsx +++ b/app/frontend/src/javascript/components/store/show-order.tsx @@ -1,26 +1,76 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { IApplication } from '../../models/application'; +import { User } from '../../models/user'; import { react2angular } from 'react2angular'; import { Loader } from '../base/loader'; import noImage from '../../../../images/no_image.png'; import { FabStateLabel } from '../base/fab-state-label'; +import Select from 'react-select'; declare const Application: IApplication; interface ShowOrderProps { orderRef: string, + currentUser?: User, onError: (message: string) => void, onSuccess: (message: string) => void } +/** +* Option format, expected by react-select +* @see https://github.com/JedWatson/react-select +*/ +type selectOption = { value: number, label: string }; /** * This component shows an order details */ // TODO: delete next eslint disable // eslint-disable-next-line @typescript-eslint/no-unused-vars -export const ShowOrder: React.FC = ({ orderRef, onError, onSuccess }) => { - const { t } = useTranslation('admin'); +export const ShowOrder: React.FC = ({ orderRef, currentUser, onError, onSuccess }) => { + const { t } = useTranslation('shared'); + + /** + * Check if the current operator has administrative rights or is a normal member + */ + const isPrivileged = (): boolean => { + return (currentUser?.role === 'admin' || currentUser?.role === 'manager'); + }; + + /** + * Creates sorting options to the react-select format + */ + const buildOptions = (): Array => { + return [ + { value: 0, label: t('app.shared.store.show_order.status.error') }, + { value: 1, label: t('app.shared.store.show_order.status.canceled') }, + { value: 2, label: t('app.shared.store.show_order.status.pending') }, + { value: 3, label: t('app.shared.store.show_order.status.under_preparation') }, + { value: 4, label: t('app.shared.store.show_order.status.paid') }, + { value: 5, label: t('app.shared.store.show_order.status.ready') }, + { value: 6, label: t('app.shared.store.show_order.status.collected') }, + { value: 7, label: t('app.shared.store.show_order.status.refunded') } + ]; + }; + + /** + * Callback after selecting an action + */ + const handleAction = (action: selectOption) => { + console.log('Action:', action); + }; + + // Styles the React-select component + const customStyles = { + control: base => ({ + ...base, + width: '20ch', + backgroundColor: 'transparent' + }), + indicatorSeparator: () => ({ + display: 'none' + }) + }; /** * Returns a className according to the status @@ -43,28 +93,37 @@ export const ShowOrder: React.FC = ({ orderRef, onError, onSucce

[order.ref]

+ {isPrivileged() && +