Skip to content

Commit 7f0844c

Browse files
authoredMar 18, 2019
Merge pull request mrichar1#38 from mrichar1/camelCase
Convert project from snake_case (underscores) to camelCase.
2 parents 6e30573 + 268df50 commit 7f0844c

22 files changed

+700
-720
lines changed
 

‎README.md

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ A module to access JSONAPI data from an API, using a Vuex store, restructured to
66

77
## Features
88

9-
* Creates a [Vuex](https://vuex.vuejs.org/) module to store API data.
10-
* High-level methods to wrap common RESTful operations (GET, POST, PUT, DELETE).
11-
* Restructures/normalizes data, making record handling easier.
12-
* Makes fetching related objects easy.
13-
* Relationships can be followed and expanded into records automatically (recursively).
14-
* Uses [Axios](https://github.com/axios/axios) (or your own axios-like module) as the HTTP client.
15-
* Uses [jsonpath](https://github.com/dchester/jsonpath) for filtering when getting objects from the store.
16-
* Records the status of actions (LOADING, SUCCESS, ERROR).
9+
- Creates a [Vuex](https://vuex.vuejs.org/) module to store API data.
10+
- High-level methods to wrap common RESTful operations (GET, POST, PUT, DELETE).
11+
- Restructures/normalizes data, making record handling easier.
12+
- Makes fetching related objects easy.
13+
- Relationships can be followed and expanded into records automatically (recursively).
14+
- Uses [Axios](https://github.com/axios/axios) (or your own axios-like module) as the HTTP client.
15+
- Uses [jsonpath](https://github.com/dchester/jsonpath) for filtering when getting objects from the store.
16+
- Records the status of actions (LOADING, SUCCESS, ERROR).
1717

1818
## Setup
1919

@@ -56,13 +56,13 @@ There are 4 actions (with aliases): `get` (`fetch`), `post` (`create`), `patch`
5656

5757
These actions take 2 arguments: the path/object to be acted on, and an (optional) [`axios` config object](https://github.com/axios/axios#request-config). The first argument is an object containing [restructured data](#restructured-data).
5858

59-
*Note* - Since the `dispatch` method can only accept a single argument, if both arguments are used, the argument must be an array.
59+
_Note_ - Since the `dispatch` method can only accept a single argument, if both arguments are used, the argument must be an array.
6060

6161
The first argument is an object containing [restructured data](#restructured-data). Actions which take no `data` argument apart from the record (`get` and `delete`) can also accept a URL to fetch (relative to `axios` `baseURL` (if set) leading slash is optional). This means you don't need to create an 'empty' restructured data object to get or delete a record. Some examples:
6262

6363
```
6464
// Restructured representation of a record
65-
const new_widget = {
65+
const newWidget = {
6666
'name': 'sprocket',
6767
'color': 'black',
6868
'_jv': {
@@ -89,7 +89,7 @@ this.$store.dispatch('jv/get', ['widget/1', {params: params}])
8989
})
9090
9191
// Create a new widget in the API, using a restructured object, and passing parameters to axios:
92-
this.$store.dispatch('jv/post', [new_widget, {params: params}])
92+
this.$store.dispatch('jv/post', [newWidget, {params: params}])
9393
.then(data => {
9494
console.log(data)
9595
})
@@ -98,11 +98,11 @@ this.$store.dispatch('jv/post', [new_widget, {params: params}])
9898

9999
#### getRelated
100100

101-
*Note* - in many cases you may prefer to use the jsonapi server-side `include` option to get data on relationships included in your original query. (See `Related Items`).
101+
_Note_ - in many cases you may prefer to use the jsonapi server-side `include` option to get data on relationships included in your original query. (See `Related Items`).
102102

103103
Like the RESTful actions, this takes 2 arguments - the URL/object to be acted on, and an axios config object. It returns a deeply nested restructured tree - `relationship -> type -> id -> data`.
104104

105-
*Note* - `getRelated` only works on specific items, not collections.
105+
_Note_ - `getRelated` only works on specific items, not collections.
106106

107107
```
108108
// Assuming the API holds the following data
@@ -140,7 +140,6 @@ this.$store.dispatch('jv/getRelated', 'widget/1/widgets')
140140
141141
```
142142

143-
144143
### Getters
145144

146145
There are 2 getters available. `get` and `status`.
@@ -201,9 +200,9 @@ Every action is given a unique id, and this is both returned as a property of th
201200

202201
The `status` getter accepts either an id, or a promise returned by an action, and returns the stored state of the action. This can be one of:
203202

204-
* LOADING
205-
* SUCCESS
206-
* ERROR
203+
- LOADING
204+
- SUCCESS
205+
- ERROR
207206

208207
For example, to determine the state of an action:
209208

@@ -234,14 +233,13 @@ For example, you might want to disable an attribute while an action is happening
234233
<input type="text" :disabled="status == 'LOADING'">
235234
```
236235

237-
238236
### Related items
239237

240238
By default the `get` action and getter are both configured to follow and expand out relationships recursively, if they are provided as `data` entries (i.e. `{type: 'widget', id: '1'}`).
241239

242-
*Note* - If using the `action` you may wish to also set the `include` parameter on the server query to include the relationships you are interested in. Any records returned in the `included` section of the jsonapi data will be automatically added to the store.
240+
_Note_ - If using the `action` you may wish to also set the `include` parameter on the server query to include the relationships you are interested in. Any records returned in the `included` section of the jsonapi data will be automatically added to the store.
243241

244-
For any relationships where the related item is already in the store, this is added to the returned object(s) in `obj['_jv']['rels'][rel_name]`. For items with a single relationship, the object is placed directly under the `rel_name` - for mutiple items, they are indexed by id:
242+
For any relationships where the related item is already in the store, this is added to the returned object(s) in `obj['_jv']['rels'][relName]`. For items with a single relationship, the object is placed directly under the `relName` - for mutiple items, they are indexed by id:
245243

246244
```
247245
// Assuming the store is as follows:
@@ -292,10 +290,10 @@ let item1 = this.$store.getters['jv/get']('widget/1')
292290
}
293291
294292
// This can then be accessed as:
295-
let related_item_name = item1._jv.rels.parts.name
293+
item1._jv.rels.parts.name
296294
297295
// Or if there were multiple related items as:
298-
let related_item2_name = item1._jv.rels.parts.2.name
296+
item1._jv.rels.parts.2.name
299297
300298
```
301299

@@ -310,10 +308,10 @@ jm = jsonapiModule(api, config)
310308

311309
### Config Options
312310

313-
* `jvtag` - The tag in restructured objects to hold object metadata (defaults to `_jv`)
314-
* `follow_relationships_data` - Whether to follow and expand relationships from the store in the `get` getter (defaults to `true`)
315-
* `preserve_json` - Whether actions should return the API response json (minus `data`) in `_jv/json` (for access to meta etc) (defaults to `false`)
316-
* `action_status_clean_age` - What age must action status records be before they are removed (defaults to 600 seconds). Set to `0` to disable.
311+
- `jvtag` - The tag in restructured objects to hold object metadata (defaults to `_jv`)
312+
- `followRelationshipsData` - Whether to follow and expand relationships from the store in the `get` getter (defaults to `true`)
313+
- `preserveJson` - Whether actions should return the API response json (minus `data`) in `_jv/json` (for access to meta etc) (defaults to `false`)
314+
- `actionStatusCleanAge` - What age must action status records be before they are removed (defaults to 600 seconds). Set to `0` to disable.
317315

318316
## Restructured Data
319317

@@ -412,20 +410,20 @@ There are several scripts set up in `package.json`:
412410

413411
`yarn test` - Runs both unit and e2e tests. (Used by `travis`).
414412

415-
*Note* - All code is pre-processed with `babel` and `eslint` when testing for backwards compatability and linting.
413+
_Note_ - All code is pre-processed with `babel` and `eslint` when testing for backwards compatability and linting.
416414

417415
### Coding Standards
418416

419417
Please follow these guidelines when writing and submitting code:
420418

421-
* **eslint** - This is run over both the main code and the test suite during tests. See `.eslint.rc.js` for changes to the default rules.
419+
- **eslint** - This is run over both the main code and the test suite during tests. See `.eslint.rc.js` for changes to the default rules.
422420

423-
* **>= ES6** - Please try to use ES6 and newer methods (matching the policy that `Vue` has).
421+
- **>= ES6** - Please try to use ES6 and newer methods (matching the policy that `Vue` has).
424422

425-
* **Tests** - This project aspires to test-driven development. Please submit unit tests (and ideally e2e tests) with all PRs (unless there's a good reason not to).
423+
- **Tests** - This project aspires to test-driven development. Please submit unit tests (and ideally e2e tests) with all PRs (unless there's a good reason not to).
426424

427-
* **Versioning** - Semantic versioning should be used, see https://semver.org for details.
425+
- **Versioning** - Semantic versioning should be used, see https://semver.org for details.
428426

429-
* **Continuous Integration** - The project uses [travis(https://travis-ci.com) to run tests against all submissions - PRs that are not passing will not be accepted (without good reason).
427+
- **Continuous Integration** - The project uses [travis(https://travis-ci.com) to run tests against all submissions - PRs that are not passing will not be accepted (without good reason).
430428

431-
* **Specific Commits** - Please make all commits/PRs as atomic and specific as possible.
429+
- **Specific Commits** - Please make all commits/PRs as atomic and specific as possible.

‎examples/testapp/src/components/JsonapiVuex.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
<div v-if="'_jv' in widget1 && 'rels' in widget1['_jv']">
2323
<div :id='"rels_" + name' v-for="(rel, name, index) in widget1['_jv']['rels']" :key="index">
2424
<span>Related: </span>
25-
<span :id='"relspan_relname"'>{{ name }}</span>&nbsp;
26-
<span :id='"relspan_name"'>{{ rel.name }}</span>&nbsp;
27-
<span :id='"relspan_color"'>{{ rel.color }}</span>&nbsp;
25+
<span :id='"rel_span_relname"'>{{ name }}</span>&nbsp;
26+
<span :id='"rel_span_name"'>{{ rel.name }}</span>&nbsp;
27+
<span :id='"rel_span_color"'>{{ rel.color }}</span>&nbsp;
2828
</div>
2929
</div>
3030
</div>
@@ -41,19 +41,19 @@
4141
<div id="post">
4242
<h2>Post widget</h2>
4343
<label for="post_name">Name</label>
44-
<input id="post_name" v-model="post_widget['name']"/>
44+
<input id="post_name" v-model="postWidget['name']"/>
4545
<label for="post_color">Color</label>
46-
<input id="post_color" v-model="post_widget['color']"/>
46+
<input id="post_color" v-model="postWidget['color']"/>
4747
<div>
48-
<button name="post_button" @click="postRecord(post_widget)">Post</button>
48+
<button name="post_button" @click="postRecord(postWidget)">Post</button>
4949
</div>
5050
</div>
5151
<div id="delete">
5252
<h2>Delete widget</h2>
5353
<label for="delete_id">Widget ID</label>
54-
<input id="delete_id" v-model="del_widget_id"/>
54+
<input id="delete_id" v-model="delWidgetId"/>
5555
<div>
56-
<button name="delete_button" @click="deleteRecord(del_widget_id)">Delete</button>
56+
<button name="delete_button" @click="deleteRecord(delWidgetId)">Delete</button>
5757
</div>
5858
</div>
5959
</div>
@@ -64,8 +64,8 @@ export default {
6464
name: 'JsonapiVuex',
6565
data: () => {
6666
return {
67-
del_widget_id: undefined,
68-
post_widget: {
67+
delWidgetId: undefined,
68+
postWidget: {
6969
'_jv': {
7070
'type': 'widget'
7171
}

0 commit comments

Comments
 (0)
Please sign in to comment.