comptes/src/views/config.vue

<template>
  <div class="tags">
    <h1>
        Fichiers CSV
    </h1>
    <p>
        <b-button @click="reload_csvs" size="sm">
            <font-awesome-icon icon="sync-alt" class="fa" /> Recharger
        </b-button>
    </p>
    <p>
        Les fichiers csv sont cherchés dans <span class="dir">{{ 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>
        Config
    </h1>
    <p>
        <b-button @click="reload_config" size="sm">
            <font-awesome-icon icon="sync-alt" class="fa" /> Recharger
        </b-button>
    </p>
    <p>
        Le fichier configuration se trouve à <span class="dir">{{ config_dir + config_filename}}</span> 
    </p>
    <h2>Tags</h2>
    <b-list-group>
      <b-list-group-item>
        <new-tag></new-tag>
      </b-list-group-item>
      <b-list-group-item v-for="tag in tags">
        <tag-item :tagname="tag.name"></tag-item>
      </b-list-group-item>
    </b-list-group>
    <h2>Categories</h2>
    <b-list-group>
      <b-list-group-item v-for="categorie in categories">
        <categorie-item :categoriename="categorie.name"></categorie-item>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import tagItem from '../components/item_tag'
import tagEdit from '../components/edit_tag'
import newTag from '../components/new_tag'
import categorieItem from '../components/item_categorie'

export default {
  name: 'home',
  components: {
    'tag-item': tagItem,
    'tag-edit': tagEdit,
    'new-tag': newTag,
    'categorie-item': categorieItem
  },
  computed: {
    ...mapGetters({
      'data_dir': 'config/data_dir',
      'config_dir': 'config/config_dir',
      'config_filename': 'config/config_filename',
      'csvs': 'datas/csvs',
      'tags': 'config/tags',
      'categories': 'config/categories'
    })
  },
  methods: {
    ...mapActions('datas', {
      'reload_csvs': 'load_csvs'
    }),
    ...mapActions('config', {
      'reload_config': 'load',
      'save_config': 'save'
    }),
    open_filebrowser (dir) {
      console.log("plop")
    }
  }
}
</script>

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