Skip to content

Commit

Permalink
feat: implement view button for software asset
Browse files Browse the repository at this point in the history
  • Loading branch information
LiamTownsley committed Nov 16, 2023
1 parent d8c3b0e commit 67e1657
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 11 deletions.
2 changes: 2 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import EditAsset from './pages/assets/hardware/EditAsset';
import SoftwareAssets from './pages/assets/software/SoftwareAssets';
import CreateEmployee from './pages/employee/CreateEmployee';
import CreateSoftwareAsset from './pages/assets/software/CreateSoftwareAsset';
import SoftwareAsset from './pages/assets/software/SoftwareAsset';

function App() {
const [user, setUser] = useState(undefined as any);
Expand All @@ -40,6 +41,7 @@ function App() {
<Route path="/assets/:id" element={<Asset setUser={setUser} user={user} />} />
<Route path="/assets/create" element={<CreateAssets setUser={setUser} user={user} />} />
<Route path="/software" element={<SoftwareAssets setUser={setUser} user={user} />} />
<Route path="/software/:id" element={<SoftwareAsset setUser={setUser} user={user} />} />
<Route path="/software/create" element={<CreateSoftwareAsset setUser={setUser} user={user} />} />
<Route path="/edit/assets/:id" element={<EditAsset setUser={setUser} user={user} />} />
<Route path="/employees" element={<Employees setUser={setUser} user={user} />} />
Expand Down
70 changes: 70 additions & 0 deletions src/components/assets/software/SoftwareAssetInfoTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Component } from "react";
import PillButton from "../../PillButton";
import { SoftwareAsset } from "./SoftwareAsset";
import { ISoftwareAsset } from "../../../interfaces/Asset";
import { HardwareAsset } from "../hardware/HardwareAsset";
import { Link } from "react-router-dom";

class SoftwareAssetInfoTable extends Component<{ asset: SoftwareAsset }, { isLoaded: boolean, data?: HardwareAsset }> {
constructor(props: any) {
super(props);
this.state = {
isLoaded: false,
data: undefined
};
}

componentDidMount() {
if (this.props.asset.parent_hardware?.id) {
fetch(`http://127.0.0.1:3001/api/assets/hardware/${this.props.asset.parent_hardware?.id.toString()}`)
.then((res) => res.json())
.then((res: any) => {
if (res) {
const parent = new HardwareAsset(res);
this.setState({ isLoaded: true, data: parent });
}
});
}
}

render() {
return (
<table id="single-asset-table" className="table">
<tr>
<th><i className="fa fa-id-card-o" /> Unique Asset ID</th>
<td>{this.props.asset._id.toString() ?? '-'}</td>
</tr>
<tr>
<th><i className="fa fa-pencil-square-o" /> Name</th>
<td>{this.props.asset.name ?? '-'}</td>
</tr>
<tr>
<th><i className="fa fa-cogs" /> Manufacturer</th>
<td>{this.props.asset.manufacturer ?? '-'}</td>
</tr>
<tr>
<th><i className="fa fa-code-fork" /> Version</th>
<td>{this.props.asset.version ?? '-'}</td>
</tr>
<tr>
<th><i className="fa fa-wifi" /> Parent Hardware</th>
<td><Link to={`/assets/${this.state.data?._id}`}>{this.state.data?.name}</Link> ({this.state.data?.ip})</td>
</tr>
{/* <tr>
<th><i className="fa fa-user" /> Supervising Employee</th>
<td>{(this.state.data) ? <><Link to={`/employees/${this.state.data._id}`}>{this.state.data?.forename + ' ' + this.state.data.surname ?? '-'}</Link><code>(ID: {this.state.data?._id.toString() ?? '-'})</code></> : '-'}</td>
</tr> */}
{/* <tr>
<th><i className="fa fa-calendar" /> Purchase Date</th>
<td>{this.props.asset.date}</td>
</tr>
<tr>
<th><i className="fa fa-sticky-note-o" /> Note</th>
<td>{this.props.asset.note}</td>
</tr> */}
</table>
)
}
}

export default SoftwareAssetInfoTable;
4 changes: 2 additions & 2 deletions src/components/assets/software/SoftwareAssetTable.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { TextBlock } from "react-placeholder/lib/placeholders";
import { Link } from "react-router-dom";
import { Component } from 'react';
import { SoftwareAsset } from "./SoftwareAsset";
import { SoftwareAsset } from '../../../components/assets/software/SoftwareAsset';

class SoftwareAssetTable extends Component<{ assets: SoftwareAsset[] }> {
constructor(props: any) {
Expand All @@ -15,7 +15,7 @@ class SoftwareAssetTable extends Component<{ assets: SoftwareAsset[] }> {

render() {
console.log(this.props.assets);
if(!this.props.assets || this.props.assets.length == 0) {
if (!this.props.assets || this.props.assets.length == 0) {
return <TextBlock rows={3} color='#CDCDCD' />
}

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class Home extends Component<{ setUser: Function, user: IEmployee }, { user: IEm
<br />
<h1>Welcome to the ScottishGlen Administration Panel!</h1>
<br />
<p>From here you can manage the <Link to={'/assets'}>Hardware</Link> & Software assets and use it to get a general overview of the assets contained within the company.</p>
<p>From here you can manage the <Link to={'/assets'}>Hardware</Link> & <Link to={'/software'}>Software</Link> assets and use it to get a general overview of the assets contained within the company.</p>
<p>It can also be used for Vulnerability Scanning through the <a href='https://nvd.nist.gov/' target='_blank'>National Vulnerability Database</a>. If at anytime you would like to return to this page, click the logo at the top of your screen!</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/assets/hardware/Asset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ class Asset extends Component<{ setUser: Function, user: IEmployee, id: string,
<hr />
<div id="centred-div">
{this.state.data ? <AssetInfoTable asset={this.state.data} /> : 'Loading...'}
<button className="btn btn-outline-primary" onClick={() => this.props.navigate('/assets')}>Return to assets page!</button>
<button className="btn btn-outline-primary" onClick={() => this.props.navigate(-1)}>Return to previous page!</button>
<br /><br />
</div>

Expand Down
82 changes: 82 additions & 0 deletions src/pages/assets/software/SoftwareAsset.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// import Breadcrumbs from "../components/Breadcrumbs";
import TopBar from "../../../components/TopBar";
import '../../../styles/Assets.scss';
import "react-placeholder/lib/reactPlaceholder.css";
import { Component } from "react";
import { Link, NavigateFunction } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from 'react-router-dom';
import { SoftwareAsset as CSoftwareAsset } from "../../../components/assets/software/SoftwareAsset";
import { IEmployee } from "../../../interfaces/Employee";
import Breadcrumbs from "../../../components/Breadcrumbs";
import SoftwareAssetInfoTable from "../../../components/assets/software/SoftwareAssetInfoTable";

class SoftwareAsset extends Component<{ setUser: Function, user: IEmployee, id: string, navigate:NavigateFunction }, { setUser: Function, user: IEmployee, data?: CSoftwareAsset }> {
private _id: string;
constructor(props: any) {
super(props)
this.state = {
setUser: props.setUser,
user: props.user,
data: undefined
}
this._id = props.id
}

componentDidMount() {
fetch(`http://127.0.0.1:3001/api/assets/software/${this._id}`)
.then((res) => res.json())
.then((res) => new CSoftwareAsset(res))
.then((res) => this.setState({ data: res }))
.catch((err) => console.error(err))
}

delete() {
fetch(`http://127.0.0.1:3001/api/assets/hardware/${this._id}`, { method: 'DELETE' }).then(() => {
this.refreshPage();
})
}

refreshPage() {
window.location.reload();
}

render() {
return (
<>
<TopBar />
<Breadcrumbs history={[
{ name: 'Home', path: '/' },
{ name: 'Assets', path: '/assets' },
{ name: this._id ?? '-', path: `/assets/${this._id}` },
]} setUser={this.props.setUser} username={this.props.user.email} />

<h2 className="text-centre">Action Buttons</h2>
<div id="action-buttons">
<Link to={`/edit/assets/${this._id}`} className="btn btn-outline-primary"><i className="fa fa-edit" /> Edit Asset</Link>
<button onClick={this.refreshPage} className="btn btn-outline-primary"><i className="fa fa-refresh" /> Refresh Asset</button>
<button onClick={this.delete} className="btn btn-outline-danger"><i className="fa fa-trash" /> Delete Asset</button>
</div>
<hr />
<h2 className="text-centre">Full Asset Information</h2>
<hr />
<div id="centred-div">
{this.state.data ? <SoftwareAssetInfoTable asset={this.state.data} /> : 'Loading...'}
<button className="btn btn-outline-primary" onClick={() => this.props.navigate(-1)}>Go back to previous page!</button>
<br /><br />
</div>

</>
)
}


}

export default ({ setUser, user }: { setUser: Function, user: IEmployee }) => {
const { id } = useParams();
const navigation = useNavigate();
if (!id) throw new Error(`Invalid ID for Software Asset. Given: ${id}`);

return <SoftwareAsset setUser={setUser} user={user} id={id} navigate={navigation} />
};
4 changes: 2 additions & 2 deletions src/pages/assets/software/SoftwareAssets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import Breadcrumbs from "../../../components/Breadcrumbs.tsx";
import TopBar from "../../../components/TopBar.tsx";
import '../../../styles/Assets.scss';
import "react-placeholder/lib/reactPlaceholder.css";
import Table from '../../../components/assets/software/SoftwareAssetTable.tsx';
import { Link } from "react-router-dom";
import { Component } from 'react';
import { IEmployee } from "../../../interfaces/Employee.ts";
import { SoftwareAsset } from "../../../components/assets/software/SoftwareAsset.ts";
import SoftwareAssetTable from "../../../components/assets/software/SoftwareAssetTable.tsx";

class SoftwareAssets extends Component<{ setUser: Function, user: IEmployee }, { data: SoftwareAsset[], user: IEmployee, setUser: Function }> {
constructor(props: any) {
Expand Down Expand Up @@ -60,7 +60,7 @@ class SoftwareAssets extends Component<{ setUser: Function, user: IEmployee }, {
<hr />
<h2 className="text-centre">Software Asset List</h2>
<p className="text-centre">There is currently <strong>{this.state.data.length}</strong> software {(this.state.data.length > 1 || this.state.data.length == 0) ? 'assets' : 'asset'} stored within the Database.</p>
<Table assets={this.state.data} />
<SoftwareAssetTable assets={this.state.data} />
</>
)
}
Expand Down
14 changes: 9 additions & 5 deletions src/pages/employee/Employee.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import TopBar from "../../components/TopBar.tsx";
import '../../styles/Assets.scss';
import "react-placeholder/lib/reactPlaceholder.css";
import { Component } from "react";
import { Link } from "react-router-dom";
import { Link, NavigateFunction, useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
import { IEmployee } from '../../interfaces/Employee.ts';
import Breadcrumbs from "../../components/Breadcrumbs.tsx";
import { HardwareAsset } from "../../components/assets/hardware/HardwareAsset.ts";
import HardwareAssetTable from "../../components/assets/hardware/HardwareAssetTable.tsx";

class Employee extends Component<{ setUser: Function, user: IEmployee, id: string }, { employee_data?: IEmployee, asset_data?: HardwareAsset[], setUser: Function, user: IEmployee }> {
class Employee extends Component<{ setUser: Function, user: IEmployee, id: string, navigate:NavigateFunction }, { employee_data?: IEmployee, asset_data?: HardwareAsset[], setUser: Function, user: IEmployee }> {
private _id: string;
constructor(props: any) {
super(props);
Expand All @@ -33,7 +33,7 @@ class Employee extends Component<{ setUser: Function, user: IEmployee, id: strin
fetch(`http://127.0.0.1:3001/api/assets/hardware/view-all/${this._id}`)
.then((res) => res.json())
.then((res) => res.map((x: any) => { return new HardwareAsset(x) }))
.then((res) => {console.log(res); return res})
.then((res) => { console.log(res); return res })
.then((res) => this.setState({ asset_data: res }))
.catch((err) => {
console.error(err)
Expand Down Expand Up @@ -80,14 +80,18 @@ class Employee extends Component<{ setUser: Function, user: IEmployee, id: strin
<h2 className="text-centre">Asset List</h2>
{this.state.asset_data ? <><p className="text-centre">This employee currently has <strong>{this.state.asset_data.length} {(this.state.asset_data.length > 1 || this.state.asset_data.length == 0) ? 'assets' : 'asset'}</strong> assigned to them.</p>
<HardwareAssetTable assets={this.state.asset_data} /></> : <p className="text-centre">Loading...</p>}

<div id="centred-div">
<button className="btn btn-outline-primary" onClick={() => this.props.navigate(-1)}>Return to previous page!</button>
</div>
</>
)
}
}

export default ({ setUser, user }: { setUser: Function, user: IEmployee }) => {
const { id } = useParams();
const navigation = useNavigate();

if (!id) throw new Error(`Invalid ID for Employee. Given: ${id}`);
return <Employee setUser={setUser} user={user} id={id} />
return <Employee setUser={setUser} user={user} id={id} navigate={navigation} />
};

0 comments on commit 67e1657

Please sign in to comment.