@mozaic-ds/vue/src/components/datatable/DataTablePageable.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { ref } from 'vue';
import * as utils from './utils';

// Components
import '@mozaic-ds/datatable-vue/style.css';
import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';

// Styles
import './assets/styles.scss';

// Scripts
const api = {
  fetchItems: ({ sort, size, page }) =>
    new Promise((resolve) => {
      setTimeout(() => {
        let items = [...utils.addlDeals];
        if (sort)
          items = items.sort((itemA, itemB) => {
            const { column, direction } = sort;
            if (direction === 'ASC') {
              return itemA[column] > itemB[column] ? 1 : -1;
            } else {
              return itemA[column] < itemB[column] ? 1 : -1;
            }
          });
        const paginated = items.slice((page - 1) * size, page * size);
        resolve(paginated);
      }, 1000);
    }),
};

export default {
  title: 'DataTable/MDataTable Pageable',
  component: MDataTable,
  args: utils.args,
  argTypes: utils.argtypes,
  parameters: {
    componentName: 'MDataTable',
    docs: { autodocs: false },
    backgrounds: utils.backgrounds,
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!--
          Default content
        -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />

        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};

export const Default = {
  args: {
    pageable: true,
    totalItems: utils.deals10.length,
    accessibilityLabels: { paginationAriaLabel: 'Select a DataTable page' },
  },
};

export const CustomPaginationText = {
  args: { ...Default.args },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!--
          Default content
        -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />

        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>

        <!-- Custom Pagination Text -->
        <template v-slot:paging.text="{ option }">
          Custom pagination - {{ option.value }} / {{ option.length }}
        </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};

export const FullPaginatedExample = {
  args: {
    pageable: true,
    itemsPerPage: 10,
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      const items = ref(utils.deals10);
      const totalItems = ref(utils.addlDeals.length);
      const loading = ref(false);
      const currentPage = ref(1);
      return { args, items, totalItems, loading, currentPage };
    },
    template: `
      <MDataTable
        v-bind="args"
        :items="items"
        :totalItems="totalItems"
        :loading="loading"
        @change="updatePage"
      >
        <!--
          Default content
        -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />

        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
      async updatePage({
        sort = undefined,
        size = undefined,
        page = undefined,
      }) {
        console.log('Poulou');
        this.loading = true;
        this.items = await api.fetchItems({ sort, size, page });
        this.loading = false;
      },
    },
  }),
};