https://github.com/socketcluster/ag-collection
SocketCluster collection component for the front end
https://github.com/socketcluster/ag-collection
Last synced: about 2 months ago
JSON representation
SocketCluster collection component for the front end
- Host: GitHub
- URL: https://github.com/socketcluster/ag-collection
- Owner: SocketCluster
- Created: 2019-03-12T19:40:42.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-04T16:12:50.000Z (about 1 year ago)
- Last Synced: 2025-03-27T11:12:50.713Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AGCollection
SocketCluster real-time collection component for reactive front ends.
Designed to work with `ag-crud-rethink` https://github.com/SocketCluster/ag-crud-rethink
## Setup
Inside the directory from which front end files are served, run the command:
```bash
npm install ag-collection --save
```
You can import it in your scripts like this (example; your exact path may differ):
```js
import AGCollection from '/node_modules/ag-collection/ag-collection.js';
```
## Usage
See https://github.com/socketcluster/ag-sample-inventory for sample app which demonstrates this component in action.
An AGCollection object can be instantiated like this:
```js
this.productsCollection = new AGCollection({
// Pass the SocketCluster socket object.
socket: pageOptions.socket,
type: 'Product',
fields: ['name', 'qty', 'price'],
view: 'categoryView',
viewParams: {category: this.categoryId},
pageOffset: 0,
pageSize: 5,
getCount: true
});
```
The AGCollection allows you to read and manipulate a collection of documents in RethinkDB from the front end.
The ```productsCollection.value``` property is an array of `Product` objects which make up this collection; this array updates in real-time to match the collection on the server.
The ```productsCollection.meta``` property is an object which holds metadata about the collection's current state. It has the following properties: ```pageOffset```, ```pageSize```, ```isLastPage``` and ```count```.
If using a reactive front end framework like VueJS, you can bind the ```productsCollection.value``` and ```productsCollection.meta``` properties directly to your template since the array/object reference never changes (only the internal values/properties change).
In VueJS, you can instantiate and attach the collection value and metadata to your component like this:
```js
data: function () {
this.productsCollection = new AGCollection({
socket: pageOptions.socket,
type: 'Product',
fields: ['name', 'qty', 'price'],
view: 'categoryView',
viewParams: {category: this.categoryId},
pageOffset: 0,
pageSize: 5,
getCount: true
});
return {
products: this.productsCollection.value,
productsMeta: this.productsCollection.meta
};
},
```
Then you can bind this data to your template like this:
```html
// Iterate over the products array and render available properties of each product.
{{product.name}}
{{product.qty}}
{{product.price}}
```
## Supported attributes
The AGCollection tag supports the following attributes:
- ```socket```: A ```socketcluster-client``` socket; note that the same global socket object can be shared between multiple AGCollection and AGModel instances.
- ```type```: This is the model/table name in RethinkDB.
- ```fields```: The document fields to load for this collection.
- ```view```: The view to use for this collection. See https://github.com/SocketCluster/ag-crud-rethink for details about views.
- ```viewParams```: This should be a JSON object which will be used for filtering results for your view.
If you are using the ag-crud-rethink plugin on the backend, this data will be passed as the third argument to your transform function on your schema.
- ```pageOffset```: An integer which represents the current page of results within the collection.
- ```pageSize```: The number of results per page.
- ```getCount```: This is ```false``` by default; if set to ```true```, the ```collection.meta.count``` property will be populated with the total number of items in the collection; otherwise it always stays null (performance is better if ```getCount``` is ```false```).