stash

web/src/components/TimelineShippingCode.vue

@@ -3,20 +3,23 @@
         <i class="avatar | small">
             <font-awesome-icon icon="user"/>
         </i>
-        <!--span><a href="#">$USER</a> has changed state to <span
-            class="badge badge-pill badge-primary" :class="'bg-' + colorLookup">{{ lookupState.text }}</span> at <time
-            :datetime="timestamp">{{ timestamp }}</time>
-        </span-->
-        {{item}}
+        <span><a href="#">$USER</a> has claimed sipping code
+            <ClipboardButton class="btn btn-primary badge badge-pill" title="Copy shipping code to clipboard" :payload="item.code">{{ item.code }}
+                <font-awesome-icon icon="clipboard"/>
+            </ClipboardButton> of type <span class="badge badge-pill badge-secondary">{{ item.code_type }}</span> for this ticket at <time
+                :datetime="timestamp">{{ timestamp }}</time>
+        </span>
     </div>
 </template>
 
 <script>
 
 import {mapState} from "vuex";
+import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
 
 export default {
     name: 'TimelineShippingCode',
+    components: {ClipboardButton},
     props: {
         'item': {
             type: Object,
@@ -25,28 +28,6 @@ export default {
     },
     computed: {
         ...mapState(['state_options']),
-        lookupState: function () {
-            try {
-                if (this.item.state)
-                    return this.state_options.find(state => state.value === this.item.state);
-            } catch (e) {
-            }
-            return {
-                text: 'Unknown',
-                value: 'unknown'
-            };
-        },
-        colorLookup: function () {
-            if (this.item.state.startsWith('closed_')) {
-                return 'secondary';
-            } else if (this.item.state.startsWith('pending_')) {
-                return 'warning';
-            } else if (this.item.state.startsWith('waiting_')) {
-                return 'primary';
-            } else {
-                return 'danger';
-            }
-        },
         'timestamp': function () {
             return new Date(this.item.timestamp).toLocaleString();
         },