169 lines
3.7 KiB
Markdown
169 lines
3.7 KiB
Markdown
# Document Resource
|
|
|
|
Document Resource is a wrapper on top of [Resource](./Resource.story.md) for
|
|
working with a single document. This feature only works with a Jingrow Framework
|
|
backend as of now.
|
|
|
|
## Usage
|
|
|
|
Create a document resource by specifying `pagetype` and `name` of the record. It
|
|
will be fetched automatically. The `todo.pg` is the document object with all
|
|
the fields of the document. Along with this, you get `todo.setValue` and
|
|
`todo.delete` resources.
|
|
|
|
```vue
|
|
<template>
|
|
<div v-if="todo.pg">
|
|
<div>
|
|
<h1>
|
|
{{ todo.description }}
|
|
</h1>
|
|
<Badge>{{ todo.status }}</Badge>
|
|
</div>
|
|
<Button @click="todo.setValue.submit({ status: 'Closed' })">
|
|
Mark as Closed
|
|
</Button>
|
|
<Button @click="todo.sendEmail.submit({ email: todo.owner })">
|
|
Send email
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { createDocumentResource, Button } from 'jingrow-ui'
|
|
let todo = createDocumentResource({
|
|
pagetype: 'ToDo',
|
|
name: '1',
|
|
whitelistedMethods: {
|
|
sendEmail: 'send_email',
|
|
},
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## Options API
|
|
|
|
You can also define resources if you are using Options API. You need to register
|
|
the `resourcesPlugin` first.
|
|
|
|
**main.js**
|
|
|
|
```js
|
|
import { resourcesPlugin } from 'jingrow-ui'
|
|
app.use(resourcesPlugin)
|
|
```
|
|
|
|
In your .vue file, you can declare all your resources under the resources key as
|
|
functions. The resource object will be available on `this.$resources.[name]`. In
|
|
the following example, `this.$resources.todo` is the resource object.
|
|
|
|
**Component.vue**
|
|
|
|
```vue
|
|
<script>
|
|
export default {
|
|
resources: {
|
|
todo() {
|
|
return {
|
|
type: 'document',
|
|
pagetype: 'ToDo',
|
|
name: '1',
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## List of Options and API
|
|
|
|
Here is the list of all options and APIs that are available on a list resource.
|
|
|
|
### Options
|
|
|
|
```js
|
|
let todo = createDocumentResource({
|
|
// name of the pagetype
|
|
pagetype: 'ToDo',
|
|
|
|
// name of the record
|
|
name: '',
|
|
|
|
// define pg methods to use as resources
|
|
whitelistedMethods: {
|
|
sendEmail: 'send_email',
|
|
},
|
|
// the above configuration enables the following API
|
|
// todo.sendEmail.submit()
|
|
|
|
// events
|
|
// error can occur from failed request
|
|
onError(error) {},
|
|
// on successful response
|
|
onSuccess(data) {},
|
|
// transform data before setting it
|
|
transform(pg) {
|
|
pg.open = false
|
|
return pg
|
|
},
|
|
// other events
|
|
delete: {
|
|
onSuccess() {},
|
|
onError() {},
|
|
},
|
|
setValue: {
|
|
onSuccess() {},
|
|
onError() {},
|
|
},
|
|
})
|
|
```
|
|
|
|
### API
|
|
|
|
A document resource is made up of multiple individual resources. In our running
|
|
example, the resource object that fetches the document is at `todos.get`. So all
|
|
the [properties of a resource](./Resource.story.md) are available on this
|
|
object. Similarly, there are resources for `setValue`, and `delete`.
|
|
|
|
```js
|
|
let todo = createDocumentResource({...})
|
|
|
|
todo.pg // pg returned from request
|
|
todo.reload() // reload the pg
|
|
|
|
// update options
|
|
todo.update({
|
|
pagetype: '',
|
|
name: ''
|
|
})
|
|
|
|
todo.get // pg resource
|
|
todos.get.loading // true when data is being fetched
|
|
todos.get.error // error that occurred from making the request
|
|
todos.get.promise // promise object of the request, can be awaited
|
|
|
|
// resource to set value(s) on the document
|
|
todos.setValue
|
|
todos.setValue.submit({
|
|
// field value pairs to set
|
|
status: 'Closed',
|
|
description: 'Updated description'
|
|
})
|
|
|
|
// same as setValue but debounced
|
|
todos.setValueDebounced
|
|
// will run once after 500ms
|
|
todos.setValueDebounced.submit({
|
|
description: 'Updated description'
|
|
})
|
|
|
|
// resource to delete the document
|
|
todos.delete
|
|
todos.delete.submit()
|
|
|
|
// if whitelistedMethods is defined
|
|
// you get a resource for each whitelisted method
|
|
todos.sendEmail
|
|
todos.sendEmail.submit
|
|
todos.sendEmail.loading
|
|
```
|