Skip to content

Commit 7185ce7

Browse files
author
Manu
committed
[add] example code and demo webpage
1 parent 965c209 commit 7185ce7

23 files changed

+9343
-1
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ Reduces boilerplate for creating reducers that manage a collection of models.
88
Provides performant CRUD operations for managing entity collections.
99
Extensible type-safe adapters for selecting entity information.
1010

11+
#### [Example](example)
12+
13+
#### [Demo](https://vue-entity-adapter.manubhardwaj.in/)
14+
1115
## Installation
1216
Installing with *npm*
1317

‎example/.browserslistrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

‎example/.eslintrc.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'eslint:recommended',
9+
'@vue/typescript'
10+
],
11+
rules: {
12+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
14+
},
15+
parserOptions: {
16+
parser: '@typescript-eslint/parser'
17+
}
18+
}

‎example/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎example/package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "todo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^2.6.5",
12+
"vue": "^2.6.10",
13+
"vue-class-component": "^7.0.2",
14+
"vue-entity-adapter": "^1.0.2",
15+
"vue-property-decorator": "^8.1.0",
16+
"vuex": "^3.0.1"
17+
},
18+
"devDependencies": {
19+
"@vue/cli-plugin-babel": "^3.11.0",
20+
"@vue/cli-plugin-eslint": "^3.11.0",
21+
"@vue/cli-plugin-typescript": "^3.11.0",
22+
"@vue/cli-service": "^3.11.0",
23+
"@vue/eslint-config-typescript": "^4.0.0",
24+
"babel-eslint": "^10.0.1",
25+
"eslint": "^5.16.0",
26+
"eslint-plugin-vue": "^5.0.0",
27+
"node-sass": "^4.9.0",
28+
"sass-loader": "^7.1.0",
29+
"typescript": "^3.4.3",
30+
"vue-template-compiler": "^2.6.10"
31+
}
32+
}

‎example/postcss.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
}

‎example/public/favicon.ico

4.19 KB
Binary file not shown.

