Untitled
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