forstok-ui-lib 6.18.1 → 6.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.18.1",
+  "version": "6.18.3",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/images/navs/left/price-active.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04591 11.603C1.88716 10.4435 1.3074 9.86449 1.09215 9.11224C0.876149 8.35998 1.06065 7.56123 1.42965 5.96447L1.6419 5.04346C1.95166 3.69945 2.10691 3.02745 2.56666 2.56694C3.02641 2.10644 3.69917 1.95194 5.04318 1.64219L5.96418 1.42919C7.56169 1.06093 8.3597 0.876433 9.11195 1.09168C9.86421 1.30769 10.4432 1.88744 11.602 3.0462L12.9745 4.41871C14.9927 6.43622 16 7.44423 16 8.69674C16 9.94999 14.992 10.958 12.9752 12.9748C10.9577 14.9923 9.94971 16.0003 8.69645 16.0003C7.44394 16.0003 6.43519 14.9923 4.41842 12.9755L3.04591 11.603Z" stroke="#086de0"/>
+<path d="M11.0423 11.0434C11.4811 10.6031 11.5403 9.9506 11.1743 9.58384C10.8083 9.21709 10.1551 9.27709 9.71556 9.7166C9.27681 10.1561 8.62355 10.2153 8.25755 9.84935C7.89155 9.48334 7.9508 8.83009 8.3903 8.39134M8.3903 8.39134L8.1248 8.12583M8.3903 8.39134C8.63855 8.14233 8.95505 8.01633 9.2498 8.01858M11.3071 11.3081L11.0416 11.0426C10.7416 11.3434 10.3403 11.4664 9.99981 11.3959" stroke="#086de0" stroke-linecap="round"/>
+<path d="M7.01599 7.21985C7.60178 6.63406 7.60178 5.6843 7.01599 5.09851C6.4302 4.51272 5.48044 4.51272 4.89465 5.09851C4.30886 5.6843 4.30886 6.63406 4.89465 7.21985C5.48044 7.80564 6.4302 7.80564 7.01599 7.21985Z" stroke="#086de0"/>
+</svg>

package/src/assets/images/navs/left/price.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04591 11.603C1.88716 10.4435 1.3074 9.86449 1.09215 9.11224C0.876149 8.35998 1.06065 7.56123 1.42965 5.96447L1.6419 5.04346C1.95166 3.69945 2.10691 3.02745 2.56666 2.56694C3.02641 2.10644 3.69917 1.95194 5.04318 1.64219L5.96418 1.42919C7.56169 1.06093 8.3597 0.876433 9.11195 1.09168C9.86421 1.30769 10.4432 1.88744 11.602 3.0462L12.9745 4.41871C14.9927 6.43622 16 7.44423 16 8.69674C16 9.94999 14.992 10.958 12.9752 12.9748C10.9577 14.9923 9.94971 16.0003 8.69645 16.0003C7.44394 16.0003 6.43519 14.9923 4.41842 12.9755L3.04591 11.603Z" stroke="black"/>
+<path d="M11.0423 11.0434C11.4811 10.6031 11.5403 9.9506 11.1743 9.58384C10.8083 9.21709 10.1551 9.27709 9.71556 9.7166C9.27681 10.1561 8.62355 10.2153 8.25755 9.84935C7.89155 9.48334 7.9508 8.83009 8.3903 8.39134M8.3903 8.39134L8.1248 8.12583M8.3903 8.39134C8.63855 8.14233 8.95505 8.01633 9.2498 8.01858M11.3071 11.3081L11.0416 11.0426C10.7416 11.3434 10.3403 11.4664 9.99981 11.3959" stroke="black" stroke-linecap="round"/>
+<path d="M7.01599 7.21985C7.60178 6.63406 7.60178 5.6843 7.01599 5.09851C6.4302 4.51272 5.48044 4.51272 4.89465 5.09851C4.30886 5.6843 4.30886 6.63406 4.89465 7.21985C5.48044 7.80564 6.4302 7.80564 7.01599 7.21985Z" stroke="black"/>
+</svg>

package/src/assets/javascripts/function.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { TMessage, TMessageFunction, TMessageQuestion } from '../../components/message/typed';
 import { TObject } from '../../typeds/base.typed';
 import { errorTitle } from './helper';
