<template>
  <div>
    <filters-container id="jobs-listing" :filters="filters" />

    <table-listing
      id="jobs-table-listing"
      :fields="requestFields"
      :headers="headers"
      :filters="requestFilters"
      :rows="scaffoldRows"
      :on-row-click="handleRowClick"
      :items-per-page="14"
      :actions="['edit']"
      filter-id="jobs-listing"
      endpoint="content/jobs"
    />
  </div>
</template>

<script>
export default {
  name: 'JobsListing',
  $_i18nRootPath: 'customs.JOBS.LISTING',
  props: {
    requestFilters: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      requestFields: [
        'uuid',
        'title',
        'service_text',
        'admin',
        'content_type',
        'city',
        'published_at',
        { activity_domain: ['uuid', 'title'] },
        { contract_types: ['uuid', 'title'] },
        { business: ['uuid', 'title'] }
      ]
    }
  },
  computed: {
    headers() {
      return [
        { value: this.$_tr('headers.title'), sortable: true, key: 'title' },
        { value: this.$_tr('headers.business') },
        { value: this.$_tr('headers.activityDomain') },
        { value: this.$_tr('headers.service') },
        { value: this.$_tr('headers.contractType') },
        { value: this.$_tr('headers.location') },
        {
          value: this.$_tr('headers.publishedAt'),
          sortable: true,
          key: 'published_at',
          order: 'desc',
          default: true
        }
      ]
    },
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          label: this.$_tr('filters.search')
        },
        {
          modelName: 'business',
          type: 'selectbox',
          fetch: true,
          reference: 'business',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.companies')
        },
        {
          modelName: 'domains',
          type: 'selectbox',
          fetch: true,
          reference: 'activity_domain',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.activityDomain')
        },
        {
          modelName: 'contracts',
          type: 'selectbox',
          fetch: true,
          reference: 'contract_types',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.contracts')
        },
        {
          modelName: 'locations',
          type: 'selectbox',
          fetch: true,
          reference: 'region',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.region')
        }
      ]
    }
  },
  methods: {
    scaffoldRows(fields) {
      return [
        { id: 'title', value: fields.title },
        {
          id: 'business',
          value: this.getCheckedData(fields, ['business', 'data'], [])
            .map(({ title }) => title)
            .join(' - ')
        },
        {
          id: 'activityDomain',
          value: this.getCheckedData(fields, ['activity_domain', 'title'])
        },
        { id: 'service', value: fields.service_text },
        {
          id: 'contractType',
          value: this.getCheckedData(fields, ['contract_types', 'data'], [])
            .map(({ title }) => title)
            .join(' - ')
        },
        { id: 'city', value: fields.city },
        { id: 'date', tag: 'date-ui', data: { date: fields.published_at } }
      ]
    },
    handleRowClick(item) {
      this.triggerModal(
        'job',
        'fetch',
        { item, content: 'jobs' },
        { layout: 'right', width: 600, transition: 'fadeInLeft' }
      )
    }
  }
}
</script>
