UI integration
Let us go over how to integrate API functionalities into our UI.
SockJS WebSocket
To clarify, all API calls are being made through socket technology.
With a fallback to regular HTTP requests.

This increases performance as users already have a direct connection to the server!
With the permissionManager you can set the users permissions, aswell check if the user has a certain permission.
This can be done on the API level, component level and even DOM level.
Handling permissions for the API has been automated using the
  /project/config/public-api.json
configuration.
To handle permissions at the component level (which will also work for layout.vue files!) you can use the following code:
  <script>
  export default {
    permissions: 'somePermissionName',
    permissionsRedirect: 'someUrl' // Optional
  }
</script>
To handle permissions at the DOM level you can use the following code:
  
The biggest JavaScript class to inspect if you want to understand API - UI coupling is the ApiManager.
It automates a lot of tasks such as:
  - Automated API call from within a component, with a 'api' data value.
- Replacing the API result witing the component, if the component has a matching key in their data object.
- API Caching


API call distribution
Another functionality is the API call distribution.
If multiple components being mounted is calling the same API (with the same api parameters) in an interval smaller than 15 seconds, only 1 api call will be made.
In other words, it limits API calls of the same nature in an interval of 15 seconds.
The apiManager also provides a global Vue mixin.
Meaning every component will have access to some functionalities and properties of the ApiManager.

Automated API at the component level
The first functionality you might already have seen, is the automated api call by using the following in a component:
  <script>
  export default {
    data() {
      return {
        api: 'statistics/overview',
        statistics: [],
      };
    },
  };
</script>
This will call the
  statistics/overview
api when the component is mounted.
If the api returns an object with a key 'statistics', the value in the component will be replaced with that value.

Manual API bind
In the case you need to manually bind an API to a component you can do the following:
  
<script>
  export default {
    data() {
      return {
        statistics: [],
      };
    },
    mounted() {
      this.$bindApi('statistics/overview', { id: 1 });
    }
    ...
  };
</script>
Manual API refresh
If you need to manually refresh an API in a component you can use the following:
  
<script>
  export default {
    data() {
      return {
        api: 'statistics/overview',
        api_data: { id: 1 },
        statistics: [],
      };
    },
    methods: {
      // Refreshing the components own api.
      refreshAPI() {
        this.$refreshApi();
      },

      // Or

      // Refreshing a different than component own API, so that other component with that api will receive updated data.
      refreshAPI() {
        this.$refreshApi('example/other', { data: 10 });
      },
    },
    ...
  };
</script>
Manual API replace
In the case you need to manually replace the default api you can do:
  
<script>
  export default {
    data() {
      return {
        api: 'statistics/overview',
        api_data: { id: 1 },
        statistics: [],
      };
    },
    methods: {
      // Automated by simply changing the values.
      replaceApi() {
        this.api = 'statistics/new';
        this.api_data = { id: 2 };
      },

      // Or

      // Functional, by the Vue mixin method.
      replaceApi() {
        this.$replaceApi('statistics/new', { id: 2 });
      },
    },
    ...
  };
</script>
Autodestructive intervals
The last functionality is a smart interval setter that will be destructed when the component lifecycle will be destroyed.
You may also use this multiple times with the same effect.
The smart interval setter is wrapped under a method named $setInterval and may be used as follows:
  
<script>
  export default {
    methods: {
      myIntervals() {
        this.$setInterval(() => {
          console.log('1');
        }, 1000);
        this.$setInterval(() => {
          console.log('2');
        }, 2000);
        this.$setInterval(() => {
          console.log('3');
        }, 3000);
      },
    },
    ...
  };
</script>
Form API
Forms on the front-end are automatically bind to an API by using the regular action property.
Besides that, every form can be bound to some events as illustrated below:
  <template>
  <form
    action='authentication/login'
    @apiPrepare='apiPrepare'
    @apiBeforeSubmit='apiBeforeSubmit'
    @apiProgress='apiProgress'
    @apiSuccess='apiSuccess'
    @apiError='apiError'
  >
    <input type='text' name='username' />
    <input type='password' name='password' />
    <button type='submit'>Login</button>
  </form>
</template>

<script>
  export default {
    methods() {
      apiPrepare(obj) {
        // Do something
      }
      apiBeforeSubmit(obj) {
        // Do something
      }
      apiProgress(progressData) {
        // Mostly used while uploading file(s).
        // Do something with progressData.
      },
      apiSuccess(apiData) {
        // Do something with apiData
      },
      apiError(errorData) {
        // Do something with errorData
      },
    },
  };
</script>
This form will call the api
  authentication/login
with all form values (
  username
en
  password
) on submit.

Note that the form events are optianally ofcourse.
Next steps
In the next chapter you will learn how to bind api's to the user interface.