Skip to content

Instantly share code, notes, and snippets.

@iErik

iErik/CrudBuilder.js

Last active April 3, 2020 17:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iErik/1d88b3929bdf04bfcbd567be5ddbe982 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iErik/1d88b3929bdf04bfcbd567be5ddbe982 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iErik revised this gist Apr 3, 2020. 1 changed file with 51 additions and 0 deletions.
    51 changes: 51 additions & 0 deletions unidades.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    <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>
  2. iErik created this gist Apr 3, 2020.
    73 changes: 73 additions & 0 deletions CrudBuilder.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    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
    }
    }
    })