<template>
  <div class="orders-listing-page">
    <Banner v-bind="bannerData" />

    <TemplateContainer>
      <filters-container :id="filtersId" :filters="filters" class="my-xl" />

      <table-listing
        id="all-orders-listing"
        endpoint="content/orders"
        :filter-id="filtersId"
        :fields="requestFields"
        :filters="requestFilters"
        :headers="headers"
        :items-per-page="20"
        :rows="scaffoldRows"
        :search-in="['orders']"
      />
    </TemplateContainer>
  </div>
</template>

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

import listing from '../../mixins/supplies-orders/all-orders-listing'
import request from '../../mixins/supplies-orders/all-orders-request'

export default {
  name: 'OrdersListingPage',
  components: { TemplateContainer, Banner },
  mixins: [listing, request],
  props: {
    bannerData: {
      type: Object,
      default: function () {
        return {
          back: { href: { name: 'OrderFormPage' } }
        }
      }
    }
  },
  data() {
    return { filtersId: 'all-orders-listing-filters' }
  }
}
</script>

<style lang="scss">
.orders-listing-page {
  .input-day .vdp-datepicker__calendar .cell.selected {
    background: var(--color-grey-200);
  }
}
</style>
