feat : allocate landed cost.

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js

@@ -1,27 +1,50 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useBill } from 'hooks/query';
+import { useBill, useCreateLandedCost } from 'hooks/query';
 
-import { pick } from 'lodash';
+import { map, omit, pick } from 'lodash';
+import * as R from 'ramda';
 
 const AllocateLandedCostDialogContext = React.createContext();
 
 /**
  * Allocate landed cost provider.
  */
-function AllocateLandedCostDialogProvider({ billId, dialogName, ...props }) {
+function AllocateLandedCostDialogProvider({
+  billId,
+  query,
+  dialogName,
+  ...props
+}) {
   // Handle fetch bill details.
   const { isLoading: isBillLoading, data: bill } = useBill(billId, {
     enabled: !!billId,
   });
 
+  // Create landed cost mutations.
+  const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
+
+  // const L = [bill].map(({ entries: items }) => ({
+  //   items,
+  // }));
+  // let obj = { oldKey: 1, b: 2, c: 3 };
+  // const { oldKey: newKey, ...rest } = obj;
+  // obj = { newKey, ...rest };
+
+  // const obj = { ...pick(bill, ['entries']).map((index) => index) };
+
+
   // provider payload.
   const provider = {
-    bill: {
+    items: {
       ...pick(bill, ['entries']),
     },
     dialogName,
+    query,
+    createLandedCostMutate,
+    billId,
   };
+
   return (
     <DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
       <AllocateLandedCostDialogContext.Provider value={provider} {...props} />

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DataTable, MoneyFieldCell, DataTableEditable } from 'components';
+import { MoneyFieldCell, DataTableEditable } from 'components';
 import { compose, updateTableRow } from 'utils';
 
 /**
@@ -10,12 +10,13 @@ export default function AllocateLandedCostEntriesTable({
   onUpdateData,
   entries,
 }) {
+
   // allocate landed cost entries table columns.
   const columns = React.useMemo(
     () => [
       {
         Header: intl.get('item'),
-        accessor: 'item_id',
+        accessor: 'item.name',
         disableSortBy: true,
         width: '150',
       },
@@ -59,38 +60,14 @@ export default function AllocateLandedCostEntriesTable({
     [onUpdateData, entries],
   );
 
-  const LL = [
+  return (
-    {
+    <DataTableEditable
-      item_id: 'ITEM',
+      columns={columns}
-      quantity: '30000',
+      data={entries}
-      rate: '100000',
+      payload={{
-      amount: '400',
+        errors: [],
-    },
+        updateData: handleUpdateData,
-    {
+      }}
-      item_id: 'ITEM',
+    />
-      quantity: '30000',
+  );
-      rate: '100000',
-      amount: '400',
-    },
-    {
-      item_id: 'ITEM',
-      quantity: '30000',
-      rate: '100000',
-      amount: '400',
-    },
-    {
-      item_id: 'ITEM',
-      quantity: '30000',
-      rate: '100000',
-      amount: '400',
-    },
-    {
-      item_id: 'ITEM',
-      quantity: '30000',
-      rate: '100000',
-      amount: '400',
-    },
-  ];
-
-  return <DataTableEditable columns={columns} data={LL} />;
 }

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -13,7 +13,6 @@ function AllocateLandedCostFloatingActions({
 }) {
   // Formik context.
   const { isSubmitting } = useFormikContext();
-
   const { dialogName } = useAllocateLandedConstDialogContext();
 
   // Handle cancel button click.

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -1,24 +1,27 @@
 import React from 'react';
 import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
 import moment from 'moment';
+import { pick, omit } from 'lodash';
 
 import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
 
+import { AppToaster } from 'components';
 import { AllocateLandedCostFormSchema } from './AllocateLandedCostForm.schema';
 import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
 import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-
 import { compose } from 'utils';
 
 const defaultInitialValues = {
-  transaction_type: 'bills',
+  transaction_type: 'Bill',
   transaction_date: moment(new Date()).format('YYYY-MM-DD'),
   transaction_id: '',
   transaction_entry_id: '',
   amount: '',
   allocation_method: 'quantity',
-  entries: {
+  items: {
     entry_id: '',
     cost: '',
   },
@@ -31,26 +34,59 @@ function AllocateLandedCostForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { bill, dialogName } = useAllocateLandedConstDialogContext();
+  const { items, dialogName, createLandedCostMutate } =
+    useAllocateLandedConstDialogContext();
 
   // Initial form values.
   const initialValues = {
     ...defaultInitialValues,
-    ...bill,
+    ...items,
   };
 
-
   // Handle form submit.
-  const handleFormSubmit = (values, { setSubmitting }) => {};
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(false);
+    closeDialog(dialogName);
+
+    const entries = [values]
+      .filter((entry) => entry.id && entry.cost)
+      .map((entry) => ({
+        entry_id: entry.id,
+        ...pick(entry, ['cost']),
+      }));
+
+    const form = {
+      ...values,
+      // items:{entries},
+    };
+
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('the_landed_cost_has_been_created_successfully'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+    };
+
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+    createLandedCostMutate(form).then(onSuccess).catch(onError);
+  };
 
   return (
     <Formik
       validationSchema={AllocateLandedCostFormSchema}
       initialValues={initialValues}
       onSubmit={handleFormSubmit}
-    >
+      component={AllocateLandedCostFormContent}
-      <AllocateLandedCostFormContent />
+    />
-    </Formik>
   );
 }
 

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormBody.js

@@ -13,12 +13,14 @@ export default function AllocateLandedCostFormBody() {
           field: { value },
           meta: { error, touched },
         }) => (
-          <AllocateLandedCostEntriesTable
+          <>
-            entries={value}
+            <AllocateLandedCostEntriesTable
-            onUpdateData={(newEntries) => {
+              entries={value}
-              setFieldValue('entries', newEntries);
+              onUpdateData={(newEntries) => {
-            }}
+                setFieldValue('entries', newEntries);
-          />
+              }}
+            />
+          </>
         )}
       </FastField>
     </div>

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Form } from 'formik';
 import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
 import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
+
 /**
  * Allocate landed cost form content.
  */

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -1,34 +1,39 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
   RadioGroup,
   Radio,
   InputGroup,
-  Position,
 } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import {
+import { inputIntent, handleStringChange } from 'utils';
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  handleStringChange,
-} from 'utils';
 import { FieldRequiredHint, ListSelect } from 'components';
 import { CLASSES } from 'common/classes';
 import allocateLandedCostType from 'common/allocateLandedCostType';
-import AccountsSuggestField from 'components/AccountsSuggestField';
+import { useLandedCostTransaction } from 'hooks/query';
+
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
+import { getEntriesByTransactionId } from './utils';
 
 /**
  * Allocate landed cost form fields.
  */
 export default function AllocateLandedCostFormFields() {
+  const { values } = useFormikContext();
+
+  const {
+    data: { transactions },
+  } = useLandedCostTransaction(values.transaction_type);
+
+  const transactionEntry = getEntriesByTransactionId(
+    transactions,
+    values.transaction_id,
+  );
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------Transaction type -----------*/}
@@ -61,69 +66,64 @@ export default function AllocateLandedCostFormFields() {
         )}
       </FastField>
 
-      {/*------------Transaction date -----------*/}
-      <FastField name={'transaction_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'transaction_date'} />}
-            // labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="transaction_date" />}
-            minimal={true}
-            className={classNames(CLASSES.FILL, 'form-group--transaction_date')}
-            inline={true}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('transaction_date', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{
-                position: Position.BOTTOM,
-                minimal: true,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
       {/*------------ Transaction  -----------*/}
-      <FastField name={'transaction_id'}>
+      <Field name={'transaction_id'}>
-        {({ form, field, meta: { error, touched } }) => (
+        {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'transaction_id'} />}
             // labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="transaction_id" />}
-            className={'form-group--transaction_id'}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
             inline={true}
           >
-            <AccountsSuggestField
+            <ListSelect
-              accounts={[]}
+              items={transactions}
-              onAccountSelected={({ id }) =>
+              onItemSelect={({ id }) => {
-                form.setFieldValue('transaction_id', id)
+                form.setFieldValue('transaction_id', id);
-              }
-              inputProps={{
-                placeholder: intl.get('select_transaction'),
               }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'id'}
+              textProp={'name'}
+              labelProp={'id'}
+              defaultText={intl.get('select_transaction')}
+              popoverProps={{ minimal: true }}
             />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
+
       {/*------------ Transaction line  -----------*/}
-      <FastField name={'transaction_entry_id'}>
+      <Field name={'transaction_entry_id'}>
-        {({ form, field, meta: { error, touched } }) => (
+        {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'transaction_line'} />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="transaction_entry_id" />}
-            className={'form-group--transaction_entry_id'}
+            className={classNames(
+              CLASSES.FILL,
+              'form-group--transaction_entry_id',
+            )}
             inline={true}
           >
-            <InputGroup {...field} />
+            <ListSelect
+              items={transactionEntry}
+              onItemSelect={({ id }) => {
+                form.setFieldValue('transaction_entry_id', id);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'id'}
+              textProp={'name'}
+              labelProp={'id'}
+              defaultText={intl.get('select_transaction')}
+              popoverProps={{ minimal: true }}
+            />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
+
       {/*------------ Amount -----------*/}
       <FastField name={'amount'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -138,6 +138,7 @@ export default function AllocateLandedCostFormFields() {
           </FormGroup>
         )}
       </FastField>
+
       {/*------------ Allocation method -----------*/}
       <FastField name={'allocation_method'}>
         {({ form, field: { value }, meta: { touched, error } }) => (
@@ -158,7 +159,7 @@ export default function AllocateLandedCostFormFields() {
               inline={true}
             >
               <Radio label={<T id={'quantity'} />} value="quantity" />
-              <Radio label={<T id={'valuation'} />} value="valuation" />
+              <Radio label={<T id={'valuation'} />} value="value" />
             </RadioGroup>
           </FormGroup>
         )}

client/src/containers/Dialogs/AllocateLandedCostDialog/utils.js

@@ -0,0 +1,4 @@
+export function getEntriesByTransactionId(transactions, id) {
+  const transaction = transactions.find((trans) => trans.id === id);
+  return transaction ? transaction.entries : [];
+}

client/src/hooks/query/landedCost.js

@@ -63,8 +63,11 @@ export function useLandedCostTransaction(query, props) {
       params: { transaction_type: query },
     },
     {
-      select: (res) => res.data.transactions,
+      select: (res) => res.data,
-      defaultData: [],
+
+      defaultData: {
+        transactions: [],
+      },
       ...props,
     },
   );

client/src/lang/en/index.json

@@ -1138,6 +1138,6 @@
   "located_landed_cost":"Located Landed Cost",
   "delete_transaction":"Delete transaction",
   "cannot_delete_bill_that_has_associated_landed_cost_transactions":"Cannot delete bill that has associated landed cost transactions.",
-  "couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction":"Couldn't delete expense transaction has associated located landed cost transaction"
+  "couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction":"Couldn't delete expense transaction has associated located landed cost transaction",
-
+  "the_landed_cost_has_been_created_successfully":"The landed cost has been created successfully"
 }