forstok-ui-lib 5.6.10 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.6.10",
+  "version": "5.7.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -39,6 +39,7 @@
     "@types/react": "^19.0.2",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^19.0.2",
+    "@wojtekmaj/react-daterange-picker": "^6.0.0",
     "approvejs": "^3.1.2",
     "html-to-text": "^9.0.5",
     "moment": "^2.30.1",

package/rollup.config.js

@@ -31,7 +31,10 @@ export default [
     ],
     plugins: [
       PeerDepsExternalPlugin(),
-      resolve({exportConditions: ['node']}),
+      resolve({
+        exportConditions: ['node'],
+        extensions: ['.css']
+      }),
       commonjs(),
       typescript({ 
         tsconfig: './tsconfig.json',

package/src/assets/javascripts/function.ts

@@ -1,6 +1,6 @@
 import approve from 'approvejs'
 import { ReactNode } from 'react';
-import { TMessage, TMessageQuestion } from '../../components/message/typed';
+import { TMessage, TMessageFunction, TMessageQuestion } from '../../components/message/typed';
 import { TObject } from '../../typeds/base.typed';
 import { errorTitle } from './helper';
 
@@ -441,4 +441,161 @@ export const evGenerateValueMatch = (validation?: TObject, data?: any) => {
 
 export const unescapeHTML = (value?: string) => {
   return value ? value.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&') : value as string
+}
+
+export const evScrollTo = (el?: HTMLElement, range?: number) => {
+  const _range = range || 140;
+  if (el) {
+    setTimeout(() => {
+      const viewportEl = document.querySelector('._refMasterTableViewport') as HTMLElement;
+      if (!viewportEl) {
+        return;
+      }
+      const bodyRect = viewportEl.getBoundingClientRect();
+      const elemRect = el.getBoundingClientRect();
+      if (elemRect) {
+        const offsetTop = (elemRect.top - bodyRect.top - _range) + viewportEl.scrollTop;
+        const offsetLeft = (elemRect.left - bodyRect.left) + viewportEl.scrollLeft
+        viewportEl.scrollTo(offsetLeft,offsetTop);
+      }
+    }, 20);
+  }
+}
+
+export const evHighlight = (ids: number[]) => {
+  if (!ids?.length) {
+    return;
+  }
+  const timer = Math.ceil(ids.length/10)*10 <= 10 ? 30 : (Math.ceil(ids.length/10)*10 >= 200 ? 200 : Math.ceil(ids.length/10)*10);
+  setTimeout(() => {
+    const contentHightlightedEls = document.querySelectorAll('._refMasterTableBodyContent.is-highlighted') as NodeListOf<HTMLElement>;
+    if (contentHightlightedEls?.length) {
+      for (const contentHightlightedEl of contentHightlightedEls) {
+        contentHightlightedEl.classList.remove('is-highlighted');
+      }
+    }
+    for(let i = 0; i < ids.length; i++) {
+      const id = ids[i];
+      const el = document.querySelector(`#row-${id}`) as HTMLElement;
+      if (el) {
+        el.classList.add('is-highlighted');
+        setTimeout(() => {
+          el.classList.remove('is-highlighted');
+        }, 1888)
+      }
+      if(i === (ids.length - 1)) {
+        const firstEl = document.querySelector(`#row-${ids[0]}`) as HTMLElement;
+        firstEl && evScrollTo(firstEl, 140);
+      }
+    }
+  }, timer)
+}
+
+export const evKeyMapperScanner = (oEvent: any) => {
+  var iCode = oEvent.which;
+  switch (true) {
+    case iCode >= 48 && iCode <= 90:
+    case (iCode >= 106 && iCode <= 111) || iCode === 45 || iCode === 173 || iCode === 189:
+      if (oEvent.key !== undefined && oEvent.key !== '') {
+        return oEvent.key;
+      }
+      var sDecoded = String.fromCharCode(iCode);
+      switch (oEvent.shiftKey) {
+        case false: 
+          sDecoded = sDecoded.toLowerCase();
+          break;
+        case true: 
+          sDecoded = sDecoded.toUpperCase();
+          break;
+        default:
+          break;
+      }
+      return sDecoded;
+    case iCode >= 96 && iCode <= 105:
+      return 0+(iCode-96);
+    default:
+      break;
+  }
+  return ''
+}
+
+export const evExecuteError = (evCreateMessage?: TMessageFunction) => {
+  const msg: TMessage = generateMessage('failed', 'Validation Errors found, Please fix it!');
+  evCreateMessage && evCreateMessage(msg);
+  const errorEl = document.querySelectorAll('.cell-error') as NodeListOf<HTMLDivElement>;
+  if (errorEl.length) {
+    evScrollTo(errorEl[0]);
+  }
+}
+
+export const evCheckAllValidation = (data: any[]) => {
+  let isError = false;
+  for(let x=0; x<data.length; x++) {
+    const _data = data[x];
+    const keys = Object.keys(_data);
+
+    for(let key of keys) {
+      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(let 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(let keyArrArr of keysArrArr) {
+                  if (keyArrArr.indexOf('_error') !== -1 && !isError) {
+                    isError = true;
+                  }
+                  if (isError) {
+                    break;
+                  }
+                }
+                if (isError) {
+                  break;
+                }
+              }
+            } else {
+              if (keyArr.indexOf('_error') !== -1 && !isError) {
+                isError = true;
+              }
+              if (isError) {
+                break;
+              }
+            }
+            if (isError) {
+              break;
+            }
+          }
+          if (isError) {
+            break;
+          }
+        }
+      } else {
+        if (key.indexOf('_error') !== -1 && !isError) {
+          isError = true
+        }
+        if (isError) {
+          break;
+        }
+      }
+      if (isError) {
+        break;
+      }
+    }
+  }
+  return isError;
+}
+
+export const unCamelCaseKeys = (object: TObject) => {  
+  const unCamelCase = (value: string) => {
+    return value.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '_' + g[1].toLowerCase() });
+  };
+  return Object
+    .entries(object)
+    .reduce((carry: any, [key, value]) => {
+      carry[unCamelCase(key)] = value
+      return carry
+    }, {});
 }

