Vuex CRUD toolkit

Install

npm install --save vuex-crud-toolkit

or

yarn add vuex-crud-toolkit

Features

• Dashboard with filter, pagination, trash
• Create page
• Update page
• Detail page
• Confirm remove: move item to trash
• Confirm restore
• Confirm purge: purge item
• Confirm empty trash

How to use

// app.store.js
import { buildCRUDStore } from "vuex-crud-toolkit";

const APP_NAME = "Posts";

const apis = {
  getList: async (params) => {... ; return items};
  count: async (params) => {...; return { count}};
  getOne: async (id) => { ...; return data};
  create: async (data) => {...; return data};
  update: async (id, data) => {...; return data};
  remove: async (id) => {...};

  trashGetList: async (params) => {...; return items};
  trashCount: async (params) => {...; return {count}};
  trashRestore: async (id) => {...};
  trashPurge: async (id) => {...};
  trashEmpty: async () => {...};
}

const store = buildCRUDStore({
  appName: APP_NAME,
  apis,
  getEntityId: (item) => item._id,
  dashboardConfig: {
    defaultFilter: {
      q: "",
    },
    defaultLimit: 5,
    defaultPage: 1,
  },
  createConfig: {
    redirectOnSuccess: "UPDATE", // 'DASHBOARD' | 'DETAIL' | 'UPDATE' | null
    reloadDashboardOnSuccess: true,
    showNotificationOnSuccess: true,
  },
  updateConfig: {
    redirectOnSuccess: "DASHBOARD", // 'DASHBOARD' | 'DETAIL' | null
    reloadDashboardOnSuccess: true,
    showNotificationOnSuccess: true,
  },
});

export default store;

Apis params

| Name | Params | Response | Description | | -------------- | ----------------------------------------- | ----------------- | -------------------- | | getList | any | any[] | Get list items | | count | any | {count: number} | Count items | | getOne | string | number | any | Get item data by id | | create | any | any | Create new item | | update | id: string | number, data: any | any | Update item by id | | remove | string | number | any | Remove item to trash | | trashGetList | any | any[] | Get list trash items | | trashCount | any | {count: number} | Count trash items | | trashRestore | string | number | any | Restore item by id | | trashPurge | string | number | any | Purge item by id | | trashEmpty | string | number | any | Empty trash data |

Modules

This store will contain modules:

• Notification: success and error notification control
• Dashboard: list item with search, filter, pagination control
• DetailPage: detail page control
• CreatePage: create page control
• UpdatePage: update page control
• ConfirmRemove: confirm remove control
• ConfirmRestore: confirm restore control
• ConfirmPurge: confirm purge control
• ConfirmTrashEmpty: confirm trash empty control

State

type AppState = {
  Notification: {
    success: {
      visible: boolean; // default False: success notification visible control
      message: string | null; // default null: success notification message
    };
    error: {
      visible: boolean; //default False: error notification visible control
      message: string | null; // default null: success notification message
    };
  };
  Dashboard: {
    requestId: number; // last request id, increment, avoid response is not last response
    loading: boolean; // request loading
    error: null | { message: string }; // request error
    success: boolean; // === true if request success
    items: array; // list data
    limit: number; // pagination limit
    page: number; // pagination current page
    total: number; // total items found
    filter: any; // request filter, can update by user via UI
    trashMode: boolean; // === true if go to trash. Then .items is trash items
    status: {
      normalTotal: number; // count total item (available)
      trashTotal: number; // count total item in trash (deleted)
    };
  };
  DetailPage: {
    visible: boolean; // === true if you show detail page. Used to control show detail page
    requestId: number; // last request id
    id: null | number | string; // item id
    loading: boolean; // fetch item data loading
    error: null | { message: string }; // fetch item data error
    success: boolean; // fetch item data success
    inputData: null | any; // a part of data you can show before fetchedData crawled
    fetchedData: null | any; // data fetched
  };
  CreatePage: {
    visible: boolean; // === true if you show create page. Used to control show create page
    loading: boolean; // create requesting
    error: null | { message: string }; // create request error
    success: boolean; // create request success
    submittedData: null | any; // submitted data from UI form. Example: when you click button submit
    resultData: null | any; // response of create request
  };
  UpdatePage: {
    visible: boolean; // === true if you show update page. Used to control show update page

    id: null | string | number; // id of updated item
    inputData: null | any; // a part of data you can show before fetchedData crawled

    fetchLoading: boolean; // item data fetching
    fetchError: null | { message: string };
    fetchSuccess: boolean;
    fetchedData: null | any; // response after fetch success

    updateLoading: boolean; // update requesting
    updateError: null | { message: string };
    updateSuccess: boolean;
    submittedData: null | any; // submitted data from UI form. Example: when you click button submit
    resultData: null | any; // response after create success
  };
  ConfirmRemove: {
    visible: boolean; // === true if you show confirm remove dialog. Used to control show confirm remove dialog
    id: null | string | number; // id of removed item
    inputData: null | any; // a part of data you can show before fetchedData crawled
    loading: boolean; // remove requesting
    error: null | { message: string }; // remove error
    success: boolean; // remove success
  };
  ConfirmRestore: {
    visible: boolean; // === true if you show confirm restore dialog. Used to control show confirm restore dialog
    id: null | string | number; // a part of data you can show in UI
    inputData: null | any;
    loading: boolean;
    error: null | { message: string };
    success: boolean;
  };
  ConfirmPurge: {
    visible: boolean; //  === true if you show confirm purge dialog. Used to control show confirm purge dialog
    id: null | string | number;
    inputData: null | any;
    loading: boolean;
    error: null | { message: string };
    success: boolean;
  };
  ConfirmTrashEmpty: {
    visible: boolean; //  === true if you show confirm trash empty dialog. Used to control show confirm trash empty dialog
    loading: boolean;
    error: null | { message: string };
    success: boolean;
  };
};

