chrone: sperate client and server to different repos.

src/containers/ItemsCategories/ItemCategoriesList.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import 'style/pages/ItemsCategories/List.scss';
+
+import { DashboardContentTable, DashboardPageContent } from 'components';
+
+import ItemsCategoriesAlerts from './ItemsCategoriesAlerts';
+import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
+import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
+import ItemCategoriesTable from './ItemCategoriesTable';
+
+import withItemsCategories from './withItemCategories';
+
+/**
+ * Item categories list.
+ */
+function ItemCategoryList({
+  // #withItemsCategories
+  itemsCategoriesTableState
+}) {
+  return (
+    <ItemsCategoriesProvider tableState={itemsCategoriesTableState}>
+      <ItemsCategoryActionsBar />
+
+      <DashboardPageContent>
+        <DashboardContentTable>
+          <ItemCategoriesTable />
+        </DashboardContentTable>
+      </DashboardPageContent>
+      <ItemsCategoriesAlerts />
+    </ItemsCategoriesProvider>
+  );
+}
+
+export default R.compose(
+  withItemsCategories(({ itemsCategoriesTableState }) => ({
+    itemsCategoriesTableState,
+  })),
+)(ItemCategoryList);

src/containers/ItemsCategories/ItemCategoriesTable.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { useItemsCategoriesTableColumns, ActionMenuList } from './components';
+import DataTable from 'components/DataTable';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { useItemsCategoriesContext } from './ItemsCategoriesProvider';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * Items categories table.
+ */
+function ItemsCategoryTable({
+  // #ownProps
+  tableProps,
+
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  // Items categories context.
+  const { isCategoriesLoading, isCategoriesFetching, itemsCategories } =
+    useItemsCategoriesContext();
+
+  // Table columns.
+  const columns = useItemsCategoriesTableColumns();
+
+  // Handle delete Item.
+  const handleDeleteCategory = ({ id }) => {
+    openAlert('item-category-delete', { itemCategoryId: id });
+  };
+
+  // Handle Edit item category.
+  const handleEditCategory = (category) => {
+    openDialog('item-category-form', { action: 'edit', id: category.id });
+  };
+
+  return (
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={itemsCategories}
+      loading={isCategoriesLoading}
+      headerLoading={isCategoriesLoading}
+      progressBarLoading={isCategoriesFetching}
+      expandable={true}
+      sticky={true}
+      selectionColumn={true}
+      TableLoadingRenderer={TableSkeletonRows}
+      noResults={intl.get('there_is_no_items_categories_in_table_yet')}
+      payload={{
+        onDeleteCategory: handleDeleteCategory,
+        onEditCategory: handleEditCategory,
+      }}
+      ContextMenu={ActionMenuList}
+      {...tableProps}
+    />
+  );
+}
+
+export default compose(withDialogActions, withAlertActions)(ItemsCategoryTable);

src/containers/ItemsCategories/ItemsCategoriesAlerts.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ItemCategoryDeleteAlert from 'containers/Alerts/Items/ItemCategoryDeleteAlert';
+// import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Items/ItemCategoryBulkDeleteAlert';
+
+export default function ItemsCategoriesAlerts() {
+  return (
+    <div class="items-categories-alerts">
+      <ItemCategoryDeleteAlert name={'item-category-delete'} />
+      {/* <ItemCategoryBulkDeleteAlert name={'item-categories-bulk-delete'} /> */}
+    </div>
+  );
+}

src/containers/ItemsCategories/ItemsCategoriesProvider.js

@@ -0,0 +1,56 @@
+import React, { createContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useItemsCategories, useResourceMeta } from 'hooks/query';
+import { transformTableStateToQuery, getFieldsFromResourceMeta } from 'utils';
+
+const ItemsCategoriesContext = createContext();
+
+/**
+ * Items categories provider.
+ */
+function ItemsCategoriesProvider({ tableState, ...props }) {
+  // Transformes the table state to query.
+  const query = transformTableStateToQuery(tableState);
+
+  // Items categories list.
+  const {
+    data: { itemsCategories, pagination },
+    isFetching: isCategoriesFetching,
+    isLoading: isCategoriesLoading,
+  } = useItemsCategories(query, { keepPreviousData: true });
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('item_category');
+
+  const state = {
+    isCategoriesFetching,
+    isCategoriesLoading,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceLoading,
+    isResourceFetching,
+
+    itemsCategories,
+    pagination,
+    query,
+  };
+
+  return (
+    <DashboardInsider
+      isLoading={isResourceLoading}
+      name={'items-categories-list'}
+    >
+      <ItemsCategoriesContext.Provider value={state} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useItemsCategoriesContext = () =>
+  React.useContext(ItemsCategoriesContext);
+
+export { ItemsCategoriesProvider, useItemsCategoriesContext };

src/containers/ItemsCategories/ItemsCategoryActionsBar.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Intent,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { If, Icon } from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { AdvancedFilterPopover, DashboardFilterButton } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withItemCategories from './withItemCategories';
+import withItemCategoriesActions from './withItemCategoriesActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+import { useItemsCategoriesContext } from './ItemsCategoriesProvider';
+
+/**
+ * Items categories actions bar.
+ */
+function ItemsCategoryActionsBar({
+  // #withItemCategories
+  itemCategoriesSelectedRows = [],
+  categoriesFilterConditions,
+
+  // 
+  setItemsCategoriesTableState,
+
+  // #withDialog
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  const { fields } = useItemsCategoriesContext();
+
+  const onClickNewCategory = () => {
+    openDialog('item-category-form', {});
+  };
+
+  // Handle the items categories bulk delete.
+  const handelBulkDelete = () => {
+    openAlert('item-categories-bulk-delete', {
+      itemCategoriesIds: itemCategoriesSelectedRows,
+    });
+  };
+
+  console.log(fields, categoriesFilterConditions, 'XXXX');
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="plus" />}
+          text={<T id={'new_category'} />}
+          onClick={onClickNewCategory}
+        />
+        <NavbarDivider />
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: categoriesFilterConditions,
+            defaultFieldKey: 'name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setItemsCategoriesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={categoriesFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={itemCategoriesSelectedRows.length}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handelBulkDelete}
+          />
+        </If>
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withItemCategories(
+    ({ itemCategoriesSelectedRows, itemsCategoriesTableState }) => ({
+      itemCategoriesSelectedRows,
+      categoriesFilterConditions: itemsCategoriesTableState.filterRoles,
+    }),
+  ),
+  withAlertActions,
+  withItemCategoriesActions
+)(ItemsCategoryActionsBar);

src/containers/ItemsCategories/components.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Menu,
+  Popover,
+  Button,
+  Position,
+  MenuItem,
+  MenuDivider,
+  Intent,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { Icon } from 'components';
+import { safeCallback } from 'utils';
+
+/**
+ * Row actions menu list.
+ */
+export function ActionMenuList({
+  row: { original },
+  payload: { onEditCategory, onDeleteCategory },
+}) {
+  
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_category')}
+        onClick={safeCallback(onEditCategory, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        text={intl.get('delete_category')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDeleteCategory, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Table actions cell.
+ */
+export function TableActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionMenuList {...props} />}
+      position={Position.RIGHT_TOP}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve the items categories table columns.
+ */
+export function useItemsCategoriesTableColumns() {
+  
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: intl.get('category_name'),
+        accessor: 'name',
+        width: 220,
+      },
+      
+      {
+        id: 'count',
+        Header: intl.get('count'),
+        accessor: 'count',
+        className: 'count',
+        width: 180,
+      },
+      {
+        id: 'description',
+        Header: intl.get('description'),
+        accessor: 'description',
+        className: 'description',
+        width: 220,
+      }
+    ],
+    [],
+  );
+}

src/containers/ItemsCategories/withItemCategories.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getItemsCategoriesTableStateFactory,
+} from 'store/itemCategories/ItemsCategories.selectors';
+
+export default (mapState) => {
+  const getItemsCategoriesTableState = getItemsCategoriesTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {  
+      itemsCategoriesTableState: getItemsCategoriesTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapState;
+  };
+  return connect(mapStateToProps);
+};

src/containers/ItemsCategories/withItemCategoriesActions.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { setItemsCategoriesTableState } from 'store/itemCategories/itemsCategory.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  setItemsCategoriesTableState: (state) =>
+    dispatch(setItemsCategoriesTableState(state)),
+});
+
+export default connect(null, mapDispatchToProps);

src/containers/ItemsCategories/withItemCategoryDetail.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { getItemCategoryByIdFactory } from 'store/itemCategories/ItemsCategories.selectors';
+
+export default () => {
+  const getCategoryId = getItemCategoryByIdFactory();
+
+  const mapStateToProps = (state, props) => {
+    return {
+      itemCategoryDetail: getCategoryId(state, props),
+    };
+  };
+  return connect(mapStateToProps);
+};