package/src/assets/javascripts/helper.ts

@@ -55,4 +55,130 @@ export const colorCommonQuantity = (value: number) => {
   else {
     return 'green';
   }
+}
+
+export const statusColor = (name?: string) => {
+  if(!name) return '';
+  switch(name){
+    case 'Picked Up': 
+    case 'Shipped':
+    case 'Delivered':
+    case 'Completed':
+      return 'green';
+    case 'Ready to Ship':
+    case 'Not Shipped':
+      return '#F8813E';
+    case 'Pending Payment':
+      return 'red';
+    default:
+      return '';
+  }
+}
+
+export const colorStockStatus = (value?: string) => {
+  switch(value){
+    case 'success':
+    case 'approved':
+    case 'putaway':
+    case 'adjusted':
+    case 'Adjusted':
+    case 'outbounded':
+    case 'Outbounded':
+      return '#21BA45';
+    case 'waiting':
+    case 'waiting adjustment':
+    case 'Waiting Adjustment':
+    case 'waiting outbound':
+    case 'Waiting Outbound':
+      return '#F8813E';
+    default:
+      return '#696969';
+  }
+}
+
+export const colorStockInboundStatus = (value?: string) => {
+  switch(value){
+    case 'inbounded':
+    case 'Inbounded':
+    case 'incompleted':
+    case 'Incompleted':
+    case 'Incomplete':
+    case 'putaway':
+    case 'Putaway':
+      return '#21BA45';
+    case 'waiting-inbound':
+    case 'Waiting Inbound':
+    case 'partial-inbounded':
+    case 'Partial Inbounded':
+    case 'partial-putaway':
+    case 'Partial Putaway':
+      return '#F8813E';
+    default:
+      return '#696969';
+  }
+}
+
+export const colorStockQuantity = (qty?: number, actual?:number) => {
+  if (qty === actual) return "lightgreen";
+  else return "red";
+}
+
+export const colorStockInboundQuantity = (status: string) => {
+  const statusWar = [ 'Inbounded', 'Incompleted', 'Putaway' ];
+  if (statusWar.includes(status)) return "lightgreen";
+  else return 'yellow';
+}
+
+export const colorStockAdjust = (qty: number, newQty: number) => {
+  if (qty < newQty) return "lightgreen";
+  else return "red";
+}
+
+export const errorMessage = (value: string) => {
+  switch (value) {
+    case 'unique' :
+      return 'already exists';
+    default:
+      return 'is required';
+  }
+}
+
+export const typePage = (value?: string) => {
+  if (!value) {
+    return '';
+  }
+  switch (value){
+    case 'adjustment': case 'inbound': case 'outbound': 
+      return 'stock';
+    case 'bundle':
+      return 'bundle';
+    case 'sales':
+      return 'sales';
+    default:
+      return '';
+  }
+}
+
+export const historyType = (name?: string) => {
+  if(!name) return ''
+  switch(name) {
+    case 'Transfer':
+      return 'ST';
+    case 'Adjustment':
+    case 'Adjustment (API)':
+    case 'Adjustment (Interface & Excel)':
+      return 'SA';
+    case 'Inbound':
+      return 'SI';
+    case 'Outbound':
+      return 'SOB';
+    case 'Return':
+      return 'RMA';
+    case 'Sales Order':
+      return 'SO';
+    case 'Opening Balance':
+      return '';
+    default:
+      return '';
+  }
 }