feat(branches): add branches.

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_branche'} />
+      </Button>
+    </React.Fragment>
+  );
+}
+
+export default compose(withDialogActions)(BranchesActions);

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -0,0 +1,36 @@
+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 withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Branches data table.
+ */
+function BranchesDataTable({
+  // #withDialogAction
+  openDialog,
+}) {
+  // Table columns.
+  const columns = useBranchesTableColumns();
+
+  return (
+    <BranchesTable
+      columns={columns}
+      data={[]}
+      // loading={}
+      // progressBarLoading={}
+      TableLoadingRenderer={TableSkeletonRows}
+      ContextMenu={ActionsMenu}
+      payload={{}}
+    />
+  );
+}
+
+export default compose(withDialogActions)(BranchesDataTable);
+
+const BranchesTable = styled(DataTable)``;

src/containers/Preferences/Branches/BranchesProvider.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { Card } from 'components';
+
+const BranchesContext = React.createContext();
+
+/**
+ * Branches data provider.
+ */
+function BranchesProvider({ ...props }) {
+  // Provider state.
+  const provider = {};
+
+  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,
+  Button,
+  Popover,
+  Menu,
+  MenuDivider,
+  Tag,
+  MenuItem,
+  Position,
+} 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: 'branch_name',
+        Header: intl.get('branches.column.branch_name'),
+        accessor: 'branch_name',
+        className: 'branch_name',
+        width: '120',
+        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>
+  );
+}