+import { THeadProps } from '../../typeds';
 
 export const getStorage = (name: string, type: string = 'string', defaultVal?: any, loadName: string = 'load') => {
   let result: any
@@ -695,4 +696,134 @@ export const generateAddress = (address?: TObject | null) => {
 export const evRemoveActiveButton = () => {
   const nextButtonEl = document.querySelector('#btn-active-red') as HTMLButtonElement
   nextButtonEl && nextButtonEl.removeAttribute('id')
+}
+
+export const evCheckAllValidationByHeader = (data: any[], headerColumns: THeadProps[]) => {
+  let isError = false 
+  const validByHeader = (key: string, valuex: any, idx?: number, title = null) => {
+    const __idx = idx || 0
+    const validHeaderKeyFilter = headerColumns.filter(header => (header.key === key && header.validations))
+    if (validHeaderKeyFilter.length) {
+      const head = validHeaderKeyFilter[__idx]
+      const type = head.typeData || 'String'
+      const _value = generateValue(type, valuex)
+      const valid = validateByApproveJs(head, _value, title || '')
+      return valid      
+    }
+    return { approved: true } 
+  }
+
+  const newData = []
+  for (let x=0; x<data.length; x++) {
+    const _data = data[x]
+    const keys = Object.keys(_data)
+
+    for (const key of keys) {
+      let _valid: TObject = { approved: true }
+      if (Array.isArray(_data[key])) {
+        for (let i = 0; i < _data[key].length; i++) {
+          const _dataArr = _data[key][i]
+          const keysArr = Object.keys(_dataArr)
+          for (const keyArr of keysArr) {
+            if (Array.isArray(_dataArr[keyArr])) {
+              for (let z = 0; z < _dataArr[keyArr].length; z++) {
+                const _dataArrArr = _dataArr[keyArr][z]
+                const keysArrArr = Object.keys(_dataArrArr)
+                for (const keyArrArr of keysArrArr) {
+                  _valid = validByHeader(keyArrArr, _dataArrArr[keyArrArr])
+                  if (!_valid.approved) {
+                    _dataArrArr[`${keyArr}_error`] = _valid.errors[0]
+                    if (!isError) {
+                      isError = true
+                    }
+                  }
+                  if (keyArrArr.indexOf('_error') !== -1 && !isError) {
+                    isError = true
+                  }
+                }
+              }
+            } else {
+              _valid = validByHeader(keyArr, _dataArr[keyArr])
+              if (!_valid.approved) {
+                _dataArr[`${keyArr}_error`] = _valid.errors[0]
+                if (!isError) {
+                  isError = true
+                }
+              }
+              if (keyArr.indexOf('_error') !== -1 && !isError) {
+                isError = true
+              }
+            }
+          }
+        }
+      } else {
+        _valid = validByHeader(key, _data[key])
+        if (!_valid.approved) {
+          _data[`${key}_error`] = _valid.errors[0]
+          if (!isError) {
+            isError = true
+          }
+        }
+        if (key.indexOf('_error') !== -1 && !isError) {
+          isError = true
+        }
+      }
+    }
+    newData.push(_data)
+  }
+  return { error: isError, data: newData }
+}
+
+export const evCheckAllValidationByHeaderWithVariant = (newData: any[], headerColumns: THeadProps[]) => {
+  let isError = false 
+
+  const validByHeader = (key: string, valuex: any, idx?: number, content?: any) => {
+    const __idx = idx || 0
+    const validHeaderKeyFilter = headerColumns.filter(header => (header.key === key && header.validations))
+    if (validHeaderKeyFilter.length) {
+      const head = validHeaderKeyFilter[__idx]
+      const type = head.typeData || 'String'
+      const _value = generateValue(type, valuex)
+      const valid = validateByApproveJs(head, _value, undefined, evGenerateValueMatch(head.validations, content))
+      return valid      
+    }
+    return { approved: true } 
+  }
+
+  let _newData = [...newData]
+  for (let x=0; x<_newData.length; x++) {
+    let _data = _newData[x]
+    let keys = Object.keys(_data)
+
+    for (const key of keys) {
+      if (Array.isArray(_data[key]) && _data[key].length && typeof _data[key][0] === 'object') {
+        for (let i = 0; i < _data[key].length; i++){
+          const _dataArr = _data[key][i]
+          const keysArr = Object.keys(_dataArr)
+          for (const keyArr of keysArr) {
+            if (!Array.isArray(_dataArr[keyArr])) {
+              const _key = `${key}-${keyArr}`,
+              valid = validByHeader(_key, _dataArr[keyArr], undefined, _dataArr)
+              if (!valid.approved) {
+                _dataArr[`${keyArr}_error`] = valid.errors[0]
+                if (!isError) {
+                  isError = true
+                }
+              }
+            }
+          }
+        }
+      } else {
+        const valid = validByHeader(key, _data[key], undefined, _data)
+        if (!valid.approved) {
+          _data[`${key}_error`] = valid.errors[0]
+          if (!isError) {
+            isError = true
+          }
+        }
+      }
+    }      
+    _newData.splice(x, 1, _data)
+  }
+  return { error: isError, data: _newData }
 }

package/src/components/icon/styles.ts

@@ -60,6 +60,8 @@ import IconOrderLeftNav from '../../assets/images/navs/left/order.svg'
 import IconProductActiveLeftNav from '../../assets/images/navs/left/products-active.svg'
 import IconInventoryActiveLeftNav from '../../assets/images/navs/left/inventory-active.svg'
 import IconOrderActiveLeftNav from '../../assets/images/navs/left/order-active.svg'
+import IconPriceLeftNav from '../../assets/images/navs/left/price.svg';
+import IconPriceActiveLeftNav from '../../assets/images/navs/left/price-active.svg';
 import IconWarningChat from '../../assets/images/icons/warning-agent.svg';
 import IconCheckChat from '../../assets/images/icons/check.svg';
 import IconCheckChatBlue from '../../assets/images/icons/check-blue.svg';
@@ -527,6 +529,20 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break;
+    case 'price-left-nav': 
+      style += `
+        &:before { 
+          content: url(${IconPriceLeftNav}); 
+        }
+      `
+      break;
+    case 'price-active-left-nav': 
+      style += `
+        &:before { 
+          content: url(${IconPriceActiveLeftNav}); 
+        }
+      `
+      break;
     case 'warning-chat': 
       style += `
         &:before {