|
1 | | -<script lang="ts"> |
| 1 | +<script lang="ts" setup> |
2 | 2 | import {SvgIcon} from '../svg.ts'; |
3 | 3 | import {GET} from '../modules/fetch.ts'; |
| 4 | +import {computed, onMounted, ref} from 'vue'; |
| 5 | +import type {Issue} from '../types'; |
4 | 6 |
|
5 | 7 | const {appSubUrl, i18n} = window.config; |
6 | 8 |
|
7 | | -export default { |
8 | | - components: {SvgIcon}, |
9 | | - data: () => ({ |
10 | | - loading: false, |
11 | | - issue: null, |
12 | | - renderedLabels: '', |
13 | | - i18nErrorOccurred: i18n.error_occurred, |
14 | | - i18nErrorMessage: null, |
15 | | - }), |
16 | | - computed: { |
17 | | - createdAt() { |
18 | | - return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}); |
19 | | - }, |
| 9 | +const loading = ref(false); |
| 10 | +const issue = ref(null); |
| 11 | +const renderedLabels = ref(''); |
| 12 | +const i18nErrorOccurred = i18n.error_occurred; |
| 13 | +const i18nErrorMessage = ref(null); |
20 | 14 |
|
21 | | - body() { |
22 | | - const body = this.issue.body.replace(/\n+/g, ' '); |
23 | | - if (body.length > 85) { |
24 | | - return `${body.substring(0, 85)}…`; |
25 | | - } |
26 | | - return body; |
27 | | - }, |
| 15 | +const createdAt = computed(() => new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'})); |
| 16 | +const body = computed(() => { |
| 17 | + const body = issue.value.body.replace(/\n+/g, ' '); |
| 18 | + if (body.length > 85) { |
| 19 | + return `${body.substring(0, 85)}…`; |
| 20 | + } |
| 21 | + return body; |
| 22 | +}); |
28 | 23 |
|
29 | | - icon() { |
30 | | - if (this.issue.pull_request !== null) { |
31 | | - if (this.issue.state === 'open') { |
32 | | - if (this.issue.pull_request.draft === true) { |
33 | | - return 'octicon-git-pull-request-draft'; // WIP PR |
34 | | - } |
35 | | - return 'octicon-git-pull-request'; // Open PR |
36 | | - } else if (this.issue.pull_request.merged === true) { |
37 | | - return 'octicon-git-merge'; // Merged PR |
38 | | - } |
39 | | - return 'octicon-git-pull-request'; // Closed PR |
40 | | - } else if (this.issue.state === 'open') { |
41 | | - return 'octicon-issue-opened'; // Open Issue |
| 24 | +function getIssueIcon(issue: Issue) { |
| 25 | + if (issue.pull_request) { |
| 26 | + if (issue.state === 'open') { |
| 27 | + if (issue.pull_request.draft === true) { |
| 28 | + return 'octicon-git-pull-request-draft'; // WIP PR |
42 | 29 | } |
43 | | - return 'octicon-issue-closed'; // Closed Issue |
44 | | - }, |
| 30 | + return 'octicon-git-pull-request'; // Open PR |
| 31 | + } else if (issue.pull_request.merged === true) { |
| 32 | + return 'octicon-git-merge'; // Merged PR |
| 33 | + } |
| 34 | + return 'octicon-git-pull-request'; // Closed PR |
| 35 | + } else if (issue.state === 'open') { |
| 36 | + return 'octicon-issue-opened'; // Open Issue |
| 37 | + } |
| 38 | + return 'octicon-issue-closed'; // Closed Issue |
| 39 | +} |
45 | 40 |
|
46 | | - color() { |
47 | | - if (this.issue.pull_request !== null) { |
48 | | - if (this.issue.pull_request.draft === true) { |
49 | | - return 'grey'; // WIP PR |
50 | | - } else if (this.issue.pull_request.merged === true) { |
51 | | - return 'purple'; // Merged PR |
52 | | - } |
53 | | - } |
54 | | - if (this.issue.state === 'open') { |
55 | | - return 'green'; // Open Issue |
56 | | - } |
57 | | - return 'red'; // Closed Issue |
58 | | - }, |
59 | | - }, |
60 | | - mounted() { |
61 | | - this.$refs.root.addEventListener('ce-load-context-popup', (e) => { |
62 | | - const data = e.detail; |
63 | | - if (!this.loading && this.issue === null) { |
64 | | - this.load(data); |
65 | | - } |
66 | | - }); |
67 | | - }, |
68 | | - methods: { |
69 | | - async load(data) { |
70 | | - this.loading = true; |
71 | | - this.i18nErrorMessage = null; |
| 41 | +function getIssueColor(issue: Issue) { |
| 42 | + if (issue.pull_request) { |
| 43 | + if (issue.pull_request.draft === true) { |
| 44 | + return 'grey'; // WIP PR |
| 45 | + } else if (issue.pull_request.merged === true) { |
| 46 | + return 'purple'; // Merged PR |
| 47 | + } |
| 48 | + } |
| 49 | + if (issue.state === 'open') { |
| 50 | + return 'green'; // Open Issue |
| 51 | + } |
| 52 | + return 'red'; // Closed Issue |
| 53 | +} |
72 | 54 |
|
73 | | - try { |
74 | | - const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo |
75 | | - const respJson = await response.json(); |
76 | | - if (!response.ok) { |
77 | | - this.i18nErrorMessage = respJson.message ?? i18n.network_error; |
78 | | - return; |
79 | | - } |
80 | | - this.issue = respJson.convertedIssue; |
81 | | - this.renderedLabels = respJson.renderedLabels; |
82 | | - } catch { |
83 | | - this.i18nErrorMessage = i18n.network_error; |
84 | | - } finally { |
85 | | - this.loading = false; |
86 | | - } |
87 | | - }, |
88 | | - }, |
89 | | -}; |
| 55 | +const root = ref<HTMLElement | null>(null); |
| 56 | +
|
| 57 | +onMounted(() => { |
| 58 | + root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => { |
| 59 | + const data = e.detail; |
| 60 | + if (!loading.value && issue.value === null) { |
| 61 | + load(data); |
| 62 | + } |
| 63 | + }); |
| 64 | +}); |
| 65 | +
|
| 66 | +async function load(data) { |
| 67 | + loading.value = true; |
| 68 | + i18nErrorMessage.value = null; |
| 69 | +
|
| 70 | + try { |
| 71 | + const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo |
| 72 | + const respJson = await response.json(); |
| 73 | + if (!response.ok) { |
| 74 | + i18nErrorMessage.value = respJson.message ?? i18n.network_error; |
| 75 | + return; |
| 76 | + } |
| 77 | + issue.value = respJson.convertedIssue; |
| 78 | + renderedLabels.value = respJson.renderedLabels; |
| 79 | + } catch { |
| 80 | + i18nErrorMessage.value = i18n.network_error; |
| 81 | + } finally { |
| 82 | + loading.value = false; |
| 83 | + } |
| 84 | +} |
90 | 85 | </script> |
| 86 | + |
91 | 87 | <template> |
92 | 88 | <div ref="root"> |
93 | 89 | <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/> |
94 | 90 | <div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2"> |
95 | 91 | <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div> |
96 | 92 | <div class="flex-text-block"> |
97 | | - <svg-icon :name="icon" :class="['text', color]"/> |
| 93 | + <svg-icon :name="getIssueIcon(issue)" :class="['text', getIssueColor(issue)]"/> |
98 | 94 | <span class="issue-title tw-font-semibold tw-break-anywhere"> |
99 | 95 | {{ issue.title }} |
100 | 96 | <span class="index">#{{ issue.number }}</span> |
|
0 commit comments