(feat) Add period filter

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<FabStateLabelProps> = ({ status, background, children }) => {
-  console.log('status: ', status);
   return (
     <span className={`fab-state-label ${status !== undefined ? status : ''} ${background ? 'bg' : ''}`}>
       {children}

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<OrdersProps> = ({ currentUser, onSuccess, onError }) => {
-  console.log('currentUser: ', currentUser);
   const { t } = useTranslation('admin');
 
+  const { register, getValues } = useForm();
+
   const [filters, setFilters] = useImmer<Filters>(initFilters);
   const [clearFilters, setClearFilters] = useState<boolean>(false);
   const [accordion, setAccordion] = useState({});
@@ -119,6 +123,13 @@ const Orders: React.FC<OrdersProps> = ({ 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<OrdersProps> = ({ currentUser, onSuccess, onError }) => {
               </div>
             </div>
           </AccordionItem>
+          <AccordionItem id={3}
+            isOpen={accordion[3]}
+            onChange={handleAccordion}
+            label={t('app.admin.store.orders.filter_period')}
+          >
+            <div className='content'>
+              <div className="group">
+                <div className="period">
+                  from
+                  <FormInput id="period_from"
+                             register={register}
+                             type="date" />
+                  to
+                  <FormInput id="period_to"
+                             register={register}
+                             type="date" />
+                </div>
+                <FabButton onClick={handlePeriod} className="is-info">{t('app.admin.store.orders.filter_apply')}</FabButton>
+              </div>
+            </div>
+          </AccordionItem>
         </div>
       </div>
 
@@ -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
 };

app/frontend/src/stylesheets/modules/store/store-filters.scss

@@ -143,4 +143,10 @@
       }
     }
   }
+
+  .period {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }

config/locales/app.admin.en.yml

@@ -2037,6 +2037,7 @@ en:
           filter_ref: "By reference"
           filter_status: "By status"
           filter_client: "By client"
+          filter_period: "By period"
           status:
             error: "Payment error"
             canceled: "Canceled"