feat: item & inventory.

src/common/abilityOption.js

@@ -0,0 +1,17 @@
+export const AbilitySubject = {
+  Item: 'Item',
+  InventoryAdjustment: 'InventoryAdjustment',
+};
+
+export const ItemAbility = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const InventoryAdjustment = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+};

src/components/Abilities.js

@@ -1,10 +0,0 @@
-import { AbilityBuilder, defineAbility } from '@casl/ability';
-import { createContextualCan } from '@casl/react';
-import { createContext } from 'react';
-
-export const AbilityContext = createContext();
-export const Can = createContextualCan(AbilityContext.Consumer);
-
-export const ability = defineAbility((can, cannot) => {
-  cannot('Item', 'create');
-});

src/components/Can.js

@@ -1,4 +1,29 @@
-import { createCanBoundTo } from '@casl/react';
-import ability from '../components/Config/ability';
+import React from 'react';
+import { Ability } from '@casl/ability';
+import { createContextualCan } from '@casl/react';
 
-export default createCanBoundTo(ability);
+import {
+  ItemAbility,
+  AbilitySubject,
+  InventoryAdjustment,
+} from '../common/abilityOption';
+
+export const AbilityContext = React.createContext();
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+const AbilityContextProvider = (props) => {
+  const ability = new Ability([
+    {
+      subject: [AbilitySubject.Item],
+      action: [ItemAbility.Create, ItemAbility.Edit],
+    },
+  ]);
+
+  return (
+    <AbilityContext.Provider value={ability}>
+      {props.children}
+    </AbilityContext.Provider>
+  );
+};
+
+export default AbilityContextProvider;

src/components/Config/ability.js

@@ -1,10 +0,0 @@
-import { AbilityBuilder } from '@casl/ability';
-// import { AbilitySubject, ItemAbility } from '../../common/abilityOption';
-
-export function defineAbilitiesFor(role) {
-  const { rules, can } = new AbilityBuilder();
-
-  can('create', 'Item');
-
-  return new Ability(rules);
-}

src/components/Dashboard/DashboardProvider.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import AbilityContextProvider from '../../components/Can';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  return children;
+  return <AbilityContextProvider>{children}</AbilityContextProvider>;
 }

src/components/index.js

@@ -59,6 +59,7 @@ import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
 import MoreMenuItems from './MoreMenutItems';
+import { Can } from './Can';
 
 export * from './Dialog';
 export * from './Menu';
@@ -156,4 +157,5 @@ export {
   Card,
   AvaterCell,
   MoreMenuItems,
+  Can,
 };

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js

@@ -7,7 +7,11 @@ import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawer
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, Can } from 'components';
+import {
+  InventoryAdjustment,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -26,17 +30,19 @@ function InventoryAdjustmentDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteInventoryAdjustment}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
+    <Can I={InventoryAdjustment.Delete} a={AbilitySubject.InventoryAdjustment}>
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteInventoryAdjustment}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    </Can>
   );
 }
 

src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js

@@ -10,11 +10,12 @@ import {
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+import { ItemAbility, AbilitySubject } from '../../../common/abilityOption';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -47,20 +48,25 @@ function ItemDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_item'} />}
-          onClick={handleEditItem}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteItem}
-        />
+        <Can I={ItemAbility.Edit} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_item'} />}
+            onClick={handleEditItem}
+          />
+
+          <NavbarDivider />
+        </Can>
+        <Can I={ItemAbility.Delete} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteItem}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/InventoryAdjustments/components.js

