112 lines
3.7 KiB
Vue
112 lines
3.7 KiB
Vue
<script>
|
|
import Layout from '@layouts/main.vue'
|
|
import { parseAndFormatDateTime } from '@utils/format-date'
|
|
import store from '@state/store'
|
|
import { chunk, filter } from 'lodash'
|
|
import { mapState, mapGetters } from 'vuex'
|
|
// import axios from 'axios'
|
|
|
|
export default {
|
|
page: {
|
|
title: 'Quick Entries',
|
|
},
|
|
components: { Layout },
|
|
props: {
|
|
user: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
data: function() {
|
|
return {
|
|
showUnprocessedOnly: false,
|
|
}
|
|
},
|
|
computed: {
|
|
chunkedQuickEntries() {
|
|
var source = this.showUnprocessedOnly ? filter(this.quickEntries, (x) => x.processDate === null) : this.quickEntries
|
|
return chunk(source, 3)
|
|
},
|
|
...mapState('vehicles', ['vehicles', 'quickEntries']),
|
|
...mapGetters('vehicles', ['unprocessedQuickEntries']),
|
|
},
|
|
created() {
|
|
store.dispatch('vehicles/fetchQuickEntries', { force: true }).then((data) => {})
|
|
},
|
|
methods: {
|
|
parseAndFormatDateTime(date) {
|
|
return parseAndFormatDateTime(date)
|
|
},
|
|
markProcessed(entry) {
|
|
store.dispatch('vehicles/setQuickEntryAsProcessed', { id: entry.id }).then((data) => {})
|
|
},
|
|
imageModal(url) {
|
|
const h = this.$createElement
|
|
const vnode = h('p', { class: 'image' }, [h('img', { attrs: { src: url } })])
|
|
this.$buefy.modal.open({
|
|
content: [vnode],
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<h1 class="title">Quick Entries</h1>
|
|
<b-field>
|
|
<b-switch v-if="unprocessedQuickEntries.length" v-model="showUnprocessedOnly">Show unprocessed only</b-switch>
|
|
</b-field>
|
|
<div v-for="(chunk, index) in chunkedQuickEntries" :key="index" class="tile is-ancestor">
|
|
<div v-for="entry in chunk" :key="entry.id" class="tile is-parent" :class="{ 'is-4': quickEntries.length <= 3 }">
|
|
<div class="tile is-child">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-header-title">
|
|
{{ parseAndFormatDateTime(entry.createdAt) }}
|
|
</div>
|
|
<b-tag v-if="entry.processDate === null" class="is-align-content-center" type="is-primary">unprocessed</b-tag>
|
|
</div>
|
|
<div class="card-image">
|
|
<!-- prettier-ignore -->
|
|
<img
|
|
class="is-clickable"
|
|
:src="`/api/attachments/${entry.attachmentId}/file?access_token=${user.token}`"
|
|
alt="Placeholder image"
|
|
@click="imageModal(`/api/attachments/${entry.attachmentId}/file?access_token=${user.token}`)"
|
|
/>
|
|
</div>
|
|
<div class="card-content is-flex"
|
|
><p>{{ entry.comments }}</p></div
|
|
>
|
|
<footer class="card-footer">
|
|
<router-link v-if="entry.processDate === null && vehicles.length" :to="`/vehicles/${vehicles[0].id}/fillup`" class="card-footer-item"
|
|
>Create Fillup</router-link
|
|
>
|
|
<router-link v-if="entry.processDate === null && vehicles.length" :to="`/vehicles/${vehicles[0].id}/expense`" class="card-footer-item"
|
|
>Create Expense</router-link
|
|
>
|
|
<a v-if="entry.processDate === null" class="card-footer-item" @click="markProcessed(entry)">Mark Processed</a>
|
|
<p v-else>Processed on {{ parseAndFormatDateTime(entry.processDate) }}</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!quickEntries.length" class="box">
|
|
<p>No Quick Entries right now.</p>
|
|
</div>
|
|
</Layout>
|
|
</template>
|
|
|
|
<style module>
|
|
.card-equal-height {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
.card-equal-height .card-footer {
|
|
margin-top: auto;
|
|
}
|
|
</style>
|