feat: add customer & vendor ability.

2026-02-15 12:20:31 +00:00 · 2021-11-23 21:26:34 +02:00
parent 1cba4b5f18
commit 6ec86d3cf7
7 changed files with 214 additions and 141 deletions
--- a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
+++ b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
  If,
  Icon,
+  Can,
  FormattedMessage as T,
  DashboardActionViewsList,
  AdvancedFilterPopover,
@@ -29,6 +30,10 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
+import {
+  Customer_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';

 import { compose } from 'utils';

@@ -103,15 +108,15 @@ function CustomerActionsBar({
          onChange={handleTabChange}
        />
        <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_customer'} />}
-          onClick={onClickNewCustomer}
-        />
-        <NavbarDivider />
-
+        <Can I={Customer_Abilities.Create} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_customer'} />}
+            onClick={onClickNewCustomer}
+          />
+          <NavbarDivider />
+        </Can>
        <AdvancedFilterPopover
          advancedFilterProps={{
            conditions: customersFilterConditions,
@@ -152,11 +157,13 @@ function CustomerActionsBar({
          onChange={handleTableRowSizeChange}
        />
        <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={accountsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={accountsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
      </NavbarGroup>
      <NavbarGroup align={Alignment.RIGHT}>
        <Button
--- a/src/containers/Customers/CustomersLanding/components.js
+++ b/src/containers/Customers/CustomersLanding/components.js
@@ -4,7 +4,11 @@ import clsx from 'classnames';

 import intl from 'react-intl-universal';

-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import {
+  Customer_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';

 import { safeCallback } from 'utils';

@@ -29,37 +33,46 @@ export function ActionsMenu({
        text={intl.get('view_details')}
        onClick={safeCallback(onViewDetails, original)}
      />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_customer')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
+      <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
+        <MenuDivider />
+
        <MenuItem
-          text={intl.get('inactivate_customer')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_customer')}
+          onClick={safeCallback(onEdit, original)}
        />
-      </If>
-      <If condition={!original.active}>
+      </Can>
+      <Can I={Customer_Abilities.Create} a={AbilitySubject.Customer}>
        <MenuItem
-          text={intl.get('activate_customer')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('duplicate')}
+          onClick={safeCallback(onDuplicate, original)}
        />
-      </If>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_customer')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_customer')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_customer')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Customer_Abilities.Delete} a={AbilitySubject.Customer}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_customer')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
    </Menu>
  );
 }
--- a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js
+++ b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js
@@ -21,8 +21,15 @@ import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';

-import { Icon, FormattedMessage as T } from 'components';
-
+import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  Invoice_Abilities,
+  Estimate_Abilities,
+  Receipt_Abilities,
+  Payment_Receive_Abilities,
+  Customer_Abilities,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';

 /**
@@ -62,7 +69,7 @@ function CustomerDetailsActionsBar({
  const handleDeleteCustomer = () => {
    openAlert(`customer-delete`, { contactId: customerId });
  };
-  
+
  const handleEditContact = () => {
    history.push(`/customers/${customerId}/edit`);
    closeDrawer('customer-details-drawer');
@@ -74,22 +81,34 @@ function CustomerDetailsActionsBar({
        <Popover
          content={
            <Menu>
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_invoice'} />}
-                onClick={handleNewInvoiceClick}
-              />
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_estimate'} />}
-                onClick={handleNewEstimateClick}
-              />
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_receipt'} />}
-                onClick={handleNewReceiptClick}
-              />
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_payment'} />}
-                onClick={handleNewPaymentClick}
-              />
+              <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_invoice'} />}
+                  onClick={handleNewInvoiceClick}
+                />
+              </Can>
+              <Can I={Estimate_Abilities.Create} a={AbilitySubject.Estimate}>
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_estimate'} />}
+                  onClick={handleNewEstimateClick}
+                />
+              </Can>
+              <Can I={Receipt_Abilities.Create} a={AbilitySubject.Receipt}>
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_receipt'} />}
+                  onClick={handleNewReceiptClick}
+                />
+              </Can>
+
+              <Can
+                I={Payment_Receive_Abilities.Create}
+                a={AbilitySubject.PaymentReceive}
+              >
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
            </Menu>
          }
          minimal={true}
@@ -104,21 +123,24 @@ function CustomerDetailsActionsBar({
        </Popover>

        <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={intl.get('customer.drawer.action.edit')}
-          onClick={handleEditContact}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteCustomer}
-        />
+        <Can I={Customer_Abilities.Edit} a={AbilitySubject.Customer}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={intl.get('customer.drawer.action.edit')}
+            onClick={handleEditContact}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={Customer_Abilities.Delete} a={AbilitySubject.Customer}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCustomer}
+          />
+        </Can>
      </NavbarGroup>
    </DashboardActionsBar>
  );
--- a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js
+++ b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js
@@ -20,8 +20,13 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';

-import { Icon, FormattedMessage as T } from 'components';
-
+import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  Invoice_Abilities,
+  Payment_Made_Abilities,
+  Vendor_Abilities,
+} from '../../../common/abilityOption';
 import { safeCallback, compose } from 'utils';

 /**
@@ -64,14 +69,21 @@ function VendorDetailsActionsBar({
        <Popover
          content={
            <Menu>
-              <MenuItem
-                text={<T id={'vendor.drawer.action.new_invoice'} />}
-                onClick={handleNewInvoiceClick}
-              />
-              <MenuItem
-                text={<T id={'vendor.drawer.action.new_payment'} />}
-                onClick={handleNewPaymentClick}
-              />
+              <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
+                <MenuItem
+                  text={<T id={'vendor.drawer.action.new_invoice'} />}
+                  onClick={handleNewInvoiceClick}
+                />
+              </Can>
+              <Can
+                I={Payment_Made_Abilities.Create}
+                a={AbilitySubject.PaymentMade}
+              >
+                <MenuItem
+                  text={<T id={'vendor.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
            </Menu>
          }
          minimal={true}
@@ -84,23 +96,25 @@ function VendorDetailsActionsBar({
            icon={<Icon icon={'plus'} />}
          />
        </Popover>
-
        <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'vendor.drawer.action.edit'} />}
-          onClick={safeCallback(onEditContact)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'vendor.drawer.action.delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteContact)}
-        />
+        <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'vendor.drawer.action.edit'} />}
+            onClick={safeCallback(onEditContact)}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={Vendor_Abilities.Delete} a={AbilitySubject.Vendor}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'vendor.drawer.action.delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteContact)}
+          />
+        </Can>
      </NavbarGroup>
    </DashboardActionsBar>
  );
--- a/src/containers/Items/components.js
+++ b/src/containers/Items/components.js
@@ -110,7 +110,7 @@ export function ItemsActionMenuList({
          onClick={safeCallback(onDuplicate, original)}
        />
      </Can>
-      <Can I={Item_Abilities.View} a={AbilitySubject.Item}>
+      <Can I={Item_Abilities.Edit} a={AbilitySubject.Item}>
        <If condition={original.active}>
          <MenuItem
            text={intl.get('inactivate_item')}
@@ -118,8 +118,7 @@ export function ItemsActionMenuList({
            onClick={safeCallback(onInactivateItem, original)}
          />
        </If>
-      </Can>
-      <Can I={Item_Abilities.Edit} a={AbilitySubject.Item}>
+
        <If condition={!original.active}>
          <MenuItem
            text={intl.get('activate_item')}
--- a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -13,6 +13,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
  If,
+  Can,
  FormattedMessage as T,
  DashboardActionViewsList,
  DashboardFilterButton,
@@ -29,7 +30,10 @@ import withVendors from './withVendors';

 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
-
+import {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';

 /**
@@ -90,13 +94,15 @@ function VendorActionsBar({
          onChange={handleTabChange}
        />
        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_vendor'} />}
-          onClick={onClickNewVendor}
-        />
-        <NavbarDivider />
+        <Can I={VendorActionsBar.Create} a={AbilitySubject.Vendor}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_vendor'} />}
+            onClick={onClickNewVendor}
+          />
+          <NavbarDivider />
+        </Can>
        <AdvancedFilterPopover
          advancedFilterProps={{
            conditions: vendorsFilterConditions,
--- a/src/containers/Vendors/VendorsLanding/components.js
+++ b/src/containers/Vendors/VendorsLanding/components.js
@@ -10,7 +10,11 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';

-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { safeCallback, firstLettersArgs } from 'utils';

 /**
@@ -34,37 +38,45 @@ export function ActionsMenu({
        text={intl.get('view_details')}
        onClick={safeCallback(onViewDetails, original)}
      />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_vendor')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
+      <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
+        <MenuDivider />
        <MenuItem
-          text={intl.get('inactivate_item')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_vendor')}
+          onClick={safeCallback(onEdit, original)}
        />
-      </If>
-      <If condition={!original.active}>
+      </Can>
+      <Can I={Vendor_Abilities.Create} a={AbilitySubject.Customer}>
        <MenuItem
-          text={intl.get('activate_item')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('duplicate')}
+          onClick={safeCallback(onDuplicate, original)}
        />
-      </If>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_vendor')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_item')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_item')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Vendor_Abilities.Delete} a={AbilitySubject.Vendor}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_vendor')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
    </Menu>
  );
 }