@rokoli/bnb

Appearance

DRF Composition functions ​

@rokoli/bnb comes with a few Vue Composition functions that integrate with the API toolkit and make common tasks easier.

useObject ​

Retrieves an object by id either directly from the internal API state if available or triggers a request to the API.

js
import { useObject } from '@rokoli/bnb/drf'

const { itemMap, retrieve } = api
const id = 5

const { obj, isLoading } = useObject(id, itemMap, retrieve)
import { useObject } from '@rokoli/bnb/drf'

const { itemMap, retrieve } = api
const id = 5

const { obj, isLoading } = useObject(id, itemMap, retrieve)

useObjectFromStore ​

Does the same as useObject but accepts a reactive store (like the one Pinia provides) instead.

js
import { useObjectFromStore } from '@rokoli/bnb/drf'
import useObjectStore from '@my/pinia/store'

const store = useObjectStore()
const id = 5

const { obj, isLoading } = useObjectStore(id, store)
import { useObjectFromStore } from '@rokoli/bnb/drf'
import useObjectStore from '@my/pinia/store'

const store = useObjectStore()
const id = 5

const { obj, isLoading } = useObjectStore(id, store)

usePaginatedList ​

Creates a reactive listIsolated result which automatically responds to page, limit and query changes.

It also automatically resets the page number to 1 if the limit and query changes, and you did not set the noPageAutoReset to true.

js
import { computed, ref } from 'vue'
import { usePaginatedList } from '@rokoli/bnb/drf'

const { listIsolated } = api
const page = ref(1)
const limit = ref(10)
const searchTerm = ref('')

const { result, isLoading } = usePaginatedList(listIsolated, page, limit, {
  query: () => new URLSearchParams({ search: searchTerm }),
})
import { computed, ref } from 'vue'
import { usePaginatedList } from '@rokoli/bnb/drf'

const { listIsolated } = api
const page = ref(1)
const limit = ref(10)
const searchTerm = ref('')

const { result, isLoading } = usePaginatedList(listIsolated, page, limit, {
  query: () => new URLSearchParams({ search: searchTerm }),
})

You can also pass an EventTarget as the events option. Such an event target is contained in the API object. If set, the result state will be updated or reloaded if any events are emitted for any of the objects currently contained in the result list.

useServerErrors ​

Parses and maps the error objects and strings that DRF returns into a globalErrors list and a fieldErrorMap containing error objects mapped to fields.

js
import { ref } from 'vue'
import { useServerErrors } from '@rokoli/bnb/drf'

const { update } = api
const error = ref(null)

const { globalErrors, fieldErrorMap } = useServerErrors(error)

function save(obj) {
  try {
    update(obj.id, obj)
    error.value = null
  }
  catch (e) {
    error.value = e
  }
}
import { ref } from 'vue'
import { useServerErrors } from '@rokoli/bnb/drf'

const { update } = api
const error = ref(null)

const { globalErrors, fieldErrorMap } = useServerErrors(error)

function save(obj) {
  try {
    update(obj.id, obj)
    error.value = null
  }
  catch (e) {
    error.value = e
  }
}

useServerErrorFields ​

An extension of the useServerErrors composition function, that provides easier access to merged error lists.

js
import { ref } from 'vue'
import { useServerErrorFields, useServerErrors } from '@rokoli/bnb/drf'

const { update } = api
const error = ref(null)

const { globalErrors, fieldErrorMap } = useServerErrors(error)
const [nameAndSlugErrors, contentErrors, remainingErrors]
  = useServerErrorFields(fieldErrorMap, ['name', 'slug'], 'content')

function save(obj) {
  try {
    update(obj.id, obj)
    error.value = null
  }
  catch (e) {
    error.value = e
  }
}
import { ref } from 'vue'
import { useServerErrorFields, useServerErrors } from '@rokoli/bnb/drf'

const { update } = api
const error = ref(null)

const { globalErrors, fieldErrorMap } = useServerErrors(error)
const [nameAndSlugErrors, contentErrors, remainingErrors]
  = useServerErrorFields(fieldErrorMap, ['name', 'slug'], 'content')

function save(obj) {
  try {
    update(obj.id, obj)
    error.value = null
  }
  catch (e) {
    error.value = e
  }
}