Filters.vue

<template>
  <section>
    <h1>Sample Filters</h1>
    <h2>Filter by ID, type, owner, or date.</h2>
    <section class="form-group">
      <label for="base-selection">Base Selection</label>
      <select v-model="localFilters.inWorkflowInstance">
        <option selected value="null">All</option>
        <option value="true">Submitted</option>
        <option value="false">Unsubmitted</option>
      </select>

      <label for="sample-id">Sample ID</label>
      <input type="text" placeholder="ex: ESP00001" v-model="localFilters.name"/>

      <label for="sample-type">Sample Type</label>
      <input type="text" placeholder="ex: Illumina Library" v-model="localFilters.sampleTypeName"/>

      <label for="note">Note</label>
      <input type="text" placeholder="ex: Personal Note" v-model="localFilters.desc"/>

      <label for="owner">Owner</label>
      <input type="text" placeholder="ex: System Admin" v-model="localFilters.owner"/>

      <label for="created-after">Created after</label>
      <input type="text" placeholder="ex: 01/01/2017" v-model="localFilters.createdAfter"/>

      <label for="created-before">Created before</label>
      <input type="text" placeholder="ex: 01/01/2017" v-model="localFilters.createdBefore"/>
    </section>
  </section>
</template>

<script>
export default {
  props: [ 'filters' ],
  data () {
    return {
      localFilters: this.filters
    }
  }
}
</script>

<style>
</style>

Index.vue

<template>
  <div class="full-width">
    <two-pane-layout>
      <div slot="left">
        <filters :filters="filters"></filters>
      </div>
      <div slot="right">
        <sample-table-header></sample-table-header>
        <sample-table :samples="samples"></sample-table>
      </div>
    </two-pane-layout>
  </div>
</template>

<script>
import TwoPaneLayout from '@/components/TwoPaneLayout'
import SampleTable from '@/components/SampleTable'
import SampleTableHeader from '@/components/SampleTableHeader'
import Filters from '@/components/Filters'
import SAMPLES_QUERY from '@/graphql/queries/samples.gql'

export default {
  components: {
    TwoPaneLayout,
    Filters,
    SampleTable,
    SampleTableHeader
  },
  apollo: {
    samples: {
      query: SAMPLES_QUERY,
      variables () {
        return {
          filters: { ...this.filters },
          page: 0,
          pageSize: 50
        }
      },
      update (data) {
        return data.samplePage.samples
      }
    }
  },
  data () {
    return {
      samples: [],
      filters: {
        name: '',
        desc: '',
        tags: [],
        owner: '',
        sampleTypeName: '',
        inWorkflowInstance: null,
        createdAfter: '',
        createdBefore: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.full-width {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}
</style>