catgory

jaymehta
Commit ab78a785 authored 2024-04-09 17:47:31 +0530 by jaymehta
Showing 5 changed files with 156 additions and 16 deletions
components/vendor/ActivityDetails.js
components/vendor/ActivityListingRBAC.js
package.json
redux/actions/categoriesAction.js
yarn.lock
--- a/components/vendor/ActivityDetails.js
View file @ab78a78
+++ b/components/vendor/ActivityDetails.js
View file @ab78a78
@@ -120,7 +120,6 @@ const ActivityDetails = () => {
  const { loggedInVendor } = useSelector(state => state.loggedInVendor);
  let categoryRef = useRef();
-  // console.log("categories", subCategories);
  let timeLines;
  const activityDetailsValidationSchema = Yup.object().shape({
    category: Yup.string().required("Category is Required"),
@@ -188,7 +187,7 @@ const ActivityDetails = () => {
    dispatch(getLoggedInVendor());
  }, []);
-  console.log("masterDays", masterDays);
+  // console.log("masterDays", masterDays);
  return (
    <Fragment>
      <div className="container p-1">
@@ -297,6 +296,7 @@ const ActivityDetails = () => {
                                    onChange={async e => {
                                      handleChange(e);
                                      console.log(categoryRef);
+                                      // console.log("subCategories", categoryRef.current.value);
                                      await dispatch(getAllSubCategories(categoryRef.current.value));
                                    }}
                                    onBlur={handleBlur}

--- a/components/vendor/ActivityListingRBAC.js
View file @ab78a78
+++ b/components/vendor/ActivityListingRBAC.js
View file @ab78a78
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
-import { Table } from "antd";
+import { Button, Input, Space, Table } from "antd";
 import { useSelector } from "react-redux";
+import Highlighter from "react-highlight-words";
+import { SearchOutlined } from "@ant-design/icons";
 const onChange = (pagination, filters, sorter, extra) => {
  console.log("params", pagination, filters, sorter, extra);
 };
 export const ActivityListingRBAC = () => {
  // let columns = []
  // useSelectors
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
@@ -18,12 +23,120 @@ export const ActivityListingRBAC = () => {
  const [columns, setcolumns] = useState([]);
  const [data, setdata] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [searchedColumn, setSearchedColumn] = useState('');
  // functions
  const onSelectChange = newSelectedRowKeys => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
+  const searchInput = useRef(null);
+  const handleSearch = (selectedKeys, confirm, dataIndex) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex);
+  };
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    setSearchText('');
+  };
+  const getColumnSearchProps = (dataIndex) => ({
+    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+      <div
+        style={{
+          padding: 8,
+        }}
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        <Input
+          ref={searchInput}
+          placeholder={`Search ${dataIndex}`}
+          value={selectedKeys[0]}
+          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
+          style={{
+            marginBottom: 8,
+            display: 'block',
+          }}
+        />
+        <Space>
+          <Button
+            type="primary"
+            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
+            icon={<SearchOutlined />}
+            size="small"
+            style={{
+              width: 90,
+            }}
+          >
+            Search
+          </Button>
+          <Button
+            onClick={() => clearFilters && handleReset(clearFilters)}
+            size="small"
+            style={{
+              width: 90,
+            }}
+          >
+            Reset
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            onClick={() => {
+              confirm({
+                closeDropdown: false,
+              });
+              setSearchText(selectedKeys[0]);
+              setSearchedColumn(dataIndex);
+            }}
+          >
+            Filter
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            onClick={() => {
+              close();
+            }}
+          >
+            close
+          </Button>
+        </Space>
+      </div>
+    ),
+    filterIcon: (filtered) => (
+      <SearchOutlined
+        style={{
+          color: filtered ? '#1677ff' : undefined,
+        }}
+      />
+    ),
+    onFilter: (value, record) =>
+      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
+    onFilterDropdownOpenChange: (visible) => {
+      if (visible) {
+        setTimeout(() => searchInput.current?.select(), 100);
+      }
+    },
+    render: (text) =>
+      searchedColumn === dataIndex ? (
+        <Highlighter
+          highlightStyle={{
+            backgroundColor: '#ffc069',
+            padding: 0,
+          }}
+          searchWords={[searchText]}
+          autoEscape
+          textToHighlight={text ? text.toString() : ''}
+        />
+      ) : (
+        text
+      ),
+  });
  // useEffects
  useEffect(() => {
    let initialData = allActivitiesData.data.map((item, index) => {
@@ -69,16 +182,15 @@ export const ActivityListingRBAC = () => {
      {
        title: "Name",
        dataIndex: "name",
-        filters: allActivitiesData.data.map((item) => {
+        key: "name",
-          return {text: item.attributes.name, value: item.attributes.name}
+        ...getColumnSearchProps('name'),
-        }),
-        onFilter: (value, record) => record.address.startsWith(value),
-        filterSearch: true,
        width: "15%"
      },
      {
        title: "Location",
        dataIndex: "location",
+        // key: "location",
+        // ...getColumnSearchProps('location'),
        // filters: [
        //   {
        //     text: "London",
@@ -125,6 +237,7 @@ export const ActivityListingRBAC = () => {
        // ],
        // onFilter: (value, record) => record.address.startsWith(value),
        // filterSearch: true,
        width: "15%"
      },
      {
@@ -188,7 +301,7 @@ export const ActivityListingRBAC = () => {
  };
  return (
    <div>
-      <Table rowSelection={rowSelection} columns={columns} dataSource={data} onChange={onChange} />;
+      <Table rowSelection={rowSelection} columns={columns} dataSource={data} onChange={onChange} />
    </div>
  );
 };

--- a/package.json
View file @ab78a78
+++ b/package.json
View file @ab78a78
@@ -9,6 +9,7 @@
        "lint": "next lint"
    },
    "dependencies": {
+        "@ant-design/icons": "^5.3.6",
        "@stripe/stripe-js": "^1.35.0",
        "antd": "^5.15.3",
        "axios": "^0.27.2",
@@ -25,6 +26,7 @@
        "react-bootstrap-typeahead": "^6.3.2",
        "react-datepicker": "^4.8.0",
        "react-dom": "18.2.0",
+        "react-highlight-words": "^0.20.0",
        "react-icons": "^5.0.1",
        "react-image-gallery": "^1.3.0",
        "react-js-pagination": "^3.0.3",

--- a/redux/actions/categoriesAction.js
View file @ab78a78
+++ b/redux/actions/categoriesAction.js
View file @ab78a78
@@ -48,13 +48,19 @@ export const getAllSubCategories = categoryName => async dispatch => {
    };
    let query = {
-      filters: {},
+      filters: {
+        category: {
+          name: {}
+        }
+      },
      populate: ["category"]
    };
    if (categoryName) {
+      // console.log("here 1", query.filters.category);
      query.filters.category.name = { $eq: categoryName };
    }
+    // console.log(">>>", query);
    const queryString = qs.stringify(query, {
      encodeValuesOnly: true
    });

--- a/yarn.lock
View file @ab78a78
+++ b/yarn.lock
View file @ab78a78
@@ -27,10 +27,10 @@
  "resolved" "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz"
  "version" "4.4.2"
-"@ant-design/icons@^5.3.3":
+"@ant-design/icons@^5.3.3", "@ant-design/icons@^5.3.6":
-  "integrity" "sha512-Vyv/OsKz56BsKBtcRlLP6G8RGaRW43f7G5dK3XNPCaeV4YyehLVaITuNKi2YJG9hMVURkBdzdGhveNQlnKTFqw=="
+  "integrity" "sha512-JeWsgNjvkTTC73YDPgWOgdScRku/iHN9JU0qk39OSEmJSCiRghQMLlxGTCY5ovbRRoXjxHXnUKgQEgBDnQfKmA=="
-  "resolved" "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.5.tgz"
+  "resolved" "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.6.tgz"
-  "version" "5.3.5"
+  "version" "5.3.6"
  dependencies:
    "@ant-design/colors" "^7.0.0"
    "@ant-design/icons-svg" "^4.4.0"
@@ -2757,6 +2757,11 @@
    "inherits" "^2.0.3"
    "minimalistic-assert" "^1.0.1"
+"highlight-words-core@^1.2.0":
+  "integrity" "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
+  "resolved" "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz"
+  "version" "1.2.2"
 "history@^4.9.0":
  "integrity" "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew=="
  "resolved" "https://registry.npmjs.org/history/-/history-4.10.1.tgz"
@@ -3511,6 +3516,11 @@
    "react-transition-group" "4.3.0"
    "sass-loader" "^8.0.2"
+"memoize-one@^4.0.0":
+  "integrity" "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw=="
+  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz"
+  "version" "4.0.3"
 "memoize-one@^5.1.1":
  "integrity" "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
@@ -4816,6 +4826,15 @@
  "resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
  "version" "3.2.0"
+"react-highlight-words@^0.20.0":
+  "integrity" "sha512-asCxy+jCehDVhusNmCBoxDf2mm1AJ//D+EzDx1m5K7EqsMBIHdZ5G4LdwbSEXqZq1Ros0G0UySWmAtntSph7XA=="
+  "resolved" "https://registry.npmjs.org/react-highlight-words/-/react-highlight-words-0.20.0.tgz"
+  "version" "0.20.0"
+  dependencies:
+    "highlight-words-core" "^1.2.0"
+    "memoize-one" "^4.0.0"
+    "prop-types" "^15.5.8"
 "react-icons@^5.0.1":
  "integrity" "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw=="
  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz"
@@ -5104,7 +5123,7 @@
    "loose-envify" "^1.4.0"
    "prop-types" "^15.6.2"
-"react@*", "react@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^15.5.x || ^16.x || ^17.x || ^18.x", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.9.0 || ^17 || ^18", "react@^17.0.2 || ^18", "react@^17.0.2 || ^18.0.0-0", "react@^18.0.0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=0.14.0", "react@>=0.14.0 || ^15.6.1 || ^16.0.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.14.0", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@>=16.8.6 || ^17.0.0 || ^18.0.0", "react@>=16.9.0", "react@18.2.0":
+"react@*", "react@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^15.5.x || ^16.x || ^17.x || ^18.x", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.9.0 || ^17 || ^18", "react@^17.0.2 || ^18", "react@^17.0.2 || ^18.0.0-0", "react@^18.0.0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=0.14.0", "react@>=0.14.0 || ^15.6.1 || ^16.0.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.14.0", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@>=16.8.6 || ^17.0.0 || ^18.0.0", "react@>=16.9.0", "react@18.2.0":
  "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
  "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
  "version" "18.2.0"