juggl/juggl-vue/src/views/Home.vue

<template>
  <LayoutNavbarPrivate>
    <div v-if="runningRecords.length > 0">
      <h2 class="center">Tracking</h2>
      <JugglRecordsList :records="runningRecords"/>
    </div>
    <div v-if="finishedProjects.length > 0">
      <h2 class="center">Projects</h2>
      <JugglProjectsPanel :projects="finishedProjects"/>
    </div>
  </LayoutNavbarPrivate>
</template>

<script>
import LayoutNavbarPrivate from "@/components/layout/LayoutNavbarPrivate";
import JugglProjectsPanel from "@/components/juggl/JugglProjectsPanel";
import JugglRecordsList from "@/components/juggl/JugglRecordsList";
import store from "@/store";

export default {
  name: "Home",
  components: {
    LayoutNavbarPrivate,
    JugglProjectsPanel,
    JugglRecordsList
  },
  computed: {
    finishedProjects: () => {
      return store.getters.finishedProjects;
    },
    runningRecords: () => {
      return store.getters.runningRecords;
    }
  },
  created: () => {
    store.dispatch("loadProjects");
    store.dispatch("loadRunningRecords");
  }
}
</script>

<style lang="sass">
.center
  text-align: center
  font-weight: bold
</style>