feat(warehouse): add credit & edit & delete warehouse.

src/containers/Preferences/Warehouses/WarehousesGridItems.js

@@ -1,74 +1,56 @@
 import React from 'react';
 import styled from 'styled-components';
+import { ContextMenu2 } from '@blueprintjs/popover2';
+
+import { WarehouseContextMenu, WarehousesGrid } from './components';
+
+import withAlertsActions from '../../Alert/withAlertActions';
+import withDialogActions from '../../Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Warehouse grid items.
+ * @returns
+ */
+function WarehousesGridItems({
+  // #withAlertsActions
+  openAlert,
+  // #withDialogActions
+  openDialog,
+
+  warehouse,
+}) {
+  // Handle edit warehouse.
+  const handleEditWarehouse = () => {
+    openDialog('warehouse-form', { warehouseId: warehouse.id, action: 'edit' });
+  };
+
+  // Handle delete warehouse.
+  const handleDeleteWarehouse = () => {
+    openAlert('warehouse-delete', { warehouseId: warehouse.id });
+  };
 
-function WarehousesGrid({ warehouse }) {
   return (
-    <WarehouseGrid>
-      <WarehouseHeader>
-        <WarehouseTitle>{warehouse.title}</WarehouseTitle>
-        <WarehouseCode>{warehouse.code}</WarehouseCode>
-      </WarehouseHeader>
-      <WarehouseInfoItem>{warehouse.city}</WarehouseInfoItem>
-      <WarehouseInfoItem>{warehouse.country}</WarehouseInfoItem>
-      <WarehouseInfoItem>{warehouse.email}</WarehouseInfoItem>
-      <WarehouseInfoItem>{warehouse.phone}</WarehouseInfoItem>
-    </WarehouseGrid>
+    <ContextMenu2
+      content={
+        <WarehouseContextMenu
+          onEditClick={handleEditWarehouse}
+          onDeleteClick={handleDeleteWarehouse}
+        />
+      }
+    >
+      <WarehousesGrid warehouse={warehouse} />
+    </ContextMenu2>
   );
 }
 
-/**
- * Warehouse Grid.
- * @returns
- */
-function WarehousesGridItems({ warehouses }) {
-  return warehouses.map((warehouse) => (
-    <WarehousesGrid warehouse={warehouse} />
-  ));
-}
-export default WarehousesGridItems;
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+)(WarehousesGridItems);
 
-const WarehouseGrid = styled.div`
+const WarehouseGridWrap = styled.div`
   display: flex;
-  flex-direction: column;
-  border-radius: 3px;
-  width: 300px; // 453px
-  height: 160px; //225px
-  background: #fff;
-  margin: 5px;
-  padding: 16px 12px 10px;
-  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 WarehouseHeader = styled.div`
-  margin: 4px 0px 15px;
-`;
-
-const WarehouseCode = styled.div`
-  display: inline-block;
-  font-size: 11px;
-  color: #6b7176;
-`;
-
-const WarehouseInfoItem = styled.div`
-  display: inline-block;
-  font-size: 12px;
-  color: #000;
-  line-height: 1.3rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
+  flex-wrap: wrap;
+  margin: 15px;
 `;