add filter

Author: svdimitr

examples/ecommerce-jewellery-store/package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@progress/kendo-data-query": "^1.7.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.3.5",
     "@progress/kendo-react-buttons": "^8.5.0",

examples/ecommerce-jewellery-store/package.json

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
+import {
+  MultiSelect,
+  DropDownList,
+  DropDownsPopupSettings,
+  DropDownListChangeEvent,
+  MultiSelectChangeEvent,
+} from "@progress/kendo-react-dropdowns";
+import { SvgIcon } from "@progress/kendo-react-common";
+import {
+  FilterDescriptor,
+  SortDescriptor,
+  State,
+} from "@progress/kendo-data-query";
+
+const chips: string[] = [
+  "Bracelets",
+  "Rings",
+  "Earrings",
+  "Watches",
+  "Necklaces",
+];
+
+const statuses: string[] = ["Sale", "Recommended", "Must Have"];
+const materials: string[] = ["Gold", "Silver"];
+
+const DropDownSettings: DropDownsPopupSettings = {
+  minWidth: "119px",
+};
+
+export const FilterComponent = (props: any) => {
+  const [categoryValue, setCategoryValue] = React.useState<string[]>(["Category"]);
+  const [statusValue, setStatusValue] = React.useState<string>("Recommended");
+  const [materialValue, setMaterialValue] = React.useState<string>("Material");
+
+  const onStatusChange = (e: DropDownListChangeEvent) => {
+    setStatusValue(e.value);
+
+    const newSorts: SortDescriptor[] = [
+      {
+        field: "status",
+        dir: "desc",
+      },
+    ];
+
+    const customCompositeFilters: State = {
+      filter: undefined,
+      sort: newSorts,
+    };
+
+    props.updateUI(customCompositeFilters);
+  };
+
+  const onMsChange = (e: MultiSelectChangeEvent) => {
+    setCategoryValue(e.value);
+
+    const newFilters = e.value.map((c: any) => ({
+      field: "category",
+      operator: "eq",
+      value: c,
+    }));
+
+    const customCompositeFilters: State = {
+      filter: {
+        logic: "or",
+        filters: newFilters,
+      },
+      sort: undefined,
+    };
+
+    props.updateUI(customCompositeFilters);
+    setMaterialValue("Material");
+  };
+
+  const onMaterialChange = (e: DropDownListChangeEvent) => {
+    setMaterialValue(e.value);
+
+    const newFilter: FilterDescriptor[] = [
+      {
+        field: "material",
+        operator: "eq",
+        value: e.value,
+      },
+    ];
+
+    const customCompositeFilters: State = {
+      filter: {
+        logic: "or",
+        filters: newFilter,
+      },
+      sort: undefined,
+    };
+
+    props.updateUI(customCompositeFilters);
+    setCategoryValue(["Category"]);
+  };
+
+  return (
+    <>
+      <section className="k-d-flex k-justify-content-between k-align-items-center">
+        <span className="k-d-flex k-align-items-center">
+          <span className="k-d-flex k-align-items-center k-pr-2">
+            <SvgIcon icon={filterIcon}></SvgIcon>
+            Filter:
+          </span>           
+          <span className="k-pr-2">
+          <MultiSelect
+            popupSettings={DropDownSettings}
+            style={{
+              minWidth: "119px",
+            }}
+            fillMode={"flat"}
+            data={chips}
+            value={categoryValue}
+            onChange={onMsChange}
+          ></MultiSelect>
+          </span>
+            <span className="k-pr-2">
+            <DropDownList
+              value={materialValue}
+              data={materials}
+              onChange={onMaterialChange}
+            ></DropDownList>
+            </span>
+        </span>
+
+        <span className="k-d-flex k-align-items-center">
+          <span className="k-d-flex k-align-items-center k-pr-2">
+            <SvgIcon icon={sortAscIcon}></SvgIcon>
+            Sort by:
+          </span>
+          <span>
+            <DropDownList
+              data={statuses}
+              value={statusValue}
+              onChange={onStatusChange}
+            ></DropDownList>
+          </span>
+        </span>
+      </section>
+    </>
+  );
+};

examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx

