Untitled

 avatar
unknown
plain_text
a year ago
42 kB
3
Indexable
bulk edit

import { InlineStack, Thumbnail, BlockStack, Text, Button, Page, Icon, Collapsible, Checkbox, Tooltip, ContextualSaveBar, Modal, Card } from '@shopify/polaris';
import React, { useEffect, useMemo, useReducer, useState } from 'react'
import { Table } from 'antd';
import SideSheet from './components/SideSheet/SideSheet';
import Category from './components/Category/Category';
import AnnouncementAlert from './components/Announcement/AnnouncementAlert';
import './styles/bulkedit.css';
import { reducer } from './context/reducer';
import { GLobalProvider } from './context';
import { _ACTIONS } from './context/actions';
import { formatAmazonRecommendations, checkForMutatedStates, isRowElementDisabled, extractPrefilledVariantAttributes, extractEditedCol, manageColHeading, selectedProductsCount, formatShopifyAttributes, extractCurrentSelection } from './helper';
import { _DROPDOWN, _RESET } from '../../assets/iconsSvg';
import { BulkeditI, ModalHandlerI, ResetDataI } from './type/bulkedit.type';
import { useNavigate } from 'react-router-dom';
import getClassNames from './Utility/getClassnames';
import SkeltonBulkEditGrid from './skeltonBulkEdit/SkeltonBulkEditGrid';
import { _SHOPIFYATTRIBTUES, _STATICCOLUMNS } from './helper/constants';
import { ColumnElementStructureI, PopoverPayloadI } from './type';
import { OnCellClickedI, RenderEditableCellI } from './type/rows.type';
import Pagination from './components/Pagination/Pagination';
import { rowData2 } from '../constants/products';
import { ChevronDownMinor, ChevronUpMinor, Columns3Major } from '@shopify/polaris-icons';
import { HTMLElement } from './components/HTMLElement';
import { trimTitle } from './helper/view/bulkeditView';


