<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Categories</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <ListView
          :items="restaurantsCategories"
          :showColumnChooser="false"
          :hideSearch="false"
          :deleteable="false"
          :displayColumn="columns"
          :showNew="false"
          @onRowClick="onRowClick"
        />
        <!-- will need to emit the seleted item  -->
      </div>
    </div>
  </div>
</template>

<script>
import ListView from "../shared/listView";
import { mapState, mapActions } from "vuex";

export default {
  name: "RestaurantCategories",
  components: {
    ListView
  },
  data() {
    return {
      columns: ["id", "description"]
    };
  },
  methods: {
    ...mapActions("restaurantCategories", ["getSelectCategories"]),
    onRowClick(item) {
      this.$emit("selected", item);
    }
  },
  computed: {
    ...mapState("restaurantCategories", ["restaurantsCategories"])
  },
  mounted() {
    this.getSelectCategories();
  }
};
</script>