‎example/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>todo</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but todo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎example/src/App.vue

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<template>
2+
<div id="app">
3+
<div class="row">
4+
<button @click="addOne">Add One</button>
5+
<button @click="addMany">Add Many</button>
6+
<button @click="addAll">Add All</button>
7+
<button @click="removeOne">Remove One</button>
8+
<button @click="removeMany">Remove Many</button>
9+
<button @click="removeAll">Remove All</button>
10+
<button @click="updateOne">Update One</button>
11+
<button @click="updateMany">Update Many</button>
12+
<button @click="upsertOne">Upsert One</button>
13+
<button @click="upsertMany">Upsert Many</button>
14+
<button @click="logEntity">Log Entity</button>
15+
<button @click="logEntitiesCount">Log Entities Count</button>
16+
<button @click="logEntitiesIds">Log Entities Ids</button>
17+
</div>
18+
<p v-for="lesson in lessons" :key="lesson.id">{{lesson.title}}</p>
19+
</div>
20+
</template>
21+
22+
<script lang="ts">
23+
import { Component, Vue } from 'vue-property-decorator';
24+
import store from "@/store";
25+
import {
26+
ADD_LESSON_ACTION,
27+
ADD_LESSONS_ACTION, GET_LESSON, GET_LESSON_IDS,
28+
GET_LESSONS, GET_LESSONS_COUNT, REMOVE_ALL_LESSONS_ACTION,
29+
REMOVE_LESSON_ACTION, REMOVE_LESSONS_ACTION,
30+
REPLACE_LESSONS_ACTION, UPDATE_LESSON_ACTION, UPDATE_LESSONS_ACTION, UPSERT_LESSON_ACTION, UPSERT_LESSONS_ACTION
31+
} from "@/store/types";
32+
33+
@Component({
34+
components: {}
35+
})
36+
export default class App extends Vue {
37+
get lessons() {
38+
return store.getters[GET_LESSONS]
39+
}
40+
41+
addOne() {
42+
store.dispatch(ADD_LESSON_ACTION, {id: 0, title: 'Lesson0'})
43+
}
44+
45+
addMany() {
46+
const lessons = [1, 2, 3, 4].map(item => {
47+
return {
48+
id: item,
49+
title: `Lesson${item}`
50+
};
51+
});
52+
store.dispatch(ADD_LESSONS_ACTION, lessons)
53+
}
54+
55+
addAll() {
56+
const lessons = [4, 3, 2, 1].map(item => {
57+
return {
58+
id: item,
59+
title: `Lesson${item}`
60+
};
61+
});
62+
store.dispatch(REPLACE_LESSONS_ACTION, lessons)
63+
}
64+
65+
removeOne() {
66+
store.dispatch(REMOVE_LESSON_ACTION, 0)
67+
}
68+
69+
removeMany() {
70+
this.addMany()
71+
store.dispatch(REMOVE_LESSONS_ACTION, [1, 2])
72+
}
73+
74+
removeAll() {
75+
store.dispatch(REMOVE_ALL_LESSONS_ACTION)
76+
}
77+
78+
updateOne() {
79+
this.addMany()
80+
store.dispatch(UPDATE_LESSON_ACTION, {id: 2, changes: {title: 'New Lesson2'}})
81+
}
82+
83+
updateMany() {
84+
this.addMany()
85+
store.dispatch(UPDATE_LESSONS_ACTION, [{id: 1, changes: {title: 'New Lesson1'}}, {id: 3, changes: {title: 'New Lesson3'}}])
86+
}
87+
88+
upsertOne() {
89+
this.addMany()
90+
store.dispatch(UPSERT_LESSON_ACTION, {id: 2, title: 'New Lesson2'})
91+
}
92+
93+
upsertMany() {
94+
this.addMany()
95+
store.dispatch(UPSERT_LESSONS_ACTION, [{id: 1, title: 'New Lesson1'}, {id: 5, title: 'Lesson5'}])
96+
}
97+
98+
logEntity() {
99+
this.addMany()
100+
console.log(store.getters[GET_LESSON](3))
101+
}
102+
103+
logEntitiesCount() {
104+
console.log(store.getters[GET_LESSONS_COUNT])
105+
}
106+
107+
logEntitiesIds() {
108+
console.log(store.getters[GET_LESSON_IDS])
109+
}
110+
}
111+
</script>
112+
113+
<style lang="scss">
114+
#app {
115+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
116+
-webkit-font-smoothing: antialiased;
117+
-moz-osx-font-smoothing: grayscale;
118+
text-align: center;
119+
color: #2c3e50;
120+
margin-top: 60px;
121+
}
122+
.row {
123+
display: flex;
124+
flex-wrap: wrap;
125+
126+
> * {
127+
margin: 10px;
128+
}
129+
}
130+
</style>

‎example/src/assets/logo.png

6.69 KB
Loading

‎example/src/main.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import store from './store'
4+
5+
Vue.config.productionTip = false
6+
7+
new Vue({
8+
store,
9+
render: h => h(App)
10+
}).$mount('#app')

‎example/src/models/lessons.model.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface Lesson {
2+
id: number;
3+
title: string;
4+
}

‎example/src/models/state.model.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {EntityState} from "vue-entity-adapter";
2+
import {Lesson} from "@/models/lessons.model";
3+
4+
export interface State {
5+
lessonState: LessonState;
6+
}
7+
8+
interface LessonState extends EntityState<Lesson> {}

‎example/src/shims-tsx.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue, { VNode } from 'vue'
2+
3+
declare global {
4+
namespace JSX {
5+
// tslint:disable no-empty-interface
6+
interface Element extends VNode {}
7+
// tslint:disable no-empty-interface
8+
interface ElementClass extends Vue {}
9+
interface IntrinsicElements {
10+
[elem: string]: any
11+
}
12+
}
13+
}

‎example/src/shims-vue.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.vue' {
2+
import Vue from 'vue'
3+
export default Vue
4+
}

‎example/src/store.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Vue from 'vue'
2+
import Vuex from 'vuex'
3+
import {Lesson} from "@/models/lessons.model"
4+
import {EntityAdapter} from 'vue-entity-adapter'
5+
import actions from '@/store/actions';
6+
import mutations from '@/store/mutations';
7+
import getters from '@/store/getters';
8+
9+
Vue.use(Vuex)
10+
11+
export const lessonsAdapter = new EntityAdapter<Lesson>()
12+
13+
export default new Vuex.Store({
14+
mutations,
15+
actions,
16+
getters,
17+
state: {
18+
lessonState: {
19+
...lessonsAdapter.getInitialState()
20+
}
21+
}
22+
})

