mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
8 changed files with 186 additions and 20 deletions
@ -1,16 +1,97 @@
|
||||
<script setup lang="ts"> |
||||
const loadComments = async () => { |
||||
const data = await this.$api.utils.commentList({ |
||||
row_id: this.meta.columns |
||||
.filter((c) => c.pk) |
||||
.map((c) => this.localState[c.title]) |
||||
.join('___'), |
||||
fk_model_id: this.meta.id, |
||||
comments_only: this.commentsOnly, |
||||
}) |
||||
} |
||||
import { useExpandedFormStoreOrThrow } from '#imports' |
||||
import { timeAgo } from '~/utils' |
||||
import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return' |
||||
import MdiAccountIcon from '~icons/mdi/account-circle' |
||||
import {colors} |
||||
|
||||
const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment,isYou } = useExpandedFormStoreOrThrow() |
||||
|
||||
await loadCommentsAndLogs() |
||||
</script> |
||||
|
||||
<template></template> |
||||
<template> |
||||
<div> |
||||
<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"> |
||||
|
||||
|
||||
<MdiAccountIcon :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"/> |
||||
|
||||
<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> |
||||
<!-- :style="{ background: colors[2] }" --> |
||||
<p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" > |
||||
{{ 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 text-[10px] mb-0"> |
||||
{{ 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> --> |
||||
<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> |
||||
<a-input |
||||
v-model="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> |
||||
</a-input> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped></style> |
||||
|
@ -0,0 +1,8 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
|
||||
export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => { |
||||
return columns |
||||
?.filter((c) => c.pk) |
||||
.map((c) => row?.[c.title as string]) |
||||
.join('___') |
||||
} |
Loading…
Reference in new issue