@bildvitta/quasar-ui-asteroid 2.23.0-beta.5 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.23.0-beta.5",
+  "version": "2.23.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

package/src/components/form-view/QasFormView.stories.js

@@ -33,6 +33,10 @@ export default {
 
   argTypes: {
     // Props
+    beforeFetch: {
+      description: 'Function to be called before fetching data.'
+    },
+
     cancelButton: {
       description: 'Cancel button label.'
     },
@@ -80,6 +84,10 @@ export default {
       description: 'Submit button label.'
     },
 
+    beforeSubmit: {
+      description: 'Function to be called before submit.'
+    },
+
     url: {
       control: null,
       description: 'Ignore entity and specify another endpoint.'

package/src/components/form-view/QasFormView.vue

@@ -4,7 +4,7 @@
       <slot :errors="errors" :fields="fields" :metadata="metadata" name="header" />
     </header>
 
-    <q-form ref="form" @submit="submit">
+    <q-form ref="form" @submit="submitHandler">
       <slot :errors="errors" :fields="fields" :metadata="metadata" />
 
       <slot v-if="!readOnly" :errors="errors" :fields="fields" :metadata="metadata" name="actions">
@@ -13,7 +13,7 @@
             <qas-btn v-close-popup="dialog" class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButton" outline type="button" @click="cancel" />
           </div>
           <div class="col-12 col-sm-2" :class="saveButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmiting" type="submit" />
+            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmitting" type="submit" />
           </div>
         </div>
       </slot>
@@ -95,6 +95,11 @@ export default {
       type: String
     },
 
+    beforeSubmit: {
+      default: null,
+      type: Function
+    },
+
     value: {
       default: () => ({}),
       type: Object
@@ -105,7 +110,7 @@ export default {
     return {
       cachedResult: {},
       hasResult: false,
-      isSubmiting: false,
+      isSubmitting: false,
       showDialog: false,
 
       dialogConfig: {
@@ -181,7 +186,7 @@ export default {
   },
 
   created () {
-    this.fetch()
+    this.fetchHandler({ form: true, id: this.id, url: this.fetchURL }, this.fetchSingle)
   },
 
   methods: {
@@ -203,14 +208,18 @@ export default {
       }
     },
 
-    async fetch (params) {
+    async fetchSingle (externalPayload = {}) {
       this.isFetching = true
 
-      try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchSingle`, { form: true, id: this.id, params, url: this.fetchURL }
-        )
+      const payload = {
+        form: true,
+        id: this.id,
+        url: this.fetchURL,
+        ...externalPayload
+      }
 
+      try {
+        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
         const { errors, fields, metadata, result } = response.data
 
         this.setErrors(errors)
@@ -264,22 +273,33 @@ export default {
       this.showDialog = true
     },
 
-    async submit (event) {
+    submitHandler (event) {
       if (event) {
         event.preventDefault()
       }
 
-      if (this.disable || this.readyOnly) {
+      const hasBeforeSubmit = typeof this.beforeSubmit === 'function'
+
+      if (hasBeforeSubmit) {
+        return this.beforeSubmit({
+          params: { id: this.id, payload: this.value, url: this.url },
+          resolve: payload => this.submit(payload)
+        })
+      }
+
+      this.submit()
+    },
+
+    async submit (externalPayload = {}) {
+      if (this.disable) {
         return null
       }
 
-      this.isSubmiting = true
+      this.isSubmitting = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/${this.mode}`,
-          { id: this.id, payload: this.value, url: this.url }
-        )
+        const payload = { id: this.id, payload: this.value, url: this.url, ...externalPayload }
+        const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload)
 
         if (this.showDialogOnUnsavedChanges) {
           this.cachedResult = cloneDeep(this.value)
@@ -301,7 +321,7 @@ export default {
 
         this.$emit('submit-error', error)
       } finally {
-        this.isSubmiting = false
+        this.isSubmitting = false
       }
     }
   }

package/src/components/list-view/QasListView.stories.js

@@ -41,6 +41,10 @@ export default {
 
   argTypes: {
     // Props
+    beforeFetch: {
+      description: 'Function to be called before fetching data.'
+    },
+
     dialog: {
       description: 'Use when the component is inside a dialog.'
     },
@@ -67,6 +71,10 @@ export default {
       description: 'Ignore entity and specify another endpoint.'
     },
 
+    useResultsAreaOnly: {
+      description: 'Controls whether results will always be displayed regardless of there are no results to be displayed.'
+    },
+
     // Events
     'fetch-error': {
       description: 'Fires when occur an error fetching value.',

package/src/components/list-view/QasListView.vue

@@ -10,7 +10,7 @@
       </slot>
 
       <main class="relative-position">
-        <div v-if="hasResults">
+        <div v-if="showResults">
           <slot :fields="fields" :metadata="metadata" :results="results" />
         </div>
 
@@ -67,6 +67,10 @@ export default {
     filtersProps: {
       default: () => ({}),
       type: Object
+    },
+
+    useResultsAreaOnly: {
+      type: Boolean
     }
   },
 
@@ -77,11 +81,6 @@ export default {
   },
 
   computed: {
-    context () {
-      const { limit, ordering, page, search, ...filters } = this.$route.query
-      return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
-    },
-
     hasHeaderSlot () {
       return !!(this.$slots.header || this.$scopedSlots.header)
     },
@@ -98,6 +97,10 @@ export default {
       return this.$store.getters[`${this.entity}/list`]
     },
 
+    showResults () {
+      return this.hasResults || (this.useResultsAreaOnly && !this.isFetching)
+    },
+
     totalPages () {
       return this.$store.getters[`${this.entity}/totalPages`]
     }
@@ -105,13 +108,13 @@ export default {
 
   watch: {
     $route () {
-      this.fetchList()
+      this.onFetchHandler()
       this.setCurrentPage()
     }
   },
 
   created () {
-    this.fetchList()
+    this.onFetchHandler()
     this.setCurrentPage()
   },
 
@@ -148,13 +151,17 @@ export default {
     },
 
     async refresh (done) {
-      await this.fetchList()
+      await this.onFetchHandler()
 
       if (typeof done === 'function') {
         done()
       }
     },
 
+    async onFetchHandler () {
+      await this.fetchHandler({ ...this.context, url: this.url }, this.fetchList)
+    },
+
     setCurrentPage () {
       this.page = parseInt(this.$route.query.page || 1)
     }

package/src/components/search-box/QasSearchBox.vue

@@ -91,7 +91,7 @@ export default {
 
   computed: {
     contentClasses () {
-      return ['overflow-auto', 'q-mt-xs', 'relative-position', this.$_virtualScrollClassName]
+      return ['overflow-auto', 'q-mt-xs', 'relative-position']
     },
 
     contentStyle () {

package/src/components/select/QasSelect.vue

@@ -13,15 +13,10 @@
     </template>
 
     <template #no-option>
-      <slot name="no-option">
+      <slot v-if="!isLoading" name="no-option">
         <q-item>
           <q-item-section class="text-grey">
-            <template v-if="isLoading">
-              Buscando opções de {{ label }}...
-            </template>
-            <template v-else>
-              {{ noOptionLabel }}
-            </template>
+            {{ noOptionLabel }}
           </q-item-section>
         </q-item>
       </slot>
@@ -98,10 +93,6 @@ export default {
       }
     },
 
-    label () {
-      return this.$attrs.label || ''
-    },
-
     listeners () {
       const { input, ...events } = this.$listeners
 
@@ -148,19 +139,23 @@ export default {
       return this.hasFetchError || this.$attrs.error
     },
 
+    hasLoading () {
+      return this.isLoading || this.$attrs.loading
+    },
+
     attributes () {
       return {
+        bottomSlots: true,
         emitValue: true,
         mapOptions: true,
         outlined: true,
         clearable: this.isSearchable,
-        loading: this.isLoading,
         inputDebounce: this.useLazyLoading ? 500 : 0,
-        popupContentClass: this.$_virtualScrollClassName,
         ...this.$attrs,
         options: this.filteredOptions,
         useInput: this.isSearchable,
-        error: this.hasError
+        error: this.hasError,
+        loading: this.hasLoading
       }
     }
   },
@@ -189,15 +184,21 @@ export default {
       const Fuse = (await import('fuse.js')).default
       this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
     }
+
+    this.useLazyLoading && this.$_setFetchOptions('')
   },
 
   methods: {
-    onFilter (value, update) {
-      update(() => {
-        if (this.useLazyLoading && value !== this.search) return this.$_filterOptionsByStore(value)
+    async onFilter (value, update) {
+      if (this.useLazyLoading && value !== this.search) {
+        await this.$_filterOptionsByStore(value)
+      }
+
+      if (!this.useLazyLoading && this.searchable) {
+        this.filterOptionsByFuse(value)
+      }
 
-        if (!this.useLazyLoading && this.searchable) this.filterOptionsByFuse(value)
-      })
+      update()
     },
 
     filterOptionsByFuse (value) {

package/src/components/single-view/QasSingleView.stories.js

@@ -33,6 +33,10 @@ export default {
 
   argTypes: {
     // Props
+    beforeFetch: {
+      description: 'Function to be called before fetching data.'
+    },
+
     customId: {
       control: null,
       description: 'Sets a custom id to `entity`. When not set, will use the `:id` route param.'

package/src/components/single-view/QasSingleView.vue

@@ -57,7 +57,7 @@ export default {
 
   watch: {
     $route () {
-      this.fetchSingle()
+      this.onFetchHandler()
     },
 
     result (value) {
@@ -66,7 +66,7 @@ export default {
   },
 
   created () {
-    this.fetchSingle()
+    this.onFetchHandler()
   },
 
   methods: {
@@ -94,6 +94,10 @@ export default {
       } finally {
         this.isFetching = false
       }
+    },
+
+    async onFetchHandler () {
+      await this.fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
     }
   }
 }

package/src/mixins/lazy-loading-filter.js

@@ -1,6 +1,5 @@
 import { decamelize } from 'humps'
 import { isEqual } from 'lodash'
-import { uid } from 'quasar'
 
 export default {
   props: {
@@ -32,9 +31,11 @@ export default {
       isScrolling: false,
       pagination: {
         page: 1,
-        lastPage: null
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
       },
-      search: null
+      search: ''
     }
   },
 
@@ -62,11 +63,6 @@ export default {
 
     $_hasFilteredOptions () {
       return !!this.filteredOptions.length
-    },
-
-    $_virtualScrollClassName () {
-      const id = uid()
-      return `virtual-scroll-${id}`
     }
   },
 
@@ -75,7 +71,7 @@ export default {
       handler (value, oldValue) {
         if (isEqual(value, oldValue)) return
 
-        this.$_resetFilter()
+        this.$_filterOptionsByStore('')
         this.$emit('input', '')
       }
     }
@@ -92,21 +88,22 @@ export default {
       this.search = search
       this.pagination = {
         page: 1,
-        lastPage: null
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
       }
     },
 
-    async $_onVirtualScroll ({ index }) {
+    async $_onVirtualScroll ({ index, ref }) {
       const lastIndex = this.filteredOptions.length - 1
 
       if (index === lastIndex && this.$_canFetchOptions()) {
-        const { scrollContainer, top } = this.$_getScrollContainerTop()
-
         await this.$_loadMoreOptions()
 
-        setTimeout(() => {
-          scrollContainer.scrollTo({ top })
-        }, 100)
+        this.$nextTick(() => {
+          ref.reset()
+          ref.refresh(lastIndex)
+        })
       }
     },
 
@@ -144,11 +141,14 @@ export default {
           }
         })
 
-        const { results, count } = data
+        const { results, count, hasNextPage } = data
+        const hasCount = count !== undefined
 
         this.pagination = {
           page: this.pagination.page + 1,
-          lastPage: Math.ceil(count / params.limit)
+          lastPage: hasCount ? Math.ceil(count / params.limit) : null,
+          hasCount,
+          hasNextPage
         }
 
         this.$emit('fetch-options-success', data)
@@ -173,23 +173,12 @@ export default {
     },
 
     $_canFetchOptions () {
-      const { lastPage, page } = this.pagination
-      const hasMorePages = lastPage && page <= lastPage
+      const { lastPage, page, hasCount, hasNextPage } = this.pagination
+      const hasMorePages = hasCount ? lastPage && page <= lastPage : hasNextPage
 
       return hasMorePages && !this.isLoading && !this.isScrolling && this.useLazyLoading
     },
 
-    $_getScrollContainerTop () {
-      const scrollContainer = document.querySelector(`.${this.$_virtualScrollClassName}`)
-      const scrollContainerHeight = scrollContainer.offsetHeight
-      const scrollContainerTop = scrollContainer.scrollTop
-
-      return {
-        scrollContainer,
-        top: scrollContainerTop + (scrollContainerHeight / 2)
-      }
-    },
-
     $_handleOptions (options) {
       if (this.labelKey && this.valueKey && this.renameKey) {
         return options.map(item => this.renameKey(item))

package/src/mixins/view.js

@@ -5,6 +5,11 @@ import { NotifyError } from '../plugins'
 
 export default {
   props: {
+    beforeFetch: {
+      default: null,
+      type: Function
+    },
+
     dialog: {
       type: Boolean
     },
@@ -22,10 +27,10 @@ export default {
 
   data () {
     return {
+      cancelBeforeFetch: false,
       errors: {},
       fields: {},
       metadata: {},
-
       isFetching: false
     }
   },
@@ -59,6 +64,22 @@ export default {
       }
     },
 
+    fetchHandler (payload, resolve) {
+      const hasBeforeFetch = typeof this.beforeFetch === 'function'
+
+      if (hasBeforeFetch && !this.cancelBeforeFetch) {
+        return this.beforeFetch({
+          payload,
+          resolve: payload => resolve(payload),
+          done: () => {
+            this.cancelBeforeFetch = true
+          }
+        })
+      }
+
+      resolve()
+    },
+
     setErrors (errors = {}) {
       this.errors = errors
     },