mixtape/zero.Backoffice.UI/old_app/pages/spaces/views/list.vue

<template>
  <div v-if="!loading" class="space-list" :data-space="space.alias">
    <ui-header-bar :title="space.name" :count="count" title-empty="List">
      <ui-table-filter :attach="$refs.table" />
      <ui-add-button :route="createRoute" />
    </ui-header-bar>
    <div class="ui-blank-box">
      <ui-table ref="table" :config="listRenderer" @count="count = $event" />
    </div>
  </div>
</template>


<script>
  import SpacesApi from 'zero/api/spaces.js';
  import SpacesDefaultList from 'zero/renderers/lists/spaces.default.js';

  export default {
    props: [ 'space', 'config' ],

    data: () => ({
      count: 0,
      loading: true,
      listRenderer: null,
      createRoute: {
        name: 'space-create',
        params: { alias: null }
      }
    }),

    watch: {
      'space': 'load'
    },

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


    methods: {

      load()
      {
        this.loading = true;

        const alias = 'spaces.' + this.space.alias;
        const listRenderer = this.zero.getList(alias) || SpacesDefaultList;

        this.createRoute.params.alias = this.space.alias;

        listRenderer.link = item =>
        {
          return {
            name: 'space-item',
            params: { alias: this.space.alias, id: item.id }
          };
        };

        listRenderer.onFetch(q => SpacesApi.getList(this.space.alias, q));

        this.listRenderer = listRenderer;

        this.loading = false;
      },


      add()
      {
        this.$router.push({
          name: 'space-create',
          params: { alias: this.space.alias }
        });
      }
    }
  }
</script>