feat(update): :rocket added ability to accept parameter only a key string

Author: Chantouch Sek

README.md

@@ -1,5 +1,6 @@
 # Vue Api Queries.
 
+[![Build Status](https://travis-ci.com/Chantouch/vue-api-queries.svg?branch=master)](https://travis-ci.com/Chantouch/vue-api-queries)
 [![Latest Version on NPM](https://img.shields.io/npm/v/vue-api-queries.svg?style=flat-square)](https://npmjs.com/package/vue-api-queries)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
 [![npm](https://img.shields.io/npm/dt/vue-api-queries.svg?style=flat-square)](https://npmjs.com/package/vue-api-queries)
@@ -305,9 +306,76 @@ Method                           | Description
 **has(attributes)**                        | To check multiple attributes given have any errors
 **first(attribute)**                        | To get errors message by an attribute
 
-## Todo
-### Add tests
+
+## How to use in vue component
+
+```vue
+<template>
+  <v-form v-model="valid" lazy-validation @keydown.native="$errors.onKeydown" @submit.prevent='submit'>
+    <v-container>
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="firstname"
+            :error-messages="$errors.first(['firstname'])"
+            :counter="10"
+            label="First name"
+            required
+            name="firstname"
+            @focus="validate"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="lastname"
+            :counter="10"
+            label="Last name"
+            required
+            :error-messages="$errors.first(['lastname'])"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="email"
+            :counter="10"
+            label="Email"
+            required
+            :error-messages="$errors.first('email')"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field v-model="email" label="E-mail" required />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+</template>
+<script>
+export default {
+  data: () => ({
+    valid: false,
+    firstname: '',
+    lastname: '',
+    email: '',
+  }),
+  methods: {
+    submit() {
+      this.$axios.$post('/account/create', {
+        firstname: this.firstname,
+        lastname: this.lastname,
+        email: this.email
+      })
+    }
+  },
+  beforeDestroy() {
+    this.$errors.flush()
+  }
+}
+</script>
+```
 
 # Contact
 
+Email: [email protected]
+
 Twitter [@DevidCs83](https://twitter.com/DevidCs83)

package.json

@@ -82,7 +82,7 @@
     "nuxt"
   ],
   "dependencies": {
-    "axios": "^0.20.0",
+    "axios": "^0.21.1",
     "camelcase-keys": "^6.2.2",
     "escape-string-regexp": "^4.0.0",
     "lodash.merge": "^4.6.2",

src/__tests__/base-proxy.test.ts

@@ -6,6 +6,7 @@ import type { ValidatorType } from '../core/Validator'
 import Validator from '../core/Validator'
 import BaseTransformer from '../core/BaseTransformer'
 import PaginationTransformer from '../core/PaginationTransformer'
+import { merge } from '../util/objects'
 
 let proxy: PostProxy
 let mockAdapter
@@ -14,12 +15,21 @@ let validator: ValidatorType
 describe('BaseProxy', () => {
   beforeEach(() => {
     validator = Validator
-    const axios = Axios.create({ baseURL: 'http://drink-order-api.test' })
+    const axios = Axios.create({ baseURL: 'http://mock-api.test' })
     BaseProxy.$http = axios
     proxy = new PostProxy()
     mockAdapter = new MockAdapter(axios)
   })
 
+  it('check if http was installed', async () => {
+    BaseProxy.$http = null
+    try {
+      await proxy.all()
+    } catch (e) {
+      expect(e.message).toBe('Vue Api Queries, No http library provided.')
+    }
+  })
+
   it('it should fetch items with pagination', async () => {
     const items = {
       data: [{ first_name: 'Chantouch', last_name: 'Sek' }],
@@ -74,6 +84,28 @@ describe('BaseProxy', () => {
       .all()
     expect(data).toEqual(items)
   })
+
+  it('should set parameter with empty value', async () => {
+    const user1 = {
+      first_name: 'Dara',
+      last_name: 'Hok',
+      id: 1,
+      songs: [1, 2, 3],
+    }
+    const user2 = merge(user1, {
+      last_name: 'Hok 01',
+      songs: [4, 5, 6],
+      song: { name: 'Love song...' },
+      pc: null,
+    })
+    const items = [user2, { first_name: 'Chantouch', last_name: 'Sek', id: 2 }]
+    mockAdapter.onGet('/posts?id=1&first_name=Dara').reply(200, { data: items })
+    const { data } = await proxy
+      .setParameter('id=1')
+      .setParameters({ first_name: 'Dara' })
+      .all()
+    expect(data).toEqual(items)
+  })
   it('it should be able to remove parameter(s)', async () => {
     const items = [
       { first_name: 'Dara', last_name: 'Hok', id: 1 },

src/__tests__/validator.test.ts

@@ -5,6 +5,7 @@ describe('Validator', () => {
   let validator: ValidatorType
   beforeEach(() => {
     validator = Validator
+    validator.flush()
   })
   afterEach(() => {
     validator.flush()
@@ -13,6 +14,10 @@ describe('Validator', () => {
     validator.add('name', 'The name field is required.')
     expect(validator.any()).toBeTruthy()
   })
+  test('add error with missed attribute', () => {
+    validator.add('name-3diidi', 'The name field is required.')
+    expect(validator.any()).toBeTruthy()
+  })
   test('Add an error message as string', () => {
     const errors = {
       name: 'The name field is required.',
@@ -150,6 +155,16 @@ describe('Validator', () => {
     })
   })
 
+  it('should return empty object, with returnObject property is true', () => {
+    const errors = {
+      first_name: ['This field is required'],
+      last_name: ['This field is required'],
+      age: ['This field is required'],
+    }
+    validator.fill(errors)
+    expect(validator.any([], true)).toEqual({})
+  })
+
   it('can pass array of keys to any method and get back boolean', () => {
     const errors = {
       first_name: ['This field is required'],

src/core/BaseProxy.ts

@@ -1,10 +1,14 @@
 import type { AxiosError, AxiosInstance, AxiosResponse, Method } from 'axios'
-import { isFile } from '../util/objects'
+import { isFile, isArray } from '../util/objects'
 import type { Errors } from '../'
 import Validator from './Validator'
 import { objectToFormData } from '../util/formData'
 
 const validator = Validator
+const UNPROCESSABLE_ENTITY = 422
+export interface ParametersType {
+  [key: string]: any
+}
 
 class BaseProxy {
   public errors: Errors
@@ -68,16 +72,16 @@ class BaseProxy {
       this.$http[requestType](this.__getParameterString(url), data)
         .then((response: AxiosResponse) => {
           this.onSuccess()
-          const { data = {} } = response
+          const { data } = response
           resolve(data)
         })
         .catch((error: AxiosError) => {
           this.errors.processing = false
           validator.processing = false
           const { response } = error
           if (response) {
-            const { data = {}, status } = response
-            if (status === 422) {
+            const { data, status } = response
+            if (status === UNPROCESSABLE_ENTITY) {
               const errors = {}
               Object.assign(errors, data[this.$errorsKeyName])
               this.onFail(errors)
@@ -99,6 +103,16 @@ class BaseProxy {
     return parameters.length === 0 ? url : `${url}?${parameters.join('&')}`
   }
 
+  __getQueryString(parameter: string): string[] {
+    const queries: string[] = parameter.split('&')
+    const obj: any = {}
+    queries.forEach(function (property: string) {
+      const [key = null, value = null]: string[] = property.split('=')
+      obj[key] = value
+    })
+    return obj
+  }
+
   __validateRequestType(requestType: Method): void {
     const requestTypes: Array<string> = [
       'get',
@@ -146,7 +160,7 @@ class BaseProxy {
       }
     }
 
-    if (Array.isArray(object)) {
+    if (isArray(object)) {
       for (const key in object) {
         if (object.hasOwnProperty(key)) {
           return this.__hasFilesDeep(object[key])
@@ -164,7 +178,11 @@ class BaseProxy {
     return this
   }
 
-  setParameter(parameter: any, value: any): this {
+  setParameter(parameter: string, value?: any): this {
+    if (!value) {
+      this.parameters = this.__getQueryString(parameter)
+      return this
+    }
     this.parameters[parameter] = value
     return this
   }
@@ -210,7 +228,3 @@ class BaseProxy {
 }
 
 export default BaseProxy
-
-export interface ParametersType {
-  [key: string]: any
-}

src/core/BaseTransformer.ts

@@ -1,6 +1,10 @@
 import snakeCaseKeys from 'snakecase-keys'
 import camelcaseKeys from 'camelcase-keys'
 
+export type Attribute = {
+  [key in string | number]: any
+}
+
 class BaseTransformer {
   static fetchCollection(
     items: Array<Attribute>,
@@ -32,7 +36,3 @@ class BaseTransformer {
 }
 
 export default BaseTransformer
-
-export type Attribute = {
-  [key in string | number]: any
-}

src/core/Validator.ts

@@ -1,4 +1,4 @@
-import { is } from '../util/objects'
+import { is, isArray } from '../util/objects'
 
 class Validator {
   public errors: any
@@ -21,7 +21,7 @@ class Validator {
   }
 
   has(field: any | any[]): boolean {
-    if (field instanceof Array) {
+    if (isArray(field)) {
       return is(Object.keys(this.errors), field)
     }
     let hasError = this.errors.hasOwnProperty(field)
@@ -46,12 +46,12 @@ class Validator {
     return this.get(field)[0]
   }
 
-  missed(field = null): boolean {
+  missed(field?: string | string[]): boolean {
     return !this.has(field)
   }
 
-  nullState(field = null): boolean | null {
-    return this.has(field) ? !this.has(field) : null
+  nullState(field?: string | string[]): boolean | null {
+    return this.has(field) ? this.missed(field) : null
   }
 
   any(fields = [], returnObject?: boolean): boolean | string[] | any {

src/util/objects.ts

@@ -14,13 +14,14 @@ export function isFile(object: any): boolean {
   return object instanceof File || object instanceof FileList
 }
 
-export function merge(a: string | any, b: string | any): void {
+export function merge(a: any, b: any): string[] {
   for (const key in b) {
     if (!b.hasOwnProperty(key)) {
       continue
     }
     a[key] = cloneDeep(b[key])
   }
+  return a
 }
 
 export function cloneDeep(object: any): any {

yarn.lock

@@ -3239,6 +3239,13 @@ axios@^0.20.0:
   dependencies:
     follow-redirects "^1.10.0"
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -13813,9 +13820,9 @@ vm-browserify@^1.0.1:
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
 "vue-api-queries@file:.":
-  version "0.0.10-alpha.1"
+  version "0.0.12"
   dependencies:
-    axios "^0.20.0"
+    axios "^0.21.1"
     camelcase-keys "^6.2.2"
     escape-string-regexp "^4.0.0"
     lodash.merge "^4.6.2"