fix(desktop): fix the bug of import xml or csv file

package.json

@@ -70,6 +70,7 @@
     "@types/chart.js": "^2.9.28",
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/fs-extra": "^8.0.0",
+    "@types/json2csv": "^5.0.3",
     "@types/lodash": "^4.14.142",
     "@types/mocha": "^5.2.7",
     "@types/node": "^14.16.0",

src/components/ExportData.vue

@@ -48,6 +48,7 @@ import MyDialog from './MyDialog.vue'
 import XMLConvert from 'xml-js'
 import { parse as CSVConvert } from 'json2csv'
 import ExcelConvert, { WorkBook } from 'xlsx'
+import { replaceSpecialDataTypes } from '@/utils/exportData'
 
 type ExportFormat = 'JSON' | 'XML' | 'CSV' | 'Excel'
 
@@ -176,11 +177,9 @@ export default class ExportData extends Vue {
 
   private exportXMLData() {
     const exportDataToXML = (jsonContent: string) => {
-      // avoid messages: [] & subscriptions: [] being discarded
-      jsonContent = jsonContent.replace(/\[\]/g, '""')
-      const XMLOptions = { compact: true, ignoreComment: true, spaces: 2 }
       try {
-        let content = XMLConvert.json2xml(jsonContent, XMLOptions)
+        let content = replaceSpecialDataTypes(jsonContent)
+        content = XMLConvert.json2xml(content, { compact: true, ignoreComment: true, spaces: 2 })
         content = '<?xml version="1.0" encoding="utf-8"?>\n<root>\n'.concat(content).concat('\n</root>')
         content = content.replace(/<([0-9]*)>/g, '<oneConnection>').replace(/<(\/[0-9]*)>/g, '</oneConnection>')
         this.exportDiffFormatData(content, 'XML')
@@ -202,26 +201,28 @@ export default class ExportData extends Vue {
   }
 
   private async exportCSVData() {
-    const { connectionService } = useService()
-    const data: ConnectionModel[] = !this.record.allConnections
-      ? await connectionService.cascadeGetAll(this.connection.id)
-      : await connectionService.cascadeGetAll()
-    if (!data || !data.length) {
-      this.$message.warning(this.$tc('common.noData'))
-      return
-    }
-    const exportDataToCSV = (jsonContent: ConnectionModel[]) => {
+    const exportDataToCSV = (jsonContent: string) => {
       try {
+        let content = replaceSpecialDataTypes(jsonContent)
         // Prevent CSV from automatically converting string with trailing zeros after decimal point to number.
         // https://stackoverflow.com/questions/165042/stop-excel-from-automatically-converting-certain-text-values-to-dates
-        const content: string = CSVConvert(jsonContent).replace(/"(\d+\.0+)"/g, '="$1"')
+        content = CSVConvert(JSON.parse(content)).replace(/"(\d+\.(\d+)?0)"/g, '="$1"')
         this.exportDiffFormatData(content, 'CSV')
       } catch (err) {
         this.$message.error(err.toString())
       }
     }
-    const jsonContent = data
-    exportDataToCSV(jsonContent)
+    this.getStringifyContent()
+      .then((content) => {
+        if (content === '[]') {
+          this.$message.warning(this.$tc('common.noData'))
+          return
+        }
+        exportDataToCSV(content)
+      })
+      .catch((err) => {
+        this.$message.error(err.toString())
+      })
   }
 
   private resetData() {

src/components/ImportData.vue

@@ -64,6 +64,13 @@ import XMLConvert from 'xml-js'
 import CSVConvert from 'csvtojson'
 import ExcelConvert from 'xlsx'
 import useServices from '@/database/useServices'
+import {
+  emptyArray,
+  specialDataTypes,
+  stringProps,
+  recoverSpecialDataTypes,
+  recoverSpecialDataTypesFromString,
+} from '@/utils/exportData'
 
 type ImportFormat = 'JSON' | 'XML' | 'CSV' | 'Excel'
 
@@ -95,17 +102,6 @@ export default class ImportData extends Vue {
     fileName: '',
     fileContent: [],
   }
-  // properties with string values may be 'number'
-  private stringProps: string[] = [
-    'clientId',
-    'name',
-    'password',
-    'topic',
-    'username',
-    'lastWillPayload',
-    'lastWillTopic',
-    'contentType',
-  ]
 
   @Watch('visible')
   private onVisibleChanged(val: boolean) {
@@ -227,27 +223,51 @@ export default class ImportData extends Vue {
   private getXMLData(data: string): ConnectionModel[] {
     const removeJsonTextAttribute = (value: string, parentElement: XMLParentElement) => {
       try {
-        const nativeType = (value: string) => {
+        const nativeType = (key: string, value: string) => {
           const lowerValue = value.toLowerCase()
           if (lowerValue === 'true') {
             return true
           } else if (lowerValue === 'false') {
             return false
-          } else if (lowerValue !== '') {
+          } else if (specialDataTypes.includes(value)) {
+            return recoverSpecialDataTypes(value)
+          } else if (/(\d+\.(\d+)?0)/.test(value)) {
+            // format string number
+            return value
+          } else if (!stringProps.includes(key) && value !== '') {
             // format number
             const numValue = Number(value)
-            const convertedValue = !isNaN(numValue) ? numValue : value
-            return convertedValue
+            return !isNaN(numValue) ? numValue : value
           }
           return value
         }
         const keyNameIndex = Object.keys(parentElement._parent).length - 1
         const keyName = Object.keys(parentElement._parent)[keyNameIndex]
-        parentElement._parent[keyName] = this.stringProps.indexOf(keyName) !== -1 ? value : nativeType(value)
+        parentElement._parent[keyName] = nativeType(keyName, value)
       } catch (err) {
         this.$message.error(err.toString())
       }
     }
+    const convertRightStringAndArray = (data: string) => {
+      let fileContent: ConnectionModel[] = []
+      try {
+        const jsonData = JSON.parse(data)
+        const isOneConnection = !jsonData.root.oneConnection || !Array.isArray(jsonData.root.oneConnection)
+        if (isOneConnection) {
+          // { root: {} or root: { oneConnection : {} } }
+          const isSimpleObj = jsonData.root.oneConnection === undefined
+          const oneConnection: ConnectionModel = isSimpleObj ? jsonData.root : jsonData.root.oneConnection
+          fileContent = oneConnection ? [oneConnection] : []
+        } else {
+          // { root: { oneConnection : [] } }
+          const { oneConnection: connections }: { oneConnection: ConnectionModel[] } = jsonData.root
+          fileContent = connections
+        }
+      } catch (err) {
+        this.$message.error(err.toString())
+      }
+      return fileContent
+    }
     const XMLOptions = {
       compact: true,
       ignoreComment: true,
@@ -259,98 +279,45 @@ export default class ImportData extends Vue {
       textFn: removeJsonTextAttribute,
     }
     const formatedData = XMLConvert.xml2json(data, XMLOptions)
-    return this.convertRightStringAndArray(formatedData)
-  }
-
-  private convertRightStringAndArray(data: string): ConnectionModel[] {
-    let fileContent: ConnectionModel[] = []
-    try {
-      const jsonData = JSON.parse(data)
-      const isOneConnection = !jsonData.root.oneConnection || !Array.isArray(jsonData.root.oneConnection)
-
-      const convertOneConnection = (oneConnection: ConnectionModel): ConnectionModel | undefined => {
-        const { ca, cert, certType, key, password, username, will } = oneConnection
-        // empty string
-        const isStringTypeProps = { ca, cert, certType, key, password, username, will }
-        const isStringTypePropsStr = JSON.stringify(isStringTypeProps).replace(/\{\}/g, '""')
-
-        // one message/subscription
-        let { messages, subscriptions } = oneConnection
-        if (messages === undefined || subscriptions === undefined) {
-          this.$message.error(this.$tc('connections.uploadFileTip'))
-          return
-        }
-        messages = JSON.stringify(messages) !== '{}' && !Array.isArray(messages) ? [messages] : messages
-        subscriptions =
-          JSON.stringify(subscriptions) !== '{}' && !Array.isArray(subscriptions) ? [subscriptions] : subscriptions
-
-        // empty message/subscription
-        const isArrayTypeProps = { messages, subscriptions }
-        const isArrayTypePropsStr = JSON.stringify(isArrayTypeProps).replace(/\{\}/g, '[]')
-
-        const convertedString = JSON.parse(isStringTypePropsStr)
-        const convertedArray = JSON.parse(isArrayTypePropsStr)
-
-        return Object.assign(oneConnection, convertedString, convertedArray)
-      }
-
-      if (isOneConnection) {
-        // { root: {} or root: { oneConnection : {} } }
-        const isSimpleObj = jsonData.root.oneConnection === undefined
-        let oneConnection: ConnectionModel = isSimpleObj ? jsonData.root : jsonData.root.oneConnection
-        const convertedResult = convertOneConnection(oneConnection)
-        fileContent = convertedResult ? [convertedResult] : []
-      } else {
-        // { root: { oneConnection : [] } }
-        const { oneConnection: connections }: { oneConnection: ConnectionModel[] } = jsonData.root
-        const convertedArray = connections.map((oneConnection) => convertOneConnection(oneConnection))
-        if (convertedArray.indexOf(undefined) === -1) {
-          fileContent = convertedArray as ConnectionModel[]
-        }
-      }
-    } catch (err) {
-      this.$message.error(err.toString())
-    }
-    return fileContent
+    return convertRightStringAndArray(formatedData)
   }
 
   private getCSVData(data: string): ConnectionModel[] {
     const fileContent: ConnectionModel[] = []
     CSVConvert()
       .fromString(data)
       .subscribe((jsonObj) => {
+        const formatObj = (obj: any) => {
+          if (obj) {
+            const objStr = typeof obj === 'string' ? obj : JSON.stringify(obj)
+            const objStrFormat = recoverSpecialDataTypesFromString(objStr)
+              .replace(/"=\\"(\d+\.(\d+)?0)\\""/g, '"$1"')
+              .replace(/:"true"/g, ':true')
+              .replace(/:"false"/g, ':false')
+            return JSON.parse(objStrFormat)
+          }
+          return obj
+        }
+
+        let { messages, subscriptions, properties, will, ...otherProps } = jsonObj
+
+        if (messages === emptyArray) messages = []
+        if (subscriptions === emptyArray) subscriptions = []
+
         try {
-          let { messages, subscriptions, properties, will, ...otherProps } = jsonObj
-          // format object
-          messages = JSON.parse(messages)
-          subscriptions = JSON.parse(subscriptions)
-          properties = JSON.parse(properties)
-          will = JSON.parse(will)
+          messages = formatObj(messages)
+          subscriptions = formatObj(subscriptions)
+          properties = formatObj(properties)
+          will = formatObj(will)
+          otherProps = formatObj(otherProps)
+          // Convert string number to number
           Object.keys(otherProps).forEach((item) => {
-            // format boolean
-            if (otherProps[item] === 'true') {
-              otherProps[item] = true
-            } else if (otherProps[item] === 'false') {
-              otherProps[item] = false
-            } else if (this.stringProps.indexOf(item) === -1 && otherProps[item] !== '') {
-              if (/^="(\d+\.0+)"/.test(otherProps[item])) {
-                // format string number
-                otherProps[item] = otherProps[item].replace(/^="(\d+\.0+)"/, '$1')
-              } else {
-                // format number
-                const numValue = Number(otherProps[item])
-                otherProps[item] = !isNaN(numValue) ? numValue : otherProps[item]
-              }
+            if (typeof otherProps[item] === 'string' && otherProps[item] !== '' && !stringProps.includes(item)) {
+              const numValue = Number(otherProps[item])
+              otherProps[item] = !isNaN(numValue) ? numValue : otherProps[item]
             }
           })
-          const oneRealJSONObj = {
-            messages,
-            subscriptions,
-            properties,
-            will,
-            ...otherProps,
-          }
-          fileContent.push(oneRealJSONObj)
+          fileContent.push({ messages, subscriptions, properties, will, ...otherProps })
         } catch (err) {
           this.$message.error(err.toString())
         }

src/types/shims-vue.d.ts

@@ -1,7 +1,6 @@
 declare module 'uuid'
 declare module 'vue-click-outside'
 declare module 'chart.js'
-declare module 'json2csv'
 
 declare module '*.vue' {
   import Vue from 'vue'

src/utils/exportData.ts

@@ -0,0 +1,68 @@
+const typeNull = 'TYPE_NULL'
+const typeUndefined = 'TYPE_UNDEFINED'
+const emptyString = 'EMPTY_STRING'
+const emptyArray = 'EMPTY_ARRAY'
+const emptyObject = 'EMPTY_OBJECT'
+
+const specialDataTypes = [typeNull, typeUndefined, emptyString, emptyArray, emptyObject]
+
+// properties with string values may be 'number'
+const stringProps = [
+  'clientId',
+  'name',
+  'mqttVersion',
+  'password',
+  'topic',
+  'username',
+  'lastWillPayload',
+  'lastWillTopic',
+  'contentType',
+]
+
+const replaceSpecialDataTypes = (jsonString: string) => {
+  return jsonString
+    .replace(/: null/g, `: "${typeNull}"`)
+    .replace(/: undefined/g, `: "${typeUndefined}"`)
+    .replace(/: ""/g, `: "${emptyString}"`)
+    .replace(/: \[\]/g, `: "${emptyArray}"`)
+    .replace(/: \{\}/g, `: "${emptyObject}"`)
+}
+
+const recoverSpecialDataTypes = (value: string) => {
+  switch (value) {
+    case typeNull:
+      return null
+    case typeUndefined:
+      return undefined
+    case emptyString:
+      return ''
+    case emptyArray:
+      return []
+    case emptyObject:
+      return {}
+    default:
+      return value
+  }
+}
+
+const recoverSpecialDataTypesFromString = (jsonString: string) => {
+  return jsonString
+    .replace(new RegExp(`"${typeNull}"`, 'g'), 'null')
+    .replace(new RegExp(`"${typeUndefined}"`, 'g'), 'undefined')
+    .replace(new RegExp(`"${emptyString}"`, 'g'), '""')
+    .replace(new RegExp(`"${emptyArray}"`, 'g'), '[]')
+    .replace(new RegExp(`"${emptyObject}"`, 'g'), '{}')
+}
+
+export {
+  typeNull,
+  typeUndefined,
+  emptyString,
+  emptyArray,
+  emptyObject,
+  specialDataTypes,
+  stringProps,
+  replaceSpecialDataTypes,
+  recoverSpecialDataTypes,
+  recoverSpecialDataTypesFromString,
+}

yarn.lock

@@ -1112,6 +1112,13 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
+"@types/json2csv@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@types/json2csv/-/json2csv-5.0.3.tgz#759514772a90e35b08c10808dedeaf52248af418"
+  integrity sha512-ZJEv6SzhPhgpBpxZU4n/TZekbZqI4EcyXXRwms1lAITG2kIAtj85PfNYafUOY1zy8bWs5ujaub0GU4copaA0sw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/lodash@^4.14.142":
   version "4.14.170"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.170.tgz#0d67711d4bf7f4ca5147e9091b847479b87925d6"