VolView/src/components/MessageItem.vue at baf4b506630cc9ce39b725914ff66770678b49c4 · Kitware/VolView · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<script lang="ts">
import { computed, defineComponent, PropType, toRefs } from 'vue';
import { useClipboard } from '@vueuse/core';
import { Message, MessageType } from '../store/messages';

const MessageTypeClass: Record<MessageType, string> = {
  [MessageType.Error]: 'error',
  [MessageType.Warning]: 'warn',
  [MessageType.Info]: 'info',
  [MessageType.Success]: '',
};

export default defineComponent({
  props: {
    message: {
      type: Object as PropType<Message>,
      required: true,
    },
  },
  setup(props) {
    const { message } = toRefs(props);
    const { copy, copied } = useClipboard();

    const headerClass = computed(() => {
      const type = MessageTypeClass[message.value.type];
      if (type?.length) {
        return `${type}-message`;
      }
      return '';
    });

    const copyBugReport = () => {
      const report = message.value.bugReport;
      if (report) copy(report);
    };

    return {
      headerClass,
      copied,
      copyBugReport,
    };
  },
});
</script>

<template>
  <v-expansion-panel>
    <v-expansion-panel-title :class="headerClass">
      <div class="header">
        <span>{{ message.title }}</span>
        <div>
          <v-btn
            v-if="message.bugReport"
            :prepend-icon="copied ? 'mdi-check' : 'mdi-content-copy'"
            variant="tonal"
            size="small"
            data-testid="copy-bug-report-button"
            @click.stop="copyBugReport"
          >
            Copy Bug Report
          </v-btn>
          <v-btn
            icon="mdi-delete"
            variant="text"
            size="small"
            class="mr-3"
            @click.stop="$emit('delete')"
          />
        </div>
      </div>
    </v-expansion-panel-title>
    <v-expansion-panel-text v-if="message.options.details">
      <div class="mt-4">
        <pre class="details">{{ message.options.details }}</pre>
      </div>
    </v-expansion-panel-text>
  </v-expansion-panel>
</template>

<style scoped>
.error-message {
  background-color: #ef5350;
}

.warn-message {
  background-color: #ffa726;
}

.info-message {
  background-color: #26c6da;
}

.header {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  user-select: text;
}

.details {
  white-space: break-spaces;
  user-select: text;
}
</style>