|
- import React from 'react'
- import * as Icon from 'react-feather'
- import { useSelector } from 'react-redux'
- import Select from 'react-select';
- import Router from 'next/router';
- import Link from 'next/link';
-
- //addon library
- import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
- resetIdCounter();
-
- //yarn library
- import NumberFormat from 'react-number-format';
-
- const SparepartList = function ({ company,category,page,selected,products, ...props }) {
- // const handleName = values => {
- // Router.push({
- // pathname: '/${company}/product/Sparepart?c='+(company||''),
- // query: (values && values.length != 0) ? { filter: values["name"] } : {},
- // })
- // }
-
- category = category.map((i)=>i.replace(' ','_'));
- const pagination = (type,pages)=>{
- var paging = [];
- var current = (selected==type)?page:1;
- for(var i=1;i<=pages;i++){
- paging.push(
- <li key={`link_${i}`} className={`page-item ${i==current?'active':''}`}>
- <Link href={`./?s=${type}&p=${i}`}><a className="page-link">{i}</a></Link>
- </li>
- );
- }
-
- return (
- <div className="row justify-content-md-center">
- <div className="col-lg-12 col-md-12 col-sm-12">
- <div className="pagination-area">
- <nav aria-label="Page navigation">
- <ul className="pagination justify-content-center">
- {(current!='1')?(<li className="page-item">
- <Link href={`./?s=${type}&p=${parseInt(current)-1}`}><a className="page-link" >Prev</a></Link>
- </li>):""}
- {paging}
- {(current!=pages)?<li className="page-item">
- <Link href={`./?s=${type}&p=${parseInt(current)+1}`}><a className="page-link" >Next</a></Link>
- </li>:""}
- </ul>
- </nav>
- </div>
- </div>
- </div>
- );
- };
-
- const productGrid = function(product){
- if(product){
- return product.map((data) => {
- return (
- <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
- <div className="single-products">
- <div className="products-image">
- <img src={`/api/util?img=${(data.attributes.Image.data)?encodeURIComponent(data.attributes.Image.data[0].attributes["url"]):''}`} />
- <ul>
- <li>
- <Link href={`/product/${data.id}`}>
- <a>
- <Icon.Search />
- </a>
- </Link>
-
- </li>
- <li>
- <a onClick={function (evt) {
- evt.preventDefault();
- navigator.clipboard.writeText(evt.target.baseURI.substring(0,evt.target.baseURI.lastIndexOf('product/')+8)+`${data.id}`).then(() => {
- alert("a produk berhasil di copy. Silakan share ke teman - teman anda.");
- }, () => {
- alert("Gagal men-copy link. Silakan mencopy link produk secara manual");
- });
- }}>
- <Icon.Link/>
- </a>
- </li>
- </ul>
- </div>
-
- <div className="products-content">
- <h3>
- <Link href={`/product/${data.id}`}>
- <a>{data.attributes.Name}</a>
- </Link>
- </h3>
- <span>
- <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.'} />
- </span><br />
- <span></span>
- <span>
- <div className="products-details">
- <div className="price">
- <NumberFormat
- style={{ color: "#EB1928" }}
- displayType={'text'}
- prefix={'%'}
- decimalScale={2}
- value={data.attributes.Discount * 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.'} />
- </div>
- </div>
- </span>
-
- <Link href={`/product/${data.id}`}>
- <a className="add-to-cart-btn">Detail Product</a>
- </Link>
- </div>
- </div>
- </div>
- );
- });
- }
- else return(
- <div className="pt-80 pb-50 justify-content-center">
- <center><h5>Belum ada produk untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
- </div>);
- }
-
- return (
- <div className="shop-area ptb-80">
- <div className="container">
- <div className="woocommerce-topbar">
- <div className="row align-items-center">
-
- {/* <div className="col-lg-5 col-md-5 col-sm-5">
- <Select
- value={(selected) ? ygp.filter((i) => i.id == selected) : null}
- getOptionLabel={option => `${option.name}`}
- getOptionValue={option => option.id}
- options={ygp}
- isSearchable
- isMulti
- isClearable
- instanceId="name"
- placeholder="Cari Produk"
- onChange={values => handleName(values)}
- />
- </div> */}
- </div>
- </div>
-
- <div width="fullwidth">
- <div className="products-details-tabs">
- <Tabs>
- <TabList>
- {category.map((i)=>{
- return (<Tab key={i}>{i.replace(/\_/g,' ')}</Tab>);
- })}
- </TabList>
- {category.map((i,idx)=>{
- return (
- <TabPanel key={idx}>
- <div className="col-lg-2 col-md-2 col-sm-2">
- <div className="woocommerce-result-count">
- <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>
- </div>
- </div>
- <div className="row justify-content-md">
- {productGrid(products[i].data)}
- {pagination(i.toLowerCase(),(products[i].meta)?products[i].meta.pagination.pageCount:1)}
- </div>
- </TabPanel>
- );
- })}
- {/* <TabPanel>
- <div className="row justify-content-md">
- {YGP}
- {pagination('ygp',ygp.meta.pagination.pageCount)}
- </div>
- </TabPanel>
- <TabPanel>
- <div className="row justify-content-md">
- {Yamalube}
- {pagination('lube',yamalube.meta.pagination.pageCount)}
- </div>
- </TabPanel>
- <TabPanel>
- <div className="row justify-content-md">
- {Helmet}
- {pagination('helmet',helmet.meta.pagination.pageCount)}
- </div>
- </TabPanel>
- <TabPanel>
- <div className="row justify-content-md">
- {Apparel}
- {pagination('apparel',apparel.meta.pagination.pageCount)}
- </div>
- </TabPanel>
- <TabPanel>
- <div className="row justify-content-md">
- {Accessories}
- {pagination('accessories',accessories.meta.pagination.pageCount)}
- </div>
- </TabPanel> */}
- </Tabs>
- </div>
- </div>
-
- {/* <div className="row justify-content-md-center">
-
- {Product}
-
- Pagination
- <div className="col-lg-12 col-md-12 col-sm-12">
- <div className="pagination-area">
- <nav aria-label="Page navigation">
- <ul className="pagination justify-content-center">
- <li className="page-item"><a className="page-link">Prev</a></li>
-
- <li className="page-item active"><a className="page-link">1</a></li>
-
- <li className="page-item"><a className="page-link">2</a></li>
-
- <li className="page-item"><a className="page-link">3</a></li>
-
- <li className="page-item"><a className="page-link">Next</a></li>
- </ul>
- </nav>
- </div>
- </div>
- </div> */}
- </div>
- </div>
- )
- }
-
- export default SparepartList;
|