{"version":3,"sources":["webpack:///./src/baibaokhoahoc/index.js"],"names":["HomeIndex","props","state","error","isLoaded","items","tenBaiBao","tenTacGia","idTacGia","itemTacGias","totalCount","pageSize","activePage","totalBaiBaos","handleChangeBaiBao","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","tenBaiBao_loc","idTacGia_loc","find","o","render","baibaokhoahocs","length","className","map","item","style","lineHeight","key","Id","backgroundColor","borderBottomStyle","to","modal","noScroll","TenBaiBao","LinhVucNganhKhoaHoc","marginTop","LoaiCongViec","TacGiaBaiBao","SoDOI","href","itemsCountPerPage","totalItemsCount","pageRangeDisplayed","onChange","activeBaiBao","title","minHeight","backgroundImage","imageQnu","backgroundPosition","backgroundRepeat","backgroundSize","fontSize","color","onKeyDown","ev","type","placeholder","borderRadius","options","e","onKeyPress","onClick","React","Component"],"mappings":"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","file":"component---src-baibaokhoahoc-index-js-5d6222792b7237793f38.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 Pagination from \"react-js-pagination\";\r\nimport \"tachyons\";\r\nimport \"tachyons-utilities\";\r\nimport Select from \"react-select\";\r\nimport { BsSearch, BsListCheck, BsPeople, BsLink } from \"react-icons/bs\";\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      tenBaiBao: \"\",\r\n      tenTacGia: \"\",\r\n      idTacGia: \"\",\r\n      itemTacGias: [],\r\n      totalCount: 0,\r\n      pageSize: 10,\r\n      activePage: 1,\r\n      totalBaiBaos: 0,\r\n    };\r\n\r\n    this.handleChangeBaiBao = this.handleChangeBaiBao.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 `/baibaokhoahoc/?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        `/GetBaiBaoKhoaHocs/?idTacGia=00000000-0000-0000-0000-000000000000&tenBaiBao=${this.state.tenBaiBao}&pageSize=${this.state.pageSize}&pageIndex=${pageNumber}`;\r\n    } else {\r\n      url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetBaiBaoKhoaHocs/?idTacGia=${this.state.tenTacGia.value}&tenBaiBao=${this.state.tenBaiBao}&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  handleChangeBaiBao(event) {\r\n    this.setState({\r\n      tenBaiBao: 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        `/GetBaiBaoKhoaHocs/?idTacGia=00000000-0000-0000-0000-000000000000&tenBaiBao=${this.state.tenBaiBao}`;\r\n    } else {\r\n      url =\r\n        this.props.data.site.siteMetadata.callApi +\r\n        `/GetBaiBaoKhoaHocs/?idTacGia=${this.state.tenTacGia.value}&tenBaiBao=${this.state.tenBaiBao}`;\r\n    }\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 tenBaiBao = \"\";\r\n\r\n      if (state?.privatelKey !== undefined) {\r\n        idTacGia = state.privatelKey;\r\n      } else if (state?.generalKey !== undefined) {\r\n        tenBaiBao = state?.generalKey;\r\n        this.setState({\r\n          tenBaiBao: state.generalKey,\r\n        });\r\n      } else if (\r\n        state?.tenBaiBao_loc !== undefined &&\r\n        state?.idTacGia_loc !== undefined\r\n      ) {\r\n        tenBaiBao = state?.tenBaiBao_loc;\r\n        idTacGia = state?.idTacGia_loc;\r\n\r\n        this.setState({\r\n          tenBaiBao: state?.tenBaiBao_loc,\r\n        });\r\n      } else if (state?.tenBaiBao_loc !== undefined) {\r\n        tenBaiBao = state?.tenBaiBao_loc;\r\n        this.setState({\r\n          tenBaiBao: state?.tenBaiBao_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        `/GetBaiBaoKhoaHocs/?idTacGia=${idTacGia}&tenBaiBao=${tenBaiBao}`;\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: 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(this.props.data.site.siteMetadata.callApi + `/GetTotalBaiBaos`)\r\n      .then((res) => res.json())\r\n      .then(\r\n        (result) => {\r\n          this.setState({\r\n            isLoaded: true,\r\n            totalBaiBaos: 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      totalBaiBaos,\r\n    } = this.state;\r\n\r\n    var baibaokhoahocs;\r\n\r\n    if (items && items.length > 0) {\r\n      baibaokhoahocs = (\r\n        <Fragment>\r\n          <section className=\"flex flex-wrap center justify-center mb2 sans-serif\">\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={\"/baibaokhoahoc/detail/?Id=\" + item.Id}\r\n                          state={{\r\n                            modal: true,\r\n                            Id: item.Id,\r\n                            noScroll: true,\r\n                          }}\r\n                          className=\"mt0 dark-red f5 link\"\r\n                        >\r\n                          {item.TenBaiBao}\r\n                        </Link>\r\n                      </p>\r\n                      <p className=\"ml2\">\r\n                        <BsSearch className=\"fl mr2\" /> <b>Lĩnh vực:</b>{\" \"}\r\n                        {item.LinhVucNganhKhoaHoc === null ||\r\n                        item.LinhVucNganhKhoaHoc === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          item.LinhVucNganhKhoaHoc\r\n                        )}\r\n                      </p>\r\n                      <p className=\"ml2\">\r\n                        <BsListCheck\r\n                          className=\"fl mr2\"\r\n                          style={{ marginTop: \"0.1em\" }}\r\n                        />{\" \"}\r\n                        <b>Xếp loại tạp chí:</b>{\" \"}\r\n                        {item.LoaiCongViec === null ||\r\n                        item.LoaiCongViec === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          item.LoaiCongViec\r\n                        )}\r\n                      </p>\r\n                      <p className=\"ml2\">\r\n                        <BsPeople\r\n                          className=\"fl mr2\"\r\n                          style={{ marginTop: \"0.05em\" }}\r\n                        />{\" \"}\r\n                        <b>Tác giả:</b>{\" \"}\r\n                        {item.TacGiaBaiBao === null ||\r\n                        item.TacGiaBaiBao === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          item.TacGiaBaiBao\r\n                        )}\r\n                      </p>\r\n                      <p className=\"ml2\">\r\n                        <BsLink\r\n                          className=\"fl mr2\"\r\n                          style={{ marginTop: \"0.1em\" }}\r\n                        />{\" \"}\r\n                        <b>Liên kết:</b>{\" \"}\r\n                        {item.SoDOI === null || item.SoDOI === \"\" ? (\r\n                          <strong className=\"light-blue normal\">\r\n                            Chưa có thông tin\r\n                          </strong>\r\n                        ) : (\r\n                          <a href={item.SoDOI}>{item.SoDOI}</a>\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 sans-serif\">\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      baibaokhoahocs = <h2 className=\"tc\">Đang tải...</h2>;\r\n    } else {\r\n      baibaokhoahocs = (\r\n        <h2 className=\"tc\">Không tìm thấy thông tin bài báo!</h2>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Layout activeBaiBao=\"#f2184f\">\r\n        <Seo title={\"BÀI BÁO KHOA HỌ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 BÀI BÁO KHOA HỌ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                  {totalBaiBaos} 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 pointer\">\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.tenBaiBao}\r\n                        onChange={this.handleChangeBaiBao}\r\n                        className=\"pa2 input-reset ba w-100 bg-transparent pointer\"\r\n                        placeholder=\"Tên bài báo...\"\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 BÀI BÁO KHOA HỌC\r\n            </h3>\r\n          </div>\r\n\r\n          {baibaokhoahocs}\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        description\r\n        mailChimpUrl\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":""}