juggl/src/views/Home.vue

<template>
  <LayoutNavbarPrivate>
    <section v-if="runningRecords.length > 0">
      <h2 class="center">Tracking</h2>
      <JugglRecordsList :records="runningRecords" running />
    </section>
    <section>
      <h2 class="center">Projects</h2>
      <div v-if="finishedProjects.length > 0">
        <JugglProjectsPanel :projects="finishedProjects" />
      </div>
      <div id="add-project-form">
        <FormProjectAdd />
      </div>
    </section>
    <section v-if="finishedRecords.length > 0">
      <h2 class="center">Finished</h2>
      <JugglRecordsList :records="finishedRecords" />
    </section>
  </LayoutNavbarPrivate>
</template>

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

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

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

section
  margin-bottom: 4rem

#add-project-form
  margin-top: 1rem
  text-align: center
</style>