juggl/src/views/Home.vue

75 lines
2.1 KiB
Vue

<template>
<LayoutNavbarPrivate>
<BaseSection v-if="runningRecords.length > 0" title="Tracking">
<JugglRecordsList :records="runningRecords" running />
</BaseSection>
<BaseSection title="Projects">
<div v-if="availableProjects.length > 0">
<JugglProjectsPanel :projects="availableProjects" />
</div>
<div id="add-project-form">
<FormProjectAdd />
<b-link to="/manage">
Manage projects
</b-link>
</div>
</BaseSection>
<BaseSection v-if="finishedRecords.length > 0" title="History">
<JugglRecordsList :records="finishedRecords" />
<div class="center">
<b-button to="/history" variant="outline-secondary" center
>Show all</b-button
>
</div>
</BaseSection>
</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 BaseSection from "@/components/base/BaseSection";
import store from "@/store";
export default {
name: "Home",
components: {
LayoutNavbarPrivate,
JugglProjectsPanel,
JugglRecordsList,
FormProjectAdd,
BaseSection
},
computed: {
availableProjects: () => {
return store.getters.getFilteredProjects({finished: true, visible: true});
},
finishedRecords: () => {
return store.getters.getFilteredRecords({running: false, projectVisible: true});
},
runningRecords: () => {
return store.getters.getFilteredRecords({running: true, projectVisible: true});
}
},
created: () => {
store.dispatch("loadProjects");
store.dispatch("loadTags");
store.dispatch("loadRunningRecords");
store.dispatch("loadRecords", { limit: 10, finished: true, visible: true });
}
};
</script>
<style lang="sass">
.center
text-align: center
.bold
font-weight: bold
#add-project-form
margin-top: 1rem
text-align: center
</style>