Merge pull request #1061 from chantouchsek/feat/1060-support-whildcard-fields

chantouchsek · web-flow · commit 2b8eff4d8803 · 2024-04-30T11:15:55.000+07:00
Feat/1060 support wildcard fields
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "nuxt"
   ],
   "dependencies": {
-    "axios": "^0.27.2",
+    "axios": "^0.28.1",
     "lodash": "^4.17.21",
     "qs": "^6.12.1"
   },
diff --git a/src/__tests__/validator.test.ts b/src/__tests__/validator.test.ts
@@ -13,6 +13,7 @@ describe('Validator', () => {
   })
   test('Add an error', () => {
     validator.add('name', 'The name field is required.')
+    validator.add('name', 'The name field min length is 3.')
     expect(validator.any()).toBeTruthy()
   })
   test('Add an error with forceUpdate', () => {
@@ -240,4 +241,18 @@ describe('Validator', () => {
 
     expect(validator.has(['firstName'])).toBeFalsy()
   })
+
+  it('should work with wildcard fields', () => {
+    const errors = {
+      'items.0.name': ['This fist name field is required'],
+      'items.1.name': ['This fist name field is required'],
+      'items.2.name': ['This fist name field is required'],
+    }
+    validator.fill(errors)
+
+    expect(validator.has(['items.*'])).toBeTruthy()
+    expect(validator.has(['items.*.name'])).toBeTruthy()
+    expect(validator.first(['items.*.name'])).toEqual('This fist name field is required')
+    expect(validator.first(['items.0.name'])).toEqual('This fist name field is required')
+  })
 })
