@phoenix-cg/v-filters 0.1.16 → 0.2.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phoenix-cg/v-filters",
-  "version": "0.1.16",
+  "version": "0.2.0-beta.10",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/VFilters.vue

@@ -109,7 +109,7 @@ export default {
       default: false
     },
     humanLink: {
-      type: String
+      type: Object
     },
     editedOutside: {
       type: Boolean,
@@ -122,12 +122,19 @@ export default {
     fieldKey: {
       type: [String, Number],
       default: '1'
+    },
+    alwaysSendFields: {
+      type: Array,
+      default: () => []
+    },
+    paramsToInclude: {
+      type: Object,
+      default: () => ({})
     }
   },
   data () {
     return {
       filters: {},
-      editedInside: false,
       editedFields: []
     }
   },
@@ -135,6 +142,9 @@ export default {
     edited () {
       return this.editedInside || this.editedOutside
     },
+    editedInside () {
+      return this.editedFields.length > 0
+    },
     actionTitle () {
       let title = this.notFoundTitle
       if (this.count > 0) {
@@ -146,31 +156,41 @@ export default {
     },
     flatFilters () {
       let filters = {}
+      const fieldsToInclude = [...this.editedFields, ...this.alwaysSendFields]
       Object.keys(this.filters).forEach(name => {
-        if (this.editedFields.includes(name)) {
+        if (fieldsToInclude.includes(name)) {
           const filtersValue = this.filters[name]
           const wrappedValue = getType(filtersValue) === 'Object' ? [filtersValue] : filtersValue
-          filters[name] = wrappedValue.map(value => value._id && value._id.toString() || value)
+          filters[name] = wrappedValue.map(value => value._id || value)
         }
       })
       return filters
     }
   },
+  watch: {
+    fields: {
+      deep: true,
+      handler () {
+        this.setFilters(true)
+      }
+    },
+    paramsToInclude () {
+      this.setUrlParams()
+    }
+  },
   created () {
     this.setFilters()
   },
   methods: {
-    setFilters (isReset, query) {
-      let params = query || this.getUrlParams()
-      let editedInside = false
-
+    setFilters (isUpdate) {
+      let params = this.getUrlParams()
       this.fields.forEach(field => {
         let value = field._type === 'range' ? field.value : []
         const valueNotArray = ['select', 'tab'].includes(field._type)
         if (valueNotArray) {
           [value] = field.value
         }
-        if (params[field._name] && !isReset) {
+        if (params[field._name] && !isUpdate) {
           let paramsValue = params[field._name]
           if (field._type !== 'range') {
             value = field.data.reduce((acc, item) => {
@@ -184,9 +204,24 @@ export default {
             value = paramsValue
           }
           this.addEditedField(field._name)
-        } else if ((!params[field._name] || isReset) && valueNotArray) {
+        } else if (params[field._name] && isUpdate && field._type !== 'range') {
+          if (valueNotArray) {
+            const isValueInData = field.data.some(dataValue => dataValue._id === value._id || dataValue._id === value)
+            if (!isValueInData) {
+              value = field.data[0]
+            }
+          } else {
+            value = field.value.reduce((acc, currentValue) => {
+              const isValueInData = field.data.some(dataValue => dataValue._id === currentValue._id || dataValue._id === currentValue)
+              if (isValueInData) {
+                acc.push(currentValue)
+              }
+              return acc
+            }, [])
+          }
+        } else if ((!params[field._name] || isUpdate) && valueNotArray) {
           [value] = field.value
-        } else if (!params[field._name] || isReset) {
+        } else if (!params[field._name] || isUpdate) {
           value = field.value
         }
         // Detect changed fields
@@ -194,7 +229,7 @@ export default {
         switch (field._type) {
           case 'range':
             fieldIsEdited = field.data.map((dataValue, index) => field.value[index] === dataValue)
-                                      .some(checkedValue => !checkedValue)
+              .some(checkedValue => !checkedValue)
             break
           case 'select':
           case 'tab':
@@ -202,29 +237,38 @@ export default {
             break
           case 'checkbox':
             fieldIsEdited = field.value.length > 0
-            break                                    
+            break
         }
         fieldIsEdited && this.addEditedField(field._name)
         this.$set(this.filters, field._name, value)
       })
-      this.setUrlParams(isReset)
-      this.editedInside = editedInside
-      this.doAction()
+      this.setUrlParams(isUpdate)
+      !isUpdate && this.doAction(true)
     },
-    resetFilters (isOutside) {
-      this.$emit('reset-filters', isOutside)
-      this.setFilters(true)
+    resetFilters () {
       this.editedFields = []
-      this.editedInside = false
-      this.doAction()
+      this.setUrlParams(true, {})
+      this.$emit('reset-filters', this.flatFilters)
     },
     addEditedField (name) {
       if (!this.editedFields.includes(name)) {
         this.editedFields.push(name)
       }
     },
-    doAction () {
-      this.immediate ? this.showResult() : this.requestCount()
+    removeDependentFieldsFromEdited (name) {
+      const field = this.fields.find(field => field._name === name)
+      if (field.reset) {
+        const dependentFields = this.fields.filter(field => !field.reset).map(field => field._name)
+        this.editedFields = this.editedFields.filter(fieldName => !dependentFields.includes(fieldName))
+      }
+    },
+    doAction (both = false) {
+      if (both) {
+        this.requestCount()
+        this.showResult()
+      } else {
+        this.immediate ? this.showResult() : this.requestCount()
+      }
     },
     requestCount () {
       this.$emit('request-count', this.flatFilters)
@@ -235,25 +279,12 @@ export default {
     getUrlParams () {
       return unserialize(window.location.search)
     },
-    setUrlParams (reset) {
+    setUrlParams (isUpdate, rewriteParams) {
       if (this.showParams) {
-        let params = this.getUrlParams()
-        for (let name in this.filters) {
-          let filterValue = this.filters[name]
-          if (this.editedFields.includes(name)) {
-            if (Array.isArray(filterValue) && filterValue.length > 0) {
-              params[name] = filterValue.map(val => val._id || val)
-            } else if (filterValue instanceof Object) {
-              filterValue = { ...filterValue }
-              params[name] = [filterValue._id]
-            }
-          } else {
-            delete params[name]
-          }
-        }
+        const params = rewriteParams || { ...this.flatFilters, ...this.paramsToInclude }
         const currentParams = this.getUrlParams()
         const newParamsLength = Object.keys(params).length
-        if (((newParamsLength && !equals(params, currentParams)) || reset) && !this.humanLink) {
+        if (((newParamsLength && !equals(params, currentParams)) || isUpdate || rewriteParams) && !this.humanLink) {
           let query = serialize(params)
           let url = window.location.origin + window.location.pathname + `${newParamsLength ? '?' : ''}${query}`
           history.replaceState({ state: url }, '', url)
@@ -262,7 +293,7 @@ export default {
     },
     handleFieldChange (name) {
       this.addEditedField(name)
-      this.editedInside = true
+      this.removeDependentFieldsFromEdited(name)
       this.setUrlParams()
       this.doAction()
     }