import React, { Component, useState, useEffect } from "react"; import { getAllProductAction, productFilter, resetFilter } from "../../../state/actions/productsAction"; import { Text, View, StyleSheet, ScrollView, Picker, Platform, Dimensions, Image, RefreshControl } from 'react-native'; import { Card, DataTable, Button, Searchbar, Surface, IconButton, Portal, Dialog } from 'react-native-paper'; import { useDispatch, useSelector } from 'react-redux'; import isEmpty from '../../../state/validations/is-empty' import 'react-native-gesture-handler' import RenderHtml from 'react-native-render-html'; import Header from "../../auth/components/header"; import EsiSearchDropdown from "../../../components/custom/searchable-dropdown"; import AsyncStorage from "@react-native-async-storage/async-storage"; const filterOptions = [ { value: 'All', label: 'All' }, { value: 'Product_Id', label: 'Product ID' }, { value: 'Product_Name', label: 'Product Name' }, { value: 'Price', label: 'Price' }, { value: 'Status', label: 'Status' }, ]; const numberOfItemsPerPageList = [5, 10, 20]; const window = Dimensions.get("window"); const screen = Dimensions.get("screen"); const ProductGet = ({ navigation }: { navigation: any }) => { // Role restriction const permissions = useSelector(state => state.auth.permissions); const [productss, setProducts] = useState([]); const [page, setPage] = React.useState(0); const [dimensions, setDimensions] = React.useState(Dimensions.get('window').width); const [showDropDown, setShowDropDown] = React.useState(false); const Products = useSelector(state => state.product.products.all); let allProducts = Products?.results; const [productMenu, setProductMenu] = React.useState('All') const [productSearch, setProductSearch] = React.useState(''); const EmailID = useSelector(state => state.auth.user); const [products, setData] = React.useState(); const [visible, setVisible] = React.useState(false); const hideDialog = () => setVisible(false); const [numberOfItemsPerPage, numberItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]); const from = page * numberOfItemsPerPage; const to = (Number(from) + Number(numberOfItemsPerPage) > allProducts?.Pagination?.TotalCount ? allProducts?.Pagination?.TotalCount : Number(from) + Number(numberOfItemsPerPage)); const [product, setProduct] = React.useState(); const dispatch = useDispatch() const onItemsPerPageChange = (e) => { numberItemsPerPageChange(e) setPage(0) setPagination({ PageNo: Number(1), PageSize: e, SortBy: "PRODUCT_ID", SortOrder: "DESC" }) } const DynamicPage = (e) => { setPage(e) setPagination({ PageNo: e + Number(1), PageSize: numberOfItemsPerPage, SortBy: "PRODUCT_ID", SortOrder: "DESC" }); } const [pageOld, setPageOld] = React.useState(false); const [pagination, setPagination] = React.useState({ PageNo: 1, PageSize: 5, SortBy: "PRODUCT_ID", SortOrder: "DESC" }); React.useEffect(() => { if (pageOld) { setPageOld(false); } else { productsCall(); } }, [pagination]) // search and set search is used for the search functionality const [loading, setIsLoading] = React.useState(false); const productsCall = () => { setIsLoading(true); let formData = { search_by_filter:productMenu, search:'', Records_Filter: "FILTER", Partner_Details_Id: EmailID.Partner_Details_Id }; dispatch(getAllProductAction(formData, pagination)) }; React.useEffect(() => { const signNavigation = async () => { const user = await AsyncStorage.getItem("user"); const user_parsed = JSON.parse(user); if (!user_parsed?.Partner_Session_Id) { navigation.navigate('SignIn'); } }; signNavigation(); }); React.useEffect(() => { let formData = { search_by_filter:productMenu, search:'', Records_Filter: "FILTER", Partner_Details_Id: EmailID.Partner_Details_Id }; setProduct(allProducts); dispatch(getAllProductAction(formData,pagination)) }, []); React.useEffect(() => { const subscription = Dimensions.addEventListener( "change", ({ window, screen }) => { setDimensions(window.width); } ); }); const handleClickshoppersproducts = async (allProducts) => { navigation.navigate('ShoppersGet', { shoppersproductparams: allProducts }) }; const handleClickpartner = async (allProducts) => { navigation.navigate('ProductPartnerGet', { productpartnerparams: allProducts.Product_Id, productmaster: allProducts.Product_Master_Id }) }; const handleClickrelatedproducts = async (allProducts) => { navigation.navigate('RelatedProducts', { relatedproductparams: allProducts }) }; const handleClickadd = async (productmaster) => { navigation.navigate('AddProduct', { master: productmaster }) }; const handleClickedit = async (product) => { navigation.navigate('EditProduct', { product_id: product.Product_Id }) }; const [oldSearch, setOldSearch] = React.useState(0); useEffect(() => { if (!isEmpty(allProducts)) { setProducts(allProducts); } else { setProducts([]); } }, [allProducts]); // Sorting const [order, setOrder] = React.useState('ascending'); const [orderBy, setOrderBy] = React.useState('Product_Id'); const handleRequestSort = (event, property) => { const isAsc = orderBy === property && order === 'ascending'; setOrder(isAsc ? 'descending' : 'ascending'); setPagination({ PageNo:1, PageSize:numberOfItemsPerPage, SortBy:property, SortOrder:order==='ascending'?"ASC":"DESC"}) setOrderBy(property); setPage(0); }; const createSortHandler = (property) => (event) => { handleRequestSort(event, property); }; const handleChange = itemValue => { setProductMenu( itemValue); }; const handleSearch = value => { setProductSearch(value) let formData = { search:value, search_by_filter:productMenu, Records_Filter: "FILTER", Partner_Details_Id: EmailID.Partner_Details_Id }; dispatch(getAllProductAction(formData,pagination)) }; const [refreshing, setRefreshing] = React.useState(false); const wait = (timeout) => { return new Promise(resolve => setTimeout(resolve, timeout)); } const onRefresh = React.useCallback(() => { setRefreshing(true); wait(2000).then(() => setRefreshing(false)); }, []); return (
= 700 ? '60%' : '90%', maxHeight: (dimensions >= 500) ? 500 : 400, marginLeft: 'auto', marginRight: 'auto' }}> setVisible(!visible)} /> Product View Product ID{products?.Product_Id} Product Name{products?.Product_Name} Brand ID{products?.Brand_Id} Category{products?.Category_Id} Sub Category{products?.Sub_Category_Id} Product Master ID{products?.Product_Master_Id} Product Color{products?.Product_Color} Product Size ID{products?.Product_Size_Id} Short Description Long Description Specifications Features ESI Reviews Status{products?.Status} }> Products................ {(permissions.Products_Partner_Products_Related_Products === "write") && } {Platform.OS !== 'web' ? setShowDropDown(true)} onBlur={() => setShowDropDown(false)} onUpdateValue={item => { setShowDropDown(false); handleChange(item.value) }} /> : handleChange(itemValue)} > } handleSearch(value)} value={productSearch} /> = 700 ? false : true}> Product ID Product Name Price Status Product Partners Related Products Actions {allProducts?.map((products, i) => ( {products.Product_Id} {products.Product_Name} {products.Price} {products.Status} {(permissions.Products_Partner_Products_Related_Products === "write") && { handleClickedit(products); }} /> } { setData(products); setVisible(!visible) }} /> )) } {isEmpty(allProducts) && No records found! } DynamicPage(to < Products?.Pagination?.TotalCount ? page : 0)} label={Products?.Pagination?.TotalCount ? `${from + 1}-${to} of ${Products?.Pagination?.TotalCount}` : '0-0'} showFastPaginationControls={(Number(page) + Number(1)) > Products?.Pagination?.TotalPages ? false : true} numberOfItemsPerPageList={numberOfItemsPerPageList} numberOfItemsPerPage={numberOfItemsPerPage} onItemsPerPageChange={onItemsPerPageChange} selectPageDropdownLabel={'Rows per page'} /> ); } const styles = StyleSheet.create({ mainbox: { textAlign: 'center', margin: 15, flex: 1, justifyContent: 'space-between', }, databeBox: { margin: 10, textAlign: 'center', }, databeHeader: { margin: 10, textAlign: 'left', }, title: { fontWeight: "bold", fontSize: 12, justifyContent: "center", textAlign: "center", width: 160 }, titletext: { fontWeight: "bold", fontSize: 14, color: 'black', }, tablerow: { justifyContent: "center", textAlign: "center", width: 140 }, dropdown: { height: 50, borderColor: 'gray', borderWidth: 0.5, borderRadius: 5, paddingHorizontal: 8, }, icon: { marginRight: 5, }, dropdownlabel: { position: 'absolute', backgroundColor: 'white', left: 22, top: 8, zIndex: 999, paddingHorizontal: 8, fontSize: 14, }, placeholderStyle: { fontSize: 16, }, selectedTextStyle: { fontSize: 16, }, iconStyle: { width: 20, height: 20, }, inputSearchStyle: { height: 40, fontSize: 16, }, containerstyle: { width: 240 }, }); export default ProductGet; chakradharreddy82@gmail.com Chakri@1995 chakradhar@yopmail.com Meepaisa@123 8106974055 Meepaisa@123 Product_Image products actions related products get shop by city deals product details ------- 250 image.push({ imageuri: productImage[i].Product_Image[0].Product_Image }) new userservice get edit ingrogress user service completed user serviceget edit partner service add partner service employe new user service get employeeinprogressuserserviceGet 972 employeecompleteduserserviceGet editemployeeInprogressUserservice 33324 471548 632478 48597