export default function BulkEdit(props: Readonly<BulkeditI>) {
    const [announcement, setAnnouncement] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [isSideSheetOpen, setIsSideSheetOpen] = useState(false);
    const [globalState, dispatch] = useReducer(reducer, {
        pagination: {
            page: 1,
            totalPages: 2
        }
    });
    const [selectAllCols, setSelectAllCols] = useState<any>({});
    const [isCollapsible, setIsCollapsible] = useState<any>({});
    const [loading, setLoading] = useState(true);
    const [isVariantGrid, setIsVariantGrid] = useState(false)
    let tempCommencedState: any = {};
    const naviate = useNavigate();
    const isVariantBulkEdit = getParams();
    const [modal, setModal] = useState({
        title: '',
        isOpen: false,
        data: [],
        type: '',
        size: 'medium',
        primaryAction: [],
    })
    const memoizedValue = useMemo(() => ({
        value: globalState,
        dispatch
    }), [globalState, dispatch]);

    const [selectedCell, setSelectedCell] = useState<any>({
        rowIndex: 0,
        columnIndex: 0,
        colName: ''
    })

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps: (record: any) => {
            if (record.index === undefined) {
                return {
                    style: {
                        display: 'none',
                    },
                    disabled: record?.index === undefined
                };
            }
            return {
                disabled: record?.index === undefined//', // Disable checkbox for the first row
            }
        },
    };

    function getParams() {
        return window.location.pathname === '/varian-edit'
    }

    function handleClickOutside(event: MouseEvent) {
        if(!selectedCell.rowIndex && selectedCell.colName ==="") return;
        const popoverContentContainer = document.querySelector<HTMLElement>(".Polaris-Popover__ContentContainer");
        const customMoreActionEles = document.querySelectorAll<HTMLElement>(".selected_cell");
        const isInsidePopover = popoverContentContainer && event.composedPath().includes(popoverContentContainer);
        const isInsideCustomMoreAction = Array.from(customMoreActionEles).some(ele =>
            event.composedPath().includes(ele)
        );
        if (!isInsidePopover && !isInsideCustomMoreAction) {
            resetCell(selectedCell?.columnIndex,selectedCell?.colName)
        }
    };

    function resetCell(index:any,key:any) {
        let tempRows: any = [...(globalState?.rows ?? [])];
        tempRows[index][key]['clicked'] = '';
        setSelectedCell({ rowIndex: null, columnIndex: null,colName:"" });
        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows
            }
        })
    }

    useEffect(() => {
        window.addEventListener("click", handleClickOutside)
        return () => {
            window.removeEventListener("click", handleClickOutside)
        }
    }, [selectedCell])
    useEffect(() => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false)
            prepareColumns(props.columns);
            prepareRows(
                globalState?.pagination && globalState?.pagination?.page === 2 ? rowData2 : props.rows
            );
            prepareShopifyAttributes()
        }, 500);
    }, [globalState?.pagination, props.rows, props.columns, props.rows])

    function prepareShopifyAttributes() {
        let shhopifyAttributes: any = formatShopifyAttributes(_SHOPIFYATTRIBTUES);
        dispatch({
            type: _ACTIONS.SHOPIFY_ATTRIBUTES,
            payload: {
                shopifyAttributes: shhopifyAttributes
            }
        })
    }

    useEffect(() => {
        setSelectedRowKeys([])
    }, [globalState?.pagination?.page])

    function prepareRows(rows: any) {
        let tempRows: any = [];
        rows.forEach((elem: any, index: number) => {
            let { source_product_id, title, main_image, description, editedData } = elem;
            tempRows.push({
                key: {
                    value: source_product_id
                },
                source_product_id: {
                    value: source_product_id
                },
                title: {
                    value: title ?? 'Title ' + source_product_id
                },
                main_image: {
                    value: main_image
                },
                description: {
                    value: description
                },
                ...(isVariantBulkEdit ? preapreVariantRows(elem) : dynamicCols(elem?.editedData, elem?.container_id)),
                editedData
            })

        });
        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows,
            }
        });
        commencedState('rows', JSON.parse(JSON.stringify(tempRows)))
    }

    function preapreVariantRows(variantData: any) {
        const tempColumns = prepareColumns(props.columns, 'rows');
        let result: any = {}
        let rows: any = [];
        if (variantData?.edited_variant_attributes)
            rows.push(...(variantData?.edited_variant_attributes ?? []))
        if (variantData?.category_settings?.attributes_mapping?.optional_attribute)
            rows.push(...(variantData?.category_settings?.attributes_mapping?.optional_attribute ?? []))

        tempColumns?.forEach((elem: any, index: number) => {
            if (elem?.dataIndex !== 'ProductDetails' && elem?.dataIndex !== 'sku') {
                result = {
                    ...result,
                    [elem?.dataIndex]: {
                        ...formatColData(elem, rows, elem?._field_data ?? {}),
                        hasAmazonRecommendation: elem?.hasAmazonRecommendation,
                        options: formatAmazonRecommendations(elem?._field_data?.amazon_recommendation ?? {}),
                    },
                }
            }
        })
        return result
    }

    function dynamicCols(editedData: any, p_container_id: string) {
        const tempColumns = prepareColumns(props.columns, 'rows');
        let result: any = {}
        let rows: any = [];
        if (editedData?.length === 1)
            rows.push(
                ...(editedData?.[0]?.category_settings?.attributes_mapping?.optional_attribute ?? []),
                ...(editedData?.[0]?.category_settings?.attributes_mapping?.required_attribute ?? [])
            )
        else {
            editedData?.forEach((elem: any) => {
                if (elem?.source_product_id === p_container_id) {
                    rows.push(...(elem?.category_settings?.attributes_mapping?.optional_attribute ?? []), ...(elem?.category_settings?.attributes_mapping?.required_attribute ?? []))
                }
            })
        }
        tempColumns?.forEach((elem: any, index: number) => {
            if (elem?.dataIndex !== 'ProductDetails' && elem?.dataIndex !== 'sku') {
                result = {
                    ...result,
                    [elem?.dataIndex]: {
                        ...formatColData(elem, rows, elem?._field_data ?? {}),
                        hasAmazonRecommendation: elem?.hasAmazonRecommendation,
                        options: formatAmazonRecommendations(elem?._field_data?.amazon_recommendation ?? {}),
                    },
                    variantLength: editedData?.length
                }
            }
        })
        return result
    }

    function formatColData(col: any, rows: any[], _field_data: any) {
        let data: any = undefined;
        rows.forEach(elem => {
            if (col?.key === elem?.amazon_attribute) {
                data = {
                    isModified: false,
                    isEditable: false,
                    hasAmazonRecommendation: elem?.recommendation !== '',
                    amazonRecommendation: {
                        options: _field_data?.amazon_recommendation,
                        value: elem?.recommendation
                    },
                    shopifySelect: {
                        options: formatShopifyAttributes(_SHOPIFYATTRIBTUES),
                        value: elem?.shopify_attribute ?? ''
                    },
                    customText: {
                        value: elem?.custom_text ?? ''
                    },
                    currentSelection: {
                        ...extractCurrentSelection(elem, _field_data)
                    },
                    columnName: col?.title,
                    clicked: '',
                    displayValue: extractCurrentSelection(elem, _field_data)?.value ?? ''
                }
            }
        })
        if (data === undefined)
            data = {
                value: '',
                options: [],
                isEditable: false,
                isModified: false,
                hasAmazonRecommendation: _field_data?.amazon_recommendation !== undefined,
                amazonRecommendation: {
                    options: _field_data?.amazon_recommendation ?? [],
                    value: ''
                },
                shopifySelect: {
                    options: formatShopifyAttributes(_SHOPIFYATTRIBTUES),
                    value: ''
                },
                customText: {
                    value: ''
                },
                currentSelection: {
                    type: '',
                    value: '',
                    options: []
                },
                columnName: col?.title,
                clicked: '',
                displayValue: ''
            }
        return data
    }

    function prepareColumns(inputObject: any, from?: 'rows' | 'cols') {
        let result: any[] = [..._STATICCOLUMNS];
        let manageColumns: any = {};
        let selectAllCols: any = {};
        let collapsibles: any = {}
        let index: number = 0;

        for (const categoryKey in inputObject) {
            const category = inputObject[categoryKey];
            selectAllCols[categoryKey] = {
                selectAll: extractPrefilledVariantAttributes({
                    categoryKey, isVariantBulkEdit
                })
            }
            collapsibles[categoryKey] = { // to open or to close the manage col's collapsible
                isOpen: extractPrefilledVariantAttributes({
                    categoryKey, isVariantBulkEdit
                })
            }
            for (const fieldKey in category) {
                index++;
                const field = category[fieldKey];
                if (categoryKey === 'Mandantory') {
                    if (!isVariantBulkEdit)
                        manageColumns[categoryKey] = {
                            ...manageColumns[categoryKey],
                            [fieldKey]: {
                                visible: extractPrefilledVariantAttributes({
                                    categoryKey, isVariantBulkEdit
                                }),
                                ...field,
                                type: categoryKey
                            }
                        }
                }
                else
                    manageColumns[categoryKey] = {
                        ...manageColumns[categoryKey],
                        [fieldKey]: {
                            visible: extractPrefilledVariantAttributes({
                                categoryKey, isVariantBulkEdit,
                                rows: props.rows,
                                categoryField: fieldKey
                            }),
                            ...field,
                            type: categoryKey
                        }
                    }
                result.push({
                    _field_data: field,
                    key: fieldKey,
                    type: categoryKey,
                    visible: extractPrefilledVariantAttributes({
                        categoryKey, isVariantBulkEdit,
                        rows: props.rows,
                        categoryField: fieldKey
                    }),
                    title: field?.label,
                    dataIndex: field.label,
                    width: '300px',
                    isModified: false,
                    hasAmazonRecommendation: field?.amazon_recommendation !== undefined,
                    elementIndexKey: index + (field?.definition ?? index)
                });
            }
        }
        if (from) return result
        setSelectAllCols(selectAllCols);
        setIsCollapsible(collapsibles);
        dispatch({
            type: _ACTIONS.COLUMNS,
            payload: {
                [_ACTIONS.MANAGE_COLS]: manageColumns,
                [_ACTIONS.COLUMNS]: result
            }
        });
        commencedState('columns', JSON.parse(JSON.stringify(result)));
    }

    function commencedState(key: string, value: any) {
        tempCommencedState[key] = value;
        dispatch({
            type: _ACTIONS.SET_COMMENCED_STATE,
            payload: {
                commencedState: {
                    ...globalState?.commencedState,
                    ...tempCommencedState
                }
            }
        })
    }

    function columnRenderer(columns: any[]) {
        let structure: any = [];
        columns?.forEach((elem, index) => {
            structure.push({
                ...elem,
                title: <div className="thead-tooltip">
                    {
                        typeof elem?.title === 'string' && elem?.title !== "Product Details" ? <Tooltip content={elem?.title}>
                            <Text as="p" fontWeight="bold">
                                {trimTitle({ title: elem?.title })}
                            </Text>
                        </Tooltip> :
                            <Text as="p" fontWeight="bold">
                                {trimTitle({ title: elem?.title })}
                            </Text>
                    }
                </div>,
                render: (t: any) => {
                    if (t === undefined) return columnElementStructure({
                        element: elem,
                        index
                    })
                    else return t
                },
                key: elem?.title
            })
        })
        return structure
    }

    const triggerOnDataChange = (triggeredFuntion: any, ...params: any) => {
        triggeredFuntion(...params);
    };

    function columnElementStructure(props: ColumnElementStructureI) {
        const { element: elem, index } = props;
        function showEditText(){
            const uniqueIdentifier = elem.dataIndex;
            if (uniqueIdentifier === "ProductDetails") {
                return <div className='edit_describtion'>Edit this row to update selected products</div>
            }
            else if (uniqueIdentifier === "sku" || uniqueIdentifier === "productTitle") {
                return <></>
            }
        }
        return <>
            {rowSelection.selectedRowKeys?.length >= 2 ?
            elem.dataIndex === "ProductDetails" || elem.dataIndex === "sku" ? showEditText():
            <HTMLElement
                type='popover'
                payload={{
                    popover: {
                        hasAmazonRecommendation: elem?._field_data?.amazon_recommendation !== undefined,
                        amazonRecommendation: {
                            options: formatAmazonRecommendations(elem?._field_data?.amazon_recommendation ?? {}),
                            value: ''
                        },
                        shopifySelect: {
                            options: globalState?.shopifyAttributes ?? [],
                            value: ''
                        },
                    },
                    columnName: elem?.title
                }}
                tableElementType='columns'
                onDataChange={(...params) => triggerOnDataChange(updatedHandleBulkEdit, ...params)}
            />
                : <>
                    {elem?.dataIndex === "ProductDetails" ? <div className='select_describtion'><Text as='p'>Select two or more rows to enable Bulk Edit</Text></div> : <></>}
                </>}
            {
                (checkForMutatedStates(globalState?.commencedState, globalState?.rows) && rowSelection.selectedRowKeys?.length >= 2) && (elem?.dataIndex !== "ProductDetails") && (elem?.dataIndex !== "sku") &&
                <Button
                    key={elem?.title}
                    id='reset_btn'
                    disabled={extractEditedCol({
                        initialState: globalState?.commencedState,
                        modifiedState: globalState?.rows,
                        colIdentifier: elem?._field_data?.label ?? ''
                    })}

                    onClick={() => {
                        resetData({
                            index: index,
                            key: typeof elem?.title === 'object' ? elem?.dataIndex : elem?.title,
                            type: 'bulk',
                        })
                    }}
                    variant="plain">Reset</Button>
            }
        </>;
    }

    function updatedHandleBulkEdit(key: string, value: string | number) {
        let tempRows: any = [...(globalState?.rows ?? [])];
        tempRows?.forEach((row: any) => {
            if (rowSelection.selectedRowKeys?.includes(row['key']['value'])) {
                row[key]['displayValue'] = value;
                row[key]['isModified'] = true;
            }
        });

        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows
            }
        })
    }

    function toggleColumn(key: string, sub_key: string, value: any) {

        let found: boolean = false;
        let tempCols: any = [...(globalState?.columns ?? [])];
        tempCols?.forEach((elem: any) => {
            if (!found && elem?.dataIndex === value) {
                elem.visible = !elem?.visible
            }
        })
        // Updating mangeCols keys
        let tempManageCols: any = { ...(globalState?.manage_columns ?? {}) };
        tempManageCols[key][sub_key]['visible'] = !tempManageCols[key][sub_key]['visible'];
        dispatch({
            type: _ACTIONS.COLUMNS,
            payload: {
                [_ACTIONS.COLUMNS]: tempCols,
                [_ACTIONS.MANAGE_COLS]: tempManageCols
            }
        })
    }

    function selectAllManagedCols(key: string, value: any, sub_key: any) {
        let temp: any = { ...selectAllCols };
        temp[key]['selectAll'] = !value;

        let tempManageCols: any = { ...(globalState?.manage_columns ?? {}) };
        let tempCols: any = [...(globalState?.columns ?? [])];
        Object.keys(tempManageCols[key] ?? [])?.forEach(elem => {
            tempManageCols[key][elem]['visible'] = !value;
        })

        tempCols?.forEach((elem: any) => {
            if (elem?.type === key)
                elem['visible'] = !value;
        })

        dispatch({
            type: _ACTIONS.COLUMNS,
            payload: {
                [_ACTIONS.MANAGE_COLS]: tempManageCols,
                [_ACTIONS.COLUMNS]: tempCols,
            }
        })
        setSelectAllCols(temp)
    }

    function handleCollapsible(key: string): any {
        let tempCollapsibles: any = { ...isCollapsible };
        tempCollapsibles[key]['isOpen'] = !tempCollapsibles?.[key]?.isOpen;
        setIsCollapsible(tempCollapsibles)
    }

    const renderManagedElements = (elem: any) => {
        const header =
            elem === 'Mandantory' ?
                <Text as='h3' fontWeight='bold' variant='headingSm'>Required Attributes</Text> :
                manageColHeading(elem);

        const collapsible = (
            <Collapsible
                open={isCollapsible?.[elem]?.['isOpen']}
                id="basic-collapsible"
                transition={{ duration: '500ms', timingFunction: 'ease-in-out' }}
                expandOnPrint
            >
                <div className='collapsible-inner'>
                    <BlockStack gap={"500"}>
                        <Checkbox
                            label="Select All"
                            checked={selectAllCols[elem]?.['selectAll']}
                            onChange={() => {
                                selectAllManagedCols(elem, selectAllCols[elem]?.['selectAll'], globalState?.[_ACTIONS.MANAGE_COLS][elem])
                            }}
                        />
                        <div className='managecolumns__parent'>
                            {
                                Object.keys(globalState?.[_ACTIONS.MANAGE_COLS]?.[elem])?.map((element: any, index: number) => {
                                    const key = globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['definition'] + 'renderManagedElements' + index;
                                    return <div key={key} className='managecolumns__child'>
                                        {globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['label'] && <Checkbox
                                            label={trimTitle({
                                                title: globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['label'],
                                                length: 30, substringLength: 30,
                                                tooltip: {
                                                    hasTooltip: true,
                                                    tooltipContent: globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['label']
                                                }
                                            }) ?? "Select"}

                                            //globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['label'], 30, 30, { hasTooltip: true, tooltipContent: globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['label'] }
                                            checked={globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['visible']}
                                            onChange={() => {
                                                toggleColumn(elem, element, globalState?.[_ACTIONS.MANAGE_COLS]?.[elem][element]?.['label'])
                                            }}
                                        />}
                                    </div>
                                })
                            }
                        </div>
                    </BlockStack>
                </div>
            </Collapsible>
        );

        return (
            <BlockStack gap={"300"} key={elem}>
                {header}
                <div className="custom-dropdown--link side-sheet-contentWrapper">
                    <div
                        role='none'
                        className='collapsible--header'
                        onClick={() => { handleCollapsible(elem) }}>
                        <InlineStack align='space-between' blockAlign='center'>
                            <Text as='h3' fontWeight='bold' variant='headingSm' tone='subdued'>{elem}</Text>
                            <div>
                                {isCollapsible?.[elem]?.['isOpen'] ? (
                                    <Icon source={ChevronUpMinor} tone="base" />
                                ) : (
                                    <Icon source={ChevronDownMinor} tone="base" />
                                )}

                            </div>
                        </InlineStack>
                    </div>
                    {collapsible}
                </div>
            </BlockStack>
        );
    };

    function manageColumnRenderer() {
        let structure: React.ReactNode[] = [];
        if (globalState?.[_ACTIONS.MANAGE_COLS]) {
            Object.keys(globalState?.[_ACTIONS.MANAGE_COLS])?.forEach((elem: any) => {
                if (elem !== 'Variation') {
                    structure.push(renderManagedElements(elem));
                }
            });
        }
        return structure
    }

    function rowsRenderer(rows: any[]) {
        let tempRowRenderer: any = [];
        Object.keys(rows ?? []).forEach((elem: any, index: number) => {
            tempRowRenderer.push({
                ProductDetails: <InlineStack gap={"200"} wrap={false} blockAlign='start' align='start'>
                    <div className={getClassNames({ "without-variant": rows[elem]?.editedData?.length < 2 })} style={{ width: '40px' }}>
                        <Thumbnail
                            source={rows[elem]?.main_image?.value ?? 'https://i.imgur.com/oUVyG2C.png"'}
                            size="small"
                            alt="Black choker necklace"
                        />
                    </div>
                    <BlockStack gap={"100"} align='start'>
                        <div className='product-name'>
                            <Text as="p">
                                {rows[elem]?.title?.value}
                            </Text>
                        </div>
                        {
                            rows[elem]?.editedData?.length > 1 &&
                            <div className='variant-name'>
                                <Button

                                    onClick={() => {
                                        redirectToVariantEdit(rows[elem]?.editedData)
                                        setLoading(true)
                                        setIsVariantGrid(true)
                                    }}
                                    variant="plain">
                                    {`${rows[elem]?.editedData?.length} Variants`}
                                </Button>
                            </div>
                        }
                    </BlockStack>
                </InlineStack>,
                // productTitle: rows[elem]?.title?.value,
                sku: rows[elem]?.source_product_id?.value ?? 'fsd5a6f46asf4as6f4a6sd54f',
                ...addColumnsWithElement(rows[elem], index),
                key: rows[elem]?.key?.value,
                index
            })
        });

        return [...tempRowRenderer];
    }

    function redirectToVariantEdit(variantData: any) {
        prepareRows(variantData)
        naviate('/varian-edit', {
            state: {
                rows: variantData,
                columns: props.columns
            }
        });
    }

    function handleRowUpdate(key: string, value: string | number, index: number | undefined,) {
        let tempRows: any = [...(globalState?.rows ?? [])];
        if (index !== undefined) {
            tempRows[index][key]['isModified'] = value !== globalState?.commencedState['rows'][index][key]['value']
            tempRows[index][key]['displayValue'] = value;
            dispatch({
                type: _ACTIONS.SET_ROW,
                payload: {
                    rows: tempRows
                }
            })
        }
    }

    function resetData(_props: ResetDataI) {
        let obj = {
            single: resetSingleCell,
            bulk: resetBulkEdit,
            defaultvalues: resetToDefaultValues
        }
        const callObj = obj[_props.type];
        callObj((_props))
    }

    function resetToDefaultValues() {
        let tempRows: any = [...(JSON.parse(JSON.stringify(globalState?.commencedState['rows'])) ?? [])];
        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows
            }
        });
        setSelectedRowKeys([]);
    }

    function resetSingleCell(_props: ResetDataI) {
        let tempRows: any = [...(globalState?.rows ?? [])];
        let { index, key } = _props
        tempRows[index][key]['displayValue'] = globalState?.commencedState['rows'][index][key]['displayValue'];
        tempRows[index][key]['isModified'] = false;
        tempRows[index][key]['clicked'] = '';
        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows
            }
        })
    }

    function resetBulkEdit(_props: ResetDataI) {
        let tempRows: any = [...(globalState?.rows ?? [])];
        let { key } = _props;
        tempRows?.forEach((elem: any, index: number) => {
            elem[key]['displayValue'] = globalState?.commencedState?.rows[index][key]['displayValue'];
            elem[key]['isModified'] = false;
            tempRows[index][key]['clicked'] = '';
        })
        if (!checkForMutatedStates(globalState?.commencedState, globalState?.rows))
            setSelectedRowKeys([])
        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows
            }
        })
    }

    const handleCellClick = (props: OnCellClickedI) => {
        let { data, index, parentRowIndex, rows } = props;
        setSelectedCell({
            columnIndex: parentRowIndex,
            rowIndex: index,
            colName: data
        })
        if (!isRowElementDisabled({
            rowSelection: { ...rowSelection },
            key: rows['key']['displayValue']
        })) {
            toggleEditAble(data, parentRowIndex, index);
        }
    };

    const renderEditableCell = (props: RenderEditableCellI) => {
        const { parentRowIndex, rowProps, childIndex } = props;
        return rowProps?.clicked === 'editing' ?
            <div role='none' tabIndex={childIndex}>
                <HTMLElement
                    type='popover'
                    payload={{
                        popover: {
                            hasAmazonRecommendation: rowProps?.hasAmazonRecommendation,
                            amazonRecommendation: {
                                options: formatAmazonRecommendations(rowProps?.amazonRecommendation?.options ?? []),
                                value: rowProps?.amazonRecommendation?.value ?? undefined
                            },
                            shopifySelect: {
                                options: rowProps.shopifySelect.options ?? [],
                                value: rowProps.shopifySelect.value
                            },
                            customText: {
                                value: rowProps?.customText?.value
                            },
                            currentSelection: {
                                ...rowProps.currentSelection
                            },
                            displayValue: rowProps.displayValue,
                            clicked: rowProps?.clicked === 'editing'
                        },
                        columnName: rowProps?.columnName,
                        indexMatrix: {
                            row: parentRowIndex,
                            childIndex: childIndex
                        },
                    }}
                    tableElementType='rows'
                    onDataChange={(...params) => triggerOnDataChange(handleRowUpdate, ...params)}
                    toggleEditAble={toggleEditAble}
                />
            </div> 
            :
            <InlineStack align='space-between' blockAlign='center' gap={'100'}>
                <div>
                    {rowProps.displayValue || '---'}
                </div>
                <InlineStack align='space-between' gap={'400'}>
                    {rowProps.isModified &&
                        <div role='none' className='reset-btn__wrapper' onClick={(e) => e.stopPropagation()}>
                            <Button
                                icon={_RESET}
                                onClick={() => resetData({ type: 'single', index: parentRowIndex, key: rowProps?.columnName })}
                                variant="plain" />
                        </div>
                    }
                    {_DROPDOWN}
                </InlineStack>
            </InlineStack>;
    };


    function addColumnsWithElement(rows: any, parentRowIndex: number) {
        let temp: any = {};
        Object.keys(rows ?? []).forEach((data: string, index: number) => {
            const rowProps: PopoverPayloadI = {
                ...rows[data]
            };
            temp[data] = (
                <div role='none'
                    key={data + 'addColumnsWithElement'}
                    className={
                        getClassNames({
                            "selected_cell":index === selectedCell.rowIndex && parentRowIndex === selectedCell.columnIndex,
                            "rowdata__wrapper":true,
                            "rows__editedcell": rows[data]?.['isModified'],
                        })}
                    // className={(index === selectedCell.rowIndex && parentRowIndex === selectedCell.columnIndex) ? "selected_cell" : 'rowdata__wrapper'}
                    onClick={() => {
                        handleCellClick({ data, index, parentRowIndex, rows });
                    }}
                >
                    {
                        renderEditableCell({ rowProps, parentRowIndex, childIndex: index })
                    }
                </div>
            );
        });

        return temp;
    }

    function toggleEditAble(key: any, parentIndex: number, childIndex: number, resetAll?: boolean) {
        let tempRows: any = [...(globalState?.rows ?? [])];
        tempRows?.forEach((elem: any, parentInd: number) => {
            Object.keys(elem ?? {}).forEach((rowChild: any, childInd: number) => {
                if (elem[rowChild]?.['clicked'] !== undefined) {
                    if ((parentInd === parentIndex && childInd === childIndex) && !resetAll) {
                        updateToggleState({
                            tempRows, parentIndex, key
                        })
                    }
                    else
                        elem[rowChild]['clicked'] = ''
                }
            })
        })

        dispatch({
            type: _ACTIONS.SET_ROW,
            payload: {
                rows: tempRows,
            }
        });
    }

    function updateToggleState(props: any) {
        const { tempRows, parentIndex, key } = props;
        if (tempRows[parentIndex][key]['clicked'] === '') {
            tempRows[parentIndex][key]['clicked'] = 'selected';
        }
        else if (tempRows[parentIndex][key]['clicked'] === 'selected') {
            tempRows[parentIndex][key]['clicked'] = 'editing';
        }
    }

    function modalHandler(props: ModalHandlerI) {
        let tempModal: any = { ...modal };
        tempModal['title'] = props?.title;
        tempModal['isOpen'] = props?.isOpen;
        tempModal['data'] = props?.data;
        tempModal['type'] = props?.type;
        tempModal['size'] = props?.size;
        setModal(tempModal);
    }

    return (
        <GLobalProvider.Provider value={memoizedValue}>
            <Modal
                open={modal.isOpen}
                title={modal.title}
                onClose={() => {
                    setModal({
                        ...modal,
                        isOpen: false
                    })
                }}
                primaryAction={{
                    content: 'Discard',
                    onAction: () => {
                        resetToDefaultValues();
                        modalHandler({ isOpen: false })
                    }
                }}
            >
                <Modal.Section>
                    {modal.data ?? []}
                </Modal.Section>
            </Modal>
            <Page
                fullWidth
                backAction={{ content: 'Products', url: '/bulkedit' }}
                title="Bulk Edit"
                subtitle="This feature allows you to edit product details for multiple products in one go.  It will save your valuable time by enabling you to update title, description, prices, inventory levels, and more across a large inventory. The value you choose in below attributes for selected products will get synchronize on Amazon marketplace"
            >
                {checkForMutatedStates(globalState?.commencedState, globalState?.rows) && <ContextualSaveBar
                    message="Unsaved changes"
                    saveAction={{
                        content: 'Save',
                        onAction: () => console.log('add form submit logic'),
                        loading: false,
                        disabled: false,
                    }}
                    discardAction={{
                        content: 'Discard',
                        onAction: () => {
                            modalHandler({
                                title: 'Discard Action',
                                data: 'All your changes will be lost and the action cannot be reverted.',
                                isOpen: true
                            })
                        },
                    }}
                />}
                <Card padding={'100'}>
                    <div className='card--padding'>
                        <BlockStack gap={"200"}>
                            {loading ? <SkeltonBulkEditGrid isVariantGrid={isVariantGrid} /> :
                                <>
                                    <div className='card-header--padding'>
                                        <InlineStack align='space-between' gap={"200"} blockAlign='center'>
                                            <Text as="h4" fontWeight='bold' variant='headingSm'>
                                                Selected {selectedProductsCount({
                                                    selectedRowKeys: selectedRowKeys
                                                })} items
                                            </Text>
                                            <InlineStack gap={"300"}>
                                                <Category />
                                                <div className='vertical--lines'></div>
                                                <Button onClick={() => { setIsSideSheetOpen(true) }} icon={<Icon
                                                    source={Columns3Major}
                                                />} />
                                            </InlineStack>
                                        </InlineStack>
                                    </div>
                                    <div className='bulkEdit-grid--wrapper'>
                                        <Table
                                            rowClassName={(record, index) => (index === 0 ? 'first__row' : '')}
                                            scroll={{ x: 'max-content' }}
                                            rowSelection={rowSelection}
                                            columns={columnRenderer(globalState?.columns?.filter((elem: { visible: any; }) => elem.visible) ?? [])}
                                            dataSource={[{ test: "test" }, ...(rowsRenderer(globalState?.rows) ?? [])]}
                                            pagination={false}
                                        />
                                    </div>
                                    <InlineStack align='center' blockAlign='center'>
                                        <Pagination />
                                    </InlineStack>
                                </>
                            }
                        </BlockStack>
                    </div>
                </Card>
            </Page >
            <SideSheet isOpen={isSideSheetOpen} onClose={() => { setIsSideSheetOpen(false) }} title="Manage Columns">
                {manageColumnRenderer()}
            </SideSheet>
            {/* <Announcement handleChangeAnnouncement={handleChangeAnnouncement} announcement={announcement} setAnnouncement={setAnnouncement} /> */}
            <AnnouncementAlert announcement={announcement} setAnnouncement={setAnnouncement} />
        </GLobalProvider.Provider>
    );
}
Editor is loading...
Leave a Comment