@@ -23,128 +23,170 @@ type ListDataDescriptor = {
     img: string | null;
     status: string | null;
     title: string;
+    category: "Bracelets" | "Earrings" | "Rings" | "Watches" | "Necklaces";
+    material: "Silver" | "Gold";
     oldPrice: number | null;
     newPrice: number;
 };
 
 export const listData: ListDataDescriptor[] = [{
     img: diamongWeddingRing,
     status: "sale",
-    title: "Diamong Wedding Ring",
+    title: "Diamond Wedding Ring",
+    category: "Rings",
+    material: "Silver",
     oldPrice: 990,
     newPrice: 890
 }, {
     img: silverBraceletCross,
     status: "recommended",
+    category: "Bracelets",
+    material: "Silver",
     title: "Silver Bracelet with Cross",
     oldPrice: null,
     newPrice: 270
 },
 {
     img: pinkSilverBracelet,
     status: null,
+    category: "Bracelets",
+    material: "Silver",
     title: "Pink Silver Bracelet",
     oldPrice: null,
     newPrice: 460
 }, {
     img: yellowGoldEarrings,
     status: "sale",
+    category: "Earrings",
+    material: "Silver",
     title: "Yellow Gold Earrings",
     oldPrice: 500,
     newPrice: 380
 }, {
     img: silverHeartNecklace,
     status: null,
+    category: "Necklaces",
+    material: "Silver",
     title: "Silver Heart Necklace",
     oldPrice: null,
     newPrice: 400
 }, {
     img: homemadeSilverEarrings,
     status: null,
+    category: "Earrings",
+    material: "Silver",
     title: "Handmade Silver Earrings",
     oldPrice: null,
     newPrice: 650
 }, {
     img: diamondWeddingBands,
     status: "recommended",
     title: "Diamong Wedding Bands",
+    material: "Gold",
+    category: "Rings",
     oldPrice: null,
     newPrice: 4290
 }, {
     img: casualSilverWatch,
     status: null,
     title: "Casual Silver Watch",
+    category: "Watches",
+    material: "Silver",
     oldPrice: null,
     newPrice: 390
 }, {
     img: silverBraceletOnyx,
     status: "sale",
     title: "Silver Bracelet with Onyx",
+    material: "Silver",
+    category: "Bracelets",
     oldPrice: 950,
     newPrice: 770
 }, {
     img: weddingBandsPearl,
     status: "must have",
     title: "Wedding Bands with Pearls",
+    material: "Gold",
+    category: "Rings",
     oldPrice: null,
     newPrice: 900
 }, {
     img: silverWeddingBands,
     status: null,
     title: "Silver Wedding Bands",
+    material: "Silver",
+    category: "Rings",
     oldPrice: null,
     newPrice: 250
 }, {
     img: handmadeYellowGoldRing,
     status: null,
+    category: "Rings",
+    material: "Silver",
     title: "Handmade Yellow Gold Ring",
     oldPrice: null,
     newPrice: 560
 }, {
     img: diamondRingSapphire,
     status: "must have",
     title: "Diamond Ring with Sapphire",
+    category: "Rings",
+    material: "Gold",
     oldPrice: null,
     newPrice: 3590
 }, {
     img: silverHeartBracelet,
     status: null,
     title: "Silver Heart Bracelet",
+    category: "Bracelets",
+    material: "Silver",
     oldPrice: null,
     newPrice: 430
 }, {
     img: roseGoldEarringsOpal,
     status: "Sale",
     title: "Rose Gold Earrings with Opal",
+    category: "Earrings",
+    material: "Gold",
     oldPrice: 850,
     newPrice: 690
 },{
     img: silverBraceletTopaz,
     status: null,
+    category: "Bracelets",
+    material: "Silver",
     title: "Silver Bracelet with Topaz",
     oldPrice: null,
     newPrice: 580
 },{
     img: handmadeDiamongRing,
     status: null,
+    category: "Rings",
+    material: "Gold",
     title: "Handmade Diamond Ring",
     oldPrice: null,
     newPrice: 1100
 },{
     img: diamondRingRuby,
     status: "must have",
+    category: "Rings",
+    material: "Gold",
     title: "Diamong Ring with Ruby",
     oldPrice: null,
     newPrice: 5560
 },{
     img: stainlessSteelWatch,
     status: null,
-    title: "Stainless Steel Watch",
+    material: "Silver",
+    category: "Watches",
+    title: "Silver Watch",
     oldPrice: null,
     newPrice: 270
 }, {
     img: goldEarringsGarnet,
     status: null,
+    category: "Earrings",
+    material: "Gold",
     title: "Gold Earrings with Garnet",
     oldPrice: null,
     newPrice: 270