From 01aaa9de250c6b27ec7eb2bd53d4219518633a90 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 8 Feb 2021 14:44:17 +0200
Subject: [PATCH] fix: loading spinner style in dialog/alert component. feat:
 add sell and purchase description fields.

---
 client/src/components/Dialog/DialogContent.js | 15 +++---
 client/src/containers/Items/ItemForm.js       |  4 +-
 client/src/containers/Items/ItemFormBody.js   | 46 ++++++++++++++++++-
 client/src/services/axios.js                  |  4 --
 .../src/style/components/Dialog/Dialog.scss   | 10 ++--
 client/src/style/pages/Items/PageForm.scss    |  8 ++++
 6 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Dialog/DialogContent.js b/client/src/components/Dialog/DialogContent.js
index f20418beb..56eab54dd 100644
--- a/client/src/components/Dialog/DialogContent.js
+++ b/client/src/components/Dialog/DialogContent.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import { Spinner, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
 
 export default function DialogContent(props) {
   const { isLoading, children } = props;
 
   const loadingContent = (
-    <div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>
-  );
-  return (
-    <div>
-      {isLoading ? loadingContent : children}
+    <div
+      className={classNames(Classes.DIALOG_BODY, {
+        'is-loading': isLoading,
+      })}
+    >
+      <Spinner size={30} />
     </div>
   );
-}
\ No newline at end of file
+  return <div>{isLoading ? loadingContent : children}</div>;
+}
diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js
index 2ee76292f..b6dc6917f 100644
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -94,8 +94,10 @@ function ItemForm({
   );
 
   // Transform API errors.
-  const transformApiErrors = (errors) => {
+  const transformApiErrors = (error) => {
+    const { response: { data: { errors } } } = error;
     const fields = {};
+
     if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
       fields.name = formatMessage({ id: 'the_name_used_before' });
     }
diff --git a/client/src/containers/Items/ItemFormBody.js b/client/src/containers/Items/ItemFormBody.js
index 8c4dc404f..5255e1381 100644
--- a/client/src/containers/Items/ItemFormBody.js
+++ b/client/src/containers/Items/ItemFormBody.js
@@ -1,6 +1,12 @@
 import React from 'react';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
+import {
+  FormGroup,
+  Classes,
+  TextArea,
+  Checkbox,
+  ControlGroup,
+} from '@blueprintjs/core';
 import {
   AccountsSelectList,
   MoneyInputGroup,
@@ -100,6 +106,25 @@ function ItemFormBody({ baseCurrency }) {
               </FormGroup>
             )}
           </FastField>
+
+          <FastField name={'sell_description'}>
+            {({ form: { values }, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'description'} />}
+                className={'form-group--sell-description'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'description'} />}
+                inline={true}
+              >
+                <TextArea
+                  growVertically={true}
+                  height={280}
+                  {...field}
+                  disabled={!values.sellable}
+                />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
 
         <Col xs={6}>
@@ -174,6 +199,25 @@ function ItemFormBody({ baseCurrency }) {
               </FormGroup>
             )}
           </FastField>
+
+          <FastField name={'purchase_description'}>
+            {({ form: { values }, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'description'} />}
+                className={'form-group--purchase-description'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'description'} />}
+                inline={true}
+              >
+                <TextArea
+                  growVertically={true}
+                  height={280}
+                  {...field}
+                  disabled={!values.purchasable}
+                />
+              </FormGroup>
+            )}
+          </FastField>
         </Col>
       </Row>
     </div>
diff --git a/client/src/services/axios.js b/client/src/services/axios.js
index 604ce052b..2b11da88a 100644
--- a/client/src/services/axios.js
+++ b/client/src/services/axios.js
@@ -1,10 +1,6 @@
 import axios from 'axios';
-import React from 'react';
-import { Intent } from '@blueprintjs/core';
 import { store } from 'store/createStore';
 import { logout } from 'store/authentication/authentication.actions';
-import AppToaster from 'components/AppToaster';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 import { setGlobalErrors } from 'store/globalErrors/globalErrors.actions';
 const http = axios.create();
 
diff --git a/client/src/style/components/Dialog/Dialog.scss b/client/src/style/components/Dialog/Dialog.scss
index 12558e9f7..0c0beb7c1 100644
--- a/client/src/style/components/Dialog/Dialog.scss
+++ b/client/src/style/components/Dialog/Dialog.scss
@@ -8,8 +8,12 @@
     background: #ebf1f5;
   }
 
-  .bp3-spinner{
-    padding-top: 10px;
-    margin-bottom: -10px;
+  &-body{
+    &.is-loading{
+      .bp3-spinner{
+        padding-top: 10px;
+        margin-bottom: -10px;
+      } 
+    }
   }
 }
diff --git a/client/src/style/pages/Items/PageForm.scss b/client/src/style/pages/Items/PageForm.scss
index 9602fac53..6292eae81 100644
--- a/client/src/style/pages/Items/PageForm.scss
+++ b/client/src/style/pages/Items/PageForm.scss
@@ -46,6 +46,14 @@
     .form-group--purchasable {
       margin-bottom: 1rem;
     }
+
+    .form-group--purchase-description,
+    .form-group--sell-description{
+      
+      textarea{
+        width: 100%;
+      }
+    }
   }
 
   #{$self}__section {