Home > Frontend > Concepts

Concepts

• Resources
• Components
  • ListItems
  • Cards
  • Menus
• Actions
  • Menus
• Reactivity
  • Subscribe
  • Broadcast

Resources

Resources represent the key models in the system. In Rise, these are things like: project, employee, invoice, department etc.

Components

ListItems

ListItems can be found at src/components/listitems/..

• Should accept list item as props.item

Basic ..ListItem example

<template>
<v-list-item :to="to" >
  <template #prepend ></template>
  <v-list-item-title ></v-list-item-title >
  <v-list-item-subtitle ></v-list-item-subtitle >
  <template #append ></template>
</v-list-item>
</template>

<script setup >
import { useAccessors } from '@/composables/useAccessors';
import {computed} from 'vue'

const {getObjectPath} = useAccessors()

// emits:
const emit = defineEmits(['selected'])

// props:
const props = defineProps({
  item: { type: Object, required: true },
  // optional extras
  to: { type: String, required: false }
})

</script>

Props:

Common options that can be passed to a listitem: Although not a requirement, the following items can be added and we should expect consistent naming and behaviour

• to - a URL to which this should link

Events:

• @selected - emitted when a list-item is clicked on

Cards

Found at: /src/components/cards/..

Menus

Menus can be found at src/components/listitems/..

Menus are reusable components that provide an interface to perform actions on a resource

Actions

..

Conventions:

• Should accept resource instance as props.modelValue

Menus

See: menus

Reactivity

NOTE

This is WIP and is still being rolled out as a standard

• We have a global pinia store that keeps track of changes to resources

Subscribe

The simplest way to ensure that your view is updated when changes are made from other components:

import { useReactiveStore } from '@/composables/useReactiveStore'

const {subscribe} = useReactiveStore()

// onmounted
onMounted () {
    // when any changes are made to `resourceName` resource, call the `get()` method
    subscribe("resourcename", null, get)

    // subscribe to changes to a particular instance:
    subscribe("resourcename", resourceId, get)
}

function get () {
  // update the view
}

NOTE

resourcename maps to the resource name from useHttp()

Subscribe to changes to specific instances

Broadcast

const {broadcast} = useReactiveStore()
// e.g.: broadcast("invoice", 123, instance)
// instance is optional
broadcast(resourceName, resourceId, resource)
// any components that subscribe to `resourceName` or `resourceName:resourceId`
// will have their callback called

Broadcast an update to a list of instances