Resources

Resource means a specific server asset that can be managed by Olobase Admin, i.e. created/read/updated/deleted. The resources must correspond to a valid API endpoint that allows all these CRUD operations. The following code example represents an example of the expected structure that should be sent to the Olobase Admin constructor method as seen before:

src/resources/index.js

export default [
  {
    name: "users",
    icon: "mdi-account",
    label: "name",
    routes: ["list"],
    permissions: ["admin"],
  },
  {
    name: "userss",
    icon: "mdi-alien",
    label: "name",
    translatable: true,
    permissions: ["admin", "anotherrole"],
  },
  {
    name: "users-children",
    icon: "mdi-baby-carriage",
    label: "name",
    except: ["delete"],
  },
];

Resource Object Structure

A resource object must follow this structure:

Key Type Description
name string A mandatory unique resource name to use for the client-side router base path.
api string Corresponds to API base path calls. By default it is equal to the name above.
icon string Descriptive icon in the sidebar or list page. It must be one of the icons in the MDI icon list.
label string, function A name that identifies an instantiated resource.
include array, object Some additional object or arrays to be added to data providers for all GET based methods for other actions within the data provider.
routes array List of available routes for this resource.
actions array List of valid actions for this resource.
except array Denied actions are not used if actions is explicitly set.
translatable boolean Specifies whether this resource can be translated.
permissions array Role list that enables activating the resource based on user permissions.
autocompleteFields array List of source fields to return from API in VaAutocompleteInput to prevent overfetching.

Label

The label property can take a string or a function and is equal to the label property by default. As the name of a user resource, use a string for the simple case that represents a valid property of the targeted resource. Using a function, which is a simple callback that takes the full source API object, allows you to return a more complex combination of properties, such as (r) => ${r.title} (${r.isbn}).

This tag will be used as the default page title for all reference-based fields and entries (VaReferenceField, VaReferenceArrayField, VaAutocompleteInput, VaSelectInput, VaRadioGroupInput) as well as displaying and organizing each CRUD page.

Actions

For actions you must choose between list / show / create / edit / delete. If no actions or exceptions are set, all 5 actions are enabled by default. All removed actions will be reflected in all crud pages and Vue Router will adapt accordingly. For example, if you set anything other than ["show"], showing the route will be disabled and any show actions (mostly buttons) associated with that resource will be disabled.

Disabling Actions

Reuse API Endpoints

You can perfectly reuse the same backend resource API endpoint for different resources. Imagine a first set of crud pages showing only active sources, and a separate second set of crud pages showing only archived ones. Use the API feature for this. It will override the API default base path in the resource repository module. Then every CRUD page in src/resources/{name-1} and src/resources/{name-2} will use the same API endpoint.

Check out the following example:

export default [
  {
    name: "users",
    icon: "mdi-account",
    label: "name",
    routes: ["list"],
    permissions: ["admin"],
  },
  {
    name: "archived-users",
    api: "users",
    icon: "mdi-account",
    label: "name",
    routes: ["list"],
    permissions: ["admin"],
  },
];

With the above configuration, the archived-users resource will be able to reuse the same API endpoints as the users resource.

Resource CRUD Pages and API Modules

The above source information is basically enough for Olobase Admin to recreate all the necessary CRUD routes and API action structures. Each CRUD route looks for a component named ${ResourceName}${Action}. And 4 action pages are supported: List, Show, Create and Edit. Therefore, for a specific resource called users and a creation route, Olobase Admin searches the UsersCreate page component. If not found, it returns to a 404 error page. So all you have to do is save all your CRUD source pages with this component naming convention in mind. To make this tedious task easier, the src/plugins/loader.js file imports these files and searches for all .vue files in the src/resourcesdirectory and automatically saves them in the main Vue instance, giving them an appropriate component name. So you just need to create a .vue component that will get the name of the resource for each action within a resource folder.

An example of Users resources:

resources
├── users-children (Kebab case format of source information or name)
│   ├── Create.vue
│   ├── Edit.vue
│   ├── Form.vue (Reused form component for both Create.vue and Edit.vue views)
│   ├── List.vue
│   └── Show.vue
│
├── users (There is no need for Create.vue or Edit.vue files here as we use the direct listing feature for this)
│   ├── Form.vue
│   ├── List.vue
│   └── Show.vue
│
└── index.js (Resources file descriptor as seen above)

Compound Name

Action Mapping

Some quick tables to persist (we take the resource name users-children as an example).

Action Route and API Mapping

Action Vue Route API Call Format
list /users-children GET /users-children
show /users-children/{id} GET /users-children/{id}
create /users-children/create POST /users-children
edit /users-children/{id}/edit PUT /users-children/{id}
delete - DELETE /users-children/{id}

Action Component Mapping

Action Vue Component "src/resources" file path
list UsersChildrenList /users-children/List.vue
show UsersChildrenShow /users-children/Show.vue
create UsersChildrenCreate /users-children/Create.vue
edit UsersChildrenEdit /users-children/Edit.vue

Injected Props

The following accessories are added to each CRUD page for easy reuse:

Eylem Vue Component Name "src/Resources" File Path
resource object Source object identifier based on the current route
title string Localized title of the source action page
id id The ID of the current resource to view or edit
item object Current item to view, edit or copy
permissions array Current user permissions

Link Helpers

You may need to place some links in your app, especially in the sidebar, that point to listing or creating resource pages. For this, you can use the getResourceLink() and getResourceLinks() helper methods that will create this format for you. Additionally these helpers will test the permissions of existing users for this particular action of this resource and return false if it fails.

The code example that follows will return a link object to the user page list with the resource icon as well as the localized resource tag. Simply embed this function into any valid layout menu prop as it is a link object. You don't need to mess around with permissions or add a null test because an incorrect menu will not be created.

[
  //...
  this.admin.getResourceLink("users"),
  //...
]
This documents is available for subscribers only

Get Full Accesss