v-select-box-vuex

Description

A helper used to create the store modules for the v-select-box, a vue.js component that provides a list with search and pagination.

Installation

npm install v-select-box-vuex

Usage

//module.js

import { createStoreModule } from 'v-select-box-vuex'
const base = 'http://localhost:1234/api'  //A simple string with the url of your api.

const endpoint = {
  name: 'Users',          // The name to access the actions and getters in your store
  resource: '/users',     // The relative path of your resource in your api.
  map ({ Id, Name }) {    // This function will map your api response to the v-select-box default item format
    return { id: Id, text: Name, selected: false }
  }
}

const modules = {
  [endpoint.name]: createStoreModule(base, endpoint.resource, endpoint.name, endpoint.map)
}

export default {          // This is a store module ready to be imported
  namespaced: true,
  modules
}

//store.js

import Vue from 'vue'
import Vuex from 'vuex'
import selectBox from './module'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  modules: {
    selectBox
  }
}

Details

Currently, your api response should have this fixed format:

{
  "Page": 1,
  "PageCount": 1,
  "Result": []
}

As long as those properties are there, everything should work. To access your newly created store module, the name provided before must be used. For the case of the example above, the actions and getters would be:

  // Getters
  ...mapGetters('selectBox/Users', ['itemsUsers', 'pageUsers', 'pageCountUsers', 'selectedItemsUsers'])
  
  //Actions
  ...mapActions('selectBox/Users', ['clearUsers', 'requestUsers', 'selectItemUsers'])
  
  //Methods
  onSearchUsers (query) {
    return this.clearUsers().then(() => this.requestUsers({ ...query }))
  },
  
  //v-select-box options object
  const options: {
    multiSelect: false,
    items: this.itemsUsers,
    onSelect: this.selectItemUsers,
    onSearch: this.onSearchUsers,
    page: this.pageUsers,
    pageCount: this.pageCountUsers,
    loadMore: this.requestUsers,
    clearItems: this.clearUsers,
    params: {
      search: 'name',
      pageSize: 'size'
    }
  }

New Features

This helper is still rough around the edges but it will improve overtime. Some much needed features are being worked on, they'll be put here as soon as they're ready.

Your feedback is appreciated!