gistfile1.txt

<template>
  <b-container fluid>
    <PageHeader heading="Core markets" />

    <!--    <b-col cols="12" lg="7" class="d-flex justify-content-start">
      <slot name="tableFilters" />
      <b-form-group>
        <b-input-group>
          <b-form-input
            v-model="filter"
            debounce="150"
            placeholder="Type to search..."
          />
          <b-input-group-append>
            <b-button
              variant="outline-secondary"
              :disabled="!filter"
              @click="filter = ''"
            >
              Clear
            </b-button>
          </b-input-group-append>
        </b-input-group>
      </b-form-group>
    </b-col> -->

    <ListTable
      :rows="markets"
      :fields="fields"
      :filter="filter"
      sort-by="name"
      :is-expandable="false"
      @row-clicked="rowEvent"
      @row-contextmenu="rowEvent"
    >
    </ListTable>

    <AddEntityButton slot="tableActions" />
    <template #cell(logo)="{ value }">
      <img class="img-fluid" :src="value" />
    </template>
  </b-container>
</template>

<script>
import { ALL_MARKETS_QUERY } from '@/graphql'
import ListTable from '@/components/ListTable.vue'
import AddEntityButton from '@/components/list-table/AddEntityButton.vue'
import genericRowEventHandler from '@/helpers/genericRowEventHandler'
import PageHeader from '@/components/layout/PageHeader.vue'

export default {
  components: {
    ListTable,
    AddEntityButton,
    PageHeader
  },
  props: {
    enableFilter: {
      type: Boolean,
      default: true
    }
  },
  head() {
    return {
      title: 'Markets'
    }
  },
  data() {
    return {
      filter: '',
      fields: [
        { key: 'logo', label: '', tdClass: 'td-logo' },
        { key: 'name', label: 'Market', sortable: true, sortDirection: 'desc' },
        { key: 'currency', label: 'Currency', class: 'text-center' },
        { key: 'size', label: 'Market size (m USD)', class: 'text-right' },
        {
          key: 'retailers.length',
          label: 'Number of retailers',
          class: 'text-center'
        },
        {
          key: 'retailMarkup',
          label: 'Retail markup',
          class: 'text-center'
        }
      ],
      markets: []
    }
  },

  computed: {
    queryParams() {
      if (this.$route.query) {
        return Object.keys(this.$route.query)
          .map(key => key + '=' + this.$route.query[key])
          .join('&')
      }
      return ''
    },
    searchedMarkets() {
      return this.filter
        ? this.markets.filter(m =>
            m.name.toLowerCase().includes(this.filter.toLowerCase())
          )
        : this.markets
    }
  },
  methods: {
    refreshQuery() {
      this.$apollo.queries.markets.refetch()
    },
    rowEvent(row, idx, e) {
      genericRowEventHandler('markets-id', { id: row.id }, e, this.$router)
    }
  },
  apollo: {
    markets: {
      query: ALL_MARKETS_QUERY
    }
  }
}
</script>

<style></style>