Skip to content

Jay Mehta / zango-frontend

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

listing and detail

1 parent 87175bba
Expand all
Inline Side-by-side
Showing 15 changed files with 303 additions and 65 deletions
components/vendor/ActivityListingRBAC.js
......@@ -2,16 +2,15 @@ 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";
import { DeleteTwoTone, EditTwoTone, SearchOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
const onChange = (pagination, filters, sorter, extra) => {
console.log("params", pagination, filters, sorter, extra);
};
export const ActivityListingRBAC = () => {
const router = useRouter()
// let columns = []
// useSelectors
const { allActivitiesData } = useSelector(state => state.allActivitiesData);
......@@ -23,8 +22,8 @@ export const ActivityListingRBAC = () => {
const [columns, setcolumns] = useState([]);
const [data, setdata] = useState([]);
const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
// functions
const onSelectChange = newSelectedRowKeys => {
......@@ -38,27 +37,27 @@ export const ActivityListingRBAC = () => {
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
};
const handleReset = (clearFilters) => {
const handleReset = clearFilters => {
clearFilters();
setSearchText('');
setSearchText("");
};
const getColumnSearchProps = (dataIndex) => ({
const getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
<div
style={{
padding: 8,
padding: 8
}}
onKeyDown={(e) => e.stopPropagation()}
onKeyDown={e => e.stopPropagation()}
>
<Input
ref={searchInput}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{
marginBottom: 8,
display: 'block',
display: "block"
}}
/>
<Space>
......@@ -68,7 +67,7 @@ export const ActivityListingRBAC = () => {
icon={<SearchOutlined />}
size="small"
style={{
width: 90,
width: 90
}}
>
Search
......@@ -77,7 +76,7 @@ export const ActivityListingRBAC = () => {
onClick={() => clearFilters && handleReset(clearFilters)}
size="small"
style={{
width: 90,
width: 90
}}
>
Reset
......@@ -87,7 +86,7 @@ export const ActivityListingRBAC = () => {
size="small"
onClick={() => {
confirm({
closeDropdown: false,
closeDropdown: false
});
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
......@@ -107,34 +106,33 @@ export const ActivityListingRBAC = () => {
</Space>
</div>
),
filterIcon: (filtered) => (
filterIcon: filtered => (
<SearchOutlined
style={{
color: filtered ? '#1677ff' : undefined,
color: filtered ? "#1677ff" : undefined
}}
/>
),
onFilter: (value, record) =>
record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownOpenChange: (visible) => {
onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownOpenChange: visible => {
if (visible) {
setTimeout(() => searchInput.current?.select(), 100);
}
},
render: (text) =>
render: text =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{
backgroundColor: '#ffc069',
padding: 0,
backgroundColor: "#ffc069",
padding: 0
}}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ''}
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
),
)
});
// useEffects
......@@ -183,7 +181,7 @@ export const ActivityListingRBAC = () => {
title: "Name",
dataIndex: "name",
key: "name",
...getColumnSearchProps('name'),
...getColumnSearchProps("name"),
width: "15%"
},
{
......@@ -240,21 +238,42 @@ export const ActivityListingRBAC = () => {
width: "15%"
},
{
title: "Gift",
dataIndex: "gift",
// filters: [
// {
// text: "London",
// value: "London"
// title: "Gift",
// dataIndex: "gift",
// // filters: [
// // {
// // text: "London",
// // value: "London"
// // },
// // {
// // text: "New York",
// // value: "New York"
// // }
// // ],
// // onFilter: (value, record) => record.address.startsWith(value),
// // filterSearch: true,
// width: "10%"
// },
// {
// text: "New York",
// value: "New York"
// }
// ],
// onFilter: (value, record) => record.address.startsWith(value),
// filterSearch: true,
{
title: "Edit record",
render: (_, record) => (
<Space size="middle">
{/* <a>Invite {record.name}</a> */}
<EditTwoTone style={{ fontSize: "22px" }}
onClick={() => {
router.push(`/vendor/activities/${record.key}`)
console.log(record);
}}/>
{/* <DeleteTwoTone
twoToneColor="#FF0000"
style={{ fontSize: "22px" }}
onClick={() => {
console.log(record);
}}
/> */}
</Space>
),
width: "10%"
}
]);
......
package.json
......@@ -13,6 +13,7 @@
"@stripe/stripe-js": "^1.35.0",
"antd": "^5.15.3",
"axios": "^0.27.2",
"dayjs": "^1.11.10",
"easyinvoice": "^2.3.3",
"formik": "^2.2.9",
"framer-motion": "^11.0.14",
......@@ -30,6 +31,7 @@
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3",
"react-lazyload": "^3.2.1",
"react-loading-icons": "^1.1.0",
"react-multi-carousel": "^2.8.2",
"react-otp-input": "^3.1.1",
......
pages/vendor/activities/[id].js 0 → 100644
import { Layout } from "antd";
import React from "react";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityDetails from "../../../components/vendor/ActivityDetails";
import ActivityListingRBAC from "../../../components/vendor/ActivityListingRBAC";
import UpdateActivity from "../../../components/vendor/UpdateActivity";
import { getActivitiesByVendor, getActivityById } from "../../../redux/actions/activityAction";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
const EditActivityDetail = () => {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
{/* <ActivityListingRBAC /> */}
<ActivityDetails isUpdate={true} />
{/* <UpdateActivity /> */}
</div>
</div>
</Layout>
);
};
export default EditActivityDetail;
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// await store.dispatch(getActivitiesByVendor())
await store.dispatch(loadUser());
await store.dispatch(getAllCategories());
await store.dispatch(getAllSubCategories());
await store.dispatch(getActivityById(query.id));
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {}
};
});
pages/vendor/activities/index.js
......@@ -6,11 +6,11 @@ import ActivityListing from "../../../components/vendor/ActivityListing";
import ActivityListingRBAC from "../../../components/vendor/ActivityListingRBAC";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { getActivitiesByVendor } from "../../../redux/actions/activityAction";
import { loadUser } from "../../../redux/actions/userActions";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function ActivityListingPage() {
return (
<Layout>
<div className="sidebarContainer">
......@@ -21,20 +21,18 @@ export default function ActivityListingPage() {
</div>
</Layout>
);
};
}
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
await store.dispatch(getActivitiesByVendor())
await store.dispatch(getAllCategories())
await store.dispatch(getAllSubCategories())
await store.dispatch(loadUser());
await store.dispatch(getActivitiesByVendor());
await store.dispatch(getAllCategories());
await store.dispatch(getAllSubCategories());
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
props: {}
};
});
pages/vendor/activity-details/index.js
......@@ -10,7 +10,7 @@ export default function ActivityDetailsPage () {
return (
<Layout>
<ActivityDetails />
<ActivityDetails isUpdate={false} />
</Layout>
);
};
......
redux/actions/activityAction.js
......@@ -6,7 +6,13 @@ import {
CREATE_ACTIVITY_SUCCESS,
GET_ACTIVITIES_FAIL,
GET_ACTIVITIES_REQUEST,
GET_ACTIVITIES_SUCCESS
GET_ACTIVITIES_SUCCESS,
GET_ACTIVITY_BY_ID_FAIL,
GET_ACTIVITY_BY_ID_REQUEST,
GET_ACTIVITY_BY_ID_SUCCESS,
UPDATE_ACTIVITY_BY_ID_FAIL,
UPDATE_ACTIVITY_BY_ID_REQUEST,
UPDATE_ACTIVITY_BY_ID_SUCCESS
} from "../constants/activitiesConstants";
import qs from "qs";
import { getLoggedInVendor } from "./vendorActions";
......@@ -53,8 +59,8 @@ export const createActivity = data => async dispatch => {
export const getActivitiesByVendor = () => async dispatch => {
// console.log("data", data);
// const session = await getSession();
// console.log("session", session);
const session = await getSession();
console.log("session", session);
try {
// const vendorConfig = {
// headers: {
......@@ -96,7 +102,7 @@ export const getActivitiesByVendor = () => async dispatch => {
const query = {
filters: {},
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor"]
populate: ["subCategory", "subCategory.category", "masterPincode", "vendor"]
};
const queryString = qs.stringify(query, {
......@@ -109,7 +115,7 @@ export const getActivitiesByVendor = () => async dispatch => {
// };
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config);
// console.log("Response", response.data);
dispatch({
type: GET_ACTIVITIES_SUCCESS,
payload: response.data
......@@ -123,6 +129,38 @@ export const getActivitiesByVendor = () => async dispatch => {
}
};
export const getActivityById = id => async dispatch => {
try {
dispatch({
type: GET_ACTIVITY_BY_ID_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences/${id}/?${queryString}`, config);
dispatch({
type: GET_ACTIVITY_BY_ID_SUCCESS,
payload: response.data
});
} catch (error) {
dispatch({
type: GET_ACTIVITY_BY_ID_FAIL,
payload: error.response.data
});
}
};
// export const getMasterDays = async () => {
// const config = {
// headers: {
......@@ -133,3 +171,40 @@ export const getActivitiesByVendor = () => async dispatch => {
// console.log("response",response.data);
// return response.data;
// };
export const updateActivityById =
({ activityId, updatedData }) =>
async dispatch => {
try {
const session = await getSession();
if (activityId && updatedData) {
console.log("activity session", session);
dispatch({
type: UPDATE_ACTIVITY_BY_ID_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
// const query = {}
const updateResponse = await axios.put(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences/${activityId}`, {data: updatedData}, config);
dispatch({
type: UPDATE_ACTIVITY_BY_ID_SUCCESS,
payload: updateResponse.data
});
return updateResponse.data;
}
} catch (error) {
dispatch({
type: UPDATE_ACTIVITY_BY_ID_FAIL,
payload: error.response.data
});
}
};
redux/actions/categoriesAction.js
......@@ -10,9 +10,9 @@ import {
} from "../constants/categoryConstants";
export const getAllCategories = () => async dispatch => {
console.log("here >");
// console.log("here >");
try {
console.log("here >>");
// console.log("here >>");
dispatch({
type: GET_CATEGORIES_REQUEST
......@@ -32,7 +32,7 @@ export const getAllCategories = () => async dispatch => {
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories?${queryString}`, config);
console.log("response > ", response);
// console.log("response > ", response);
dispatch({
type: GET_CATEGORIES_SUCCESS,
payload: response.data
......
redux/constants/activitiesConstants.js
......@@ -6,4 +6,12 @@ export const GET_ACTIVITIES_REQUEST = "GET_ACTIVITIES_REQUEST"
export const GET_ACTIVITIES_SUCCESS = "GET_ACTIVITIES_SUCCESS"
export const GET_ACTIVITIES_FAIL = "GET_ACTIVITIES_FAIL"
export const GET_ACTIVITY_BY_ID_REQUEST = "GET_ACTIVITY_BY_ID_REQUEST"
export const GET_ACTIVITY_BY_ID_SUCCESS = "GET_ACTIVITY_BY_ID_SUCCESS"
export const GET_ACTIVITY_BY_ID_FAIL = "GET_ACTIVITY_BY_ID_FAIL"
export const UPDATE_ACTIVITY_BY_ID_REQUEST = "UPDATE_ACTIVITY_BY_ID_REQUEST"
export const UPDATE_ACTIVITY_BY_ID_SUCCESS = "UPDATE_ACTIVITY_BY_ID_SUCCESS"
export const UPDATE_ACTIVITY_BY_ID_FAIL = "UPDATE_ACTIVITY_BY_ID_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/activitiesReducer.js
import { CREATE_ACTIVITY_FAIL, CREATE_ACTIVITY_REQUEST, CREATE_ACTIVITY_SUCCESS, GET_ACTIVITIES_FAIL, GET_ACTIVITIES_REQUEST, GET_ACTIVITIES_SUCCESS } from "../constants/activitiesConstants";
import {
CREATE_ACTIVITY_FAIL,
CREATE_ACTIVITY_REQUEST,
CREATE_ACTIVITY_SUCCESS,
GET_ACTIVITIES_FAIL,
GET_ACTIVITIES_REQUEST,
GET_ACTIVITIES_SUCCESS,
GET_ACTIVITY_BY_ID_FAIL,
GET_ACTIVITY_BY_ID_REQUEST,
GET_ACTIVITY_BY_ID_SUCCESS,
UPDATE_ACTIVITY_BY_ID_FAIL,
UPDATE_ACTIVITY_BY_ID_REQUEST,
UPDATE_ACTIVITY_BY_ID_SUCCESS
} from "../constants/activitiesConstants";
import { CLEAR_ERRORS } from "../constants/vendorConstants";
export const createActivityReducer = (state = {}, action) => {
......@@ -27,8 +40,7 @@ export const createActivityReducer = (state = {}, action) => {
default:
return state;
}
};
};
export const getActivitiesReducer = (state = {}, action) => {
switch (action.type) {
......@@ -57,3 +69,57 @@ export const getActivitiesReducer = (state = {}, action) => {
return state;
}
};
export const getActivityByIdReducer = (state = {}, action) => {
switch (action.type) {
case GET_ACTIVITY_BY_ID_REQUEST:
return {
loading: true
};
case GET_ACTIVITY_BY_ID_SUCCESS:
return {
loading: false,
activityById: action.payload
};
case GET_ACTIVITY_BY_ID_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const updateActivityByIdReducer = (state = {}, action) => {
switch (action.type) {
case UPDATE_ACTIVITY_BY_ID_REQUEST:
return {
loading: true
};
case UPDATE_ACTIVITY_BY_ID_SUCCESS:
return {
loading: true,
updatedActivity: action.payload
};
case UPDATE_ACTIVITY_BY_ID_FAIL:
return {
loading: true,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
redux/reducers/reducers.js
......@@ -5,7 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed
import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer";
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
......@@ -30,6 +30,8 @@ const reducers = combineReducers({
subCategories: getAllSubCategoriesReducer,
testimonial: getAllTestimonialReducer,
allActivitiesData: getActivitiesReducer,
activityById: getActivityByIdReducer,
updatedActivity: updateActivityByIdReducer,
});
export default reducers;
services/imageHandling.js
......@@ -32,11 +32,11 @@ export const renderImage = imagePath => {
};
export const sanitizeTimeFormat = ({ data }) => {
console.log("here sant 1")
console.log("here sant 1");
if (!data.fromHours || !data.fromMins || !data.toHours || !data.toMins) {
console.log("here sant")
return null
console.log("here sant");
return null;
}
const fromTime = `${data.fromHours}:${data.fromMins}:00`;
const toTime = `${data.toHours}:${data.toMins}:00`;
......@@ -45,3 +45,19 @@ export const sanitizeTimeFormat = ({ data }) => {
return { fromTime, toTime, day };
// const day
};
export const sanitizeTimeRange = ({ data }) => {
// console.log("data >", data[0].$d);
const date = new Date(data.$d);
const day = date.getDate();
const month = date.getMonth() + 1; // Month starts from 0, so add 1
const year = date.getFullYear();
const formattedDay = day < 10 ? "0" + day : day;
const formattedMonth = month < 10 ? "0" + month : month;
const formattedDate = `${year}-${formattedMonth}-${formattedDay}`;
// console.log("date", formattedDate);
return formattedDate;
// const endDate = new Date(data[1].$d);
};
styles/globals.css
......@@ -2734,6 +2734,14 @@ footer hr {
width: 33px !important;
height: 33px !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!