first commit

ui/src/components/quickEntryDisplay.vue

@@ -0,0 +1,68 @@
+<script>
+import { mapGetters, mapState } from 'vuex'
+import { parseAndFormatDateTime } from '@utils/format-date'
+
+export default {
+  model: {
+    prop: 'quickEntry',
+    event: 'change',
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: function() {
+    return {
+      quickEntry: null,
+    }
+  },
+  computed: {
+    ...mapState('utils', ['isMobile']),
+    ...mapGetters('vehicles', ['unprocessedQuickEntries', 'processedQuickEntries']),
+  },
+  methods: {
+    parseAndFormatDateTime(date) {
+      return parseAndFormatDateTime(date)
+    },
+    showQuickEntry(entry) {
+      const h = this.$createElement
+      const vnode = h('p', { class: 'image' }, [
+        h('img', {
+          attrs: {
+            src: `/api/attachments/${entry.attachmentId}/file?access_token=${this.user.token}`,
+          },
+        }),
+      ])
+      this.$buefy.modal.open({
+        content: [vnode],
+      })
+      this.$emit('change', entry)
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="level">
+    <b-field class="level-right">
+      <b-select
+        v-if="unprocessedQuickEntries.length"
+        v-model="quickEntry"
+        placeholder="Refer quick entry"
+        expanded
+        @input="showQuickEntry($event)"
+      >
+        <option v-for="option in unprocessedQuickEntries" :key="option.id" :value="option">
+          Taken: {{ parseAndFormatDateTime(option.createdAt) }}
+        </option>
+      </b-select>
+      <p class="control">
+        <b-button v-if="quickEntry" type="is-primary" @click="showQuickEntry(quickEntry)"
+          >Show</b-button
+        ></p
+      >
+    </b-field>
+  </div></template
+>