<template>
  <div class="tags">
    <h1>
        Fichiers CSV
        <b-button @click="reload_csvs">
            <font-awesome-icon icon="sync-alt" class="fa" />
        </b-button>
    </h1>
    <p> 
        Les fichiers csv sont cherché dans <span class="datadir">{{ data_dir }}</span> 
        <!--
          <b-button variant="link" @click="open_filebrowser(data_dir)"> Ouvrir <font-awesome-icon icon="folder-open" class="fa"/></b-button> 
        -->
        <b-list-group>
          <b-list-group-item v-for="csv in csvs">
              <div id="csvline">
                  <div class="left">
                      <strong>{{ csv.filename }} </strong>
                  </div>
                  <div class="right">
                      ({{ csv.data.length }} lignes)
                  </div>
              </div>
          </b-list-group-item>
        </b-list-group>
    </p>
    <h1>Tags</h1>
    <b-list-group>
      <b-list-group-item v-for="tag in tags">
        <tag-config :tagname="tag.name"></tag-config>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { shell } from 'electron'
import tagConfig from '../components/tag_config'

export default {
  name: 'home',
  components: {
    'tag-config': tagConfig
  },
  data () {
    return {
      file: ''
    }
  },
  mounted: function () {
  },
  computed: {
    ...mapGetters({
      'data_dir': 'config/data_dir',
      'csvs': 'datas/csvs',
      'tags': 'config/tags'
    })
  },
  methods: {
    ...mapActions('datas', {
        'reload_csvs': 'load_csvs'
    }),
    open_filebrowser (dir) {
      console.log("plop")
    }
  }
}
</script>

<style scoped>
.datadir {
  font-weight: bold;
}
.left {
    float: left;
}
.right {
    float: right;
}
</style>
