mixtape/zero.Backoffice.UI/app/modules/integrations/integrations.vue

<template>
  <div class="integrations">
    <ui-header-bar title="@integration.list" :count="count" :back-button="true" />
    <div class="ui-box">
      <!--<h2 v-if="available.length > 0" class="ui-headline integrations-headline">Available</h2>-->
      <integration-item v-for="(item, index) in items" :key="index" :model="item" @change="onChanged" />
    </div>
  </div>
</template>


<script>
  import api from './api';
  import IntegrationItem from './integrations-item.vue';

  export default {
    data: () => ({
      count: 0,
      items: []
    }),

    components: { IntegrationItem },

    mounted()
    {
      this.load();
    },

    methods: {

      async load()
      {
        const result = await api.getTypes();
        this.items = result.data;
      },

      onChanged()
      {
        this.load();
      }
    }
  }
</script>

<style lang="scss">
  h2.ui-headline.integrations-headline
  {
    font-family: var(--font);
    color: var(--color-text);
    margin: 0 0 var(--padding);
    font-size: var(--font-size-l);
    font-weight: 700;
    padding-bottom: var(--padding-m);
    border-bottom: 1px dashed var(--color-line-dashed); 
  }
</style>