add basic view for item history

web/src/components/inputs/AsyncButton.vue

@@ -24,7 +24,6 @@ export default {
     },
     methods: {
         async handleClick() {
-            console.log("AsyncButton.handleClick() called");
             if (this.task && typeof this.task === 'function') {
                 this.disabled = true;
                 try {

web/src/components/inputs/InputCombo.vue

@@ -1,39 +1,36 @@
 <template>
-    <div class="form-group">
-        <label :for="label">{{ label }}</label>
-        <div class="input-group">
-            <div class="input-group-prepend">
-                <button
-                    class="btn btn-outline-secondary dropdown-toggle"
-                    type="button"
-                    data-toggle="dropdown"
-                >Search
-                </button>
-                <div class="dropdown-menu">
-                    <a
-                        v-for="(option, index) in sortedOptions"
-                        :key="index"
-                        class="dropdown-item"
-                        @click="setInternalValue(option)"
-                        :class="{ active: option == selectedOption }"
-                    >
-                        {{ option[nameKey] }}
-                    </a>
-                </div>
-            </div>
-            <input type="text" class="form-control" :id="label" v-model="internalName">
-            <div class="input-group-append">
-                <button
-                    class="btn"
-                    :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
-                    v-if="!isValid"
-                    @click="addOption()"
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <button
+                class="btn btn-outline-secondary dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
+            >Search
+            </button>
+            <div class="dropdown-menu">
+                <a
+                    v-for="(option, index) in sortedOptions"
+                    :key="index"
+                    class="dropdown-item"
+                    @click="setInternalValue(option)"
+                    :class="{ active: option == selectedOption }"
                 >
-                    <font-awesome-icon icon="plus"/>
-                </button>
+                    {{ option[nameKey] }}
+                </a>
             </div>
-            <Addon type="Combo Box" :is-valid="isValid"/>
         </div>
+        <input type="text" class="form-control" :id="label" v-model="internalName">
+        <div class="input-group-append">
+            <button
+                class="btn"
+                :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
+                v-if="!isValid"
+                @click="addOption()"
+            >
+                <font-awesome-icon icon="plus"/>
+            </button>
+        </div>
+        <Addon type="Combo Box" :is-valid="isValid"/>
     </div>
 </template>
 

web/src/components/inputs/InputPhoto.vue

@@ -2,9 +2,10 @@
     <div>
         <img
             v-if="!capturing"
-            class="img-fluid rounded mx-auto d-block mb-3 img-preview"
+            :class="imgClass || ['img-fluid', 'rounded', 'mx-auto', 'd-block', 'mb-3', 'img-preview']"
             :src="dataImage"
             alt="Image not available."
+            @click="e=>$emit('detail', e)"
         />
         <video
             v-if="capturing"
@@ -44,19 +45,21 @@
 </template>
 
 <script>
-import {mapMutations} from 'vuex';
+import {mapActions, mapMutations} from 'vuex';
 
 export default {
     name: 'InputPhoto',
-    props: ['model', 'field', 'onCapture'],
+    props: ['model', 'field', 'onCapture', 'imgClass'],
     data: () => ({
         capturing: false,
         streaming: false,
         stream: undefined,
         dataImage: undefined
     }),
+    emits: ['detail'],
     methods: {
         ...mapMutations(['createToast']),
+        ...mapActions(['fetchImage']),
         openStream() {
             if (!this.capturing) {
                 this.capturing = true;