Scribd
Upload
23 views10 pages

Link Rel

The document outlines a React component that utilizes Bootstrap for styling and modal functionalities to manage a list of managers. It includes features for adding new managers, searching through the list, and displaying the results in a table format. The component also supports deleting managers and provides a modal for adding services with various input fields.

Uploaded by

Hoyutae Giyuusha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views10 pages

Link Rel

The document outlines a React component that utilizes Bootstrap for styling and modal functionalities to manage a list of managers. It includes features for adding new managers, searching through the list, and displaying the results in a table format. The component also supports deleting managers and provides a modal for adding services with various input fields.

Uploaded by

Hoyutae Giyuusha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<link rel="stylesheet"

href="node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet"
href="node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet"
href="node_modules/bootstrap-icons/font/[Link]">

<script src="node_modules/bootstrap/dist/js/[Link]"></script>
<script src="node_modules/bootstrap/dist/js/[Link]"></script>
<script
src="node_modules/bootstrap/dist/js/[Link]"></script>

<div className="d-flex flex-column">


<div className="d-flex justify-content-between align-items-center
text-black mt-4 mb-4">
<div className="d-flex justify-content-center align-items-
center">
<div className="">
<button
type="button"
className="bg-success btn btn-primary d-flex justify-
content-center align-items-center me-2"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
<i className="bi bi-plus-circle-fill me-2 "></i>
Thêm mới
</button>
<form onSubmit={handleSubmit}>
<div
className="modal fade"
id="exampleModal"
tabIndex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h1 className="text-black modal-title fs-5"
id="exampleModalLabel">
Thêm cửa hàng
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<div className="mb-3">
<label htmlFor="firstName" className="text-black
form-label">
Tên người quản lý
</label>
<input
type="text"
className="form-control"
name="firstName"
required
pattern=".{1,30}"
title="First name must be under 30 characters"
onChange={(e) =>
setNewManager({
...newManager,
firstName: [Link],
})
}
/>

<label htmlFor="address" className="text-black


form-label">
Địa chỉ
</label>
<input
type="text"
className="form-control"
required
name="address"
pattern=".{1,50}"
title="Address information must be under 50
characters"
onChange={(e) =>
setNewManager({
...newManager,
address: [Link],
})
}
/>
</div>
</div>

<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Cancel
</button>
<button type="submit" className="btn btn-primary">
Add
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<button className="btn btn-primary d-flex justify-content-
center align-items-center bg-danger me-2">
<i className="bi bi-person-fill me-1"></i>
Xuấ t ra File
<i className="bi bi-chevron-right me-1"></i>
</button>
</div>

<div className="d-flex justify-content-center align-items-


center">
<button className="btn btn-secondary"><i className="bi bi-
chevron-right"></i></button>
<input
type="text"
className="form-control"
placeholder="Search for ID"
/>
<button className="btn btn-secondary">
<i className="bi bi-search"></i>
</button>
</div>
import React, { useState } from "react";
import { data } from "../Constants/data";
import 'bootstrap/dist/css/[Link]';
import 'bootstrap/dist/js/[Link]';

