25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

236 lines
12 KiB

  1. import React from 'react'
  2. import * as Icon from 'react-feather'
  3. import { useSelector } from 'react-redux'
  4. import Select from 'react-select';
  5. import Router from 'next/router';
  6. import Link from 'next/link';
  7. //addon library
  8. import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
  9. resetIdCounter();
  10. //yarn library
  11. import NumberFormat from 'react-number-format';
  12. const SparepartList = function ({ company,category,page,selected,products, ...props }) {
  13. // const handleName = values => {
  14. // Router.push({
  15. // pathname: '/${company}/product/Sparepart?c='+(company||''),
  16. // query: (values && values.length != 0) ? { filter: values["name"] } : {},
  17. // })
  18. // }
  19. category = category.map((i)=>i.replace(' ','_'));
  20. const pagination = (type,pages)=>{
  21. var paging = [];
  22. var current = (selected==type)?page:1;
  23. for(var i=1;i<=pages;i++){
  24. paging.push(
  25. <li key={`link_${i}`} className={`page-item ${i==current?'active':''}`}>
  26. <Link href={`./?s=${type}&p=${i}`}><a className="page-link">{i}</a></Link>
  27. </li>
  28. );
  29. }
  30. return (
  31. <div className="row justify-content-md-center">
  32. <div className="col-lg-12 col-md-12 col-sm-12">
  33. <div className="pagination-area">
  34. <nav aria-label="Page navigation">
  35. <ul className="pagination justify-content-center">
  36. {(current!='1')?(<li className="page-item">
  37. <Link href={`./?s=${type}&p=${parseInt(current)-1}`}><a className="page-link" >Prev</a></Link>
  38. </li>):""}
  39. {paging}
  40. {(current!=pages)?<li className="page-item">
  41. <Link href={`./?s=${type}&p=${parseInt(current)+1}`}><a className="page-link" >Next</a></Link>
  42. </li>:""}
  43. </ul>
  44. </nav>
  45. </div>
  46. </div>
  47. </div>
  48. );
  49. };
  50. const productGrid = function(product){
  51. if(product){
  52. return product.map((data) => {
  53. return (
  54. <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
  55. <div className="single-products">
  56. <div className="products-image">
  57. <img src={`/api/util?img=${(data.attributes.Image.data)?encodeURIComponent(data.attributes.Image.data[0].attributes["url"]):''}`} />
  58. <ul>
  59. <li>
  60. <Link href={`/product/${data.id}`}>
  61. <a>
  62. <Icon.Search />
  63. </a>
  64. </Link>
  65. </li>
  66. <li>
  67. <a onClick={function (evt) {
  68. evt.preventDefault();
  69. navigator.clipboard.writeText(evt.target.baseURI.substring(0,evt.target.baseURI.lastIndexOf('product/')+8)+`${data.id}`).then(() => {
  70. alert("a produk berhasil di copy. Silakan share ke teman - teman anda.");
  71. }, () => {
  72. alert("Gagal men-copy link. Silakan mencopy link produk secara manual");
  73. });
  74. }}>
  75. <Icon.Link/>
  76. </a>
  77. </li>
  78. </ul>
  79. </div>
  80. <div className="products-content">
  81. <h3>
  82. <Link href={`/product/${data.id}`}>
  83. <a>{data.attributes.Name}</a>
  84. </Link>
  85. </h3>
  86. <span>
  87. <NumberFormat value={data.attributes.Product_prices.data&& data.attributes.Product_prices.data.length>0?data.attributes.Product_prices.data[0].attributes.Price:0 *( 1- data.discount)} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
  88. </span><br />
  89. <span></span>
  90. <span>
  91. <div className="products-details">
  92. <div className="price">
  93. <NumberFormat
  94. style={{ color: "#EB1928" }}
  95. displayType={'text'}
  96. prefix={'%'}
  97. decimalScale={2}
  98. value={data.attributes.Discount * 100}
  99. />
  100. <NumberFormat value={data.attributes.Product_prices.data&& data.attributes.Product_prices.data.length>0?data.attributes.Product_prices.data[0].attributes.Price:0} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
  101. </div>
  102. </div>
  103. </span>
  104. <Link href={`/product/${data.id}`}>
  105. <a className="add-to-cart-btn">Detail Product</a>
  106. </Link>
  107. </div>
  108. </div>
  109. </div>
  110. );
  111. });
  112. }
  113. else return(
  114. <div className="pt-80 pb-50 justify-content-center">
  115. <center><h5>Belum ada produk untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
  116. </div>);
  117. }
  118. return (
  119. <div className="shop-area ptb-80">
  120. <div className="container">
  121. <div className="woocommerce-topbar">
  122. <div className="row align-items-center">
  123. {/* <div className="col-lg-5 col-md-5 col-sm-5">
  124. <Select
  125. value={(selected) ? ygp.filter((i) => i.id == selected) : null}
  126. getOptionLabel={option => `${option.name}`}
  127. getOptionValue={option => option.id}
  128. options={ygp}
  129. isSearchable
  130. isMulti
  131. isClearable
  132. instanceId="name"
  133. placeholder="Cari Produk"
  134. onChange={values => handleName(values)}
  135. />
  136. </div> */}
  137. </div>
  138. </div>
  139. <div width="fullwidth">
  140. <div className="products-details-tabs">
  141. <Tabs>
  142. <TabList>
  143. {category.map((i)=>{
  144. return (<Tab key={i}>{i.replace(/\_/g,' ')}</Tab>);
  145. })}
  146. </TabList>
  147. {category.map((i,idx)=>{
  148. return (
  149. <TabPanel key={idx}>
  150. <div className="col-lg-2 col-md-2 col-sm-2">
  151. <div className="woocommerce-result-count">
  152. <p>Showing {(((selected==i)?page:1)-1)*8+1}-{(((selected==i)?page:1)*8>products[i].meta.pagination.total)?products[i].meta.pagination.total:((selected==i)?page:1)*8} of {products[i].meta.pagination.total} results</p>
  153. </div>
  154. </div>
  155. <div className="row justify-content-md">
  156. {productGrid(products[i].data)}
  157. {pagination(i.toLowerCase(),(products[i].meta)?products[i].meta.pagination.pageCount:1)}
  158. </div>
  159. </TabPanel>
  160. );
  161. })}
  162. {/* <TabPanel>
  163. <div className="row justify-content-md">
  164. {YGP}
  165. {pagination('ygp',ygp.meta.pagination.pageCount)}
  166. </div>
  167. </TabPanel>
  168. <TabPanel>
  169. <div className="row justify-content-md">
  170. {Yamalube}
  171. {pagination('lube',yamalube.meta.pagination.pageCount)}
  172. </div>
  173. </TabPanel>
  174. <TabPanel>
  175. <div className="row justify-content-md">
  176. {Helmet}
  177. {pagination('helmet',helmet.meta.pagination.pageCount)}
  178. </div>
  179. </TabPanel>
  180. <TabPanel>
  181. <div className="row justify-content-md">
  182. {Apparel}
  183. {pagination('apparel',apparel.meta.pagination.pageCount)}
  184. </div>
  185. </TabPanel>
  186. <TabPanel>
  187. <div className="row justify-content-md">
  188. {Accessories}
  189. {pagination('accessories',accessories.meta.pagination.pageCount)}
  190. </div>
  191. </TabPanel> */}
  192. </Tabs>
  193. </div>
  194. </div>
  195. {/* <div className="row justify-content-md-center">
  196. {Product}
  197. Pagination
  198. <div className="col-lg-12 col-md-12 col-sm-12">
  199. <div className="pagination-area">
  200. <nav aria-label="Page navigation">
  201. <ul className="pagination justify-content-center">
  202. <li className="page-item"><a className="page-link">Prev</a></li>
  203. <li className="page-item active"><a className="page-link">1</a></li>
  204. <li className="page-item"><a className="page-link">2</a></li>
  205. <li className="page-item"><a className="page-link">3</a></li>
  206. <li className="page-item"><a className="page-link">Next</a></li>
  207. </ul>
  208. </nav>
  209. </div>
  210. </div>
  211. </div> */}
  212. </div>
  213. </div>
  214. )
  215. }
  216. export default SparepartList;