Test SNIPE-IT software

2018-07-23 07:12:19 +02:00
parent 79eabd9cb5
commit 41da7f167d
10 changed files with 2530 additions and 7 deletions
--- a/woocomerce-order/src/App.css
+++ b/woocomerce-order/src/App.css
@@ -139,18 +139,56 @@ div.workflow-step-current {
  margin-right: 20px;
 }

-.user-orders {
+.asset-management {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+
+.user-orders, .assets {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
 }

-.user-orders > div {
-  padding: 20px;
+.user-orders > div, .asset {
+  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
+  align-items: center;
 }
+
+.asset-delete {
+  padding: 8px 12px;
+  border-radius: 3px;
+  color: #d67575;
+  cursor: pointer;
+  border: 1px solid #ccc;
+}
+
+.new-asset {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  padding: 20px;
+}
+
+.new-asset > input {
+  margin: 5px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  padding: 5px;
+  height: 20px;
+}
+
+.new-asset > button {
+  height: 30px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  margin-top: 20px;
+}
--- a/woocomerce-order/src/App.js
+++ b/woocomerce-order/src/App.js
@@ -1,7 +1,18 @@
 import React, { Component } from 'react';
 import './App.css';
 import Wiass from './components';
-import { sendOrder, logIn, retrieveWorkflow, getProducts, getOrders, getUserOrganization } from './actions';
+import {
+    sendOrder,
+    logIn,
+    retrieveWorkflow,
+    getProducts,
+    getOrders,
+    getUserOrganization,
+    getAssets,
+    deleteAsset,
+    createAsset,
+    getAsset,
+} from './actions';

 import ActionType from './enums/ActionType';

@@ -19,6 +30,7 @@ class App extends Component {
            userOrders: undefined,
            userOrganization: undefined,
            currentActionType: ActionType.LOG_IN,
+            assets: [],
        };
    }

@@ -38,6 +50,15 @@ class App extends Component {
                    });
                });
            }
+
+            if (this.state.currentActionType === ActionType.ASSET_MANAGEMENT) {
+                getAssets().then(data => {
+                    console.log(data.rows);
+                    this.setState({
+                        assets: data.rows,
+                    });
+                });
+            }
        });
    };

@@ -114,6 +135,28 @@ class App extends Component {
        return null;
    }

