forstok-ui-lib 6.20.2 → 6.21.2

package/src/components/masterTable/index.tsx

@@ -1,649 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import IconComponent from '../icon';
-import ButtonComponent from '../button';
-import { pageMasterTable } from '../../assets/javascripts/helper';
-import { BulkActionWrapper, InitialContainer, MasterTableActionWrapper } from  '../../assets/stylesheets/shares.styles';
-import { MasterTable,  MasterTableWrapper, MasterTableViewport, MasterTableCanvas, MasterTableHeaderWrapper, MasterTableHeaderContainer, MasterTableBodyWrapper, IsMassContainer } from './styles';
-import type { THeadProps, TMasterProps } from '../../typeds/shares.typed';
-import type { TMouseEvent, TObject } from '../../typeds/base.typed';
-import type { TReloadField } from './typed';
-import ConfirmDataPartial from './partials/datas/confirm';
-import DataPartial from './partials/datas';
-import ImageComponent from '../image';
-import TextComponent from '../text';
-import CheckboxComponent from '../checkbox';
-import LinkComponent from '../link';
-import { evGenerateValueMatch, generateMessage, generateMessageQuestion, generateValue, validateByApproveJs } from '../../assets/javascripts/function';
-
-import DateEditors from './partials/editors/date';
-import DateBareEditors from './partials/editors/date.bare';
-import InputEditors from './partials/editors/input';
-import InputBareEditors from './partials/editors/input.bare';
-import ImageEditors from './partials/editors/image';
-import LabelEditors from './partials/editors/label';
-import SelectEditors from './partials/editors/select';
-import SelectBareEditors from './partials/editors/select.bare';
-import SwitchEditors from './partials/editors/switch';
-import TagEditors from './partials/editors/tag';
-import TextareaEditors from './partials/editors/textarea';
-
-const MasterTableComponent = (props: TMasterProps) => {
-  const {
-    evOpenPopup, 
-    headerColumns, 
-    data, 
-    setData, 
-    resultPopup, 
-    setResultPopup, 
-    type, 
-    evCreateMessageQuestion, 
-    evCreateMessage,  
-    autoCopy, 
-    setAutoCopy,
-    isRemovable = true,
-    isForceUpdate,
-    setForceUpdate
-  } = props;
-
-  const [isOpenBulk, setOpenBulk] = useState<boolean>(false);
-  const [isReloadField, setReloadField] = useState<TReloadField>();
-
-  useEffect(() => {
-    const evResize = () => {
-      const resizeEl = document.querySelector('._refResizeContainer') as HTMLElement;
-      if (resizeEl) {
-        const desEl = document.querySelector('._refMasterTableViewport') as HTMLElement;
-        const height = resizeEl.offsetHeight;
-        const headerEl = document.querySelector('._refHeaderContainer') as HTMLElement;
-        const headerHeight = headerEl ? headerEl.offsetHeight : 0
-        desEl && (desEl.style.height = `calc(100vh - ${height + headerHeight + 12}px)`);
-      }
-    };
-    evResize();
-    window.addEventListener('resize', evResize, true);
-    return () => {
-      window.removeEventListener('resize', evResize, true);
-    }
-  }, [])      
-
-  const page = pageMasterTable(type||'');
-
-  useEffect(() => {
-    const isCloneEl = document.querySelector('#master-clone') as HTMLDivElement;
-    const isCloneVal = isCloneEl ? isCloneEl.innerHTML : '';
-    if (data?.length && !isCloneVal) {
-      const masterTableViewPortyEl = document.querySelector('._refMasterTableViewport') as HTMLElement;
-      const masterTableHeaderCloneEl = document.querySelector('._refMasterTableHeaderClone') as HTMLElement;
-      let lastKnowX = 0;
-      let lastKnowScrollWidth = 0;
-      let ticking = false;
-      if (masterTableViewPortyEl) {
-        masterTableViewPortyEl.addEventListener("scroll", e => {
-          const scrollbarWidth = masterTableViewPortyEl.offsetWidth - masterTableViewPortyEl.clientWidth;
-          const left = masterTableViewPortyEl.scrollLeft;
-          lastKnowScrollWidth !== scrollbarWidth && (masterTableHeaderCloneEl.style.width = parseInt(masterTableHeaderCloneEl.style.width) + scrollbarWidth + 'px');
-          if (!ticking) {
-            window.requestAnimationFrame(() => {
-              lastKnowX !== left && (masterTableHeaderCloneEl.style.left = '-' + left + 'px')
-              ticking = false
-              lastKnowX = left
-            });
-            ticking = true;
-          }
-          lastKnowScrollWidth = scrollbarWidth;
-        }, { passive: true });
-      }
-      isCloneEl.innerHTML = 'true';
-    }
-  }, [data])
-
-  const firstHeaderColumnsWidth: number = 55;
-  const lastHeaderColumnsWidth: number = isRemovable ? 55 : 0;
-  const borderWidth = 1;
-  let totalHeaderColumnsWidth = 0;
-  let totalColGroupWidth = 0;
-  for (const head of headerColumns.filter(header => !header?.isHidden)) { 
-    head.type === 'colGroup' && (totalColGroupWidth = totalColGroupWidth + head.width);
-    totalHeaderColumnsWidth = totalHeaderColumnsWidth + head.width ;
-  }
-  totalHeaderColumnsWidth += firstHeaderColumnsWidth + lastHeaderColumnsWidth + borderWidth;
-  totalColGroupWidth += firstHeaderColumnsWidth;
-
-  const evChange = (head: THeadProps, value: any, idx: number, variantIdx?: number) => {
-    const _type = (head?.condition === 'category') ? 'Array' :  (head.typeData || 'String');
-    const _value = generateValue(_type, value);
-    const valid = head?.condition === 'category' ? validateByApproveJs(head, _value, (head?.condition[0].toUpperCase() + head?.condition.substring(1))) : validateByApproveJs(head, _value, undefined, evGenerateValueMatch(head.validations, data?.[idx]));
-    if (idx >= 0) {
-      let newData = [...data];
-      let newDataByIdx = newData[idx];
-      if (variantIdx && variantIdx >= 0) {
-        if(type === 'putaway-inbound') {
-          let newDataLocationByVariandIdx = newDataByIdx.locations[variantIdx]
-          const mainKey = head.key.replace('locations-', '');
-          newDataLocationByVariandIdx[mainKey] = _value;
-          if(!valid.approved) newDataLocationByVariandIdx[mainKey+'_error'] = valid.errors[0];
-          else delete newDataLocationByVariandIdx[mainKey+'_error']
-          newDataByIdx.locations.splice(variantIdx, 1, newDataLocationByVariandIdx);
-        } else {
-          let newDataVariantByVariandIdx = newDataByIdx.variants[variantIdx];
-          const mainKey = head.key.replace('variants-', '');
-          const variantsLength = newDataByIdx.variants.length;
-          if (mainKey === 'options-option' || mainKey === 'options-type') {
-            const optionIdx = (head.name.indexOf('1') !== -1)  ? 0 : 1;
-            const optionName = mainKey === 'options-option' ? 'option' : 'type';
-            if (optionName === 'type') {
-              let newDataVariants = [];
-              for (let i = 0; i < variantsLength; i++) {
-                let newDataVariant = newDataByIdx.variants[i];
-                newDataVariant.options[optionIdx][optionName] = _value;
-                (`${optionName}_error` in newDataVariant.options[optionIdx]) && delete newDataVariant.options[optionIdx][`${optionName}_error`];
-                if (newDataVariant.options.length > 1) {
-                  const oppositeOptionsIdx: number = optionIdx === 0 ? 1 : 0;
-                  (`${optionName}_error` in newDataVariant.options[oppositeOptionsIdx]) && delete newDataVariant.options[oppositeOptionsIdx][`${optionName}_error`];
-                  (_value.toLowerCase() === newDataVariant.options[oppositeOptionsIdx].type.toLowerCase()) && (newDataVariant.options[optionIdx][`${optionName}_error`] = 'Variant type is duplicate');
-                }
-                newDataVariants.push(newDataVariant);
-              }
-              newDataByIdx.variants = newDataVariants;
-            }
-            else {
-              newDataVariantByVariandIdx.options[optionIdx][optionName] = _value;
-              !valid.approved ? (newDataVariantByVariandIdx.options[optionIdx][optionName+'_error'] = valid.errors[0]) : delete newDataVariantByVariandIdx.options[optionIdx][optionName+'_error'];
-              newDataByIdx.variants.splice(variantIdx, 1, newDataVariantByVariandIdx);
-            }
-          } else {
-            newDataVariantByVariandIdx[mainKey] = _value;
-            !valid.approved ? (newDataVariantByVariandIdx[mainKey+'_error'] = valid.errors[0]) : delete newDataVariantByVariandIdx[mainKey+'_error'];
-            newDataByIdx.variants.splice(variantIdx, 1, newDataVariantByVariandIdx);
-          }
-        }
-      } else {
-        if (head?.condition === 'category' ) {
-          if (head.key.indexOf('listing') !== -1 && newDataByIdx.listing) {
-            const listingIdx = newDataByIdx.listing.findIndex((listing: any) => listing.accountId === head.value);
-            if (listingIdx >= 0) {
-              let newListing = [...newDataByIdx.listing];
-              let newDataListingByIdx = newListing[listingIdx];
-              newDataListingByIdx[head.condition] = _value;
-              !valid.approved ? (newDataListingByIdx[head.condition+'_error'] = valid.errors[0]) : delete newDataListingByIdx[head.condition+'_error'];
-              newListing.splice(listingIdx, 1, newDataListingByIdx);
-              newDataByIdx.listing = newListing;
-            }
-          }
-        } else {
-          newDataByIdx[head.key] = _value;
-          !valid.approved ? (newDataByIdx[head.key+'_error'] = valid.errors[0]) : delete newDataByIdx[head.key+'_error'];
-        }
-      }
-      newData.splice(idx, 1, newDataByIdx);
-      setData(newData);
-      if (head.bare && valid.approved) {
-        setForceUpdate && setForceUpdate(true);
-      }
-    }
-  }
-
-  const evRemove: TMouseEvent = e => {
-    const el = e.target as HTMLButtonElement | HTMLDivElement
-    const callback = () => {
-      let newData = [...data]
-      const evRemoveAutoCopy = (idxs: number[]) => {
-        if (!autoCopy) {
-          return false
-        }
-        let newAutoCopyArr = [...autoCopy]
-        for (const _idx of idxs) {
-          const newDataCopy = {...newData[_idx]}
-          const category: string = newDataCopy.category
-          const autoCopyIdxs: number[] = newAutoCopyArr.reduce((r: number[], v, i) => r.concat((v.category === category) ? i : []), [])
-          if (autoCopyIdxs.length) {
-            for (const autoCopyIdx of autoCopyIdxs) {
-              if (autoCopyIdx >= 0) {
-                let newAutoCopyCop = newAutoCopyArr[autoCopyIdx]?.copy
-                if (newAutoCopyCop) {
-                  const newAutoCopyCopIdx = newAutoCopyCop.findIndex((copy: TObject) => copy.id === newDataCopy.id)
-                  newAutoCopyCopIdx >= 0 && newAutoCopyCop.splice(newAutoCopyCopIdx, 1)
-                }
-              }
-            }
-          }
-        }
-        setAutoCopy && setAutoCopy(newAutoCopyArr)
-        isReloadField && setReloadField(undefined)
-      }
-      const evSetCurrentListing  = (_data: any) => {
-        const currentListingEl = document.getElementById('listing-data') as HTMLDivElement
-        (currentListingEl && !currentListingEl.innerHTML) && (currentListingEl.innerText = JSON.stringify(_data))
-      }
-      const group = el.dataset.type || ''
-      if (group === 'bulk') {
-        let isSelectedEl = document.querySelectorAll("[name='checkbox-list']:checked") as NodeListOf<HTMLInputElement>
-        let removeValFrom: number[] = []
-        for (let x = 0; x < isSelectedEl.length; x++) {
-          const el = isSelectedEl[x]
-          const idxEl = el.dataset.key ? parseInt(el.dataset.key) :  0
-          removeValFrom.push(idxEl)
-        }
-        const ex = newData.filter((_value, index) => removeValFrom.indexOf(index) === -1)
-        if (page === 'listing') {
-          evRemoveAutoCopy(removeValFrom)
-          setData(ex, (_data: any) => evSetCurrentListing(_data) )
-        }
-        else setData(ex)
-        evRemoveBulk()
-      } else {
-        const cellEl = el.closest('.cell-trash') as HTMLDivElement
-        const idx = cellEl.dataset.idx ? parseInt(cellEl.dataset.idx) : null
-        const variantIdx = cellEl.dataset.row ? parseInt(cellEl.dataset.row) : null
-        if (idx !== null) {
-          if (page === 'listing') {
-            evRemoveAutoCopy([idx])
-            newData.splice(idx, 1)
-            setData(newData, (_data: any) => evSetCurrentListing(_data))
-          } 
-          else if (page === 'master') {
-            let contentData = {...newData[idx]}
-            if (contentData?.variants) {
-              if (contentData.variants.length === 1) {
-                newData.splice(idx, 1)
-              } else {
-                let newDataVariant = [...contentData.variants]
-                variantIdx && newDataVariant.splice(variantIdx, 1)
-                contentData.variants = newDataVariant
-                newData.splice(idx, 1, contentData)
-              }
-            }
-            else {
-              newData.splice(idx, 1)
-            }
-            setData(newData)
-          } else if(type === 'putaway-inbound') {
-            let contentData = Object.assign({}, newData[idx])
-            if(contentData?.locations) {
-              if(contentData.locations.length === 1) {
-                newData.splice(idx, 1)
-              }else {
-                let newDataLocation = [...contentData.locations]
-                variantIdx && newDataLocation.splice(variantIdx, 1)
-                contentData.locations = newDataLocation
-                newData.splice(idx, 1, contentData)
-              }
-            }else newData.splice(idx, 1)
-            setData(newData)
-          } else {
-            newData.splice(idx, 1)
-            setData(newData)
-          }
-        }
-      }
-    }
-    const _confirm_props = generateMessageQuestion('confirm', `Are you sure you want to remove ${type === 'create-paymentreceive' ? 'invoice' : 'product'}?`, '', callback)
-    evCreateMessageQuestion && evCreateMessageQuestion(_confirm_props)
-  }
-
-  const evCallbackBulk = (isChecked?: boolean) => { 
-    const checkboxCheckedEls = document.querySelectorAll("[name='checkbox-list']:checked") as NodeListOf<HTMLInputElement>;
-    const isSelectedLength = checkboxCheckedEls.length;
-    const bulkEl = document.querySelector('._refMasterTableBulkWrapper') as HTMLElement;
-    const bulkSpanEl = bulkEl.getElementsByTagName("span") as HTMLCollectionOf<HTMLSpanElement>;
-    bulkSpanEl && (bulkSpanEl[0].innerHTML = `${isSelectedLength} selected`);
-    isSelectedLength > 0 ? bulkEl.classList.add('is-active') : bulkEl.classList.remove('is-active');
-  }
-
-  const evCheckboxAll: TMouseEvent = e => {
-    const isChecked = (e.target as HTMLInputElement).checked;
-    const checkboxEls = document.querySelectorAll("[name='checkbox-list']") as NodeListOf<HTMLInputElement>;
-    if (checkboxEls?.length) {
-      for (let x = 0; x < checkboxEls.length; x++) {
-        const checkboxEl = checkboxEls[x];
-        const checkboxParentEl = checkboxEl.closest('.cell-checkbox') as HTMLDivElement;
-        const checkboxRowEl = checkboxEl.closest('._refMasterTableBodyContent') as HTMLElement;
-        if (isChecked) {
-          checkboxParentEl && checkboxParentEl.classList.add('isChecked');
-          checkboxRowEl && checkboxRowEl.classList.add('is-highlighted');
-        }
-        else {
-          checkboxParentEl && checkboxParentEl.classList.remove('isChecked');
-          checkboxRowEl && checkboxRowEl.classList.remove('is-highlighted');
-        }
-        checkboxEl.checked = isChecked;
-      }
-    }else {
-      const msg = generateMessage('warning', 'No Products Selected');
-      evCreateMessage && evCreateMessage(msg);
-      (e.target as HTMLInputElement).checked = false;
-      setOpenBulk(false);
-    }
-    evCallbackBulk(isChecked)
-  }
-
-  const evCheckbox: TMouseEvent = e => {
-    const checkboxEl = e.target as HTMLInputElement;
-    const isChecked = checkboxEl.checked;
-    const checkboxAllEls = document.querySelectorAll("[name='checkbox-selectAll']") as NodeListOf<HTMLInputElement>;
-    const checkboxParentEl = checkboxEl.closest('.cell-checkbox') as HTMLDivElement;
-    const checkboxRowEl = checkboxEl.closest('._refMasterTableBodyContent') as HTMLElement;
-    if (!isChecked && checkboxAllEls?.length) {
-      checkboxAllEls.forEach(checkboxAllEl => checkboxAllEl.checked  && (checkboxAllEl.checked = false));
-    }
-    if (isChecked) {
-      checkboxParentEl && checkboxParentEl.classList.add('isChecked');
-      checkboxRowEl && checkboxRowEl.classList.add('is-highlighted');
-    }
-    else {
-      checkboxParentEl && checkboxParentEl.classList.remove('isChecked');
-      checkboxRowEl && checkboxRowEl.classList.remove('is-highlighted');
-    }
-    evCallbackBulk();
-  }
-
-  const heightContent: number = page === 'stock' ? 66 : 82;
-
-  const switchEditor = (idx: number, head: THeadProps, valueKey: any, error: string, variantIdx?: number, height?: number | string, content?: any) => {
-    const _height = height || heightContent;
-    const evCloseEditor = (callback?: () => void) => {
-      const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-      const cellEls = document.querySelectorAll('.cell-editing') as NodeListOf<HTMLDivElement>;
-      cellEls.forEach(cell => cell.classList.remove('cell-editing'))
-      keyEl && (keyEl.innerHTML = '');
-      callback && callback();
-    }
-    let editorEl 
-    switch(head.fieldType) {
-      case 'image':
-        editorEl = <ImageEditors head={head} value={valueKey} height={_height} evOpenPopup={evOpenPopup} idx={idx} variantIdx={variantIdx} evChange={evChange} resultPopup={resultPopup} setResultPopup={setResultPopup} error={error} evCloseEditor={evCloseEditor} />
-      break
-      case 'textarea':
-        editorEl = <TextareaEditors head={head} value={valueKey} height={_height} idx={idx} variantIdx={variantIdx} />
-      break;
-      case 'select':
-        editorEl =  head.bare ? <SelectBareEditors head={head} value={valueKey} idx={idx} variantIdx={variantIdx} evChange={evChange} error={error} content={content} isForceUpdate={isForceUpdate} setForceUpdate={setForceUpdate} /> : <SelectEditors head={head} value={valueKey} height={_height} idx={idx} variantIdx={variantIdx} evChange={evChange} error={error} evCloseEditor={evCloseEditor} />
-      break;
-      case 'tag':
-        editorEl = <TagEditors head={head} value={valueKey} height={_height} evOpenPopup={evOpenPopup} idx={idx} variantIdx={variantIdx} evChange={evChange} resultPopup={resultPopup} setResultPopup={setResultPopup} evCloseEditor={evCloseEditor} />
-      break;
-      case 'label':
-        editorEl = <LabelEditors head={head} value={valueKey} height={_height} idx={idx} evOpenPopup={evOpenPopup} content={content} type={type} variantIdx={variantIdx} />
-      break;
-      case 'switch': 
-        editorEl = <SwitchEditors head={head} value={valueKey} idx={idx} variantIdx={variantIdx} evChange={evChange} evCloseEditor={evCloseEditor} />
-      break
-      case 'date': 
-        editorEl = head.bare ? <DateBareEditors head={head} value={valueKey} idx={idx} variantIdx={variantIdx} evChange={evChange} error={error} isForceUpdate={isForceUpdate} setForceUpdate={setForceUpdate} /> : <DateEditors head={head} value={valueKey} height={_height} idx={idx} variantIdx={variantIdx} evChange={evChange} error={error} evCloseEditor={evCloseEditor} />
-      break;
-      default:
-        editorEl = head.bare ? 
-          <InputBareEditors head={head} content={content} value={valueKey} height={_height} idx={idx} variantIdx={variantIdx} evChange={evChange} error={error} type={type} isForceUpdate={isForceUpdate} setForceUpdate={setForceUpdate} /> : 
-          <InputEditors head={head} value={valueKey} height={_height} idx={idx} variantIdx={variantIdx} evChange={evChange} error={error} evCloseEditor={evCloseEditor} content={content} />
-      break;
-    }
-    return editorEl;
-  }
-
-  const evMassClear: TMouseEvent = e => {
-    const key = (e.target as HTMLSpanElement).dataset.key || '';
-    const keyIdx = headerColumns.findIndex(column => column.key === key);
-    if (keyIdx >= 0) {
-      const head = headerColumns[keyIdx];
-      const checkboxAllEl = document.querySelector("[name='checkbox-selectAll']") as HTMLInputElement;
-      const checkedCheckboxEl = document.querySelectorAll("[name='checkbox-list']:checked") as NodeListOf<HTMLInputElement>;
-      const confirmButton = (!checkboxAllEl.checked && checkedCheckboxEl.length) ? `Clear to selected products (${checkedCheckboxEl.length})` : 'Clear all products';
-      const callback = () => {
-        const valid = ('validations' in head) ? validateByApproveJs(head, '') : { approved: true };
-        const modifiedMainKey = key.split('-');
-        const firstKey = modifiedMainKey[0];
-        const secondKey = modifiedMainKey[1];
-        const clearValue = head.typeData === "Boolean" ? false : '';
-        let newData = [...data];
-        if (page === 'stock') {
-          const _newData = newData.map(item => {
-            let _item = item 
-            if(key) {
-              _item[key] = clearValue;
-              if(!valid.approved) _item[key+'_error']  = valid.errors[0];
-              else delete _item[key+'_error'];
-            }
-            return _item;
-          });
-          setData(_newData);
-        } else {
-          if (!checkboxAllEl.checked && checkedCheckboxEl.length) {
-            for (let z = 0; z < checkedCheckboxEl.length; z++) {
-              const checkboxEl = checkedCheckboxEl[z];
-              const idx = checkboxEl.dataset.key ? parseInt(checkboxEl.dataset.key) : null;
-              if (idx !== null) {
-                let _item = newData[idx];
-                if (secondKey) {
-                  const newSeconds = _item[firstKey].map((second:any) => {
-                    const _second = second;
-                    _second[secondKey] = clearValue;
-                    if(!valid.approved) {
-                      _second[secondKey+'_error']  = valid.errors[0];
-                    } else {
-                      delete _second[secondKey+'_error'];
-                    }
-                    return _second;
-                  })
-                  _item[firstKey] = newSeconds;
-                } else {
-                  _item[firstKey] = clearValue;
-                  if (!valid.approved) {
-                    _item[firstKey+'_error']  = valid.errors[0];
-                  }
-                  else {
-                    delete _item[firstKey+'_error'];
-                  }
-                }
-                newData.splice(idx, 1, _item);
-              }
-            }
-            setData(newData);
-          } else {
-            const _newData = newData.map(item => {
-              let _item = item;
-              if (secondKey) {
-                const newSeconds = _item[firstKey].map((second:any) => {
-                  const _second = second;
-                  _second[secondKey] = clearValue;
-                  if(!valid.approved) _second[secondKey+'_error']  = valid.errors[0];
-                  else delete _second[secondKey+'_error'];
-                  return _second;
-                });
-                _item[firstKey] = newSeconds;
-              } else {
-                _item[firstKey] = clearValue;
-                if (!valid.approved) {
-                  _item[firstKey+'_error']  = valid.errors[0];
-                }
-                else {
-                  delete _item[firstKey+'_error'];
-                }
-              }
-              return _item; 
-            })
-            setData(_newData);
-          }
-        }
-      };
-      const _confirm_props = generateMessageQuestion('confirm', `Are you sure you want to clear this column?`, "By clearing data, you can't undo this action.", callback, confirmButton);
-      evCreateMessageQuestion && evCreateMessageQuestion(_confirm_props);
-    }
-  }
-
-  const evClickCloseSelectAll: TMouseEvent = e => {
-    e.persist();
-    evRemoveBulk();
-  }
-
-  const evCloseDropdownMaster: TMouseEvent = () => {
-    const overlay = document.querySelector(`._refDropdownOverlay`) as HTMLDivElement;
-    overlay.style.display = 'none';
-    const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
-    bodyEl.classList.remove("is-immuned");
-  }
-
-  const evRemoveBulk = useCallback(() => {
-    const checkboxAllEls = document.querySelectorAll("[name='checkbox-selectAll']") as NodeListOf<HTMLInputElement>;
-    setTimeout(() => {
-      checkboxAllEls.forEach(checkboxAllEl => checkboxAllEl.checked  && (checkboxAllEl.checked = false));
-    }, 10);
-    const checkedCheckboxEl = document.querySelectorAll("[name='checkbox-list']:checked") as NodeListOf<HTMLInputElement>;
-    if (checkedCheckboxEl?.length) {
-      for (let x = 0; x < checkedCheckboxEl.length; x++) {
-        const checkboxEl = checkedCheckboxEl[x];
-        const checkboxParentEl = checkboxEl.closest('.cell-checkbox') as HTMLDivElement;
-        const checkboxRowEl = checkboxEl.closest('._refMasterTableBodyContent') as HTMLElement;
-        checkboxParentEl && checkboxParentEl.classList.remove('isChecked');
-        checkboxRowEl && checkboxRowEl.classList.remove('is-highlighted');
-        checkboxEl.checked = false;
-      }
-    }
-    isOpenBulk && setOpenBulk(false);
-  }, [isOpenBulk])
-
-  useEffect(()=> {
-    if (resultPopup && ('edit' in resultPopup)) {
-      const key: string = resultPopup.edit.key;
-      const value = resultPopup.edit.value;
-      const modifiedMainKey = key.split('-');
-      const firstKey = modifiedMainKey[0];
-      const secondKey = modifiedMainKey[1];
-      const checkboxAllEl = document.querySelector("[name='checkbox-selectAll']") as HTMLInputElement;
-      const checkedCheckboxEl = document.querySelectorAll("[name='checkbox-list']:checked") as NodeListOf<HTMLInputElement>;
-      let newData = [...data];
-      if (!checkboxAllEl.checked && checkedCheckboxEl.length) {
-        for (let z = 0; z < checkedCheckboxEl.length; z++) {
-          const checkboxEl = checkedCheckboxEl[z];
-          const idx = checkboxEl.dataset.key ? parseInt(checkboxEl.dataset.key) : null;
-          if (idx !== null) {
-            let _item = newData[idx];
-            if (secondKey) {
-              const newSeconds = _item[firstKey].map((second: any) => {
-                const _second = second;
-                _second[secondKey] = value;
-                delete _second[secondKey+'_error'];
-                return _second;
-              });
-              _item[firstKey] = newSeconds;
-            } else {
-              _item[firstKey] = '';
-              delete _item[firstKey+'_error'];
-            }
-            newData.splice(idx, 1, _item);
-          }
-        }
-        setData(newData);
-      } else {
-        const _newData = newData.map(item => {
-          let _item = item;
-          if (secondKey) {
-            const newSeconds = _item[firstKey].map((second: any) => {
-              const _second = second;
-              _second[secondKey] = value;
-              delete _second[secondKey+'_error'];
-              return _second;
-            });
-            _item[firstKey] = newSeconds;
-          } else {
-            _item[firstKey] = ''
-            delete _item[firstKey+'_error']
-          }
-          return _item 
-        });
-        setData(_newData);
-      }
-      setResultPopup && setResultPopup(null);
-    }
-  }, [resultPopup, setResultPopup, data, setData, page, type, headerColumns])
-
-  const isMass = headerColumns.filter(header => header.isMassEditable || header.isMassClearable).length > 0;
-
-  const createHeadEl = (headerColumns: THeadProps[], firstHeaderColumnsWidth: number, lastHeaderColumnsWidth: number, type?: string, totalHeaderColumnsWidth?: number, clone?: boolean) => {
-    return (
-      headerColumns?.length ? 
-        <MasterTableHeaderWrapper className={`${clone ? '_refMasterTableHeaderClone' : '_refMasterTableHeader'}`} style={{ width: clone ? (totalHeaderColumnsWidth || '100%') : '100%' }}>
-          <MasterTableHeaderContainer>
-            <div key={0} className='headerCell headerCell-Checkbox' style={{ width: firstHeaderColumnsWidth }}>
-              {isRemovable ? <CheckboxComponent onClick={evCheckboxAll} name='checkbox-selectAll' id={`${clone ? 'checkbox-selectAll-clone' : 'checkbox-selectAll'}`}></CheckboxComponent> : null}
-            </div>
-
-            {
-              headerColumns.filter(header => !header?.isHidden).map((head, idx)=> {
-                return (
-                  <div key={idx+1} className={`headerCell ${(head.icon || head.initial) ? 'headerCell-img' : ''}`} data-key={head.key} style={{ width: head.width }}>
-                    { head.icon ? <ImageComponent width='24px' src={head.icon} alt={head.name} /> : (head.initial ? <InitialContainer className='initial-wrapper' style={{ width: '24px', height: '24px', backgroundColor: head?.color || '#000000', fontSize: '10px' }}>{head.initial}</InitialContainer> : null) }
-                    <header className='multi-elipsis' title={head.name}>
-                      {head.name} 
-                      {head?.validations?.required && <TextComponent $color='red' style={{ display: 'inline', lineHeight: 'normal' }}>*</TextComponent>}
-                      {head?.tip && <IconComponent $name='question' $width='12px' data-tip={head.tip} data-place='top' data-multiline={true} />}
-                    </header>
-                  </div>
-                )
-              })
-            }
-            {isRemovable ? <div key={headerColumns.length+(page === 'picklist' ? 2 : 1)} className='headerCell headerCell-trash' style={{ width: lastHeaderColumnsWidth }}></div> : null}
-          </MasterTableHeaderContainer>
-
-          {
-            (isMass && data?.length) ? (
-              <MasterTableActionWrapper>
-                <div className='actionCell' style={{ width: firstHeaderColumnsWidth }}>
-                </div>
-                {
-                  headerColumns.filter(header => !header?.isHidden).map((head, idx)=> {
-                    return (
-                      <div key={idx+1} className='actionCell' style={{ width: head.width }}>
-                        <IsMassContainer>
-                          {head.isMassEditable && <LinkComponent mode='clear' title="Bulk Edit" data-popup='table-mass-edit' data-detail={JSON.stringify({ title:`Bulk Edit`, head: head })} onClick={evOpenPopup}>Edit</LinkComponent>}
-                          {head.isMassClearable && <LinkComponent mode='clear' title="Bulk Clear" data-key={head.key} onClick={evMassClear}>Clear</LinkComponent>}
-                        </IsMassContainer>
-                      </div>
-                    )
-                  })
-                }
-                {isRemovable ? <div key={headerColumns.length+(page === 'picklist' ? 2 : 1)} className='actionCell' style={{ width: lastHeaderColumnsWidth }}></div> : null}
-              </MasterTableActionWrapper>
-            ) : null
-          }
-        </MasterTableHeaderWrapper>
-      : null
-    );
-  };
-
-  console.log(data, "dataTable");
-
-  return (
-    <>
-      {createHeadEl(headerColumns, firstHeaderColumnsWidth, lastHeaderColumnsWidth, type, totalHeaderColumnsWidth, true)}
-      <MasterTable>
-        <MasterTableWrapper>
-          <MasterTableViewport className='_refMasterTableViewport' $mode={type || 'create-master'}>
-            <MasterTableCanvas className='_refMasterTableCanvas' style={{ width: totalHeaderColumnsWidth }}>
-            {createHeadEl(headerColumns, firstHeaderColumnsWidth, lastHeaderColumnsWidth, type)}
-              <MasterTableBodyWrapper className='_refMasterTableBody'>
-              {
-                data?.length ? 
-                  (type === 'putaway-inbound' ?  
-                    <ConfirmDataPartial data={data} heightContent={heightContent} firstHeaderColumnsWidth={firstHeaderColumnsWidth} evCheckbox={evCheckbox} headerColumns={headerColumns} switchEditor={switchEditor} totalColGroupWidth={totalColGroupWidth} lastHeaderColumnsWidth={lastHeaderColumnsWidth} evRemove={evRemove} type={type} isRemovable={isRemovable} /> : 
-                      <DataPartial data={data} firstHeaderColumnsWidth={firstHeaderColumnsWidth} evCheckbox={evCheckbox} headerColumns={headerColumns} switchEditor={switchEditor} lastHeaderColumnsWidth={lastHeaderColumnsWidth} evRemove={evRemove} type={type} isRemovable={isRemovable} />)
-                : null
-              }
-              </MasterTableBodyWrapper>
-            </MasterTableCanvas>
-          </MasterTableViewport>
-        </MasterTableWrapper>
-        <section className='_refContainer'>
-          <BulkActionWrapper className='_refMasterTableBulkWrapper'>
-            <IconComponent className='_refBulkCloseButton' $name='cross' $width='16px' onClick={evClickCloseSelectAll} />
-            <span>0 Selected</span>
-            <ButtonComponent $mode='red' data-type='bulk' onClick={evRemove}>Remove {type === 'create-paymentreceive' ? 'Invoice' : 'Product'}</ButtonComponent>
-          </BulkActionWrapper>
-          <div className='_refDropdownOverlay' onClick={evCloseDropdownMaster}></div>
-        </section>
-      </MasterTable>
-      <div id='master-clone' className='hidden'></div>
-    </>
-  );
-}
-
-export default MasterTableComponent;