Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ab78a785 by jaymehta
Options

catgory

1 parent c159921b
Inline Side-by-side
Showing 5 changed files with 156 additions and 16 deletions
components/vendor/ActivityDetails.js
......@@ -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}
......
components/vendor/ActivityListingRBAC.js
import React, { useEffect, useState } from "react";
import { Table } from "antd";
import React, { useEffect, useRef, useState } from "react";
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) => {
return {text: item.attributes.name, value: item.attributes.name}
}),
onFilter: (value, record) => record.address.startsWith(value),
filterSearch: true,
key: "name",
...getColumnSearchProps('name'),
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>
);
};
......
package.json
......@@ -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",
......
redux/actions/categoriesAction.js
......@@ -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
});
......
yarn.lock
......@@ -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":
"integrity" "sha512-Vyv/OsKz56BsKBtcRlLP6G8RGaRW43f7G5dK3XNPCaeV4YyehLVaITuNKi2YJG9hMVURkBdzdGhveNQlnKTFqw=="
"resolved" "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.5.tgz"
"version" "5.3.5"
"@ant-design/icons@^5.3.3", "@ant-design/icons@^5.3.6":
"integrity" "sha512-JeWsgNjvkTTC73YDPgWOgdScRku/iHN9JU0qk39OSEmJSCiRghQMLlxGTCY5ovbRRoXjxHXnUKgQEgBDnQfKmA=="
"resolved" "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.6.tgz"
"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"
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!