@ou-imdt/create/boilerplate/vleapi-template-stores.md

Command line tool to create team boilerplate.

# VLEAPI Template Stores and Global Data

This document provides an overview of the methods available in the template stores for interacting with the VLEAPI. The document covers two main areas:

> Create has two templates: Vanilla and Vue. This documentation is related to `src/store/store.js` files in both templates.

- Template Store Methods: Functions for saving, retrieving, handling parameters and attachments, and utilities.

- Global Data Handling: How to manage and safeguard global data across users.

## Template Stores

Stores found in the two templates contain methods to help with common tasks whilst interfacing with the VLE.

Examples include: 

- Saving data to the VLE
- Retrieving save data from the VLE 
- Parsing Query parameters from URLs
- Loading SCXML attachments and folders
- Logging utilities to prevent development messages getting to live


### Save Global Data 
```javascript
store.globalData = {
    default: {
        valueOne: "Hi",
        valueTwo: "Example",
        valueThree: "Message"
    }
}

store.saveGlobalData()
```
### Save User Data
```javascript
store.userData = {
    default: {
        valueOne: "Hi",
        valueTwo: "Example",
        valueThree: "Message"
    }
}

store.saveUserData()
```
### Get All Single Save Data
```javascript
store.getUserData()
// Result stored in store.singleSaveData
```
### Get All Global Save Data
```javascript
store.getGlobalData()
// Result stored in store.globalSaveData
```

### VLE Safe Log
```javascript
store.log("Message")
```
### VLE Safe Warn
```javascript
store.warn("Message")
```
### VLE Safe Error
```javascript
store.error("Message")
```
### Access VLE Parameters
```javascript
store.defaultVLEParams["_u"]
store.defaultVLEParams["_i"]
store.defaultVLEParams["_a"]
store.defaultVLEParams["_c"]
store.defaultVLEParams["param1"]
```
### Access VLE Attachments
```javascript
store.fileAttachments["ref"]
```
### Access VLE Folders
```javascript
store.folderAttachments["ref"]
```

### Check Online
```javascript
store.isOnline
```


## Global Data and the VLE

Sometimes we want to share data among students, The VLE API does not have a guaranteed  method of preventing data being overwritten - historically you had 2 options: 

1. Before saving, get the data form the server - change it and then immediately save, which will work 99% of the time but it's still possible to lose data if stuff happens at exactly the right time - and with thousands of students using something its still possible for the data to get messed up.

2. Using the VLEAPI's `previousvalues ` and function bit of the set_server_data function - cool eh - they came up with a fix  ............... which is (when you look at the ACTUAL vleapi code) just point 1 done automatically with all the same problems .... *sigh*

### So what do we do?

The best solution is to shift the setup so that you collect the data for each individual and then collate it with your javascript - the key thing being one student can't change other responses.

Create tool has a really useful way of handling this with minimal effort from you.

When you load global data you should notice that the object contains a Moodle ID for the current user.

```javascript
await this.store.getGlobalData()

// will set up your globalData like this in the store

this.store.globalData = {
    367489 : {}
}
```

(if testing locally and you do not provide a `_u` parameter in the url it will be "default"   - like so )

```javascript
this.store.globalData = {
    default : {}
}
```

You can get the current users data with

`this.store.globalData[this.store.currentUserId]`

So say you want to a poll result to it:

```javascript
this.store.globalData[this.store.currentUserId].poll = [true, false,true]

// and to save the data

this.store.saveGlobalData()
```

That's it - it automatically saves ONLY the bit associated with the current user, keeping the data separated form other users data.

### But Why?

The point is if you have say a Poll widget - with three checkboxes rather than storing one item that count up the totals - you keep a record of all the responses which will come to you like so (or however you choose to store the data):

```javascript
this.store.globalData = {
 367489 : { poll : [true, false, true ] },
 456643 : { poll : [true, true, true ] },
 235663 : { poll : [false, false, false] },
 566452 : { poll : [true, false, false] },
 .....
 345345 : { poll : [false, false, true ] }
}
```

In this example you can get the results by looping through to process them into a result:

```javascript
  let totals = [0, 0, 0];
  Object.values(this.globalData).forEach(data => { 
      data.poll.forEach((response, index) => {
        if (response) {
          totals[index] = totals[index]  + 1;
        }
      });
  });
```

**The CONS** 

- You have to process the data at runtime.

- More data is stored.

**The PROS** 

- The data is safe, students can edit their data if they want without messing up the results.

- This  method is very robust and has been used with the Wordcloud and Poll in CL (and lots of others).

- It has been found to be very quick even with literally thousands of responses, and very robust. 

- And the same process has been reached by several IMD's independently.