150 lines
3.9 KiB
Vue
150 lines
3.9 KiB
Vue
<script setup>
|
|
import { format } from 'date-fns';
|
|
import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
|
|
import { computed } from 'vue';
|
|
const priorityMap = {
|
|
0: 'Low',
|
|
1: 'Medium',
|
|
2: 'High',
|
|
3: 'Urgent',
|
|
};
|
|
const props = defineProps({
|
|
issue: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
linkId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
const emit = defineEmits(['unlink-issue']);
|
|
const formattedDate = computed(() => {
|
|
return format(new Date(props.issue.createdAt), 'hh:mm a, MMM dd');
|
|
});
|
|
|
|
const assignee = computed(() => {
|
|
if (!props.issue.assignee) {
|
|
return null;
|
|
}
|
|
return {
|
|
name: props.issue.assignee.name,
|
|
thumbnail: props.issue.assignee?.avatarUrl || '',
|
|
};
|
|
});
|
|
|
|
const labels = computed(() => {
|
|
if (props.issue.labels.nodes.length) {
|
|
return props.issue.labels.nodes;
|
|
}
|
|
return [];
|
|
});
|
|
const priorityLabel = computed(() => {
|
|
return priorityMap[props.issue.priority];
|
|
});
|
|
const unlinkIssue = () => {
|
|
emit('unlink-issue', props.linkId);
|
|
};
|
|
|
|
const openIssue = () => {
|
|
window.open(props.issue.url, '_blank');
|
|
};
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
|
|
>
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row justify-between">
|
|
<div
|
|
class="flex items-center justify-center gap-1 px-2 py-1 border rounded-lg border-ash-200"
|
|
>
|
|
<fluent-icon
|
|
icon="linear"
|
|
size="19"
|
|
class="text-[#5E6AD2]"
|
|
view-box="0 0 19 19"
|
|
/>
|
|
<span class="text-xs font-medium text-ash-900">
|
|
{{ issue.identifier }}
|
|
</span>
|
|
</div>
|
|
<div class="flex">
|
|
<woot-button
|
|
variant="clear"
|
|
color-scheme="secondary"
|
|
@click="unlinkIssue"
|
|
>
|
|
<fluent-icon
|
|
icon="unlink"
|
|
size="14"
|
|
type="outline"
|
|
icon-lib="lucide"
|
|
/>
|
|
</woot-button>
|
|
<woot-button
|
|
variant="clear"
|
|
color-scheme="secondary"
|
|
@click="openIssue"
|
|
>
|
|
<fluent-icon icon="arrow-up-right" size="14" />
|
|
</woot-button>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="mt-2 text-sm font-medium text-ash-900">
|
|
{{ issue.title }}
|
|
</span>
|
|
<span v-if="issue.description" class="mt-1 text-sm text-ash-800">
|
|
{{
|
|
issue.description.length > 130
|
|
? issue.description.slice(0, 130) + '...'
|
|
: issue.description
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-row gap-2 divide-x divide-ash-200">
|
|
<user-avatar-with-name v-if="assignee" :user="assignee" />
|
|
<div class="flex items-center gap-1">
|
|
<fluent-icon
|
|
icon="status"
|
|
size="14"
|
|
:class="`text-[${issue.state.color}]`"
|
|
/>
|
|
<h6 class="text-xs text-slate-600">
|
|
{{ issue.state.name }}
|
|
</h6>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<fluent-icon
|
|
:icon="`priority-${priorityLabel.toLowerCase()}`"
|
|
size="14"
|
|
view-box="0 0 14 14"
|
|
/>
|
|
<h6 class="text-xs text-slate-600">{{ priorityLabel }}</h6>
|
|
</div>
|
|
</div>
|
|
<div v-if="labels.length" class="flex flex-wrap items-center gap-1">
|
|
<woot-label
|
|
v-for="label in labels"
|
|
:key="label.id"
|
|
:title="label.name"
|
|
:description="label.description"
|
|
:color="label.color"
|
|
variant="smooth"
|
|
small
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<span class="text-xs text-ash-800">
|
|
{{
|
|
$t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
|
|
createdAt: formattedDate,
|
|
})
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|