<template>
  <ExampleStory>
    <TfTable
      v-bind="{
        parentalControls: true,
        pageLimit: 25,
        pageSelected: Number($route.query.pageSelected) || 1,
        pagination: true,
        tableData: [...table.data],
        tableMeta: tableMeta,
      }"
      @pageSelected="$router.push({
        query: {
          ...$route.query,
          pageSelected: $event,
        }
      })"
      @changeSortCriteria="$router.push({
        query: {
          ...$route.query,
          sortDirection: $event.sortDirection,
          sortProp: $event.sortProp
        }
      })"
    />
  </ExampleStory>
</template>

<script>
  import ExampleStory from '@/views/examples/Layouts/Story';
  import { tableWithPagination as table } from './data';

  export default {
    name: 'TableWithPagination',
    components: { ExampleStory },
    data: () => ({ table }),
    computed: {
      /**
       * Creates the tableMeta object to get router props unless !parentalControls
       *
       * @returns {object}
       */
      tableMeta() {
        const { sortDirection, sortProp } = this.$route.query;
        const { direction, prop } = this.table.meta.sort;

        return {
          ...this.table.meta,
          sort: {
            direction: sortDirection || direction,
            prop: sortProp || prop,
          },
        };
      },
    },
  };
</script>