@@ -12,10 +12,14 @@ import {
 import intl from 'react-intl-universal';
 import moment from 'moment';
 
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T, Can } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
+import {
+  InventoryAdjustment,
+  AbilitySubject,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -102,20 +106,30 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
       <If condition={!original.is_published}>
-        <MenuItem
-          icon={<Icon icon={'arrow-to-top'} size={16} />}
-          text={intl.get('publish_adjustment')}
-          onClick={safeCallback(onPublish, original)}
-        />
+        <MenuDivider />
+        <Can
+          I={InventoryAdjustment.Create}
+          a={AbilitySubject.InventoryAdjustment}
+        >
+          <MenuItem
+            icon={<Icon icon={'arrow-to-top'} size={16} />}
+            text={intl.get('publish_adjustment')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </Can>
       </If>
-      <MenuItem
-        text={intl.get('delete_adjustment')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can
+        I={InventoryAdjustment.Delete}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <MenuItem
+          text={intl.get('delete_adjustment')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 };

src/containers/Items/ItemsActionsBar.js

@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  Can,
   DashboardActionViewsList,
   AdvancedFilterPopover,
   DashboardFilterButton,
@@ -30,8 +31,7 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
-
-import { Can, AbilityContext } from '../../components/Abilities';
+import { ItemAbility, AbilitySubject } from '../../common/abilityOption';
 
 /**
  * Items actions bar.
@@ -60,8 +60,6 @@ function ItemsActionsBar({
   // Items refresh action.
   const { refresh } = useRefreshItems();
 
-  const { ability } = React.useContext(AbilityContext);
-
   // History context.
   const history = useHistory();
 
@@ -106,14 +104,14 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        {/* <Can I="create" a="Item" ability={ability}> */}
+        <Can I={ItemAbility.Create} a={AbilitySubject.Item}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="plus" />}
             text={<T id={'new_item'} />}
             onClick={onClickNewItem}
           />
-        {/* </Can> */}
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,
@@ -155,11 +153,13 @@ function ItemsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={itemsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={ItemAbility.View} a={AbilitySubject.Item}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={itemsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>

src/containers/Items/components.js

@@ -12,8 +12,13 @@ import {
 import intl from 'react-intl-universal';
 import { isNumber } from 'lodash';
 
-import { FormattedMessage as T, Icon, Money, If } from 'components';
+import { FormattedMessage as T, Icon, Money, If, Can } from 'components';
 import { isBlank, safeCallback } from 'utils';
+import {
+  ItemAbility,
+  InventoryAdjustment,
+  AbilitySubject,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -91,43 +96,58 @@ export function ItemsActionMenuList({
         onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_item')}
-        onClick={safeCallback(onEditItem, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
+      <Can I={ItemAbility.Edit} a={AbilitySubject.Item}>
         <MenuItem
-          text={intl.get('inactivate_item')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivateItem, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_item')}
+          onClick={safeCallback(onEditItem, original)}
         />
+      </Can>
+      <Can I={ItemAbility.Create} a={AbilitySubject.Item}>
+        <MenuItem
+          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('duplicate')}
+          onClick={safeCallback(onDuplicate, original)}
+        />
+      </Can>
+      <If condition={original.active}>
+        <Can I={ItemAbility.View} a={AbilitySubject.Item}>
+          <MenuItem
+            text={intl.get('inactivate_item')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivateItem, original)}
+          />
+        </Can>
       </If>
       <If condition={!original.active}>
-        <MenuItem
-          text={intl.get('activate_item')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivateItem, original)}
-        />
+        <Can I={ItemAbility.View} a={AbilitySubject.Item}>
+          <MenuItem
+            text={intl.get('activate_item')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivateItem, original)}
+          />
+        </Can>
       </If>
       <If condition={original.type === 'inventory'}>
-        <MenuItem
-          text={intl.get('make_adjustment')}
-          icon={<Icon icon={'swap-vert'} iconSize={16} />}
-          onClick={safeCallback(onMakeAdjustment, original)}
-        />
+        <Can
+          I={InventoryAdjustment.Create}
+          a={AbilitySubject.InventoryAdjustment}
+        >
+          <MenuItem
+            text={intl.get('make_adjustment')}
+            icon={<Icon icon={'swap-vert'} iconSize={16} />}
+            onClick={safeCallback(onMakeAdjustment, original)}
+          />
+        </Can>
       </If>
-      <MenuItem
-        text={intl.get('delete_item')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        onClick={safeCallback(onDeleteItem, original)}
-        intent={Intent.DANGER}
-      />
+      <Can I={ItemAbility.Delete} a={AbilitySubject.Item}>
+        <MenuItem
+          text={intl.get('delete_item')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          onClick={safeCallback(onDeleteItem, original)}
+          intent={Intent.DANGER}
+        />
+      </Can>
     </Menu>
   );
 }