fix: danger intent fields.

2026-02-18 13:50:31 +00:00 · 2021-08-03 14:30:50 +02:00
parent 15bc34d866
commit aab56662a5
13 changed files with 124 additions and 48 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -6,6 +6,7 @@
    "@babel/core": "7.8.4",
    "@blueprintjs/core": "^3.38.1",
    "@blueprintjs/datetime": "^3.15.2",
+    "@blueprintjs/popover2": "^0.11.1",
    "@blueprintjs/select": "^3.11.2",
    "@blueprintjs/table": "^3.8.3",
    "@blueprintjs/timezone": "^3.6.2",
@@ -135,6 +136,7 @@
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.8",
    "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
    "compression-webpack-plugin": "^6.1.0",
    "http-proxy-middleware": "^1.0.0",
--- a/client/src/components/App.js
+++ b/client/src/components/App.js
@@ -28,7 +28,7 @@ const queryConfig = {
 function GlobalFetchQuery({
  children
 }) {
-  window.localStorage.setItem('lang', 'ar-ly');
+  window.localStorage.setItem('lang', 'en');
  return children
 }

--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
@@ -25,7 +25,12 @@ function DecrementAdjustmentFields() {
              intent={inputIntent({ error, touched })}
              helperText={<ErrorMessage name="quantity_on_hand" />}
            >
-              <InputGroup disabled={true} medium={'true'} {...field} />
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
            </FormGroup>
          )}
        </FastField>
@@ -66,6 +71,7 @@ function DecrementAdjustmentFields() {
                    ),
                  );
                }}
+                intent={inputIntent({ error, touched })}
              />
            </FormGroup>
          )}
@@ -104,6 +110,7 @@ function DecrementAdjustmentFields() {
                    ),
                  );
                }}
+                intent={inputIntent({ error, touched })}
              />
            </FormGroup>
          )}
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
@@ -21,7 +21,12 @@ export default function IncrementAdjustmentFields() {
              intent={inputIntent({ error, touched })}
              helperText={<ErrorMessage name="quantity_on_hand" />}
            >
-              <InputGroup disabled={true} medium={'true'} {...field} />
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
            </FormGroup>
          )}
        </FastField>
@@ -63,6 +68,7 @@ export default function IncrementAdjustmentFields() {
                    ),
                  );
                }}
+                intent={inputIntent({ error, touched })}
              />
            </FormGroup>
          )}
@@ -87,6 +93,7 @@ export default function IncrementAdjustmentFields() {
                onChange={(value) => {
                  setFieldValue('cost', value);
                }}
+                intent={inputIntent({ error, touched })}
              />
            </FormGroup>
          )}
@@ -127,6 +134,7 @@ export default function IncrementAdjustmentFields() {
                    ),
                  );
                }}
