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