+    onDeleteAsset = id => {
+        deleteAsset(id).then(status => {
+            if (status) {
+                this.setState({
+                    assets: this.state.assets.filter(a => a.id !== id),
+                });
+            }
+        });
+    };
+
+    onCreateAsset = data => {
+        createAsset(data).then(result => {
+            if (result && result.payload) {
+                getAsset(result.payload.id).then(asset => {
+                    this.setState({
+                        assets: this.state.assets.concat([asset]),
+                    });
+                });
+            }
+        });
+    };
+
    render() {
        return (
            <div className="App">
@@ -127,10 +170,13 @@ class App extends Component {
                    onOrderClicked={this.onOrderClicked}
                    onLogInClicked={this.onLogInClicked}
                    onRetrieveWorkflowClicked={this.onRetrieveWorkflowClicked}
+                    onDeleteAsset={this.onDeleteAsset}
+                    onCreateAsset={this.onCreateAsset}
                    products={this.state.products}
                    userInfo={this.state.userInfo}
                    userOrders={this.state.userOrders}
                    userOrganization={this.state.userOrganization}
+                    assets={this.state.assets}
                />
            </div>
        );
--- a/woocomerce-order/src/actions.js
+++ b/woocomerce-order/src/actions.js
@@ -1,5 +1,6 @@
 import fetch from 'cross-fetch';
 import { execute } from './helpers/GravityAPI';
+import uuidv4 from 'uuid/v4';

 var WooCommerceAPI = require('woocommerce-api');
 var Base64 = require('base-64');
@@ -138,4 +139,86 @@ export function getOrders(username) {
    });

    return API.getAsync('orders')
+}
+
+const assetToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImQ5ZjcwNmE1NWJjNjMyYWUzNmY2MWRkMDk5MGZlNzJiYmMyZGVmMWY0NmIyZGE1NGVlOTQyNTBjY2RkMWE2OGRmOTkzOTllYTM4YjY3NTg4In0.eyJhdWQiOiIxIiwianRpIjoiZDlmNzA2YTU1YmM2MzJhZTM2ZjYxZGQwOTkwZmU3MmJiYzJkZWYxZjQ2YjJkYTU0ZWU5NDI1MGNjZGQxYTY4ZGY5OTM5OWVhMzhiNjc1ODgiLCJpYXQiOjE1MzIzMTE0NzcsIm5iZiI6MTUzMjMxMTQ3NywiZXhwIjoxNTYzODQ3NDc3LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.UCQVolMz7XhfeDR0iWGoMVkpAacxNhZ4Lmty2gWimeYdVs9rY2H04KObeHAEjKL0Z2mVoAia_JhdBHHbnqWWdVgJMHIEgo_c3HU2hH2_xqUBrUvUuiVhD9UFAu5-SWkDyT3l2HqF_Imx_YF6LM7Is9AUJW1Ryk7gj5BJXUECFTRWyxMVsxfqZJrCoWv_xfHX45eMZOEpVkvYdRmxvWWW0HVuPg85xeJc-7nSOMmWeWBjQWTmoUAMoIg4Y_UdOAb4tZWGAU7eTUgl7yR8iViDQY45AHpBnTdHoIcfd8VuiiwbuiQ9I3lrnAu7oiNI_THLvVfkjQmGxlg51q0mpS43Uvp0IFX_XbhOGcGbWecTTXXEQX_nX9aijyioH8oWONcMEJycgsnFnE63THU2Ny4n-yU8axjmnvb_zwxUZvv06-jCiyMub2lfJ0o4gZASy1IwwOgirp9bYBCRCb06PJuFDAO7P90CTGjh_qcBX2nf-o8uwVKDmADeebpgWSuB7nTClChc2vw-3BRto6t50tRR5osqGGbVF4zOPmGK_aX86UdykVYBWxv8SScM0ni8_IXgPoCW5JzdsRGQvOQ9JKycoAzlpzL-IvaSJEmyDum6nrI0Atm6JEC1pjBqtxCjNRcQBNv7tYsrj-76FEz35lWiDVMcn09_cIeq6X6wpEK-kMk';
+export function getAssets() {
+    return fetch('http://localhost:5555/api/v1/hardware', {
+        method: 'get',
+        headers: {
+            'Authorization': 'Bearer ' + assetToken,
+            'Accept': 'application/json',
+        }
+    }).then(response => {
+        switch (response.status) {
+            case 401:
+                console.log(response.code)
+                break
+            case 200:
+                return response.json()
+            default:
+                console.log(response.code)
+        }
+    })
+}
+
+export function deleteAsset(id) {
+    return fetch(`http://localhost:5555/api/v1/hardware/${id}`, {
+        method: 'delete',
+        headers: {
+            'Authorization': 'Bearer ' + assetToken,
+            'Accept': 'application/json',
+        }
+    }).then(response => {
+        switch (response.status) {
+            case 200:
+                return true;
+            default:
+                return false;
+        }
+    })
+
+}
+
+export function getAsset(id) {
+    return fetch(`http://localhost:5555/api/v1/hardware/${id}`, {
+        method: 'get',
+        headers: {
+            'Authorization': 'Bearer ' + assetToken,
+            'Accept': 'application/json',
+        },
+    }).then(response => {
+        switch (response.status) {
+            case 200:
+                return response.json();
+            default:
+                return undefined;
+        }
+    })
+}
+
+export function createAsset(data) {
+    const newAsset = Object.assign(data, {
+        asset_tag: uuidv4(),
+        status_id: 1,
+        model_id: 1,
+        supplier_id: 1,
+        purchase_date: "2018-07-23 06:01:29",
+    });
+    return fetch(`http://localhost:5555/api/v1/hardware`, {
+        method: 'post',
+        headers: {
+            'Authorization': 'Bearer ' + assetToken,
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newAsset),
+    }).then(response => {
+        switch (response.status) {
+            case 200:
+                return response.json();
+            default:
+                return false;
+        }
+    })
 }
--- a/woocomerce-order/src/components/asset-management/index.js
+++ b/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;
--- a/woocomerce-order/src/components/index.js
+++ b/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>
    )
--- a/woocomerce-order/src/enums/ActionType.js
+++ b/woocomerce-order/src/enums/ActionType.js
@@ -3,6 +3,7 @@ const actions = {
    LOG_IN: 1,
    WORKFLOW: 2,
    USER_DASHBOARD: 3,
+    ASSET_MANAGEMENT: 4,
 };

 export default actions;