+                intent={inputIntent({ error, touched })}
              />
            </FormGroup>
          )}
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
@@ -3,20 +3,18 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';

 const Schema = Yup.object().shape({
-  date: Yup.date()
-    .required()
-    .label(intl.get('date')),
+  date: Yup.date().required().label(intl.get('date')),
  type: Yup.string().required(),
-  adjustment_account_id: Yup.string().required(),
+  adjustment_account_id: Yup.string()
+    .required()
+    .label(intl.get('adjustment_account')),
  item_id: Yup.number().required(),
  reason: Yup.string()
    .required()
    .min(3)
    .max(DATATYPES_LENGTH.TEXT)
    .label(intl.get('reason')),
-  quantity_on_hand: Yup.number()
-    .required()
-    .label(intl.get('qty')),
+  quantity_on_hand: Yup.number().required().label(intl.get('qty')),
  quantity: Yup.number().integer().min(1).required(),
  cost: Yup.number().when(['type'], {
    is: (type) => type === 'increment',
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
@@ -38,7 +38,6 @@ export default function InventoryAdjustmentFormDialogFields() {
  const { accounts } = useInventoryAdjContext();

  // Intl context.
-  

  return (
    <div className={Classes.DIALOG_BODY}>
@@ -65,6 +64,7 @@ export default function InventoryAdjustmentFormDialogFields() {
                    position: Position.BOTTOM,
                    minimal: true,
                  }}
+                  intent={inputIntent({ error, touched })}
                  inputRef={(ref) => (dateFieldRef.current = ref)}
                />
              </FormGroup>
@@ -103,6 +103,7 @@ export default function InventoryAdjustmentFormDialogFields() {
                  selectedItemProp={'value'}
                  textProp={'name'}
                  popoverProps={{ minimal: true }}
+                  intent={inputIntent({ error, touched })}
                />
              </FormGroup>
            )}
@@ -129,6 +130,7 @@ export default function InventoryAdjustmentFormDialogFields() {
              }
              inputProps={{
                placeholder: intl.get('select_adjustment_account'),
+                intent: inputIntent({ error, touched }),
              }}
            />
          </FormGroup>
@@ -144,7 +146,7 @@ export default function InventoryAdjustmentFormDialogFields() {
            helperText={<ErrorMessage name="reference_no" />}
            className={'form-group--reference-no'}
          >
-            <InputGroup {...field} />
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
          </FormGroup>
        )}
      </FastField>
@@ -159,7 +161,12 @@ export default function InventoryAdjustmentFormDialogFields() {
            intent={inputIntent({ error, touched })}
            helperText={<ErrorMessage name={'reason'} />}
          >
-            <TextArea growVertically={true} large={true} {...field} />
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
          </FormGroup>
        )}
      </FastField>
--- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js
@@ -29,6 +29,7 @@ export default function ItemCategoryFormFields() {
            <InputGroup
              medium={true}
              inputRef={(ref) => (categoryNameFieldRef.current = ref)}
+              intent={inputIntent({ error, touched })}
              {...field}
            />
          </FormGroup>
@@ -45,7 +46,12 @@ export default function ItemCategoryFormFields() {
            helperText={<ErrorMessage name="description" />}
            inline={true}
          >
-            <TextArea growVertically={true} large={true} {...field} />
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
          </FormGroup>
        )}
      </FastField>
--- a/client/src/containers/Items/ItemFormPrimarySection.js
+++ b/client/src/containers/Items/ItemFormPrimarySection.js
@@ -109,6 +109,7 @@ export default function ItemFormPrimarySection() {
                <InputGroup
                  medium={true}
                  {...field}
+                  intent={inputIntent({ error, touched })}
                  inputRef={(ref) => (nameFieldRef.current = ref)}
                />
              </FormGroup>
@@ -125,7 +126,7 @@ export default function ItemFormPrimarySection() {
                helperText={<ErrorMessage name={'code'} />}
                inline={true}
              >
-                <InputGroup medium={true} {...field} />
+                <InputGroup medium={true} intent={inputIntent({ error, touched })} {...field} />
              </FormGroup>
            )}
          </FastField>
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -11,7 +11,9 @@ import {
  Classes,
  Intent,
  Switch,
+  Alignment,
 } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -19,6 +21,7 @@ import Icon from 'components/Icon';
 import { If, DashboardActionViewsList } from 'components';

 import { useItemsListContext } from './ItemsListProvider';
+import { useRefreshItems } from 'hooks/query/items';

 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
@@ -43,7 +46,8 @@ function ItemsActionsBar({
  // Items list context.
  const { itemsViews } = useItemsListContext();

-  // React intl.
+  // Items refresh action.
+  const { refresh } = useRefreshItems();

  // History context.
  const history = useHistory();
@@ -69,6 +73,10 @@ function ItemsActionsBar({
    setItemsTableState({ inactiveMode: checked });
  };

+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -125,6 +133,14 @@ function ItemsActionsBar({
          onChange={handleInactiveSwitchChange}
        />
      </NavbarGroup>
+
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
    </DashboardActionsBar>
  );
 }
--- a/client/src/hooks/query/items.js
+++ b/client/src/hooks/query/items.js
@@ -142,6 +142,16 @@ export function useItems(query, props) {
  );
 }

+export function useRefreshItems() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.ITEMS);
+    },
+  }
+}
+
 /**
 * Retrieve details of the given item.
 * @param {number} id - Item id.
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -5,6 +5,7 @@
 // Blueprint framework.
@import '@blueprintjs/core/src/blueprint.scss';
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
+@import "@blueprintjs/popover2";

@import 'basscss';

@@ -325,4 +326,14 @@ html[lang^="ar"] {
 }
 .sidebar-overlay-backdrop{
  background-color: rgba(0, 10, 30, 0.15);
+}
+
+
+.bp3-popover2{
+  box-shadow: 0 0 0;
+}
+
+
+.bp3-tooltip2 .bp3-popover2-arrow:before{
+  box-shadow: 0 0 0;
 }
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -1,4 +1,3 @@
-
 .form {
  &__floating-footer {
    position: fixed;
@@ -14,7 +13,7 @@
  }
 }

-// Form
+// Form form.
 label.bp3-label {
  color: #353535;
  font-weight: 400;
@@ -31,6 +30,7 @@ label.bp3-label {
  }
 }

+// Form input.
 .#{$ns}-input {
  box-shadow: 0 0 0 transparent;
  border: 1px solid #ced4da;
@@ -44,12 +44,13 @@ label.bp3-label {
    box-shadow: 0 0 0 1px #116cd0;
    border-color: #116cd0;
  }
+
  &.bp3-disabled,
  &:disabled {
    background: #e9ecef;
  }

-  .bp3-form-group.bp3-intent-danger > & {
+  .bp3-input-group.bp3-intent-danger & {
    box-shadow: 0 0 0 transparent;
    border-color: #db3737;

@@ -92,6 +93,7 @@ label.bp3-label {
    box-shadow: none;
    border: 1px solid #ced4da;
  }
+
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
@@ -128,8 +130,9 @@ label.bp3-label {
  .bp3-input-group {
    flex: 1 1 auto;
  }
+
  .bp3-control-group {
-    > .input-group-prepend:first-child .input-group-text {
+    >.input-group-prepend:first-child .input-group-text {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
@@ -141,7 +144,9 @@ label.bp3-label {
    display: none;
  }
 }
+
 .bp3-datepicker-caption select {
+
  &,
  &:hover {
    border-color: transparent;
@@ -180,18 +185,20 @@ label.bp3-label {
    padding-right: 25px;
    justify-content: start;

-    &:not([class*="bp3-intent-"]):not(.bp3-minimal){
+    &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
+
      &,
      &:hover {
        outline: none;
        box-shadow: 0 0 0 transparent;
        border: 1px solid #ced4da;
-  
+
        &:not(:disabled) {
          background: #fff;
        }
      }
-      &:focus{
+
+      &:focus {
        box-shadow: 0 0 0 1px #116cd0;
        border-color: #116cd0;
      }
@@ -202,12 +209,12 @@ label.bp3-label {
    width: 100%;
  }

-  .bp3-popover-target.bp3-popover-open{
+  .bp3-popover-target.bp3-popover-open {

    .#{$ns}-button {

      &:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled),
-      &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled){
+      &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled) {
        background-color: #fafafa;
      }
    }
@@ -220,7 +227,7 @@ label.bp3-label {
      left: 0;
      margin: 7px;

-      + .bp3-button-text {
+      +.bp3-button-text {
        padding-left: 20px;
      }
    }
@@ -252,25 +259,25 @@ label.bp3-label {
 }

@mixin control-checked-colors($selector: ':checked') {
-  input#{$selector} ~ .#{$ns}-control-indicator {
+  input#{$selector}~.#{$ns}-control-indicator {
    box-shadow: none;
    background-color: $control-checked-background-color;
    color: $white;
  }

-  &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+  &:hover input#{$selector}~.#{$ns}-control-indicator {
    box-shadow: none;
    background-color: $control-checked-background-color-hover;
    border-color: $control-checked-background-color-active;
  }

-  input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
+  input:not(:disabled):active#{$selector}~.#{$ns}-control-indicator {
    box-shadow: none;
    background-color: $control-checked-background-color-active;
    border-color: $control-checked-background-color-active;
  }

-  input:disabled#{$selector} ~ .#{$ns}-control-indicator {
+  input:disabled#{$selector}~.#{$ns}-control-indicator {
    box-shadow: none;
    background: rgba($control-checked-background-color, 0.5);
  }
@@ -278,20 +285,23 @@ label.bp3-label {

 ///@extend
 .#{$ns}-control {
-  input:checked ~ .#{$ns}-control-indicator {
+  input:checked~.#{$ns}-control-indicator {
    box-shadow: none;
    background-color: transparent;
    background-image: none;
  }
-  &:hover input:checked ~ .#{$ns}-control-indicator {
+
+  &:hover input:checked~.#{$ns}-control-indicator {
    box-shadow: none;
    background-color: transparent;
  }
-  input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
+
+  input:not(:disabled):active:checked~.#{$ns}-control-indicator {
    box-shadow: none;
    background: transparent;
  }
-  input:disabled:checked ~ .#{$ns}-control-indicator {
+
+  input:disabled:checked~.#{$ns}-control-indicator {
    box-shadow: none;
    background: transparent;
  }
@@ -334,7 +344,7 @@ label.bp3-label {
    background-color: transparent;
  }

-  input:not(:disabled):active ~ .#{$ns}-control-indicator {
+  input:not(:disabled):active~.#{$ns}-control-indicator {
    box-shadow: 0 0 0 transparent;
    background: transparent;
  }
@@ -359,7 +369,7 @@ label.bp3-label {
    Styleguide checkbox
  */
  &.#{$ns}-checkbox {
