|
|
@ -1,5 +1,5 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { enumColor, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports' |
|
|
|
import { enumColor, ref, timeAgo, useCopy, useExpandedFormStoreOrThrow, useI18n, watch } from '#imports' |
|
|
|
|
|
|
|
|
|
|
|
const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } = |
|
|
|
const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } = |
|
|
|
useExpandedFormStoreOrThrow() |
|
|
|
useExpandedFormStoreOrThrow() |
|
|
@ -10,6 +10,35 @@ await loadCommentsAndLogs() |
|
|
|
|
|
|
|
|
|
|
|
const showBorder = ref(false) |
|
|
|
const showBorder = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { copy } = useCopy() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const hasEditPermission = $computed(() => isUIAllowed('commentEditable')) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const _contextMenu = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const contextMenu = computed({ |
|
|
|
|
|
|
|
get: () => _contextMenu.value, |
|
|
|
|
|
|
|
set: (val) => { |
|
|
|
|
|
|
|
if (hasEditPermission) { |
|
|
|
|
|
|
|
_contextMenu.value = val |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function copyComment(val: string) { |
|
|
|
|
|
|
|
if (!val) return |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
await copy(val) |
|
|
|
|
|
|
|
message.success(t('msg.success.commentCopied')) |
|
|
|
|
|
|
|
} catch (e: any) { |
|
|
|
|
|
|
|
message.error(e.message) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
watch( |
|
|
|
commentsAndLogs, |
|
|
|
commentsAndLogs, |
|
|
|
() => { |
|
|
|
() => { |
|
|
@ -26,31 +55,49 @@ watch( |
|
|
|
<div class="h-full flex flex-col w-full bg-[#eceff1] p-2"> |
|
|
|
<div class="h-full flex flex-col w-full bg-[#eceff1] p-2"> |
|
|
|
<div ref="commentsWrapperEl" class="flex-1 min-h-[100px] overflow-y-auto scrollbar-thin-dull p-2 space-y-2"> |
|
|
|
<div ref="commentsWrapperEl" class="flex-1 min-h-[100px] overflow-y-auto scrollbar-thin-dull p-2 space-y-2"> |
|
|
|
<a-skeleton v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" /> |
|
|
|
<a-skeleton v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" /> |
|
|
|
|
|
|
|
|
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs"> |
|
|
|
<div v-for="(log, idx) of commentsAndLogs" :key="log.id"> |
|
|
|
<MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" /> |
|
|
|
<a-dropdown :trigger="['contextmenu']" :overlay-class-name="`nc-dropdown-comment-context-menu-${idx}`"> |
|
|
|
|
|
|
|
<div class="flex gap-1 text-xs"> |
|
|
|
<div class="flex-1"> |
|
|
|
<MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" /> |
|
|
|
<p class="mb-1 caption edited-text text-[10px] text-gray-500"> |
|
|
|
|
|
|
|
{{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }} |
|
|
|
<div class="flex-1"> |
|
|
|
{{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }} |
|
|
|
<p class="mb-1 caption edited-text text-[10px] text-gray-500"> |
|
|
|
</p> |
|
|
|
{{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }} |
|
|
|
|
|
|
|
{{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }} |
|
|
|
<p |
|
|
|
</p> |
|
|
|
v-if="log.op_type === 'COMMENT'" |
|
|
|
|
|
|
|
class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded" |
|
|
|
<p |
|
|
|
:style="{ backgroundColor: enumColor.light[2] }" |
|
|
|
v-if="log.op_type === 'COMMENT'" |
|
|
|
> |
|
|
|
class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded" |
|
|
|
{{ log.description }} |
|
|
|
:style="{ backgroundColor: enumColor.light[2] }" |
|
|
|
</p> |
|
|
|
> |
|
|
|
|
|
|
|
{{ log.description }} |
|
|
|
<p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" /> |
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<p class="time text-right text-[10px] mb-0 mt-1 text-gray-500"> |
|
|
|
<p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" /> |
|
|
|
{{ timeAgo(log.created_at) }} |
|
|
|
|
|
|
|
</p> |
|
|
|
<p class="time text-right text-[10px] mb-0 mt-1 text-gray-500"> |
|
|
|
</div> |
|
|
|
{{ timeAgo(log.created_at) }} |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
|
|
|
<a-menu @click="contextMenu = false"> |
|
|
|
|
|
|
|
<a-menu-item key="copy-comment" @click="copyComment(log.description)"> |
|
|
|
|
|
|
|
<div v-e="['a:comment:copy']" class="nc-project-menu-item"> |
|
|
|
|
|
|
|
{{ t('activity.copyComment') }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
<a-menu-item key="edit-comment"> |
|
|
|
|
|
|
|
<div v-e="['a:comment:edit']" class="nc-project-menu-item"> |
|
|
|
|
|
|
|
{{ t('activity.editComment') }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
</a-menu> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</a-dropdown> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -59,10 +106,9 @@ watch( |
|
|
|
|
|
|
|
|
|
|
|
<div class="p-0"> |
|
|
|
<div class="p-0"> |
|
|
|
<div class="flex justify-center"> |
|
|
|
<div class="flex justify-center"> |
|
|
|
<!-- Comments only --> |
|
|
|
<!-- Comments only --> |
|
|
|
<a-checkbox v-model:checked="commentsOnly" v-e="['c:row-expand:comment-only']" @change="loadCommentsAndLogs"> |
|
|
|
<a-checkbox v-model:checked="commentsOnly" v-e="['c:row-expand:comment-only']" @change="loadCommentsAndLogs"> |
|
|
|
{{ $t('labels.commentsOnly') }} |
|
|
|
{{ $t('labels.commentsOnly') }} |
|
|
|
|
|
|
|
|
|
|
|
<span class="text-[11px] text-gray-500" /> |
|
|
|
<span class="text-[11px] text-gray-500" /> |
|
|
|
</a-checkbox> |
|
|
|
</a-checkbox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|