‎example/src/store/actions.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {
2+
ADD_LESSON_ACTION,
3+
ADD_LESSON_MUTATION,
4+
ADD_LESSONS_ACTION,
5+
ADD_LESSONS_MUTATION,
6+
REMOVE_ALL_LESSONS_ACTION, REMOVE_ALL_LESSONS_MUTATION,
7+
REMOVE_LESSON_ACTION,
8+
REMOVE_LESSON_MUTATION,
9+
REMOVE_LESSONS_ACTION,
10+
REMOVE_LESSONS_MUTATION,
11+
REPLACE_LESSONS_ACTION,
12+
REPLACE_LESSONS_MUTATION,
13+
UPDATE_LESSON_ACTION,
14+
UPDATE_LESSON_MUTATION,
15+
UPDATE_LESSONS_ACTION,
16+
UPDATE_LESSONS_MUTATION, UPSERT_LESSON_ACTION, UPSERT_LESSON_MUTATION, UPSERT_LESSONS_ACTION, UPSERT_LESSONS_MUTATION
17+
} from "@/store/types";
18+
import {Lesson} from "@/models/lessons.model";
19+
import {Update} from "vue-entity-adapter";
20+
21+
export default {
22+
[ADD_LESSON_ACTION]: ({commit}: any, payload: Lesson) => {
23+
commit(ADD_LESSON_MUTATION, payload)
24+
},
25+
[ADD_LESSONS_ACTION]: ({commit}: any, payload: Lesson[]) => {
26+
commit(ADD_LESSONS_MUTATION, payload)
27+
},
28+
[REPLACE_LESSONS_ACTION]: ({commit}: any, payload: Lesson[]) => {
29+
commit(REPLACE_LESSONS_MUTATION, payload)
30+
},
31+
[UPDATE_LESSON_ACTION]: ({commit}: any, payload: Update<Lesson>) => {
32+
commit(UPDATE_LESSON_MUTATION, payload)
33+
},
34+
[UPDATE_LESSONS_ACTION]: ({commit}: any, payload: Update<Lesson>[]) => {
35+
commit(UPDATE_LESSONS_MUTATION, payload)
36+
},
37+
[REMOVE_LESSON_ACTION]: ({commit}: any, payload: number) => {
38+
commit(REMOVE_LESSON_MUTATION, payload)
39+
},
40+
[REMOVE_LESSONS_ACTION]: ({commit}: any, payload: number[]) => {
41+
commit(REMOVE_LESSONS_MUTATION, payload)
42+
},
43+
[REMOVE_ALL_LESSONS_ACTION]: ({commit}: any) => {
44+
commit(REMOVE_ALL_LESSONS_MUTATION)
45+
},
46+
[UPSERT_LESSON_ACTION]: ({commit}: any, payload: Lesson) => {
47+
commit(UPSERT_LESSON_MUTATION, payload)
48+
},
49+
[UPSERT_LESSONS_ACTION]: ({commit}: any, payload: Lesson[]) => {
50+
commit(UPSERT_LESSONS_MUTATION, payload)
51+
}
52+
}

‎example/src/store/getters.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {GET_LESSON, GET_LESSON_IDS, GET_LESSONS, GET_LESSONS_COUNT} from "@/store/types";
2+
import {State} from "@/models/state.model";
3+
import {lessonsAdapter} from "@/store";
4+
import {Lesson} from "@/models/lessons.model";
5+
6+
export default {
7+
[GET_LESSON]: (state: State) => (id: string): Lesson => lessonsAdapter.getOne(id, state.lessonState),
8+
[GET_LESSONS]: (state: State): Lesson[] => lessonsAdapter.getAll(state.lessonState),
9+
[GET_LESSONS_COUNT]: (state: State) => lessonsAdapter.getCount(state.lessonState),
10+
[GET_LESSON_IDS]: (state: State) => lessonsAdapter.getIds(state.lessonState)
11+
}

0 commit comments

Comments
 (0)