From 7b751aa54f45ae4e4436e3b773eafc57b56e83a2 Mon Sep 17 00:00:00 2001 From: Yusmardianto Date: Fri, 12 Mar 2021 17:00:45 +0700 Subject: [PATCH] add filter --- api/dealer/dealer.js | 34 ++++-- api/product/accessories.js | 20 ++-- package.json | 2 + pages-sections/dealers/dealers.js | 70 ++++++++---- pages-sections/dealers/filter.js | 28 +++++ pages-sections/product/accessories.js | 14 ++- pages-sections/product/apparel.js | 19 +++- pages-sections/product/helmet.js | 15 ++- pages-sections/product/product_details.js | 4 +- pages-sections/product/yamalube.js | 14 ++- pages-sections/product/ygp.js | 39 ++++--- pages-sections/product/ygp_details.js | 11 -- pages/dealers.js | 33 +++--- pages/product/accessories.js | 28 +++-- pages/product/apparel.js | 29 +++-- pages/product/helmet.js | 28 +++-- pages/product/yamalube.js | 29 +++-- pages/product/ygp.js | 31 ++++-- pages/product/ygp_details.js | 3 +- yarn.lock | 173 +++++++++++++++++++++++++++++- 20 files changed, 499 insertions(+), 125 deletions(-) create mode 100644 pages-sections/dealers/filter.js diff --git a/api/dealer/dealer.js b/api/dealer/dealer.js index 105c40d..1e95c8f 100644 --- a/api/dealer/dealer.js +++ b/api/dealer/dealer.js @@ -1,10 +1,10 @@ import apollo from "../../lib/apollo.js"; -async function GetDealers(token="", start = 0) { +async function GetDealers(token="") { var res = await apollo.query( ` - query($start: Int!) { - dealers(limit:6,start:$start) + query { + dealers { name kota_dealer @@ -15,10 +15,7 @@ async function GetDealers(token="", start = 0) { } } `, - token, - { - start: start, - } + token ); return res; } @@ -46,6 +43,29 @@ async function GetDealersDetails(token="") { return res; } +async function GetDealersbyFilter(token="") { + var res = await apollo.query( + ` + query($input: ID!) { + dealers(where:{id:$input}) + { + name + kota_dealer + address + telp + email + location + } + } + `, + token, + { + "input": id + } + ); + return res; +} + module.exports = { GetDealers: GetDealers, GetDealersDetails: GetDealersDetails, diff --git a/api/product/accessories.js b/api/product/accessories.js index c6c6200..c131c5c 100644 --- a/api/product/accessories.js +++ b/api/product/accessories.js @@ -1,10 +1,10 @@ import apollo from "../../lib/apollo.js"; -async function GetYGP(token="") { +async function GetYGP(filter, token="") { var res = await apollo.query( ` query { - accessories(where: { category: "YGP" }) { + accessories(where: { category: "YGP" ${(filter!="")?`name: "${filter}"`:""}}) { id name description @@ -20,11 +20,11 @@ async function GetYGP(token="") { return res; } -async function GetYamalube(token="") { +async function GetYamalube(filter, token="") { var res = await apollo.query( ` query { - accessories(where: { category: "Yamalube" }) { + accessories(where: { category: "Yamalube" ${(filter!="")?`name: "${filter}"`:""}}) { id name description @@ -40,11 +40,11 @@ async function GetYamalube(token="") { return res; } -async function GetHelmet(token="") { +async function GetHelmet(filter, token="") { var res = await apollo.query( ` query { - accessories(where: { category: "Helmet" }) { + accessories(where: { category: "Helmet" ${(filter!="")?`name: "${filter}"`:""}}) { id name description @@ -60,11 +60,11 @@ async function GetHelmet(token="") { return res; } -async function GetApparel(token="") { +async function GetApparel(filter, token="") { var res = await apollo.query( ` query { - accessories(where: { category: "Apparel" }) { + accessories(where: { category: "Apparel" ${(filter!="")?`name: "${filter}"`:""}}) { id name description @@ -80,11 +80,11 @@ async function GetApparel(token="") { return res; } -async function GetAccessories(token="") { +async function GetAccessories(filter, token="") { var res = await apollo.query( ` query { - accessories(where: { category: "Accessories" }) { + accessories(where: { category: "Accessories" ${(filter!="")?`name: "${filter}"`:""}}) { id name description diff --git a/package.json b/package.json index bc25c5c..86b6e71 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,8 @@ "react-dom": "16.13.1", "react-html-parser": "^2.0.2", "react-paginate": "^7.1.0", + "react-query": "^3.12.1", + "react-select": "^4.2.1", "react-slick": "0.25.2", "react-swipeable-views": "0.13.9", "rsuite": "^4.9.2", diff --git a/pages-sections/dealers/dealers.js b/pages-sections/dealers/dealers.js index 4d22678..6726d89 100644 --- a/pages-sections/dealers/dealers.js +++ b/pages-sections/dealers/dealers.js @@ -1,5 +1,6 @@ import React from "react"; import { makeStyles } from "@material-ui/core/styles"; +import Select from 'react-select'; import GridContainer from "components/Grid/GridContainer.js"; import Grid from '@material-ui/core/Grid'; @@ -14,36 +15,61 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti const useStyles = makeStyles(styles); const DataDealer = function ({ backend, dealers, ...props }) { const classes = useStyles(); + + // const handleKotaDealer = value => { + // console.log(value) + // } + const handleName = values => { + console.log(values) + } const Dealers = dealers.map((data) => { return ( - - -
{data.name}
 - - - -
- -
- - - - ); +
+ + +
{data.name}
 + + + +
+ +
+ + + +
+ ); }) return (
-

Dealers & Service

+ `${option.kota_dealer} ${option.kota_dealer}`} + getOptionValue={option => option.id} + options={dealers} + instanceId="kota_dealer" + placeholder="filter by Kota Dealer" + onChange={value => handleKotaDealer(value.map(kota_dealer => kota_dealer.id))} + /> */}
{Dealers} diff --git a/pages-sections/dealers/filter.js b/pages-sections/dealers/filter.js new file mode 100644 index 0000000..c18cb8e --- /dev/null +++ b/pages-sections/dealers/filter.js @@ -0,0 +1,28 @@ +import React from "react"; +import Select from 'react-select'; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// Component +import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; + +const useStyles = makeStyles(styles); + +const DataSnackbarContent = function() { + const classes = useStyles(); + return ( +
+
+ i.id==selected):null} + getOptionLabel={option => `${option.name}`} + getOptionValue={option => option.id} + options={accessories} + isMulti + instanceId="name" + placeholder="filter by Nama Part" + onChange={values => handleName(values)} + /> +

{ProductAccessories} {ProductAccessories} diff --git a/pages-sections/product/apparel.js b/pages-sections/product/apparel.js index 5e0768f..cb4fc0e 100644 --- a/pages-sections/product/apparel.js +++ b/pages-sections/product/apparel.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import Select from 'react-select'; import Button from "components/CustomButtons/Button.js"; import Icon from "@material-ui/core/Icon"; @@ -8,11 +9,10 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; import GridContainer from "components/Grid/GridContainer.js"; -import GridItem from "components/Grid/GridItem.js"; const useStyles = makeStyles(styles); -const DataApparel = function ({ backend, apparel, ...props }) { +const DataApparel = function ({ selected, handleName, backend, apparel, ...props }) { const classes = useStyles(); const { ...rest } = props; const imageClasses = classNames( @@ -49,10 +49,19 @@ const DataApparel = function ({ backend, apparel, ...props }) {

Yamaha Apparel

+ i.id==selected):null} + getOptionLabel={option => `${option.name}`} + getOptionValue={option => option.id} + options={helmet} + isMulti + instanceId="name" + placeholder="filter by Nama Part" + onChange={values => handleName(values)} + /> +

{ProductHelmet}{ProductHelmet}{ProductHelmet} diff --git a/pages-sections/product/product_details.js b/pages-sections/product/product_details.js index 18b3df8..1ad8288 100644 --- a/pages-sections/product/product_details.js +++ b/pages-sections/product/product_details.js @@ -68,7 +68,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) {

{ReactHtmlParser(data.description)}

- + {/* @@ -79,7 +79,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { - + */} diff --git a/pages-sections/product/yamalube.js b/pages-sections/product/yamalube.js index 1c65e51..9cdc44c 100644 --- a/pages-sections/product/yamalube.js +++ b/pages-sections/product/yamalube.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import Select from 'react-select'; import Button from "components/CustomButtons/Button.js"; import Icon from "@material-ui/core/Icon"; @@ -12,7 +13,7 @@ import GridItem from "components/Grid/GridItem.js"; const useStyles = makeStyles(styles); -const DataYamalube = function ({ backend, yamalube, ...props }) { +const DataYamalube = function ({ selected, handleName, backend, yamalube, ...props }) { const classes = useStyles(); const { ...rest } = props; const imageClasses = classNames( @@ -49,6 +50,17 @@ const DataYamalube = function ({ backend, yamalube, ...props }) {

Yamalube Oil

+ i.id==selected):null} + getOptionLabel={option => `${option.name} ${option.part_code}`} + getOptionValue={option => option.id} + options={ygp} + isMulti + instanceId="name" + placeholder="filter by Nama Part" + onChange={values => handleName(values)} + /> +

+ + {ProductYGP} + +
diff --git a/pages-sections/product/ygp_details.js b/pages-sections/product/ygp_details.js index a5fcf8f..0a32744 100644 --- a/pages-sections/product/ygp_details.js +++ b/pages-sections/product/ygp_details.js @@ -56,17 +56,6 @@ const DetailDataYGP = function ({ backend, detailygp, ...props }) { - - - - - - - - - - -

Deskripsi

diff --git a/pages/dealers.js b/pages/dealers.js index 3e85d3b..8a4cc5a 100644 --- a/pages/dealers.js +++ b/pages/dealers.js @@ -10,7 +10,9 @@ import Footer from "components/Footer/Footer.js"; import Getdealer from "../api/dealer/dealer.js"; import DataSnackbarContent from "../pages-sections/snackbar.js"; import DataDealers from "../pages-sections/dealers/dealers.js"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query' +const queryClient = new QueryClient() const useStyles = makeStyles(styles); const Dealers = function ({ backend, dealers, ...props }) { const classes = useStyles(); @@ -30,26 +32,31 @@ const Dealers = function ({ backend, dealers, ...props }) { />
- - + + + + {/* */} +
); }; - export async function getServerSideProps(context) { - var dealers = []; - const backend = process.env.BACKEND_SERVER_URI; +export default Dealers; - var res = await Getdealer.GetDealers(); - if (res["STATUS"] === 1) { - dealers = res["DATA"]["dealers"]; - } +export async function getServerSideProps(context) { + var dealers = []; + const backend = process.env.BACKEND_SERVER_URI; - return { - props: { dealers, backend }, // will be passed to the page component as props - }; + var res = await Getdealer.GetDealers(); + if (res["STATUS"] === 1) { + dealers = res["DATA"]["dealers"]; } -export default Dealers; + console.log(res); + + return { + props: { dealers, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file diff --git a/pages/product/accessories.js b/pages/product/accessories.js index d5a75bc..3443981 100644 --- a/pages/product/accessories.js +++ b/pages/product/accessories.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query' import Header from "components/Header/Header.js"; import HeaderLinks from "components/Header/HeaderLinks.js"; @@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import GetDataAccessories from "../../api/product/accessories.js"; import DataAccessories from "../../pages-sections/product/accessories.js"; import DataSnackbarContent from "../../pages-sections/snackbar.js"; +import Router from 'next/router' const useStyles = makeStyles(styles); - -const Accessories = function ({ accessories, backend, ...props }) { +const queryClient = new QueryClient(); +const handleName = values => { + Router.push({ + pathname: '/product/accessories', + query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, + }) +} +const Accessories = function ({ selected, accessories, backend, ...props }) { const classes = useStyles(); const { ...rest } = props; return ( @@ -31,8 +39,10 @@ const Accessories = function ({ accessories, backend, ...props }) { />
- - + + + +
@@ -43,14 +53,20 @@ export default Accessories; export async function getServerSideProps(context) { var accessories = []; + var filter = context.query.filter||""; + var selected = ""; + const backend = process.env.BACKEND_SERVER_URI; - var res = await GetDataAccessories.GetAccessories(); + var res = await GetDataAccessories.GetAccessories(filter); if (res["STATUS"] === 1) { accessories = res["DATA"]["accessories"]; + if (filter !=""){ + selected = accessories.filter((i)=>i.name==filter); + } } return { - props: { accessories, backend }, // will be passed to the page component as props + props: { selected, accessories, backend }, // will be passed to the page component as props }; } \ No newline at end of file diff --git a/pages/product/apparel.js b/pages/product/apparel.js index 46e26c8..1f9794d 100644 --- a/pages/product/apparel.js +++ b/pages/product/apparel.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query' import Header from "components/Header/Header.js"; import HeaderLinks from "components/Header/HeaderLinks.js"; @@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import GetDataApparel from "../../api/product/accessories.js"; import DataApparel from "../../pages-sections/product/apparel.js"; import DataSnackbarContent from "../../pages-sections/snackbar.js"; +import Router from 'next/router' const useStyles = makeStyles(styles); - -const Apparel = function ({ apparel, backend, ...props }) { +const queryClient = new QueryClient(); +const handleName = values => { + Router.push({ + pathname: '/product/apparel', + query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, + }) +} +const Apparel = function ({ selected, apparel, backend, ...props }) { const classes = useStyles(); const { ...rest } = props; return ( @@ -31,8 +39,10 @@ const Apparel = function ({ apparel, backend, ...props }) { />
- - + + + +
@@ -43,14 +53,21 @@ export default Apparel; export async function getServerSideProps(context) { var apparel = []; + var filter = context.query.filter||""; + var selected = ""; + const backend = process.env.BACKEND_SERVER_URI; - var res = await GetDataApparel.GetApparel(); + var res = await GetDataApparel.GetApparel(filter); + if (res["STATUS"] === 1) { apparel = res["DATA"]["accessories"]; + if (filter !=""){ + selected = apparel.filter((i)=>i.name==filter); + } } return { - props: { apparel, backend }, // will be passed to the page component as props + props: { selected, apparel, backend }, // will be passed to the page component as props }; } \ No newline at end of file diff --git a/pages/product/helmet.js b/pages/product/helmet.js index 4006029..a2c68ea 100644 --- a/pages/product/helmet.js +++ b/pages/product/helmet.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query' import Header from "components/Header/Header.js"; import HeaderLinks from "components/Header/HeaderLinks.js"; @@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import GetDataHelmet from "../../api/product/accessories.js"; import DataHelmet from "../../pages-sections/product/helmet.js"; import DataSnackbarContent from "../../pages-sections/snackbar.js"; +import Router from 'next/router' const useStyles = makeStyles(styles); - -const Helmet = function ({ helmet, backend, ...props }) { +const queryClient = new QueryClient(); +const handleName = values => { + Router.push({ + pathname: '/product/helmet', + query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, + }) +} +const Helmet = function ({ selected, helmet, backend, ...props }) { const classes = useStyles(); const { ...rest } = props; return ( @@ -31,8 +39,10 @@ const Helmet = function ({ helmet, backend, ...props }) { />
- - + + + +
@@ -43,14 +53,20 @@ export default Helmet; export async function getServerSideProps(context) { var helmet = []; + var filter = context.query.filter||""; + var selected = ""; + const backend = process.env.BACKEND_SERVER_URI; - var res = await GetDataHelmet.GetHelmet(); + var res = await GetDataHelmet.GetHelmet(filter); if (res["STATUS"] === 1) { helmet = res["DATA"]["accessories"]; + if (filter !=""){ + selected = helmet.filter((i)=>i.name==filter); + } } return { - props: { helmet, backend }, // will be passed to the page component as props + props: { selected, helmet, backend }, // will be passed to the page component as props }; } \ No newline at end of file diff --git a/pages/product/yamalube.js b/pages/product/yamalube.js index 8110ed6..1732817 100644 --- a/pages/product/yamalube.js +++ b/pages/product/yamalube.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query' import Header from "components/Header/Header.js"; import HeaderLinks from "components/Header/HeaderLinks.js"; @@ -11,10 +12,17 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import GetDataYamalube from "../../api/product/accessories.js"; import DataYamalube from "../../pages-sections/product/yamalube.js"; import DataSnackbarContent from "../../pages-sections/snackbar.js"; +import Router from 'next/router' const useStyles = makeStyles(styles); - -const Yamalube = function ({ yamalube, backend, ...props }) { +const queryClient = new QueryClient(); +const handleName = values => { + Router.push({ + pathname: '/product/yamalube', + query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, + }) +} +const Yamalube = function ({ selected, yamalube, backend, ...props }) { const classes = useStyles(); const { ...rest } = props; return ( @@ -31,8 +39,10 @@ const Yamalube = function ({ yamalube, backend, ...props }) { />
- - + + + +
@@ -43,16 +53,21 @@ export default Yamalube; export async function getServerSideProps(context) { var yamalube = []; + var filter = context.query.filter||""; + var selected = ""; + const backend = process.env.BACKEND_SERVER_URI; - var res = await GetDataYamalube.GetYamalube(); - console.log(res); + var res = await GetDataYamalube.GetYamalube(filter); if (res["STATUS"] === 1) { yamalube = res["DATA"]["accessories"]; + if (filter !=""){ + selected = yamalube.filter((i)=>i.name==filter); + } } return { - props: { yamalube, backend }, // will be passed to the page component as props + props: { selected, yamalube, backend }, // will be passed to the page component as props }; } \ No newline at end of file diff --git a/pages/product/ygp.js b/pages/product/ygp.js index 1428a79..8520310 100644 --- a/pages/product/ygp.js +++ b/pages/product/ygp.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query' import Header from "components/Header/Header.js"; import HeaderLinks from "components/Header/HeaderLinks.js"; @@ -11,10 +12,19 @@ import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import GetDataYGP from "../../api/product/accessories.js"; import DataYGP from "../../pages-sections/product/ygp.js"; import DataSnackbarContent from "../../pages-sections/snackbar.js"; +import Router from 'next/router' + const useStyles = makeStyles(styles); +const queryClient = new QueryClient(); +const handleName = values => { + Router.push({ + pathname: '/product/ygp', + query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, + }) -const YGP = function ({ ygp, backend, ...props }) { +} +const YGP = function ({ selected,ygp, backend, ...props }) { const classes = useStyles(); const { ...rest } = props; return ( @@ -31,8 +41,10 @@ const YGP = function ({ ygp, backend, ...props }) { />
- - + + + +