{"version":3,"sources":["webpack:///./src/sachchuyenkhao/index.js"],"names":["HomeIndex","props","state","error","isLoaded","items","tenSachChuyenKhao","tenTacGia","idTacGia","itemTacGias","totalCount","pageSize","activePage","totalSachChuyenKhaos","handleChangeSachChuyenKhao","bind","handleClick","getPageUrl","handlePageChange","pageNumber","url","undefined","this","value","data","site","siteMetadata","callApi","fetch","then","res","json","result","setState","event","target","prevState","componentDidMount","location","search","parseInt","queryString","parse","page","privatelKey","generalKey","tenSachChuyenKhao_loc","idTacGia_loc","find","o","render","sachs","length","className","map","item","style","lineHeight","key","Id","backgroundColor","borderBottomStyle","to","modal","TenSach","NhaXuatBan","LoaiGiaoTrinh","DanhSachTacGia","itemsCountPerPage","totalItemsCount","pageRangeDisplayed","onChange","activeSach","title","minHeight","backgroundImage","imageQnu","backgroundPosition","backgroundRepeat","backgroundSize","marginTop","fontSize","color","onKeyDown","ev","type","placeholder","borderRadius","options","e","onKeyPress","onClick","React","Component"],"mappings":"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","file":"component---src-sachchuyenkhao-index-js-54d733459478893df3ca.js","sourcesContent":["import React, { Fragment } from \"react\";\r\nimport Layout from \"../common/layouts\";\r\nimport { graphql, Link } from \"gatsby\";\r\nimport Seo from \"../common/seo\";\r\nimport { BsSearch, BsListCheck, BsPeople, BsHouse } from \"react-icons/bs\";\r\nimport Pagination from \"react-js-pagination\";\r\nimport \"tachyons\";\r\nimport Select from \"react-select\";\r\nimport queryString from \"query-string\";\r\n\r\nexport default class HomeIndex extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      error: null,\r\n      isLoaded: false,\r\n      items: [],\r\n      tenSachChuyenKhao: \"\",\r\n      tenTacGia: \"\",\r\n      idTacGia: \"\",\r\n      itemTacGias: [],\r\n      totalCount: 0,\r\n      pageSize: 10,\r\n      activePage: 1,\r\n      totalSachChuyenKhaos: 0,\r\n    };\r\n\r\n    this.handleChangeSachChuyenKhao =\r\n    this.handleChangeSachChuyenKhao.bind(this);\r\n    this.handleClick = this.handleClick.bind(this);\r\n    this.getPageUrl = this.getPageUrl.bind(this);\r\n    this.handlePageChange = this.handlePageChange.bind(this);\r\n  }\r\n\r\n  getPageUrl(pageNumber) {\r\n    return `/sachchuyenkhao/?page=${pageNumber}`;\r\n  }\r\n\r\n  handlePageChange(pageNumber) {\r\n    let url = \"\";\r\n    if (this.state.tenTacGia.value === undefined) {\r\n      url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetSachChuyenKhaos/?idTacGia=00000000-0000-0000-0000-000000000000&tenSach=${this.state.tenSachChuyenKhao}&pageSize=${this.state.pageSize}&pageIndex=${pageNumber}`;\r\n    } else {\r\n      url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetSachChuyenKhaos/?idTacGia=${this.state.tenTacGia.value}&tenSach=${this.state.tenSachChuyenKhao}&pageSize=${this.state.pageSize}&pageIndex=${pageNumber}`;\r\n    }\r\n\r\n    fetch(url)\r\n      .then((res) => res.json())\r\n      .then(\r\n        (result) => {\r\n          this.setState({\r\n            isLoaded: true,\r\n            items: result.data,\r\n            pageSize: result.pageSize,\r\n            totalCount: result.totalCount,\r\n            activePage: pageNumber,\r\n          });\r\n        },\r\n        (error) => {\r\n          this.setState({\r\n            isLoaded: true,\r\n            error,\r\n          });\r\n        }\r\n      );\r\n  }\r\n\r\n  handleChangeSachChuyenKhao(event) {\r\n    this.setState({\r\n      tenSachChuyenKhao: event.target.value,\r\n    });\r\n  }\r\n\r\n  handleClick() {\r\n    let url = \"\";\r\n    if (this.state.tenTacGia.value === undefined) {\r\n      url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetSachChuyenKhaos/?idTacGia=00000000-0000-0000-0000-000000000000&tenSach=${this.state.tenSachChuyenKhao}`;\r\n    } else {\r\n      url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetSachChuyenKhaos/?idTacGia=${this.state.tenTacGia.value}&tenSach=${this.state.tenSachChuyenKhao}`;\r\n    }\r\n    this.setState((prevState) =>\r\n      fetch(url)\r\n        .then((res) => res.json())\r\n        .then(\r\n          (result) => {\r\n            this.setState({\r\n              isLoaded: true,\r\n              items: result.data,\r\n              pageSize: result.pageSize,\r\n              totalCount: result.totalCount,\r\n              activePage: 1,\r\n            });\r\n          },\r\n          (error) => {\r\n            this.setState({\r\n              isLoaded: true,\r\n              error,\r\n            });\r\n          }\r\n        )\r\n    );\r\n  }\r\n\r\n  componentDidMount() {\r\n    const { state } = this.props.location;\r\n\r\n    if (this.props.location.search) {\r\n      this.handlePageChange(parseInt(queryString.parse(this.props.location.search).page));\r\n    } else {\r\n      let idTacGia = \"00000000-0000-0000-0000-000000000000\";\r\n      let tenSachChuyenKhao = \"\";\r\n\r\n      if (state?.privatelKey !== undefined) {\r\n        idTacGia = state.privatelKey;\r\n      } else if (state?.generalKey !== undefined) {\r\n        tenSachChuyenKhao = state?.generalKey;\r\n        this.setState({\r\n          tenSachChuyenKhao: state.generalKey,\r\n        });\r\n      } else if (\r\n        state?.tenSachChuyenKhao_loc !== undefined &&\r\n        state?.idTacGia_loc !== undefined\r\n      ) {\r\n        tenSachChuyenKhao = state?.tenSachChuyenKhao_loc;\r\n        idTacGia = state?.idTacGia_loc;\r\n\r\n        this.setState({\r\n          tenSachChuyenKhao: state?.tenSachChuyenKhao_loc,\r\n        });\r\n      } else if (state?.tenSachChuyenKhao_loc !== undefined) {\r\n        tenSachChuyenKhao = state?.tenSachChuyenKhao_loc;\r\n        this.setState({\r\n          tenSachChuyenKhao: state?.tenSachChuyenKhao_loc,\r\n        });\r\n      } else if (state?.idTacGia_loc !== undefined) {\r\n        idTacGia = state?.idTacGia_loc;\r\n      }\r\n\r\n      let url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetSachChuyenKhaos/?idTacGia=${idTacGia}&tenSach=${tenSachChuyenKhao}`;\r\n      fetch(url)\r\n        .then((res) => res.json())\r\n        .then(\r\n          (result) => {\r\n            this.setState({\r\n              isLoaded: true,\r\n              items: result.data,\r\n              pageSize: result.pageSize,\r\n              totalCount: result.totalCount,\r\n              activePage: 1,\r\n            });\r\n          },\r\n          (error) => {\r\n            this.setState({\r\n              isLoaded: true,\r\n              error,\r\n            });\r\n          }\r\n        );\r\n    }\r\n\r\n    fetch(\r\n      this.props.data.site.siteMetadata.callApi + `/GetTotalSachChuyenKhaos`\r\n    )\r\n      .then((res) => res.json())\r\n      .then(\r\n        (result) => {\r\n          this.setState({\r\n            isLoaded: true,\r\n            totalSachChuyenKhaos: result,\r\n          });\r\n        },\r\n        (error) => {\r\n          this.setState({\r\n            isLoaded: true,\r\n            error,\r\n          });\r\n        }\r\n      );\r\n\r\n    fetch(this.props.data.site.siteMetadata.callApi + `/GetNhanSuForDanhMucs`)\r\n      .then((res) => res.json())\r\n      .then(\r\n        (result) => {\r\n          if (state?.privatelKey !== undefined) {\r\n            this.setState({\r\n              tenTacGia: result.find((o) => o.value === state.privatelKey),\r\n            });\r\n          }\r\n          if (state?.idTacGia_loc !== undefined) {\r\n            this.setState({\r\n              tenTacGia: result.find((o) => o.value === state?.idTacGia_loc),\r\n            });\r\n          }\r\n          this.setState({\r\n            isLoaded: true,\r\n            itemTacGias: result,\r\n          });\r\n        },\r\n        (error) => {\r\n          this.setState({\r\n            isLoaded: true,\r\n            error,\r\n          });\r\n        }\r\n      );\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      items,\r\n      itemTacGias,\r\n      pageSize,\r\n      totalCount,\r\n      activePage,\r\n      isLoaded,\r\n      totalSachChuyenKhaos,\r\n    } = this.state;\r\n\r\n    var sachs;\r\n\r\n    if (items && items.length > 0) {\r\n      sachs = (\r\n        <Fragment>\r\n          <section className=\"flex flex-wrap center justify-center mb2\">\r\n            <div className=\"bb\">\r\n              {pageSize * (activePage - 1) + 1} -{\" \"}\r\n              {items.length + pageSize * (activePage - 1)} / {totalCount} KẾT\r\n              QUẢ\r\n            </div>\r\n          </section>\r\n\r\n          <section className=\"flex flex-wrap center justify-center sans-serif\">\r\n            {this.state.items.map((item) => (\r\n              <div\r\n                className=\"pb2 pt2 w-100 mw9 f6\"\r\n                style={{ lineHeight: \"normal\" }}\r\n                key={item.Id}\r\n              >\r\n                <div\r\n                  className=\"pa2 display dark-gray overflow-x-auto b--red\"\r\n                  style={{\r\n                    backgroundColor: \"#e6eaf0\",\r\n                    borderBottomStyle: \"solid\",\r\n                  }}\r\n                >\r\n                  <div className=\"flex flex-wrap justify-around w-100 mw9\">\r\n                    <div className=\"w-100\">\r\n                      <p className=\"ml2\">\r\n                        <Link\r\n                          to={\"/sachchuyenkhao/detail/?Id=\" + item.Id}\r\n                          state={{\r\n                            modal: true,\r\n                            Id: item.Id,\r\n                          }}\r\n                          className=\"mt0 dark-red f5 link\"\r\n                        >\r\n                          {item.TenSach}\r\n                        </Link>\r\n                      </p>\r\n                      <p className=\"mt0 ml2\">\r\n                        <BsHouse className=\"fl mr2\" /> <b>Nhà xuất bản:</b>{\" \"}\r\n                        {item.NhaXuatBan === null || item.NhaXuatBan === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          item.NhaXuatBan\r\n                        )}\r\n                      </p>\r\n                      <p className=\"mt0 ml2\">\r\n                        <BsListCheck className=\"fl mr2\" /> <b>Loại sách:</b>{\" \"}\r\n                        {item.LoaiGiaoTrinh === null ||\r\n                        item.LoaiGiaoTrinh === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          item.LoaiGiaoTrinh\r\n                        )}\r\n                      </p>\r\n                      <p className=\"mt0 ml2\">\r\n                        <BsPeople className=\"fl mr2\" /> <b>Người tham gia:</b>{\" \"}\r\n                        {item.DanhSachTacGia === null ||\r\n                        item.DanhSachTacGia === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          item.DanhSachTacGia\r\n                        )}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            ))}\r\n          </section>\r\n\r\n          <section className=\"flex flex-wrap center tc justify-center\">\r\n            <Pagination\r\n              activePage={this.state.activePage}\r\n              itemsCountPerPage={pageSize}\r\n              totalItemsCount={totalCount}\r\n              pageRangeDisplayed={5}\r\n              onChange={this.handlePageChange.bind(this)}\r\n              getPageUrl={this.getPageUrl.bind(this)}\r\n            />\r\n          </section>\r\n        </Fragment>\r\n      );\r\n    } else if (isLoaded === false) {\r\n      sachs = <h2 className=\"tc\">Đang tải...</h2>;\r\n    } else {\r\n      sachs = <h2 className=\"tc\">Không tìm thấy thông tin sách!</h2>;\r\n    }\r\n\r\n    return (\r\n      <Layout activeSach=\"#f2184f\">\r\n        <Seo title={\"SÁCH PHỤC VỤ ĐÀO TẠO KHÁC\"} />\r\n        <div\r\n          style={{\r\n            minHeight: \"44rem\",\r\n          }}\r\n          className=\"sans-serif\"\r\n        >\r\n          <section\r\n            style={{\r\n              backgroundImage: `url(${this.props.data.site.siteMetadata.imageQnu})`,\r\n              // backgroundColor: \"rgb(63 82 111)\",\r\n              backgroundPosition: \"bottom\",\r\n              backgroundRepeat: \"no-repeat\",\r\n              backgroundSize: \"cover\",\r\n              marginTop: \"-9px\",\r\n            }}\r\n          >\r\n            <div className=\"flex flex-wrap justify-between-ns justify-center w-100 mw9 center-l\">\r\n              <div className=\"flex flex-column mt4\">\r\n                <h2\r\n                  className=\"near-white tracked mb0 db tc\"\r\n                  style={{\r\n                    fontSize: \"25px\",\r\n                  }}\r\n                >\r\n                  DỮ LIỆU SÁCH PHỤC VỤ ĐÀO TẠO KHÁC\r\n                </h2>\r\n                <h4\r\n                  style={{ color: \"#f2184f\" }}\r\n                  className=\"f4 mt2 tc mr-auto-l\"\r\n                >\r\n                  {totalSachChuyenKhaos} KẾT QUẢ\r\n                </h4>\r\n              </div>\r\n              <div className=\"flex flex-column mb4 mt4\">\r\n                <div className=\"pa3 bg-white\">\r\n                  <fieldset className=\"bn\">\r\n                    <legend className=\"fw9 mb2 f5 near-black tc\">\r\n                      Tìm kiếm dữ liệu\r\n                    </legend>\r\n                    <div className=\"mt1\">\r\n                      <input\r\n                        onKeyDown={(ev) => {\r\n                          if (ev.key === \"Enter\") {\r\n                            this.handleClick();\r\n                          }\r\n                        }}\r\n                        type=\"text\"\r\n                        value={this.state.tenSachChuyenKhao}\r\n                        onChange={this.handleChangeSachChuyenKhao}\r\n                        className=\"pa2 input-reset ba w-100 bg-transparent pointer\"\r\n                        placeholder=\"Tên sách...\"\r\n                        style={{ borderRadius: \"4px\" }}\r\n                      />\r\n                    </div>\r\n                    <div className=\"mt3\">\r\n                      <Select\r\n                        options={itemTacGias}\r\n                        value={this.state.tenTacGia}\r\n                        onChange={(e) => {\r\n                          this.setState({\r\n                            tenTacGia: e,\r\n                          });\r\n                        }}\r\n                        onKeyDown={(ev) => {\r\n                          if (ev.key === \"Enter\") {\r\n                            this.handleClick();\r\n                          }\r\n                        }}\r\n                        placeholder=\"Chọn tác giả...\"\r\n                      />\r\n                    </div>\r\n                    <div className=\"mt3\">\r\n                      <button\r\n                        onKeyPress={(ev) => {\r\n                          if (ev.key === \"Enter\") {\r\n                            this.handleClick();\r\n                          }\r\n                        }}\r\n                        type=\"button\"\r\n                        onClick={this.handleClick}\r\n                        className=\"pa2 ba bg-transparent w-100 pointer\"\r\n                        style={{ backgroundColor: \"#f2184f\", color: \"white\" }}\r\n                      >\r\n                        <BsSearch /> Tìm kiếm\r\n                      </button>\r\n                    </div>\r\n                  </fieldset>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n\r\n          <div className=\"flex flex-column tc\">\r\n            <h3 className=\"near-black f4 tracked db\">\r\n              DỮ LIỆU SÁCH PHỤC VỤ ĐÀO TẠO KHÁC\r\n            </h3>\r\n          </div>\r\n          {sachs}\r\n        </div>\r\n      </Layout>\r\n    );\r\n  }\r\n}\r\n\r\nexport const query = graphql`\r\n  query {\r\n    site {\r\n      siteMetadata {\r\n        siteTitle: title\r\n        description\r\n        imageQnu\r\n        imageQnu2\r\n        siteUrl\r\n        callApi\r\n        hostApi\r\n        avatar\r\n      }\r\n    }\r\n  }\r\n`;\r\n"],"sourceRoot":""}