chrone: sperate client and server to different repos.

src/containers/Items/ItemFormPrimarySection.js

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  RadioGroup,
+  Classes,
+  Radio,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { ErrorMessage, FastField } from 'formik';
+import {
+  CategoriesSelectList,
+  Hint,
+  Col,
+  Row,
+  FieldRequiredHint,
+} from 'components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import { useItemFormContext } from './ItemFormProvider';
+import { handleStringChange, inputIntent } from 'utils';
+import { categoriesFieldShouldUpdate } from './utils';
+
+/**
+ * Item form primary section.
+ */
+export default function ItemFormPrimarySection() {
+  // Item form context.
+  const { isNewMode, item, itemsCategories } = useItemFormContext();
+
+  const nameFieldRef = useRef(null);
+
+  useEffect(() => {
+    // Auto focus item name field once component mount.
+    if (nameFieldRef.current) {
+      nameFieldRef.current.focus();
+    }
+  }, []);
+
+  const itemTypeHintContent = (
+    <>
+      <div class="mb1">
+        <FormattedHTMLMessage id={'services_that_you_provide_to_customers'} />
+      </div>
+      <div class="mb1">
+        <FormattedHTMLMessage id={'products_you_buy_and_or_sell'} />
+      </div>
+      <div class="mb1">
+        <FormattedHTMLMessage
+          id={'products_you_buy_and_or_sell_but_don_t_need'}
+        />
+      </div>
+    </>
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+      {/*----------- Item type ----------*/}
+      <FastField name={'type'}>
+        {({ form, field: { value }, meta: { touched, error } }) => (
+          <FormGroup
+            medium={true}
+            label={<T id={'item_type'} />}
+            labelInfo={
+              <span>
+                <FieldRequiredHint />
+                <Hint
+                  content={itemTypeHintContent}
+                  position={Position.BOTTOM_LEFT}
+                />
+              </span>
+            }
+            className={'form-group--item-type'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="item_type" />}
+            inline={true}
+          >
+            <RadioGroup
+              inline={true}
+              onChange={handleStringChange((_value) => {
+                form.setFieldValue('type', _value);
+              })}
+              selectedValue={value}
+              disabled={!isNewMode && item.type === 'inventory'}
+            >
+              <Radio label={<T id={'service'} />} value="service" />
+              <Radio label={<T id={'non_inventory'} />} value="non-inventory" />
+              <Radio label={<T id={'inventory'} />} value="inventory" />
+            </RadioGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      <Row>
+        <Col xs={7}>
+          {/*----------- Item name ----------*/}
+          <FastField name={'name'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'item_name'} />}
+                labelInfo={<FieldRequiredHint />}
+                className={'form-group--item-name'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'name'} />}
+                inline={true}
+              >
+                <InputGroup
+                  medium={true}
+                  {...field}
+                  intent={inputIntent({ error, touched })}
+                  inputRef={(ref) => (nameFieldRef.current = ref)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*----------- SKU ----------*/}
+          <FastField name={'code'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'item_code'} />}
+                className={'form-group--item_code'}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'code'} />}
+                inline={true}
+              >
+                <InputGroup medium={true} intent={inputIntent({ error, touched })} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*----------- Item category ----------*/}
+          <FastField
+            name={'category_id'}
+            categories={itemsCategories}
+            shouldUpdate={categoriesFieldShouldUpdate}
+          >
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'category'} />}
+                inline={true}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="category_id" />}
+                className={classNames('form-group--category', Classes.FILL)}
+              >
+                <CategoriesSelectList
+                  categories={itemsCategories}
+                  selecetedCategoryId={value}
+                  onCategorySelected={(category) => {
+                    form.setFieldValue('category_id', category.id);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={3}>
+          {/* <Dragzone
+            initialFiles={initialAttachmentFiles}
+            onDrop={handleDropFiles}
+            onDeleteFile={handleDeleteFile}
+            hint={'Attachments: Maxiumum size: 20MB'}
+            className={'mt2'}
+          /> */}
+        </Col>
+      </Row>
+    </div>
+  );
+}