const HeaderList = () => {


const [managers, setManagers] = useState([Link]);
const [newManager, setNewManager] = useState({
name: "",
address: "",
});
const [searchTerm, setSearchTerm] = useState("");

const handleSubmit = (e) => {


[Link]();
const updatedManagers = [...managers, { ...newManager, id:
[Link] + 1, lastUpdated: new Date().toISOString().slice(0,
16).replace("T", " ") }];
setManagers(updatedManagers);
setNewManager({ name: "", address: "" });
};

const handleDelete = (index) => {


const updatedManagers = [Link]((_, i) => i !== index);
setManagers(updatedManagers);
};

const filteredManagers = [Link]((manager) =>


[Link]().includes([Link]()) ||
[Link]().includes([Link]())
);

return (
<div className="d-flex flex-column">
<div className="d-flex justify-content-between align-items-center
text-black mt-4 mb-4">
<div className="d-flex justify-content-center align-items-
center">
<button
type="button"
className="bg-success btn btn-primary d-flex justify-content-
center align-items-center me-2"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Thêm mới
</button>
<form onSubmit={handleSubmit}>
<div
className="modal fade"
id="exampleModal"
tabIndex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h1 className="text-black modal-title fs-5"
id="exampleModalLabel">Thêm cử a hàng</h1>
<button type="button" className="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<div className="mb-3">
<label htmlFor="name" className="text-black form-
label">Tên người quản lý</label>
<input
type="text"
className="form-control"
name="name"
required
pattern=".{1,30}"
title="Name must be under 30 characters"
value={[Link]}
onChange={(e) => setNewManager({ ...newManager,
name: [Link] })}
/>
<label htmlFor="address" className="text-black
form-label">Địa chỉ</label>
<input
type="text"
className="form-control"
name="address"
required
pattern=".{1,50}"
title="Address must be under 50 characters"
value={[Link]}
onChange={(e) => setNewManager({ ...newManager,
address: [Link] })}
/>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary"
data-bs-dismiss="modal">Cancel</button>
<button type="submit" className="btn btn-
primary">Add</button>
</div>
</div>
</div>
</div>
</form>
<button className="btn btn-primary d-flex justify-content-
center align-items-center bg-danger me-2">
Xuất ra File
</button>
</div>
<div className="d-flex justify-content-center align-items-
center">
<input
type="text"
className="form-control"
placeholder="Nhập nội dung tìm kiế m"
value={searchTerm}
onChange={(e) => setSearchTerm([Link])}
/>
<button className="btn btn-secondary ms-2">
Tìm kiế m
</button>
</div>
<div className="d-flex justify-content-center align-items-
center">
<div className="p-1">Kế t quả</div>
<input type="number" className="form-control me-2"
value={[Link]} readOnly />
</div>
</div>
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
<tr>
<th>Hành động</th>
<th>STT</th>
<th>Người quản lý</th>
<th>Địa chỉ</th>
<th>Lầ n cập nhật cuối</th>
</tr>
</thead>
<tbody>
{[Link]((manager, index) => (
<tr key={index}>
<td>
<button className="btn btn-sm btn-light me-2"><i
className="bi bi-eye"></i></button>
<button className="btn btn-sm btn-info me-2"><i
className="bi bi-pencil-fill"></i></button>
<button className="btn btn-sm btn-danger" onClick={()
=> handleDelete(index)}><i className="bi bi-trash-fill"></i></button>
</td>
<td>{index + 1}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
))}
</tbody>
</table>
<div className="d-flex justify-content-end mt-
2">{[Link]} Kế t quả phù hợp</div>
</div>
</div>
);
};

export default HeaderList;


<div className="modal fade" id="serviceModal" tabIndex="-1" aria-
labelledby="serviceModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="serviceModalLabel">Thêm
Dịch vụ</h5>
<button type="button" className="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<form onSubmit={handleSubmit}>
<div className="modal-body">
<div className="mb-3">
<label htmlFor="ten" className="form-label">Tên dịch
vụ</label>
<input
type="text"
id="ten"
name="ten"
className="form-control"
value={[Link]}
onChange={handleChange}
required
/>
</div>
<div className="mb-3">
<label htmlFor="moTa" className="form-label">Mô
tả</label>
<input
type="text"
id="moTa"
name="moTa"
className="form-control"
value={[Link]}
onChange={handleChange}
required
/>
</div>
<div className="mb-3">
<label htmlFor="gia" className="form-label">Giá</label>
<input
type="text"
id="gia"
name="gia"
className="form-control"
value={[Link]}
onChange={handleChange}
required
/>
</div>
<div className="mb-3">
<label htmlFor="thoiGianPhucVu" className="form-
label">Thời gian phục vụ</label>
<input
type="text"
id="thoiGianPhucVu"
name="thoiGianPhucVu"
className="form-control"
value={[Link]}
onChange={handleChange}
required
/>
</div>
<div className="mb-3">
<label className="form-label">Trạng thái</label>
<div className="form-check">
<input
type="radio"
id="active"
name="trangThai"
value="active"
className="form-check-input"
checked={[Link] === 'active'}
onChange={handleChange}
required
/>
<label className="form-check-label"
htmlFor="active">Kích hoạt</label>
</div>
<div className="form-check">
<input
type="radio"
id="inactive"
name="trangThai"
value="inactive"
className="form-check-input"
checked={[Link] === 'inactive'}
onChange={handleChange}
required
/>
<label className="form-check-label"
htmlFor="inactive">Tạm dừng</label>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-
bs-dismiss="modal">Hủy</button>
<button type="submit" className="btn btn-
primary">Thêm</button>
</div>
</form>
</div>
</div>
</div>

You might also like