Roles

Preview

Usage

import { z } from 'zod'
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormRoles } from '@vitnode/core/components/form/fields/input-roles'

One component covers both shapes, because the difference is the value and nothing else - the search, the colour, the language resolution and the empty state are identical, and two copies is how they drift.

const formSchema = z.object({
  roleId: z.number(),
})

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'roleId',
      component: (props) => (
        <AutoFormRoles
          {...props}
          description="One role, replaced each time you pick."
          label="Primary role"
          placeholder="Select a role"
        />
      ),
    },
  ]}
/>

const formSchema = z.object({
  roleIds: z.array(z.number()).min(1),
})

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'roleIds',
      component: (props) => (
        <AutoFormRoles
          {...props}
          label="Additional roles"
          multiple
          placeholder="Add a role"
        />
      ),
    },
  ]}
/>

Out of the box it searches the AdminCP roles list. The guest role is never offered: it is the role a request has when it has no account, so it is not something to assign to anybody.

Editing an existing record

Same rule as User: the picker can only name ids it has seen, so an edit form passes the roles it already knows about.

<AutoFormRoles {...props} multiple label="Roles" selected={user.roles} />

Keeping a role out of the list

excludeIds drops options another field already owns - a primary-role picker and a secondary-role picker should not both offer the same one:

<AutoFormRoles
  {...props}
  multiple
  excludeIds={[primaryRoleId]}
  label="Additional roles"
/>

Names are resolved per reader

A role carries one name per language. The field renders the active locale's, and falls back to the first translation rather than to the id - a role with no translation in your language is still a role somebody named:

import { roleOptionName } from '@vitnode/core/components/form/fields/input-roles'

roleOptionName(role, 'pl') // "Administrator PL", or the first name it has

Props

RoleOption is { id, color, name }, where name is the raw { languageCode, name }[] - the server has no business deciding which language the person clicking reads in.

See also

• User - the same idea for people.
• Combobox - when the options are strings rather than records.