|
|
|
@ -3,9 +3,17 @@ import { useExpandedFormStoreOrThrow } from '#imports'
|
|
|
|
|
import { timeAgo } from '~/utils' |
|
|
|
|
import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return' |
|
|
|
|
import MdiAccountIcon from '~icons/mdi/account-circle' |
|
|
|
|
import {colors} |
|
|
|
|
import { enumColor } from '~/utils' |
|
|
|
|
|
|
|
|
|
const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment,isYou } = useExpandedFormStoreOrThrow() |
|
|
|
|
const { |
|
|
|
|
loadCommentsAndLogs, |
|
|
|
|
commentsAndLogs, |
|
|
|
|
isCommentsLoading, |
|
|
|
|
commentsOnly, |
|
|
|
|
saveComment, |
|
|
|
|
isYou, |
|
|
|
|
comment, |
|
|
|
|
} = useExpandedFormStoreOrThrow() |
|
|
|
|
|
|
|
|
|
await loadCommentsAndLogs() |
|
|
|
|
</script> |
|
|
|
@ -15,17 +23,17 @@ await loadCommentsAndLogs()
|
|
|
|
|
<v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" /> |
|
|
|
|
|
|
|
|
|
<div v-else class="blue-grey"> |
|
|
|
|
<div v-for="log of commentsAndLogs" :key="log.id" class="d-flex"> |
|
|
|
|
<div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<MdiAccountIcon :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"/> |
|
|
|
|
|
|
|
|
|
<p class="mb-1 caption edited-text"> |
|
|
|
|
<MdiAccountIcon class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" /> |
|
|
|
|
<div class="flex-grow"> |
|
|
|
|
<p class="mb-1 caption edited-text text-[10px] text-gray"> |
|
|
|
|
{{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }} |
|
|
|
|
{{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }} |
|
|
|
|
</p> |
|
|
|
|
<!-- :style="{ background: colors[2] }" --> |
|
|
|
|
<p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" > |
|
|
|
|
<p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip w-full min-h-20px" |
|
|
|
|
:style="{ backgroundColor: enumColor.light[2] }"> |
|
|
|
|
{{ log.description }} |
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
@ -35,63 +43,34 @@ await loadCommentsAndLogs()
|
|
|
|
|
{{ timeAgo(log.created_at) }} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex"> |
|
|
|
|
<!– <v-list-item-icon class="ma-0 mr-2"> |
|
|
|
|
<v-icon :color="isYou(log.user) ? 'pink lighten-2' : 'blue lighten-2'"> |
|
|
|
|
mdi-account-circle |
|
|
|
|
</v-icon> |
|
|
|
|
</v-list-item-icon> –> |
|
|
|
|
<div class="flex-grow-1" style="min-width: 0"> |
|
|
|
|
<p class="mb-1 caption edited-text"> |
|
|
|
|
{{ // 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="caption mb-0 nc-chip" :style="{ background: colors[2] }"> |
|
|
|
|
{{ log.description }} |
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
<p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" /> |
|
|
|
|
|
|
|
|
|
<p class="time text-right mb-0"> |
|
|
|
|
{{ timeAgo(log.created_at) }} |
|
|
|
|
</p> –> |
|
|
|
|
</div> |
|
|
|
|
</div>--> |
|
|
|
|
</div> |
|
|
|
|
<!-- </div> --> |
|
|
|
|
|
|
|
|
|
<!-- <v-spacer /> |
|
|
|
|
<v-divider /> |
|
|
|
|
<div class="d-flex align-center justify-center"> |
|
|
|
|
<v-switch |
|
|
|
|
v-model="commentsOnly" |
|
|
|
|
v-t="['c:row-expand:comment-only']" |
|
|
|
|
class="mt-1" |
|
|
|
|
dense |
|
|
|
|
hide-details |
|
|
|
|
@change="getAuditsAndComments" |
|
|
|
|
> |
|
|
|
|
<template #label> |
|
|
|
|
<span class="caption grey--text">Comments only</span> |
|
|
|
|
</template> |
|
|
|
|
</v-switch> |
|
|
|
|
</div> --> |
|
|
|
|
<a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"><span class="text-xs">Comments only</span> |
|
|
|
|
</a-checkbox> |
|
|
|
|
<div class="flex-shrink-1 mt-2 d-flex pl-4"> |
|
|
|
|
<v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle </v-icon> |
|
|
|
|
<v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon> |
|
|
|
|
<a-input |
|
|
|
|
v-model="comment" |
|
|
|
|
v-model:value="comment" |
|
|
|
|
class="caption comment-box" |
|
|
|
|
:class="{ focus: showborder }" |
|
|
|
|
@focusin="showborder = true" |
|
|
|
|
@focusout="showborder = false" |
|
|
|
|
@keyup.enter.prevent="saveComment" |
|
|
|
|
> |
|
|
|
|
<template v-if="comment" #addonAfter> |
|
|
|
|
<MdiKeyboardReturnIcon class="text-sm" small @click="saveComment" /> |
|
|
|
|
<template #suffix> |
|
|
|
|
<MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" /> |
|
|
|
|
</template> |
|
|
|
|
</a-input> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped></style> |
|
|
|
|
<style scoped> |
|
|
|
|
:deep(.red.lighten-4) { |
|
|
|
|
@apply bg-red-100 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.green.lighten-4) { |
|
|
|
|
@apply bg-green-100 |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|