63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<div class="reports-container">
|
|
<h1>{{ $t('reports.reports') }}</h1>
|
|
<div class="block">
|
|
<el-timeline class="timeline">
|
|
<timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
|
|
</el-timeline>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TimelineItem from './components/TimelineItem'
|
|
|
|
export default {
|
|
components: { TimelineItem },
|
|
computed: {
|
|
loading() {
|
|
return this.$store.state.users.loading
|
|
},
|
|
reports() {
|
|
return this.$store.state.reports.fetchedReports
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('FetchReports')
|
|
this.scroll(this.reports)
|
|
},
|
|
methods: {
|
|
scroll(reports) {
|
|
window.onscroll = () => {
|
|
const bottomOfWindow = document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight
|
|
|
|
if (bottomOfWindow) {
|
|
this.$store.dispatch('FetchReports')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel='stylesheet/scss' lang='scss' scoped>
|
|
.reports-container {
|
|
h1 {
|
|
margin: 22px 0 0 15px;
|
|
}
|
|
.el-timeline {
|
|
margin: 45px 45px 45px 19px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
@media
|
|
only screen and (max-width: 760px),
|
|
(min-device-width: 768px) and (max-device-width: 1024px) {
|
|
.reports-container {
|
|
h1 {
|
|
margin: 7px 10px 7px 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|