@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/src/utils/helpers.mjs

@@ -30,9 +30,9 @@ const csvToArray = (str, delimiter = null) => {
 const downsizeImage = async (url, targetWidth, imageType, quality, opt = {}) => {
 
   let defaultImageType = 'image/jpeg'
+  targetWidth = isNaN(parseInt(targetWidth)) ? 2048 : parseInt(targetWidth)
 
   if(url instanceof File){
-
     defaultImageType = url.type
 
     await (new Promise((resolve, reject) => {
@@ -84,11 +84,11 @@ const parseBoolean = function(exp){
       exp.toLowerCase() : exp)
 }
 
-const strVars = function(text, vars){
+const strVars = function(text, vars, opt = { emptyUndefined:true }){
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })
 
@@ -125,14 +125,264 @@ const uid = function(prefix){
   return (prefix ?? '') + __uid++;
 }
 
+const accessNestedObject = function(obj, path) {
+  if(!obj || typeof path !== 'string') return undefined
+
+  const keys = path.split('.');
+  let nestedObj = obj;
+
+  for (let key of keys) {
+    if (nestedObj && nestedObj.hasOwnProperty(key)) {
+      nestedObj = nestedObj[key];
+    } else {
+      // Return undefined if any key in the path is missing
+      return undefined;
+    }
+  }
+
+  return nestedObj;
+}
+
+const mediaPrefixes = [
+  '',
+  'md:'
+]
+const calcUnit = (prefix, midfix, value) => {
+
+  const values = (value ?? '').split(',')
+
+  if(value === 'mx-auto'){
+    return prefix + value
+  }
+  else if(values.length === 1){
+    return prefix + midfix + '-' + values[0]
+  }
+  else if(values.length === 2){
+    return prefix + midfix + 'x-' + values[0] +
+      ' ' +
+        prefix + midfix + 'y-' + values[1]
+  }
+  else if(values.length === 4){
+    return prefix + midfix + 'l-' + values[0] +
+      ' ' +
+        prefix + midfix + 't-' + values[1] +
+      ' ' +
+        prefix + midfix + 'r-' + values[2] +
+      ' ' +
+        prefix + midfix + 'b-' + values[3]
+  }
+}
+
+const _applyClass = function(props, defaultClass = {}){
+  return []
+}
+
+const fallbackCopyTextToClipboard = function(obj){
+  return new Promise((resolve, reject) => {
+    try{
+      var textArea = document.createElement("textarea");
+      textArea.value = obj;
+      textArea.style.left = "-100vw";
+      textArea.style.position = "fixed";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      document.execCommand('copy')
+      document.body.removeChild(textArea);
+
+      resolve()
+    }
+    catch(e){
+      reject(e)
+    }
+  })
+}
+
+const fallbackGetClipboardData = function(obj){
+  return new Promise((resolve, reject) => {
+    try{
+      var textArea = document.createElement("textarea");
+      textArea.style.left = "-100vw";
+      textArea.style.position = "fixed";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      document.execCommand('paste');
+
+      window.setTimeout(() => {
+        const text = textArea.value;
+        document.body.removeChild(textArea);
+        resolve(text)
+      }, 100)
+    }
+    catch(e){
+      reject(e)
+    }
+  })
+}
+
+const copyToClipboard = function(obj){
+  if (!navigator.clipboard) {
+    return fallbackCopyTextToClipboard(obj);
+  }
+
+  return new Promise((resolve, reject) => {
+    navigator.clipboard.writeText(obj).then(() => {
+      resolve()
+    }, (err) => {
+      reject(err)
+    });
+  })
+}
+
+const getClipboardData = function(){
+  if (!navigator.clipboard) {
+    return fallbackGetClipboardData();
+  }
+
+  return new Promise((resolve, reject) => {
+    navigator.clipboard.readText().then((text) => {
+      resolve(text)
+    }, (err) => {
+      reject(err)
+    });
+  })
+}
+
+const getComponentUids = function(components, excepts = []){
+
+  const arr = []
+
+  for(let comp of components){
+    if(!excepts.includes(comp.uid)){
+      arr.push({
+        uid: comp.uid,
+        name: comp.props.name ?? comp.type
+      })
+
+      if(Array.isArray(comp.items)){
+        arr.push(...getComponentUids(comp.items))
+      }
+    }
+  }
+
+  return arr
+}
+
+const unPascalCase = function(str){
+  return str.replace(/([A-Z])/g, ' $1').trim()
+}
+
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+const removeStyleFromTag = (html) => {
+  const regex = /<[^>]+style="[^"]*"[^>]*>/g;
+
+  return html.replace(regex, (match) => {
+    return match.replace(/style="[^"]*"/, '');
+  });
+}
+
+const createFormData = (obj) => {
+
+  const form = new FormData()
+
+  const iterateObject = (obj, parentKey = '') => {
+
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const value = obj[key];
+        const propName = parentKey ? `${parentKey}[${key}]` : key;
+
+        if (value instanceof File || value instanceof Blob) {
+          form.append(propName, value);
+        }
+        else if (typeof value === 'object' && value !== null) {
+          iterateObject(value, propName);
+        }
+        else {
+          form.append(propName, value);
+        }
+      }
+    }
+  }
+
+  iterateObject(obj)
+
+  return form
+}
+
+function unslugAndCapitalize(slug) {
+  return (slug ?? '')
+    .split('-') // Replace '-' with '_' if that's your separator
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+const hexToRgb = (hex) => {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+function rgbToHex(r, g, b) {
+
+  r = parseInt(r)
+  g = parseInt(g)
+  b = parseInt(b)
+  if(isNaN(r) || isNaN(g) || isNaN(b))
+    return
+
+  r = Math.max(0, Math.min(255, r));
+  g = Math.max(0, Math.min(255, g));
+  b = Math.max(0, Math.min(255, b));
+
+  const hexR = r.toString(16).padStart(2, '0');
+  const hexG = g.toString(16).padStart(2, '0');
+  const hexB = b.toString(16).padStart(2, '0');
+
+  return "#" + hexR + hexG + hexB;
+}
+
+function applyDatasourceReplacer(value, datasource){
+  if(typeof value !== 'string') return value
+
+  let matches = value.match(/\{\{([^}]+)\}\}/g);
+  (matches ?? []).forEach(matchKey => {
+    matchKey = matchKey.slice(2, -2)
+    const matchValue = accessNestedObject(datasource, matchKey) ?? ''
+    value = value.replace(`{{${matchKey}}}`, matchValue, 'gi')
+  });
+
+  return value
+}
+
 export {
   downsizeImage,
+  hexToRgb,
+  rgbToHex,
   uid,
   observeInit,
   csvToArray,
   parseBoolean,
   urlQuery,
-  getQueryString
+  getQueryString,
+  accessNestedObject,
+  mediaPrefixes,
+  _applyClass,
+  copyToClipboard,
+  getClipboardData,
+  getComponentUids,
+  unPascalCase,
+  sleep,
+  removeStyleFromTag,
+  createFormData,
+  unslugAndCapitalize,
+  applyDatasourceReplacer,
+  strVars
 }
 
 function observeInit(){
@@ -154,22 +404,24 @@ function observeInit(){
 
       const item = entry.target
       const key = item.__observeKey
-      const { type, callback } = observeCols[key]
 
-      if(typeof callback === 'function')
-        callback.apply(item)
+      if(observeCols[key]){
+        const { type, callback } = observeCols[key]
 
-      if(type === 'once'){
-        observer.unobserve(item)
-        delete observeCols[key]
+        if(typeof callback === 'function')
+          callback.apply(item)
+
+        if(type === 'once'){
+          observer.unobserve(item)
+          delete observeCols[key]
+        }
       }
     })
   }
 
   const observeCols = {}
 
-  const once = function(el, callback)
-  {
+  const once = function(el, callback){
     if(typeof el.__observeKey !== 'undefined') return
 
     intersectionObserver.observe(el)
@@ -179,8 +431,7 @@ function observeInit(){
     el.__observeKey = key
   }
 
-  const always = function(el, callback)
-  {
+  const always = function(el, callback){
     if(typeof el.__observeKey !== 'undefined') return
 
     intersectionObserver.observe(el)
@@ -190,8 +441,15 @@ function observeInit(){
     el.__observeKey = key
   }
 
+  const unregister = function(el){
+    if(el && el.__observeKey && observeCols[el.__observeKey]){
+      delete observeCols[el.__observeKey]
+    }
+  }
+
   return {
     once,
-    always
+    always,
+    unregister
   }
-}
+}

package/src/utils/importer.js

@@ -3,7 +3,7 @@ const fs = require("fs");
 const AdmZip = require("adm-zip");
 const glob = require("glob");
 const Exceljs = require("exceljs")
-const { saveBuffer } = require('./helpers.js')
+const { saveBuffer, unflatten } = require('./helpers.js')
 
 const analyseRequest = async(req) => {
 
@@ -64,10 +64,17 @@ const analyseRequest = async(req) => {
 
   const columns = []
   const header = worksheet.getRow(1)
+
   if(!header)
     throw new Error('Invalid file')
   header.eachCell((cell) => {
-    columns.push(cell.value)
+    if(cell.isMerged){
+      const sub = worksheet.getCell(cell.address.replace(/\d/g, '') + '2').value
+      columns.push(cell.value + '>' + sub)
+    }
+    else{
+      columns.push(cell.value)
+    }
   })
 
   return {
@@ -87,8 +94,7 @@ const importRequest = async(req) => {
       throw new Error({name: ['Kolom ' + key.text + ' harus diisi']})
   })
 
-  const rows = []
-  const cols = {}
+  let rows = []
   const workbook = new Exceljs.Workbook();
   switch(xlsxFileType){
 
@@ -106,37 +112,65 @@ const importRequest = async(req) => {
   }
 
   const worksheet = workbook.worksheets[0]
-  worksheet.eachRow((row, index) => {
-    if(index === 1){
-      row.eachCell((cell, index) => {
-
-        let mapped = false
-        keys.forEach((key) => {
-          if(key.value === cell.value){
-            cols[key.key] = index
-            mapped = true
-          }
-        })
 
-        if(!mapped){
-          cols[cell.value] = index
-        }
-      })
+  const row = worksheet.getRow(2)
+  let isInfoRow = false
+  row.eachCell(cell => {
+    if((cell.value ?? '').toString().trim().startsWith('***')){
+      isInfoRow = true
+    }
+  })
+
+  let rowStart = isInfoRow ? 3 : 2
+  const header = worksheet.getRow(1)
+  const columnAddress = {}
+  header.eachCell((cell, index) => {
+    if(cell.isMerged){
+      const sub = worksheet.getCell(cell.address.replace(/\d/g, '') + '2').value
+      columnAddress[cell.value + '>' + sub] = index
+      rowStart = 3
     }
     else{
+      columnAddress[cell.value] = index
+    }
+  })
+
+  worksheet.eachRow((row, index) => {
+    if(index >= rowStart){
       const obj = {}
 
-      for(let key in cols){
-        const cell = row.getCell(cols[key])
-        obj[key] = cell.formulaType === 1 ? cell.result : cell.value
+      // Check if cells in row 2 and 3 is notes in italic
+      if(index <= 3){
+        let isItalic = false
+        for(let idx in keys){
+          const key = keys[idx]
+          if(key.value && columnAddress[key.value]){
+            const cell = row.getCell(columnAddress[key.value])
+            if(cell.font && cell.font.italic){
+              isItalic = true
+              break
+            }
+          }
+        }
+
+        if(isItalic)
+          return
       }
 
-      rows.push(obj)
+      for(let idx in keys){
+        const key = keys[idx]
+        if(key.value && columnAddress[key.value]){
+          const cell = row.getCell(columnAddress[key.value])
+          let value = cell.formulaType === 1 ? cell.result : cell.value
+          if(value && value.error) value = ''
+          obj[key.key] = value
+        }
+      }
+
+      rows.push(unflatten(obj))
     }
   })
 
-  //console.log(JSON.stringify(rows, null, 2))
-
   const images = glob.sync(process.env.ROOT_PATH + '/storage/files/temp/' + folderName +
       '/**/*(*.jpg|*.jpeg|*.png|*.webp)')
 
@@ -153,4 +187,4 @@ const importRequest = async(req) => {
 module.exports = {
   analyseRequest,
   importRequest
-}
+}