Skip to content

Instantly share code, notes, and snippets.

@iErik
Last active April 3, 2020 17:40
Show Gist options
  • Save iErik/1d88b3929bdf04bfcbd567be5ddbe982 to your computer and use it in GitHub Desktop.
Save iErik/1d88b3929bdf04bfcbd567be5ddbe982 to your computer and use it in GitHub Desktop.
import { mapActions } from 'vuex'
export default ({
createFn = '',
deleteFn = '',
updateFn = '',
paginationFn = '',
clearFn = ''
}) => ({
data: () => ({
isLoading: true,
loadingDelete: false,
setModalState: {
loading: false,
show: false,
doc: {}
}
}),
async created() {
if (!this.load) return
this.isLoading = true
await this.load()
this.isLoading = false
},
beforeDestroy() {
this.clearFn()
},
methods: {
...mapActions({
clearFn,
createFn,
deleteFn,
updateFn,
paginationFn
}),
triggerModal(modalName, doc) {
const modalState = this[`${modalName}ModalState`]
modalState.show = !modalState.show
modalState.doc = doc || {}
},
async confirmDelete(doc) {
this.loadingDelete = true
await this.deleteFn(doc)
this.loadingDelete = false
},
async save(formData) {
this.setModalState.loading = true
const methodName = formData.id ? 'update' : 'create'
await this[`${methodName}Fn`](formData)
this.setModalState.loading = false
this.setModalState.show = false
this.setModalState.doc = {}
},
async search(search) {
if (search === this.searchQuery) return
await this.paginate({ perPage: 10, page: 1, search })
},
async paginate(options) {
this.isLoading = true
await this.paginationFn(options)
this.isLoading = false
}
}
})
<script>
import { mapActions, mapState } from 'vuex'
import { UnitForm, BasicCrud } from '@/components/molecules'
import CrudBuilder from '@/mixins/CrudBuilder'
const tableHeader = { unidade: 'Unidade' }
const crudOptions = {
createFn: 'units/CREATE_UNIT',
deleteFn: 'units/DELETE_UNIT',
updateFn: 'units/UPDATE_UNIT',
paginationFn: 'units/PAGINATE_UNITS',
clearFn: 'units/CLEAR_PAGINATION'
}
export default {
name: 'Units',
layout: 'internal',
components: {
UnitForm,
BasicCrud
},
mixins: [CrudBuilder(crudOptions)],
data: () => ({ tableHeader }),
computed: {
...mapState({
companies: state => state.companies.items,
units: state => state.units.pagination.items,
pagination: ({
units: {
pagination: { items, ...data }
}
}) => data
})
},
methods: {
...mapActions({
fetchCompanies: 'companies/FETCH_COMPANIES'
}),
async load() {
await Promise.all([this.fetchCompanies(), this.paginationFn()])
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment