gitea/web_src/js/components/ContextPopup.vue

<script lang="ts" setup>
import {SvgIcon} from '../svg.ts';
import {GET} from '../modules/fetch.ts';
import {computed, onMounted, ref} from 'vue';
import type {Issue} from '../types';

const {appSubUrl, i18n} = window.config;

const loading = ref(false);
const issue = ref(null);
const renderedLabels = ref('');
const i18nErrorOccurred = i18n.error_occurred;
const i18nErrorMessage = ref(null);

const createdAt = computed(() => new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}));
const body = computed(() => {
  const body = issue.value.body.replace(/\n+/g, ' ');
  if (body.length > 85) {
    return `${body.substring(0, 85)}…`;
  }
  return body;
});

function getIssueIcon(issue: Issue) {
  if (issue.pull_request) {
    if (issue.state === 'open') {
      if (issue.pull_request.draft === true) {
        return 'octicon-git-pull-request-draft'; // WIP PR
      }
      return 'octicon-git-pull-request'; // Open PR
    } else if (issue.pull_request.merged === true) {
      return 'octicon-git-merge'; // Merged PR
    }
    return 'octicon-git-pull-request'; // Closed PR
  } else if (issue.state === 'open') {
    return 'octicon-issue-opened'; // Open Issue
  }
  return 'octicon-issue-closed'; // Closed Issue
}

function getIssueColor(issue: Issue) {
  if (issue.pull_request) {
    if (issue.pull_request.draft === true) {
      return 'grey'; // WIP PR
    } else if (issue.pull_request.merged === true) {
      return 'purple'; // Merged PR
    }
  }
  if (issue.state === 'open') {
    return 'green'; // Open Issue
  }
  return 'red'; // Closed Issue
}

const root = ref<HTMLElement | null>(null);

onMounted(() => {
  root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
    const data = e.detail;
    if (!loading.value && issue.value === null) {
      load(data);
    }
  });
});

async function load(data) {
  loading.value = true;
  i18nErrorMessage.value = null;

  try {
    const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
    const respJson = await response.json();
    if (!response.ok) {
      i18nErrorMessage.value = respJson.message ?? i18n.network_error;
      return;
    }
    issue.value = respJson.convertedIssue;
    renderedLabels.value = respJson.renderedLabels;
  } catch {
    i18nErrorMessage.value = i18n.network_error;
  } finally {
    loading.value = 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" class="tw-flex tw-flex-col tw-gap-2">
      <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
      <div class="flex-text-block">
        <svg-icon :name="getIssueIcon(issue)" :class="['text', getIssueColor(issue)]"/>
        <span class="issue-title tw-font-semibold tw-break-anywhere">
          {{ issue.title }}
          <span class="index">#{{ issue.number }}</span>
        </span>
      </div>
      <div v-if="body">{{ body }}</div>
      <!-- eslint-disable-next-line vue/no-v-html -->
      <div v-if="issue.labels.length" v-html="renderedLabels"/>
    </div>
    <div class="tw-flex tw-flex-col tw-gap-2" v-if="!loading && issue === null">
      <div class="tw-text-12">{{ i18nErrorOccurred }}</div>
      <div>{{ i18nErrorMessage }}</div>
    </div>
  </div>
</template>