Test SNIPE-IT software

woocomerce-order/src/components/asset-management/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+
+class AssetManagement extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            newAssetName: 'Name',
+            newAssetSE: 'SE',
+            newAssetWarranty: 12,
+        };
+    }
+
+    onNewAssetNameChange = target => {
+        this.setState({
+            newAssetName: target.value,
+        });
+    };
+
+    onNewAssetSEChange = target => {
+        this.setState({
+            newAssetSE: target.value,
+        });
+    };
+
+    onNewAssetWarrantyChange = target => {
+        this.setState({
+            newAssetWarranty: target.value,
+        });
+    };
+
+    onCreateNewAssetClicked = () => {
+        this.props.onCreateAsset({
+            name: this.state.newAssetName,
+            serial: this.state.newAssetSE,
+            warranty_months: this.state.newAssetWarranty,
+        });
+    }
+
+
+    render() {
+        const userAssets = [];
+        if (this.props.assets) {
+            this.props.assets.forEach(asset => {
+                userAssets.push(<div className="asset" key={asset.id}>
+                    <span>#{asset.asset_tag}</span>
+                    <span>{asset.name}</span>
+                    <span>{asset.supplier ? asset.supplier.name : ''}</span>
+                    <span>Expires: {asset.warranty_expires ? asset.warranty_expires.formatted : '-'}</span>
+                    <div className="asset-delete" onClick={() => { this.props.onDeleteAsset(asset.id)}}>DELETE</div>
+                </div>);
+            });
+        }
+
+        return (<div className="asset-management">
+            <div className="new-asset">
+                <input className="new-asset-input" onChange={this.onNewAssetNameChange} value={this.state.newAssetName}/>
+                <input className="new-asset-input" onChange={this.onNewAssetSEChange} value={this.state.newAssetSE}/>
+                <input className="new-asset-input" type="number" onChange={this.onNewAssetWarrantyChange} value={this.state.newAssetWarranty}/>
+                <button onClick={this.onCreateNewAssetClicked}>Create new</button>
+            </div>
+            <div className="assets">
+                {userAssets}
+            </div>
+        </div>);
+    }
+}
+
+export default AssetManagement;

woocomerce-order/src/components/index.js

@@ -3,6 +3,7 @@ import Order from './order'
 import Login from './login'
 import Workflow from './workflow';
 import UserDashboard from './user-dashboard';
+import AssetManagement from './asset-management';
 
 import ActionType from '../enums/ActionType';
 
@@ -42,6 +43,12 @@ export const Wiaas = (props) => {
                 >
                     User Dashboard
                 </div>
+                <div
+                    className={getSidebarItemClass(ActionType.ASSET_MANAGEMENT)}
+                    onClick={() => { props.onActionTypeChange(ActionType.ASSET_MANAGEMENT)}}
+                >
+                    Asset Management
+                </div>
             </div>
             <div id="wiaas-container">
                 {props.actionType === ActionType.LOG_IN && <Login  onLogInClicked={props.onLogInClicked}/>}
@@ -52,6 +59,11 @@ export const Wiaas = (props) => {
                     userOrders={props.userOrders}
                     userOrganization={props.userOrganization}
                 />}
+                {props.actionType === ActionType.ASSET_MANAGEMENT && <AssetManagement
+                    assets={props.assets}
+                    onDeleteAsset={props.onDeleteAsset}
+                    onCreateAsset={props.onCreateAsset}
+                />}
             </div>
         </div>
     )