We are suppose to develop fashion web site as our AF group project. i'm developing the administrators part .
Administrator should be able to manage product categories and store managers admin should be able to add new store mangers. Once the admin creates a login for the store manager, it should be notified to the store manager via email.
so i started my part by first developing the front- end of the Manage categories section. we found a CSS template built with bootstrap and we integrated it in our project this is how administrator page looks like
i have created a component named Category to store Category Information
import React from 'react'
function Category(props) {
return (
<tr>
<th scope="row">{props.id}</th>
<td>{props.name}</td>
<td><button className="btn btn-primary btn-sm">
<i className="fa fa-pencil" aria-hidden="true"></i>
<span> Edit</span></button></td>
<td><button className="btn btn-danger btn-sm">
<i className="fa fa-trash" aria-hidden="true"></i>
<span> Delete</span>
</button></td>
</tr>
)
}
export default Category
then i created CategoriesList Component to store all Category Components in a table
import React from 'react'
import Categoty from '../../Components/Category/Category'
const CategoriesList = () =>{
return (
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th colspan="3" scope="col">Name</th>
</tr>
</thead>
<tbody>
<Categoty id={1} name="Shoe" />
<Categoty id={2} name="Dress"/>
<Categoty id={3} name="Watch"/>
<Categoty id={4} name="Beauty"/>
</tbody>
</table>
)
}
export default CategoriesList
(for now i hard coded few categories but later ill change it get data from api)
and finally i added it to AdminPage Container
import React, { Component } from "react";
import CategoryList from "../../Layouts/CategoriesList/CategoriesList";
import StoreManagersList from "../../Layouts/StoreMangersList/StoreManagersList";
import RegisterNewStoreManager from "../../Layouts/RegisterNewStoreManager/RegisterNewStoreManager";
import Banner from "../../Components/Banner/Banner";
class AdminPage extends Component {
render() {
return (
<div>
<Banner
name="Administrator"
description="Manage Categories and Store Managers"
/>
<div className="container pt-4">
<h2 className="pt-4">Manage Categories</h2>
<div className="row">
<div className="col-sm ">
<h4 className="pt-4 ">Product Categories</h4>
<CategoryList />
</div>
<div className="col-sm">
<h4 className="pt-4 ">Add New Categories</h4>
<input
type="text"
className="form-control"
id="name"
placeholder="Category Name"
/>
<br />
<button className="button">Add</button>
</div>
</div>
</div>
);
}
}
export default AdminPage;