diff --git a/src/core/BaseService.ts b/src/core/BaseService.ts
@@ -86,39 +86,34 @@ export default class BaseService {
 
   $submit<T = any, F = any>(method: Method, param?: string | number, form?: F, config?: AxiosRequestConfig) {
     this.beforeSubmit()
-    return new Promise<AxiosResponse<T>>((resolve, reject) => {
-      const formData = hasFiles(form) ? objectToFormData(form) : form
-      const endpointPath = param ? `/${this.endpoint}/${param}` : `/${this.endpoint}`
-      const endpoint = endpointPath.replace(/\/\//g, '/')
-      const url = this.__getParameterString(endpoint)
-      const axiosConfig = { url, data: formData, method, ...config }
-      this.$http(axiosConfig)
+    const formData = hasFiles(form) ? objectToFormData(form) : form
+    const endpointPath = param ? `/${this.endpoint}/${param}` : `/${this.endpoint}`
+    const endpoint = endpointPath.replace(/\/\//g, '/')
+    const url = this.__getParameterString(endpoint)
+    const axiosConfig = { url, data: formData, method, ...config }
+    return new Promise<AxiosResponse<AxiosResponse<T>>>((resolve, reject) => {
+      this.$http<T>(axiosConfig)
         .then((response) => {
           this.onSuccess()
+          if (this.$resetParameter) this.removeParameters()
           resolve(response)
         })
         .catch((error: AxiosError<AxiosResponseData>) => {
           this.errors.processing = false
           validator.processing = false
-          const { response } = error
-          if (response && response.status === UNPROCESSABLE_ENTITY) {
-            const { data } = response
+          if (error.response && error.response.status === UNPROCESSABLE_ENTITY) {
             const validationErrors: SimpleObject<any> = {}
-            Object.assign(validationErrors, data[this.$errorProperty])
+            Object.assign(validationErrors, error.response.data[this.$errorProperty])
             this.onFail(validationErrors)
           }
           reject(error)
         })
-      if (this.$resetParameter) this.removeParameters()
     })
   }
 
-  submit<T = any, F = any>(method: Method, url?: string | number, form?: F, config?: AxiosRequestConfig) {
-    return new Promise<T>((resolve, reject) => {
-      this.$submit<T>(method, url, form, config)
-        .then(({ data }) => resolve(data))
-        .catch((err) => reject(err))
-    })
+  async submit<T = any, F = any>(method: Method, url?: string | number, form?: F, config?: AxiosRequestConfig) {
+    const { data } = await this.$submit<T>(method, url, form, config)
+    return data
   }
 
   private __getParameterString(url: string) {
@@ -133,32 +128,27 @@ export default class BaseService {
   }
 
   setParameters(parameters: SimpleObject<any>) {
-    Object.keys(parameters).forEach((key) => {
-      this.parameters[key] = parameters[key]
-    })
+    this.parameters = { ...this.parameters, ...parameters }
     return this
   }
 
   setParameter(parameter: string, value?: any) {
     if (!value) {
-      const options: IParseOptions = Object.assign({}, this.$parsedQs, {
-        comma: true,
-        allowDots: true,
-        ignoreQueryPrefix: true,
-      })
-      const params = parse(parameter, options)
-      return this.setParameters(params)
+      return this.setParameters(
+        parse(parameter, {
+          ...this.$parsedQs,
+          comma: true,
+          allowDots: true,
+          ignoreQueryPrefix: true,
+        }),
+      )
     }
     this.parameters[parameter] = value
     return this
   }
 
   removeParameters(parameters: string[] = []) {
-    if (!parameters || !parameters.length) {
-      this.parameters = {}
-    } else if (Array.isArray(parameters)) {
-      for (const parameter of parameters) delete this.parameters[parameter]
-    }
+    parameters.length ? parameters.forEach((param) => delete this.parameters[param]) : (this.parameters = {})
     return this
   }
 
diff --git a/src/core/Validator.ts b/src/core/Validator.ts
@@ -1,22 +1,15 @@
 import type { SimpleObject } from '../types'
-import { cloneDeep, get, has, omit } from 'lodash'
+import { castArray, cloneDeep, get, has, omit, replace } from 'lodash'
 import { is, toCamelCase, toSnakeCase } from '../util'
 
 class Validator {
-  public successful: boolean
-  public processing: boolean
-
-  constructor(public errors: SimpleObject<any> = {}) {
-    this.processing = false
-    this.successful = false
-  }
+  constructor(public errors: SimpleObject<any> = {}, public processing = false, public successful = false) {}
 
   add(field: string, message: string, forceUpdate?: boolean) {
-    if (this.missed(field)) this.errors[field] = []
-    if (!this.errors[field].includes(message)) this.errors[field].unshift(message)
-    if (forceUpdate) {
-      this.errors[field] = []
-      this.errors[field].push(message)
+    if (forceUpdate || this.missed(field)) {
+      this.errors[field] = [message]
+    } else if (!this.errors[field].includes(message)) {
+      this.errors[field].unshift(message)
     }
   }
 
@@ -25,33 +18,15 @@ class Validator {
     return is(Object.keys(this.errors), fields)
   }
 
-  first(field: string | string[]): string | undefined {
-    if (Array.isArray(field)) {
-      const fields = this.fields(field)
-      let fd = ''
-      for (const f of fields) {
-        if (has(this.errors, f)) {
-          fd = f
-          break
-        }
-      }
-      return this.first(fd)
-    } else {
-      const value = this.get(field)
-      if (Array.isArray(value)) return value[0]
-      return value
-    }
+  first(field: string | string[]) {
+    const fields = this.fields(castArray(field))
+    const foundField = fields.find((f) => has(this.errors, f)) ?? ''
+    const value = this.get(foundField)
+    return Array.isArray(value) ? value[0] : value
   }
 
-  firstBy(obj: SimpleObject<any>, field?: string) {
-    let value: string
-    if (!field) {
-      value = obj[Object.keys(obj)[0]]
-    } else {
-      value = obj[field]
-    }
-    if (Array.isArray(value)) value = value[0]
-    return value
+  firstBy(obj: SimpleObject<any>, field: string = Object.keys(obj)[0]): string {
+    return castArray(obj[field])[0]
   }
 
   missed(field: string | string[]) {
@@ -64,20 +39,17 @@ class Validator {
 
   any(field: string[] = [], returnObject?: boolean) {
     const fields = this.fields(field)
-    if (returnObject) {
-      const errors: SimpleObject<any> = {}
-      if (!fields.length) return {}
-      for (const f of fields) {
-        const val = this.get(f)
-        if (!val.length) continue
-        errors[f] = val
-      }
-      return errors
-    }
-    if (!fields.length) return Object.keys(this.errors).length > 0
     const errors: SimpleObject<any> = {}
-    fields.forEach((key: string) => (errors[key] = this.get(key)))
-    return Object.keys(errors).length > 0
+
+    if (!fields.length) return returnObject ? {} : Object.keys(this.errors).length > 0
+
+    fields.forEach((f: string) => {
+      const val = this.get(f)
+      if (returnObject && val.length) errors[f] = val
+      else if (!returnObject) errors[f] = val
+    })
+
+    return returnObject ? errors : Object.keys(errors).length > 0
   }
 
   get(field: string): string | string[] {
@@ -117,15 +89,18 @@ class Validator {
     this.clear(names)
   }
 
-  fields(field: string | string[]): string[] {
-    const fields: string[] = []
-    if (Array.isArray(field)) {
-      for (const f of field) {
-        fields.push(toCamelCase(f), toSnakeCase(f))
-      }
-    } else {
-      fields.push(toCamelCase(field), toSnakeCase(field))
+  fields(field: string | string[]) {
+    const processField = (f: string) => {
+      if (f.includes('*')) {
+        const regex = new RegExp(`^${replace(f, '*', '.*')}$`, 'i')
+        for (const key in this.errors) {
+          if (regex.test(key)) fields.push(toCamelCase(key), toSnakeCase(key))
+        }
+      } else fields.push(toCamelCase(f), toSnakeCase(f))
     }
+
+    const fields: string[] = []
+    Array.isArray(field) ? field.forEach(processField) : processField(field)
     return [...new Set(fields)].filter(Boolean)
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3740,13 +3740,14 @@ axios-mock-adapter@^1.22.0:
     fast-deep-equal "^3.1.3"
     is-buffer "^2.0.5"
 
-axios@^0.27.2:
-  version "0.27.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
-  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+axios@^0.28.1:
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.28.1.tgz#2a7bcd34a3837b71ee1a5ca3762214b86b703e70"
+  integrity sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==
   dependencies:
-    follow-redirects "^1.14.9"
+    follow-redirects "^1.15.0"
     form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
 
 babel-loader@^8.3.0:
   version "8.3.0"
@@ -6303,7 +6304,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.14.9:
+follow-redirects@^1.15.0:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
@@ -10161,6 +10162,11 @@ protocols@^2.0.0, protocols@^2.0.1:
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
   integrity sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
