diff options
| author | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
|---|---|---|
| committer | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
| commit | dd136858f1ea40ad3c94191d647487fa4f31926c (patch) | |
| tree | 58fec94a7b2a12510c9664b21793f1ed560c6518 /web_src/js/components/ContextPopup.vue | |
| parent | Initial commit. (diff) | |
| download | forgejo-upstream/9.0.0.tar.xz forgejo-upstream/9.0.0.zip | |
Adding upstream version 9.0.0.upstream/9.0.0upstreamdebian
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/js/components/ContextPopup.vue')
| -rw-r--r-- | web_src/js/components/ContextPopup.vue | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue new file mode 100644 index 0000000..752a9a1 --- /dev/null +++ b/web_src/js/components/ContextPopup.vue @@ -0,0 +1,130 @@ +<script> +import {SvgIcon} from '../svg.js'; +import {contrastColor} from '../utils/color.js'; +import {GET} from '../modules/fetch.js'; +import {emojiHTML} from '../features/emoji.js'; +import {htmlEscape} from 'escape-goat'; + +const {appSubUrl, i18n} = window.config; + +export default { + components: {SvgIcon}, + data: () => ({ + loading: false, + issue: null, + i18nErrorOccurred: i18n.error_occurred, + i18nErrorMessage: null, + }), + computed: { + createdAt() { + return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}); + }, + + body() { + const body = this.issue.body.replace(/\n+/g, ' '); + if (body.length > 85) { + return `${body.substring(0, 85)}…`; + } + return body; + }, + + icon() { + if (this.issue.pull_request !== null) { + if (this.issue.pull_request.merged === true) { + return 'octicon-git-merge'; // Merged PR + } + + if (this.issue.state === 'closed') { + return 'octicon-git-pull-request-closed'; // Closed PR + } + + if (this.issue.pull_request.draft === true) { + return 'octicon-git-pull-request-draft'; // WIP PR + } + + return 'octicon-git-pull-request'; // Open PR + } + + if (this.issue.state === 'closed') { + return 'octicon-issue-closed'; // Closed issue + } + + return 'octicon-issue-opened'; // Open issue + }, + + color() { + if (this.issue.pull_request !== null) { + if (this.issue.pull_request.merged === true) { + return 'purple'; // Merged PR + } + + if (this.issue.pull_request.draft === true && this.issue.state === 'open') { + return 'grey'; // WIP PR + } + } + + if (this.issue.state === 'closed') { + return 'red'; // Closed issue + } + + return 'green'; // Open issue + }, + + labels() { + return this.issue.labels.map((label) => ({ + name: htmlEscape(label.name).replaceAll(/:[-+\w]+:/g, (emoji) => { + return emojiHTML(emoji.substring(1, emoji.length - 1)); + }), + color: `#${label.color}`, + textColor: contrastColor(`#${label.color}`), + })); + }, + }, + mounted() { + this.$refs.root.addEventListener('ce-load-context-popup', (e) => { + const data = e.detail; + if (!this.loading && this.issue === null) { + this.load(data); + } + }); + }, + methods: { + async load(data) { + this.loading = true; + this.i18nErrorMessage = null; + + try { + const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); + const respJson = await response.json(); + if (!response.ok) { + this.i18nErrorMessage = respJson.message ?? i18n.network_error; + return; + } + this.issue = respJson; + } catch { + this.i18nErrorMessage = i18n.network_error; + } finally { + this.loading = false; + } + }, + }, +}; +</script> +<template> + <div ref="root"> + <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/> + <div v-if="!loading && issue !== null" id="issue-info-popup"> + <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p> + <p><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p> + <p>{{ body }}</p> + <div class="labels-list"> + <!-- eslint-disable-next-line vue/no-v-html --> + <div v-for="label in labels" :key="label.name" class="ui label" :style="{ color: label.textColor, backgroundColor: label.color }" v-html="label.name"/> + </div> + </div> + <div v-if="!loading && issue === null"> + <p><small>{{ i18nErrorOccurred }}</small></p> + <p>{{ i18nErrorMessage }}</p> + </div> + </div> +</template> |