-    &:hover input:indeterminate ~ .#{$ns}-control-indicator {
+    &:hover input:indeterminate~.#{$ns}-control-indicator {
      // box-shadow: 0 0 0 transparent;
    }

@@ -371,6 +381,7 @@ label.bp3-label {
        width: 100%;
      }
    }
+
    @include control-checked-colors(':checked');

    // make :indeterminate look like :checked _for Checkbox only_
@@ -381,12 +392,14 @@ label.bp3-label {
      border-radius: $pt-border-radius;
      background-color: #fff;
    }
-    input:checked ~ .#{$ns}-control-indicator {
+
+    input:checked~.#{$ns}-control-indicator {
      background-image: escape-svg($form-check-input-checked-bg-image);
      border-color: $form-check-input-checked-bg-color;
      background-color: $form-check-input-checked-bg-color;
    }
-    input:indeterminate ~ .#{$ns}-control-indicator {
+
+    input:indeterminate~.#{$ns}-control-indicator {
      background-image: escape-svg($form-check-input-indeterminate-bg-image);
      border-color: $form-check-input-checked-bg-color;
      background-color: $form-check-input-checked-bg-color;
@@ -422,29 +435,27 @@ label.bp3-label {
      }
    }

-    input:checked ~ .#{$ns}-control-indicator {
+    input:checked~.#{$ns}-control-indicator {
      border-color: $form-check-input-checked-bg-color;

      &::before {
-        background-image: radial-gradient(
-          $form-check-input-checked-bg-color 40%,
-          transparent 40%
-        );
+        background-image: radial-gradient($form-check-input-checked-bg-color 40%,
+            transparent 40%);
      }
    }

-    input:checked:disabled ~ .#{$ns}-control-indicator::before {
+    input:checked:disabled~.#{$ns}-control-indicator::before {
      opacity: 0.5;
    }

-    input:focus ~ .#{$ns}-control-indicator {
+    input:focus~.#{$ns}-control-indicator {
      -moz-outline-radius: $control-indicator-size;
    }
  }
 }

 .bp3-menu-item::before,
-.bp3-menu-item > .bp3-icon {
+.bp3-menu-item>.bp3-icon {
  color: #4b5d6b;
 }

@@ -476,4 +487,4 @@ label.bp3-label {
      }
    }
  }
-}
+}
--- a/client/src/style/pages/Dashboard/Dashboard.scss
+++ b/client/src/style/pages/Dashboard/Dashboard.scss
@@ -181,7 +181,6 @@ $dashboard-views-bar-height: 45px;
        }
        .#{$ns}-icon {
          color: #32304a;
-          margin-right: 7px;
        }
        &.#{$ns}-minimal.#{$ns}-intent-danger {
          color: #c23030;