Merge branch 'develop' into fix-spelling-a-char

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import * as Yup from 'yup';
 import moment from 'moment';
 import styled from 'styled-components';
 import { Formik, Form } from 'formik';
@@ -17,6 +16,10 @@ import withInventoryValuationActions from './withInventoryValuationActions';
 import { compose, transformToForm } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
+import {
+  getInventoryValuationQuery,
+  getInventoryValuationQuerySchema,
+} from './utils';
 
 /**
  * inventory valuation header.
@@ -33,25 +36,17 @@ function InventoryValuationHeader({
   toggleInventoryValuationFilterDrawer,
 }) {
   // Form validation schema.
-  const validationSchema = Yup.object().shape({
-    asDate: Yup.date().required().label('asDate'),
-  });
+  const validationSchema = getInventoryValuationQuerySchema();
+  const defaultQuery = getInventoryValuationQuery();
 
-  // Default values.
-  const defaultValues = {
-    ...pageFilter,
-    asDate: moment().toDate(),
-    itemsIds: [],
-    warehousesIds: [],
-  };
   // Initial values.
   const initialValues = transformToForm(
     {
-      ...defaultValues,
+      ...defaultQuery,
       ...pageFilter,
       asDate: moment(pageFilter.asDate).toDate(),
     },
-    defaultValues,
+    defaultQuery,
   );
 
   // Handle the form of header submit.
@@ -71,6 +66,7 @@ function InventoryValuationHeader({
   // Detarmines the given feature whether is enabled.
   const { featureCan } = useFeatureCan();
 
+  // Detarmine if these feature are enabled.
   const isBranchesFeatureCan = featureCan(Features.Branches);
   const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.tsx

@@ -2,8 +2,7 @@
 import React from 'react';
 import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormGroup, Position, Classes } from '@blueprintjs/core';
-import classNames from 'classnames';
+import { FormGroup, Position } from '@blueprintjs/core';
 
 import {
   FormattedMessage as T,
@@ -11,9 +10,9 @@ import {
   Row,
   Col,
   FieldHint,
+  FFormGroup,
 } from '@/components';
 import { filterInventoryValuationOptions } from '../constants';
-
 import {
   momentFormatter,
   tansformDateValue,
@@ -83,22 +82,9 @@ function InventoryValuationHeaderGeneralPanelContent() {
 
       <Row>
         <Col xs={4}>
-          <Field name={'itemsIds'}>
-            {({ form: { setFieldValue } }) => (
-              <FormGroup
-                label={<T id={'Specific items'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ItemsMultiSelect
-                  items={items}
-                  onItemSelect={(items) => {
-                    const itemsIds = items.map((item) => item.id);
-                    setFieldValue('itemsIds', itemsIds);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup name={'itemsIds'} label={<T id={'Specific items'} />}>
+            <ItemsMultiSelect name={'itemsIds'} items={items} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

packages/webapp/src/containers/FinancialStatements/InventoryValuation/utils.tsx

@@ -2,25 +2,33 @@
 import React from 'react';
 import moment from 'moment';
 import { castArray } from 'lodash';
+import * as Yup from 'yup';
 
 import { useAppQueryString } from '@/hooks';
 import { transformToForm } from '@/utils';
 
 /**
- * Retrieves the inventory valuation sheet default query.
+ * Retrieves the validation schema of inventory valuation query.
  */
-export const getInventoryValuationQuery = () => {
-  return {
-    asDate: moment().endOf('day').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
-
-    branchesIds: [],
-    warehousesIds: [],
-  };
+export const getInventoryValuationQuerySchema = () => {
+  return Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+  });
 };
 
 /**
- * Parses inventory valiation location query to report query.
+ * Retrieves the inventory valuation sheet default query.
+ */
+export const getInventoryValuationQuery = () => ({
+  asDate: moment().endOf('day').format('YYYY-MM-DD'),
+  filterByOption: 'with-transactions',
+  itemsIds: [],
+  branchesIds: [],
+  warehousesIds: [],
+});
+
+/**
+ * Parses inventory valuation location query to report query.
  */
 const parseInventoryValuationQuery = (locationQuery) => {
   const defaultQuery = getInventoryValuationQuery();
@@ -33,6 +41,7 @@ const parseInventoryValuationQuery = (locationQuery) => {
     ...transformed,
 
     // Ensures the branches/warehouses ids is always array.
+    itemsIds: castArray(transformed.itemsIds),
     branchesIds: castArray(transformed.branchesIds),
     warehousesIds: castArray(transformed.warehousesIds),
   };