Creating the views

With the schema and settings defined we can proceed to the next step which is to create the views responsible for rendering the screens

The standard presentation components are relatively simple and do not need a very extensive implementation.

The suggestion of the structure is to place the views of theCategoryentity of theGeneraldomain within theDashboardmodule inside a folder with the path src/views/dashboard/general/category. After creating this directory we can create the two views that are necessary to maintain the operations of creating, viewing, editing, deleting and searching the records of this entity: CategoryForm.vue and CategoryTable.vue. Below we can see examples of implementation of the two.

src/views/dashboard/general/category/CategoryForm.vue

<template>
  <SchemaForm v-bind="bind" />
</template>

<script type="text/javascript">
import View from 'src/app/Agnostic/Adapters/View'
import Schema from 'src/domains/General/Category/Schema/CategorySchema'

/**
 * @typedef {CategoryForm}
 */
export default {
  /**
   * extend adapter to load schema components with schemas
   */
  extends: View,
  /**
   * @type {string}
   */
  name: 'CategoryForm',
  /**
   * schema that has the entity's definitions and business rules
   */
  schema: Schema
}
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
>
</style>

Thisformwill be responsible for defining the display of the entity's data. It is possible to notice that the Category schemais imported to configure the component.

src/views/dashboard/general/category/CategoryTable.vue

<template>
  <SchemaTable v-bind="bind" />
</template>

<script type="text/javascript">
import View from 'src/app/Agnostic/Adapters/View'
import Schema from 'src/domains/General/Category/Schema/CategorySchema'

/**
 * @typedef {CategoryTable}
 */
export default {
  /**
   * extend adapter to load schema components with schemas
   */
  extends: View,
  /**
   * @type {string}
   */
  name: 'CategoryTable',
  /**
   * schema that has the entity's definitions and business rules
   */
  schema: Schema
}
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
>
</style>

The above component is thetablethat will be used to display the records that will be consumed by the service we create. As in theform, theschemaplays an important role in this component.

Now that we have created thedomain(and configured), theservice, theschemaand theviews, we will create the routes to be able to see the components being displayed.

Adding routes