Merge branch 'BIG-316-crud-branches' into feature/multi-dimensions

src/containers/Preferences/Branches/Branches.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import BranchesDataTable from './BranchesDataTable';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+function Branches({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('branches.label'));
+  }, [changePreferencesPageTitle]);
+
+  return <BranchesDataTable />;
+}
+export default compose(withDashboardActions)(Branches);

src/containers/Preferences/Branches/BranchesActions.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+
+import { FormattedMessage as T, Icon } from 'components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function BranchesActions({
+  //#ownProps
+  openDialog,
+}) {
+  const handleClickNewBranche = () => {
+    openDialog('branch-form');
+  };
+
+  return (
+    <React.Fragment>
+      <Button
+        icon={<Icon icon="plus" iconSize={12} />}
+        onClick={handleClickNewBranche}
+        intent={Intent.PRIMARY}
+      >
+        <T id={'branches.label.new_branch'} />
+      </Button>
+    </React.Fragment>
+  );
+}
+
+export default compose(withDialogActions)(BranchesActions);

src/containers/Preferences/Branches/BranchesAlerts.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BranchDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Branches/BranchDeleteAlert'),
+);
+
+export default [{ name: 'branch-delete', component: BranchDeleteAlert }];

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import { useBranchesTableColumns, ActionsMenu } from './components';
+import { useBranchesContext } from './BranchesProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Branches data table.
+ */
+function BranchesDataTable({
+  // #withDialogAction
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  // Table columns.
+  const columns = useBranchesTableColumns();
+
+  const { branches, isBranchesLoading, isBranchesFetching } =
+    useBranchesContext();
+
+  const handleEditBranch = ({ id }) => {
+    openDialog('branch-form', { branchId: id, action: 'edit' });
+  };
+
+  const handleDeleteBranch = ({ id }) => {
+    openAlert('branch-delete', { branchId: id });
+  };
+
+  return (
+    <BranchesTable
+      columns={columns}
+      data={branches}
+      loading={isBranchesLoading}
+      headerLoading={isBranchesLoading}
+      progressBarLoading={isBranchesFetching}
+      TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditBranch,
+        onDelete: handleDeleteBranch,
+      }}
+    />
+  );
+}
+
+export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
+
+const BranchesTable = styled(DataTable)``;

src/containers/Preferences/Branches/BranchesProvider.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { Card } from 'components';
+import { useBranches } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
+
+const BranchesContext = React.createContext();
+
+/**
+ * Branches data provider.
+ */
+function BranchesProvider({ ...props }) {
+  // Fetches the branches list.
+  const {
+    isLoading: isBranchesLoading,
+    isFetching: isBranchesFetching,
+    data: branches,
+  } = useBranches();
+
+  // Provider state.
+  const provider = {
+    branches,
+    isBranchesLoading,
+    isBranchesFetching,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_BRANCHES,
+      )}
+    >
+      <BrachesPreferencesCard>
+        <BranchesContext.Provider value={provider} {...props} />
+      </BrachesPreferencesCard>
+    </div>
+  );
+}
+
+const useBranchesContext = () => React.useContext(BranchesContext);
+export { BranchesProvider, useBranchesContext };
+
+const BrachesPreferencesCard = styled(Card)`
+  padding: 0;
+`;

src/containers/Preferences/Branches/components.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+
+import { safeCallback } from 'utils';
+import { Icon } from 'components';
+
+/**
+ * Context menu of Branches.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onDelete },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('branches.action.edit_branch')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('branches.action.delete_branch')}
+        onClick={safeCallback(onDelete, original)}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve branches table columns
+ * @returns
+ */
+export function useBranchesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: intl.get('branches.column.branch_name'),
+        accessor: 'name',
+        className: 'name',
+        width: '120',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        id: 'code',
+        Header: intl.get('branches.column.code'),
+        accessor: 'code',
+        className: 'code',
+        width: '100',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('branches.column.address'),
+        accessor: 'address',
+        className: 'address',
+        width: '180',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('branches.column.phone_number'),
+        accessor: 'phone_number',
+        className: 'phone_number',
+        width: '120',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Preferences/Branches/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { BranchesProvider } from './BranchesProvider';
+import Branches from './Branches';
+
+/**
+ * Branches .
+ */
+export default function BranchesPreferences() {
+  return (
+    <BranchesProvider>
+      <Branches />
+    </BranchesProvider>
+  );
+}