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:

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 Component Mapping

Injected Props

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

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"),
  //...
]

Use getResourceLinks() to create many resource links at once. This method will only return links for which users have resource action permissions.

[
  //...
  ...this.admin.getResourceLinks([
    "publishers",
    "authors",
    "books",
    "reviews",
  ]),
  //...
]

For these helpers, you can pass the full connection object instead of the resource name, which will override the generated default. For example, this code will create a new link to the user creation page with a plus symbol and "Create new user" as text:

[
  //...
  this.admin.getResourceLink({ name: "users", action: "create", icon: "mdi-plus", text: "Create new user" }),
  //...
]

The getResourceLinks() helper accepts a hierarchical menu as follows:

[
  //...
  ...admin.getResourceLinks([
    {
      icon: "mdi-globe-model",
      text: "Publishers",
      expanded: true,
      children: [
        admin.getResourceLink({ name: "publishers", icon: "mdi-view-list", text: "List" }),
        admin.getResourceLink({ name: "publishers", icon: "mdi-plus", text: "Create" }),
      ],
    },
    "authors",
    "books",
    "reviews",
  ]),
  //...
]