Merge remote-tracking branch 'origin/feature/Detail'

client/src/components/Details/index.js

@@ -8,10 +8,17 @@ const DIRECTION = {
   HORIZANTAL: 'horizantal',
 };
 
+const DetailsMenuContext = React.createContext();
+const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
+
 /**
  * Details menu.
  */
-export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
+export function DetailsMenu({
+  children,
+  direction = DIRECTION.VERTICAL,
+  minLabelSize,
+}) {
   return (
     <div
       className={classNames('details-menu', {
@@ -19,7 +26,9 @@ export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
         'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
       })}
     >
-      {children}
+      <DetailsMenuContext.Provider value={{ minLabelSize }}>
+        {children}
+      </DetailsMenuContext.Provider>
     </div>
   );
 }
@@ -28,11 +37,22 @@ export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
  * Detail item.
  */
 export function DetailItem({ label, children, name }) {
+  const { minLabelSize } = useDetailsMenuContext();
+
   return (
-    <div className={classNames('detail-item', {
-      [`detail-item--${name}`]: name,
-    })}>
-      <div class="detail-item__label">{label}</div>
+    <div
+      className={classNames('detail-item', {
+        [`detail-item--${name}`]: name,
+      })}
+    >
+      <div
+        style={{
+          'min-width': minLabelSize,
+        }}
+        class="detail-item__label"
+      >
+        {label}
+      </div>
       <div class="detail-item__content">{children}</div>
     </div>
   );

client/src/components/Drawer/DrawerInsider.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+/**
+ * Drawer inside.
+ */
+export function DrawerInsider({
+  loading,
+  children,
+  name,
+  mount = false,
+  className,
+}) {
+  return (
+    <div className={classnames({
+      'drawer__insider': true,
+      'drawer__insider--loading': loading,
+      [`drawer__insider--${name}`]: !!name,
+    }, className)}>
+      <LoadingIndicator loading={loading} mount={mount}>
+        { children }
+      </LoadingIndicator>
+    </div>
+  );
+}

client/src/components/Drawer/DrawerMainTabs.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tabs } from '@blueprintjs/core';
+
+/**
+ * Drawer main tabs.
+ */
+export function DrawerMainTabs({ children, ...restProps }) {
+  return (
+    <div class="drawer__main-tabs">
+      <Tabs animate={true} large={true} {...restProps}>
+        {children}
+      </Tabs>
+    </div>
+  );
+}

client/src/components/DrawersContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer';
-import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
-import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
+// import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer';
+// import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
+// import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
 import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer';
 import AccountDrawer from 'containers/Drawers/AccountDrawer';
 import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer';
@@ -23,9 +23,9 @@ import { DRAWERS } from 'common/drawers';
 export default function DrawersContainer() {
   return (
     <div>
-      <EstimateDrawer name={DRAWERS.EstimateDrawer} />
-      <InvoiceDrawer name={'invoice-drawer'} />
-      <ReceiptDrawer name={'receipt-drawer'} />
+      {/* <EstimateDrawer name={DRAWERS.EstimateDrawer} /> */}
+      {/* <InvoiceDrawer name={'invoice-drawer'} /> */}
+      {/* <ReceiptDrawer name={'receipt-drawer'} /> */}
       <PaymentReceiveDrawer name={'payment-receive-drawer'} />
       <AccountDrawer name={DRAWERS.ACCOUNT_DRAWER} />
       <ManualJournalDrawer name={DRAWERS.JOURNAL_DRAWER} />

client/src/components/TotalLines/TotalLines.module.scss

@@ -0,0 +1,12 @@
+.total_lines {}
+
+
+.total_line {
+    display: flex;
+    border-bottom: 1px solid #d2dde2;
+    
+    :global .amount,
+    :global .title{
+        padding: 8px;
+    }
+}

client/src/components/TotalLines/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import TotalLinesCls from './TotalLines.module.scss';
+
+export function TotalLines({ children, className }) {
+  return (
+    <div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
+      {children}
+    </div>
+  );
+}
+
+export function TotalLine({ title, value, className }) {
+  return (
+    <div
+      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
+    >
+      <div class="title">{title}</div>
+      <div class="amount">{value}</div>
+    </div>
+  );
+}

client/src/components/Utils/Choose.js

@@ -2,32 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import If from './If';
 
-const Choose = props => {
-	let when = null;
-	let otherwise = null;
+const Choose = (props) => {
+  let when = null;
+  let otherwise = null;
 
-	React.Children.forEach(props.children, children => {
-		if (children.props.condition === undefined) {
-			otherwise = children;
-		} else if (!when && children.props.condition === true) {
-			when = children;
-		}
-	});
+  React.Children.forEach(props.children, (children) => {
+    if (children.props.condition === undefined) {
+      otherwise = children;
+    } else if (!when && children.props.condition === true) {
+      when = children;
+    }
+  });
 
-	return when || otherwise;
+  return when || otherwise;
 };
 
 Choose.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 };
 
 Choose.When = If;
 
-Choose.Otherwise = ({render, children}) => render ? render() : children;
+Choose.Otherwise = ({ render, children }) => (render ? render() : children);
 
 Choose.Otherwise.propTypes = {
   children: PropTypes.node,
-  render: PropTypes.func
+  render: PropTypes.func,
 };
 
-export default Choose;
+export default Choose;

client/src/components/index.js

@@ -69,6 +69,9 @@ export * from './Dashboard/DashboardRowsHeightButton';
 export * from './UniversalSearch/UniversalSearch';
 export * from './PdfPreview';
 export * from './Details';
+export * from './Drawer/DrawerInsider';
+export * from './Drawer/DrawerMainTabs';
+export * from './TotalLines/index'
 
 const Hint = FieldHint;