Module

Dashboard

State

export interface DashboardState {
  requestId: number;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
  items: any[];
  limit: number;
  page: number;
  total: number;
  filter: any;
  trashMode: boolean;
  status: {
    normalTotal: number;
    trashTotal: number;
  };
}

Actions

| Action | Params | Descripiton | | -------------------------- | --------- | ---------------------------------------------------- | | /Dashboard/fetch | | Fetch dashboard data | | /Dashboard/updateTrashMode | boolean | Update Trash Mode, true is trash and false is normal | | /Dashboard/updateFilter | object | Update filter | | /Dashboard/updatePage | number | Update page | | /Dashboard/updateLimit | number | Update page size |

Notification

State

export interface NotificationState {
  success: {
    visible: boolean;
    message: null | string;
  };
  error: {
    visible: boolean;
    message: null | string;
  };
}

Actions

| Action | Params | Descripiton | | ------------------------- | -------- | ------------------------- | | /Notification/showSuccess | string | Show success notification | | /Notification/hideSuccess | | Hide success Notification | | /Notification/showError | string | Show error notification | | /Notification/hideError | | Hide error notification | | |

Detail page

State

export interface DetailState {
  visible: boolean;
  requestId: number;
  id: null | string | number;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
  inputData: null | any;
  fetchedData: null | any;
}

Actions

| Action | Params | Descripiton | | ----------------- | ------------------------- | ----------------- | | /DetailPage/open | {id: string, data: any} | Open detail page | | /DetailPage/close | | Close detail page | | /DetailPage/fetch | | Fetch detail data |

Create page

State

export interface CreateState {
  visible: boolean;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
  submittedData: null | any;
  resultData: null | any;
}

Actions

| Action | Params | Descripiton | | ------------------ | ------ | ------------------- | | /CreatePage/open | | Open create page | | /CreatePage/close | | Close create page | | /CreatePage/create | any | Send create request |

Update page

State

export interface UpdateState {
  visible: boolean;

  id: null | string | number;
  inputData: null | any;

  fetchLoading: boolean;
  fetchError: null | { message: string };
  fetchSuccess: boolean;
  fetchedData: null | any;

  updateLoading: boolean;
  updateError: null | { message: string };
  updateSuccess: boolean;
  submittedData: null | any;
  resultData: null | any;
}

Actions

| Action | Params | Descripiton | | ------------------ | ------------------------- | ------------------- | | /UpdatePage/open | {id: string, data: any} | Open update page | | /UpdatePage/close | | Close update page | | /UpdatePage/fetch | | Send fetch request | | /UpdatePage/update | any | Send update request |

Confirm remove

State

export interface RemoveState {
  visible: boolean;
  id: null | string | number;
  inputData: null | any;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
}

Actions

| Action | Params | Descripiton | | --------------------- | ------------------------- | --------------------------- | | /ConfirmRemove/open | {id: string, data: any} | Open confirm remove dialog | | /ConfirmRemove/close | | Close confirm remove dialog | | /ConfirmRemove/remove | | Send remove request |

Confirm restore

State

export interface RestoreState {
  visible: boolean;
  id: null | string | number;
  inputData: null | any;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
}

Actions

| Action | Params | Descripiton | | ----------------------- | ------------------------- | ---------------------------- | | /ConfirmRestore/open | {id: string, data: any} | Open confirm restore dialog | | /ConfirmRestore/close | | Close confirm restore dialog | | /ConfirmRestore/restore | | Send restore request |

Confirm purge

State

export interface PurgeState {
  visible: boolean;
  id: null | string | number;
  inputData: null | any;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
}

Actions

| Action | Params | Descripiton | | --------------------- | ------------------------- | -------------------------- | | /ConfirmPurge/open | {id: string, data: any} | Open confirm purge dialog | | /ConfirmPurge/close | | Close confirm purge dialog | | /ConfirmPurge/restore | | Send purge request |

Confirm empty trash

State

export interface TrashEmptyState {
  visible: boolean;
  loading: boolean;
  error: null | { message: string };
  success: boolean;
}

Actions

| Action | Params | Descripiton | | ------------------------ | ------ | ------------------------------- | | /ConfirmTrashEmpty/open | | Open confirm empty trash dialog | | /ConfirmTrashEmpty/close | | Close confirm empty trsh dialog | | /ConfirmTrashEmpty/empty | | Send empty request |

Change log

1.0.0

First release