<template>
  <data-table-template
    icon="fas fa-wifi"
    title="Hosts"
    service="hosts"
    class="my-sticky-header-table"
    card-container-class="grid-content"
    :rows-per-page-options="[5, 12, 25, 50, 100, 200, 0]"
    :columns-to-show-first="['name','domain','application','environment','createdAt', 'updatedAt']"
    :search-by-props="['name',]"
    :limit="5"
    :form-fields="formFields"
    table-header-class="text-h2 bg-grey-3 text-bolder"
    :fast-join-resolver-query="fastJoinHookResolversQuery"
  />
</template>

<script>
  import DataTableTemplate from '../components/common/substance/tables/DataTableTemplate';
  export default {
    name: 'hosts-page',
    components: {DataTableTemplate},
    data() {
      return {
        formFields: [
          {
            name: 'q-input',
            path: 'name',
            $attrs: {
              outlined: true,
              class:'q-py-md'
            },
          },
          {
            name: 's-select',
            path: 'domain',
            $attrs: {
              outlined: true,
              service: 'domains',
            },
            rules: [
              val => !!val || '* Required',
            ],
          },
          {
            name: 's-select',
            path: 'environment',
            $attrs: {
              outlined: true,
              service: 'environments',
            },
            rules: [
              val => !!val || '* Required',
            ],
          },
          {
            name: 's-select',
            path: 'application',
            $attrs: {
              outlined: true,
              service: 'applications',
            },
            rules: [
              val => !!val || '* Required',
            ],
          },
        ],
        fastJoinHookResolversQuery: {
          domain: true,
          application: true,
          environment: true
        },
      };
    },
  };
</script>
