From 67e165770268639c01c699cbc46bbf1d5f051cea Mon Sep 17 00:00:00 2001 From: Liam Townsley Date: Thu, 16 Nov 2023 22:21:51 +0000 Subject: [PATCH] feat: implement view button for software asset --- src/App.tsx | 2 + .../software/SoftwareAssetInfoTable.tsx | 70 ++++++++++++++++ .../assets/software/SoftwareAssetTable.tsx | 4 +- src/pages/Home.tsx | 2 +- src/pages/assets/hardware/Asset.tsx | 2 +- src/pages/assets/software/SoftwareAsset.tsx | 82 +++++++++++++++++++ src/pages/assets/software/SoftwareAssets.tsx | 4 +- src/pages/employee/Employee.tsx | 14 ++-- 8 files changed, 169 insertions(+), 11 deletions(-) create mode 100644 src/components/assets/software/SoftwareAssetInfoTable.tsx create mode 100644 src/pages/assets/software/SoftwareAsset.tsx diff --git a/src/App.tsx b/src/App.tsx index ce58d9b..415aa8c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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); @@ -40,6 +41,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/assets/software/SoftwareAssetInfoTable.tsx b/src/components/assets/software/SoftwareAssetInfoTable.tsx new file mode 100644 index 0000000..ec64845 --- /dev/null +++ b/src/components/assets/software/SoftwareAssetInfoTable.tsx @@ -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 ( + + + + + + + + + + + + + + + + + + + + + + {/* + + + */} + {/* + + + + + + + */} +
Unique Asset ID{this.props.asset._id.toString() ?? '-'}
Name{this.props.asset.name ?? '-'}
Manufacturer{this.props.asset.manufacturer ?? '-'}
Version{this.props.asset.version ?? '-'}
Parent Hardware{this.state.data?.name} ({this.state.data?.ip})
Supervising Employee{(this.state.data) ? <>{this.state.data?.forename + ' ' + this.state.data.surname ?? '-'}(ID: {this.state.data?._id.toString() ?? '-'}) : '-'}
Purchase Date{this.props.asset.date}
Note{this.props.asset.note}
+ ) + } +} + +export default SoftwareAssetInfoTable; \ No newline at end of file diff --git a/src/components/assets/software/SoftwareAssetTable.tsx b/src/components/assets/software/SoftwareAssetTable.tsx index 77a0047..967e6b7 100644 --- a/src/components/assets/software/SoftwareAssetTable.tsx +++ b/src/components/assets/software/SoftwareAssetTable.tsx @@ -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) { @@ -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 } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index fa6e09b..04cdf4e 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -25,7 +25,7 @@ class Home extends Component<{ setUser: Function, user: IEmployee }, { user: IEm

Welcome to the ScottishGlen Administration Panel!


-

From here you can manage the Hardware & Software assets and use it to get a general overview of the assets contained within the company.

+

From here you can manage the Hardware & Software assets and use it to get a general overview of the assets contained within the company.

It can also be used for Vulnerability Scanning through the National Vulnerability Database. If at anytime you would like to return to this page, click the logo at the top of your screen!

diff --git a/src/pages/assets/hardware/Asset.tsx b/src/pages/assets/hardware/Asset.tsx index 112e225..d39b466 100644 --- a/src/pages/assets/hardware/Asset.tsx +++ b/src/pages/assets/hardware/Asset.tsx @@ -61,7 +61,7 @@ class Asset extends Component<{ setUser: Function, user: IEmployee, id: string,
{this.state.data ? : 'Loading...'} - +

diff --git a/src/pages/assets/software/SoftwareAsset.tsx b/src/pages/assets/software/SoftwareAsset.tsx new file mode 100644 index 0000000..9def0b8 --- /dev/null +++ b/src/pages/assets/software/SoftwareAsset.tsx @@ -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 ( + <> + + + +

Action Buttons

+
+ Edit Asset + + +
+
+

Full Asset Information

+
+
+ {this.state.data ? : 'Loading...'} + +

+
+ + + ) + } + + +} + +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 +}; \ No newline at end of file diff --git a/src/pages/assets/software/SoftwareAssets.tsx b/src/pages/assets/software/SoftwareAssets.tsx index 7f31eb2..0201999 100644 --- a/src/pages/assets/software/SoftwareAssets.tsx +++ b/src/pages/assets/software/SoftwareAssets.tsx @@ -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) { @@ -60,7 +60,7 @@ class SoftwareAssets extends Component<{ setUser: Function, user: IEmployee }, {

Software Asset List

There is currently {this.state.data.length} software {(this.state.data.length > 1 || this.state.data.length == 0) ? 'assets' : 'asset'} stored within the Database.

- + ) } diff --git a/src/pages/employee/Employee.tsx b/src/pages/employee/Employee.tsx index df95254..5dd4bab 100644 --- a/src/pages/employee/Employee.tsx +++ b/src/pages/employee/Employee.tsx @@ -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); @@ -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) @@ -80,7 +80,9 @@ class Employee extends Component<{ setUser: Function, user: IEmployee, id: strin

Asset List

{this.state.asset_data ? <>

This employee currently has {this.state.asset_data.length} {(this.state.asset_data.length > 1 || this.state.asset_data.length == 0) ? 'assets' : 'asset'} assigned to them.

:

Loading...

} - +
+ +
) } @@ -88,6 +90,8 @@ class Employee extends Component<{ setUser: Function, user: IEmployee, id: strin 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 + return }; \ No newline at end of file