<template>
  <div class="pedgonews-listing-page">
    <Banner page="pedagonews" />

    <TemplateContainer>
      <table-listing
        id="pedagonews-listing"
        :fields="['uuid', 'title', 'updated_at', 'sent_at', 'slug']"
        :filters="{ 'status:eq': 1, 'sent_at:lte': 'now()' }"
        :headers="headers"
        :rows="scaffoldRows"
        :on-row-click="onRowClick"
        endpoint="content/newsletters_pedagonews"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

export default {
  name: 'PedagonewsListingPage',
  $_i18nRootPath: 'customs.PEDAGONEWS_LISTING_PAGE',
  components: { Banner, TemplateContainer },
  computed: {
    headers() {
      return [
        { value: this.$_tr('headers.title'), sortable: true, key: 'title' },
        {
          value: this.$_tr('headers.updatedAt'),
          sortable: true,
          key: 'updated_at',
          order: 'desc',
          default: true
        }
      ]
    }
  },
  methods: {
    scaffoldRows(fields) {
      return [
        { value: fields.title },
        { tag: 'date-ui', data: { date: fields.updated_at } }
      ]
    },
    onRowClick(data) {
      this.$router.push({
        name: 'PedagonewsPage',
        params: { slug: data.slug[0] }
      })
    }
  }
}
</script>
