-
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #246 from fdhhhdjd/bao_fe
Bao fe
- Loading branch information
Showing
14 changed files
with
724 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
219 changes: 219 additions & 0 deletions
219
frontend-manager-cms/src/pages/BorrowBook/AllBorrowBook.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| //! LIBRARY | ||
| import moment from 'moment'; | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| //! REDUX THUNK | ||
| import { Delete_Book_Cms_Initial, Get_All_Book_Cms_Initial } from 'redux/managers/book_slice/book_thunk'; | ||
| import { Get_All_Borrow_Cms_Initial } from 'redux/managers/borrow_slice/borrow_thunk'; | ||
| import HELPERS from 'utils/helper'; | ||
|
|
||
| const AllBorrowBook = () => { | ||
| const dispatch = useDispatch(); | ||
| const borrowList = useSelector((state) => state.borrow.all_borrow_list?.element?.result); | ||
| const [allBook, setAllBook] = useState(null); | ||
|
|
||
| const handleDelete = (book_id) => { | ||
| dispatch(Delete_Book_Cms_Initial({ book_id })).then(() => { | ||
| dispatch(Get_All_Book_Cms_Initial()); | ||
| }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| dispatch(Get_All_Borrow_Cms_Initial()); | ||
| }, [dispatch]); | ||
|
|
||
| useEffect(() => { | ||
| setAllBook(borrowList); | ||
| }, [borrowList]); | ||
|
|
||
| return ( | ||
| <div className="container mt-20"> | ||
| <form> | ||
| <div className="flex"> | ||
| <label htmlFor="search-dropdown" className="mb-2 text-sm font-medium text-gray-900 sr-only"> | ||
| Your Email | ||
| </label> | ||
| <button | ||
| id="dropdown-button" | ||
| data-dropdown-toggle="dropdown" | ||
| className="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200" | ||
| type="button" | ||
| > | ||
| All categories | ||
| <svg | ||
| aria-hidden="true" | ||
| className="w-4 h-4 ml-1" | ||
| fill="currentColor" | ||
| viewBox="0 0 20 20" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" | ||
| clipRule="evenodd" | ||
| ></path> | ||
| </svg> | ||
| </button> | ||
| <div | ||
| id="dropdown" | ||
| className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" | ||
| > | ||
| <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-button"> | ||
| <li> | ||
| <a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> | ||
| Shopping | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> | ||
| Images | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> | ||
| News | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> | ||
| Finance | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div className="relative w-full"> | ||
| <input | ||
| type="search" | ||
| id="search-dropdown" | ||
| className="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg border-l-gray-100 border-l-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500" | ||
| placeholder="Search" | ||
| /> | ||
| <button | ||
| type="submit" | ||
| className="absolute top-0 right-0 p-2.5 text-sm font-medium text-white bg-blue-700 rounded-r-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| className="w-5 h-5" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="2" | ||
| d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" | ||
| ></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| <div className="flex flex-col"> | ||
| <div className="overflow-x-auto"> | ||
| <div className="py-3 pl-2 flex justify-between"> | ||
| <div className="relative max-w-xs"> | ||
| <label htmlFor="hs-table-search" className="sr-only"> | ||
| Search | ||
| </label> | ||
| <input | ||
| type="text" | ||
| name="hs-table-search" | ||
| id="hs-table-search" | ||
| className="block w-full p-3 pl-10 text-sm border-2 border-gray-400 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-white dark:border-gray-700 dark:text-gray-400" | ||
| placeholder="Search..." | ||
| /> | ||
| <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none"> | ||
| <svg | ||
| className="h-3.5 w-3.5 text-gray-400" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| fill="currentColor" | ||
| viewBox="0 0 16 16" | ||
| > | ||
| <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| <Link to="/book/add"> | ||
| <button className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"> | ||
| Thêm sách | ||
| </button> | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="p-1.5 w-full inline-block align-middle"> | ||
| <div className="overflow-hidden border rounded-lg"> | ||
| <table className="min-w-full divide-y divide-gray-200"> | ||
| <thead className="bg-gray-50"> | ||
| <tr> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "> | ||
| ID | ||
| </th> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "> | ||
| Tên | ||
| </th> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "> | ||
| Tác giả | ||
| </th> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "> | ||
| Sinh viên | ||
| </th> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase "> | ||
| Tình trạng | ||
| </th> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase "> | ||
| Chỉnh sửa | ||
| </th> | ||
| <th scope="col" className="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase "> | ||
| Xóa | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody className="divide-y divide-gray-200"> | ||
| {allBook && | ||
| allBook?.map((book, idx) => ( | ||
| <tr key={idx}> | ||
| <td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"> | ||
| {book?.borrowed_book_id} | ||
| </td> | ||
| <td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">{book?.name}</td> | ||
| <td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">{book?.name_author}</td> | ||
| <td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap">{book?.user_id}</td> | ||
| <td className="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"> | ||
| {HELPERS.getStatusBorrow(book?.status)} | ||
| </td> | ||
| <td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"> | ||
| <Link | ||
| to={`/borrow/edit/${book?.borrowed_book_id}`} | ||
| className="text-green-500 hover:text-green-700" | ||
| > | ||
| Chỉnh sửa | ||
| </Link> | ||
| </td> | ||
| <td className="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"> | ||
| <button | ||
| className="text-red-500 hover:text-red-700" | ||
| onClick={() => handleDelete(book?.book_id)} | ||
| > | ||
| Xóa | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AllBorrowBook; |
Oops, something went wrong.