From 86710b3ba8a70c3aa936edb7fb1c31b317fc0fb0 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 30 Jan 2022 18:04:36 +0200 Subject: [PATCH] feat(warehouse) add warehouse gird. --- .../Preferences/Warehouses/Warehouses.js | 60 ++++++++++++++++ .../Warehouses/WarehousesGridItems.js | 69 +++++++++++++++++++ .../Preferences/Warehouses/WarehousesList.js | 24 +++++++ .../Warehouses/WarehousesProvider.js | 24 +++++++ .../Preferences/Warehouses/components.js | 37 ++++++++++ .../Preferences/Warehouses/index.js | 15 ++++ src/lang/en/index.json | 5 +- src/routes/preferences.js | 6 ++ 8 files changed, 239 insertions(+), 1 deletion(-) create mode 100644 src/containers/Preferences/Warehouses/Warehouses.js create mode 100644 src/containers/Preferences/Warehouses/WarehousesGridItems.js create mode 100644 src/containers/Preferences/Warehouses/WarehousesList.js create mode 100644 src/containers/Preferences/Warehouses/WarehousesProvider.js create mode 100644 src/containers/Preferences/Warehouses/components.js create mode 100644 src/containers/Preferences/Warehouses/index.js diff --git a/src/containers/Preferences/Warehouses/Warehouses.js b/src/containers/Preferences/Warehouses/Warehouses.js new file mode 100644 index 000000000..18e8a1f36 --- /dev/null +++ b/src/containers/Preferences/Warehouses/Warehouses.js @@ -0,0 +1,60 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ContextMenu2 } from '@blueprintjs/popover2'; + +import WarehousesGridItems from './WarehousesGridItems'; +import { WarehouseContextMenu } from './components'; +import withAlertsActions from '../../Alert/withAlertActions'; +import withDialogActions from '../../Dialog/withDialogActions'; +import { compose } from 'utils'; + +const WAREHOUSE = [ + { + title: 'Warehouse #1', + code: '1001', + city: 'City', + email: 'email@emial.com', + phone: '09xxxxxxxx', + }, + { + title: 'Warehouse #2', + code: '100', + city: 'City', + email: 'email@emial.com', + phone: '09xxxxxxxx', + }, + { + title: 'Warehouse #2', + code: '100', + city: 'City', + email: 'email@emial.com', + phone: '09xxxxxxxx', + }, +]; + +/** + * Warehouses. + * @returns + */ +function Warehouses({ + // #withAlertsActions + openAlert, + // #withDialogActions + openDialog, +}) { + return ( + }> + + + + + ); +} + +export default compose(withAlertsActions, withDialogActions)(Warehouses); + +const WarehouseGridWrap = styled.div` + display: flex; + flex-wrap: wrap; + margin: 15px; +`; diff --git a/src/containers/Preferences/Warehouses/WarehousesGridItems.js b/src/containers/Preferences/Warehouses/WarehousesGridItems.js new file mode 100644 index 000000000..74e7bd85a --- /dev/null +++ b/src/containers/Preferences/Warehouses/WarehousesGridItems.js @@ -0,0 +1,69 @@ +import React from 'react'; +import styled from 'styled-components'; + +function WarehousesGrid({ warehouse }) { + return ( + + {warehouse.title} + {warehouse.code} + {warehouse.city} + {warehouse.country} + {warehouse.email} + {warehouse.phone} + + ); +} + +/** + * Warehouse Grid. + * @returns + */ +function WarehousesGridItems({ warehouses }) { + return warehouses.map((warehouse) => ( + + )); +} +export default WarehousesGridItems; + +const WarehouseGrid = styled.div` + display: flex; + flex-direction: column; + border-radius: 3px; + width: 300px; // 453px + height: 160px; //225px + background: #fff; + margin: 5px; + padding: 10px 12px; + border: 1px solid #c8cad0; //#CFD1D6 + transition: all 0.1s ease-in-out; + + &:hover { + border-color: #0153cc; + } +`; + +const WarehouseTitle = styled.div` + font-size: 14px; //22px + font-style: inherit; + color: #000; + white-space: nowrap; + font-weight: 500; + line-height: 1; +`; + +const WarehouseCode = styled.div` + display: inline-block; + font-size: 11px; + color: #6b7176; + margin: 4px 0px 15px; +`; + +const WarehouseInfoItem = styled.div` + display: inline-block; + font-size: 12px; + color: #000; + line-height: 1.3rem; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; +`; diff --git a/src/containers/Preferences/Warehouses/WarehousesList.js b/src/containers/Preferences/Warehouses/WarehousesList.js new file mode 100644 index 000000000..094e0d5d4 --- /dev/null +++ b/src/containers/Preferences/Warehouses/WarehousesList.js @@ -0,0 +1,24 @@ +import React from 'react'; +import intl from 'react-intl-universal'; + +import Warehouses from './Warehouses'; +import withDashboardActions from 'containers/Dashboard/withDashboardActions'; + +import { compose } from 'utils'; + +/** + * Warehouses List. + * @returns + */ +function WarehousesList({ + // #withDashboardActions + changePreferencesPageTitle, +}) { + React.useEffect(() => { + changePreferencesPageTitle(intl.get('warehouses.label')); + }, [changePreferencesPageTitle]); + + return ; +} + +export default compose(withDashboardActions)(WarehousesList); diff --git a/src/containers/Preferences/Warehouses/WarehousesProvider.js b/src/containers/Preferences/Warehouses/WarehousesProvider.js new file mode 100644 index 000000000..c42465b91 --- /dev/null +++ b/src/containers/Preferences/Warehouses/WarehousesProvider.js @@ -0,0 +1,24 @@ +import React from 'react'; +import classNames from 'classnames'; +import { CLASSES } from 'common/classes'; +import styled from 'styled-components'; + +const WarehousesContext = React.createContext(); + +/** + * Warehouses data provider. + */ +function WarehousesProvider({ ...props }) { + // Provider state. + const provider = {}; + + return ( +
+ +
+ ); +} + +const useWarehousesContext = () => React.useContext(WarehousesContext); + +export { WarehousesProvider, useWarehousesContext }; diff --git a/src/containers/Preferences/Warehouses/components.js b/src/containers/Preferences/Warehouses/components.js new file mode 100644 index 000000000..1ab35654b --- /dev/null +++ b/src/containers/Preferences/Warehouses/components.js @@ -0,0 +1,37 @@ +import React from 'react'; +import intl from 'react-intl-universal'; + +import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core'; +import { If, Icon, Can } from '../../../components'; +import { safeCallback } from 'utils'; + +/** + * Warehouse context menu. + */ +export function WarehouseContextMenu({ + onEditClick, + onDeleteClick, + onPrimary, +}) { + return ( + + } + text={intl.get('warehouses.action.edit_warehouse')} + onClick={safeCallback(onEditClick)} + /> + } + text={intl.get('warehouses.action.make_as_parimary')} + onClick={safeCallback(onPrimary)} + /> + + } + intent={Intent.DANGER} + onClick={safeCallback(onDeleteClick)} + /> + + ); +} diff --git a/src/containers/Preferences/Warehouses/index.js b/src/containers/Preferences/Warehouses/index.js new file mode 100644 index 000000000..65ec45d5a --- /dev/null +++ b/src/containers/Preferences/Warehouses/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { WarehousesProvider } from './WarehousesProvider'; +import Warehouses from './WarehousesList'; + +/** + * Warehouses Preferences. + * @returns + */ +export default function WarehousesPerences() { + return ( + + + + ); +} diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 1746c370f..a78695c85 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1786,5 +1786,8 @@ "warehouse_locations.label":"Warehouses Locations", "warehouse_locations.column.warehouse_name":"Warehouse name", "warehouse_locations.column.quantity":"Quantity", - "warehouse_locations.column.available_for_sale":"Available for sale" + "warehouse_locations.column.available_for_sale":"Available for sale", + "warehouses.action.edit_warehouse":"Edit Warehouse", + "warehouses.action.delete_warehouse":"Delete Warehouse", + "warehouses.action.make_as_parimary":"Mark as Primary" } \ No newline at end of file diff --git a/src/routes/preferences.js b/src/routes/preferences.js index 9fc454ddd..b4200758e 100644 --- a/src/routes/preferences.js +++ b/src/routes/preferences.js @@ -7,6 +7,7 @@ import Currencies from 'containers/Preferences/Currencies/Currencies'; import Item from 'containers/Preferences/Item'; import SMSIntegration from '../containers/Preferences/SMSIntegration'; import DefaultRoute from '../containers/Preferences/DefaultRoute'; +import Warehouses from '../containers/Preferences/Warehouses'; const BASE_URL = '/preferences'; @@ -36,6 +37,11 @@ export default [ component: Currencies, exact: true, }, + { + path: `${BASE_URL}/warehouses`, + component: Warehouses, + exact: true, + }, { path: `${BASE_URL}/accountant`, component: Accountant,