Browse Source

feat(gui-v2): comment styling and functionality

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3025/head
Pranav C 2 years ago
parent
commit
d0537ee566
  1. 115
      packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
  2. 8
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
  3. 6
      packages/nc-gui-v2/composables/useExpandedFormStore.ts
  4. 1
      packages/nc-gui-v2/package.json
  5. 7
      packages/nc-gui-v2/plugins/domPurify.ts
  6. 1
      packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

115
packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue

@ -3,9 +3,17 @@ import { useExpandedFormStoreOrThrow } from '#imports'
import { timeAgo } from '~/utils' import { timeAgo } from '~/utils'
import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return' import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
import MdiAccountIcon from '~icons/mdi/account-circle' 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() await loadCommentsAndLogs()
</script> </script>
@ -15,83 +23,54 @@ await loadCommentsAndLogs()
<v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" /> <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
<div v-else class="blue-grey"> <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 '"/> <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"> <p class="mb-1 caption edited-text text-[10px] text-gray">
{{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }} {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
{{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }} {{ 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">
&lt;!&ndash; <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> &ndash;&gt;
<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>
&lt;!&ndash; <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" :style="{ background: colors[2] }"> <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 }} {{ log.description }}
</p> </p>
<p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" /> <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
<p class="time text-right mb-0"> <p class="time text-right text-[10px] mb-0">
{{ timeAgo(log.created_at) }} {{ timeAgo(log.created_at) }}
</p> &ndash;&gt; </p>
</div> </div>
</div>--> </div>
</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>
<a-input
v-model:value="comment"
class="caption comment-box"
:class="{ focus: showborder }"
@focusin="showborder = true"
@focusout="showborder = false"
@keyup.enter.prevent="saveComment"
>
<template #suffix>
<MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
</template>
</a-input>
</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&#45;&#45;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> </div>
</template> </template>
<style scoped></style> <style scoped>
:deep(.red.lighten-4) {
@apply bg-red-100
}
:deep(.green.lighten-4) {
@apply bg-green-100
}
</style>

8
packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@ -37,7 +37,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
</script> </script>
<template> <template>
<a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" body-style="padding:0" :closable="false"> <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{padding:0}" :closable="false">
<div class="flex p-2"> <div class="flex p-2">
<div class="flex-grow" /> <div class="flex-grow" />
<component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" /> <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
@ -65,9 +65,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
</div> </div>
</div> </div>
<div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }"> <div class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto" :class="{ active: commentsDrawer }">
<div class="w-[250px]"> <div class="w-[280px]">
<Comments /> <Comments v-if="commentsDrawer" />
</div> </div>
</div> </div>
</div> </div>

6
packages/nc-gui-v2/composables/useExpandedFormStore.ts

@ -19,11 +19,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
if (!row.value) return if (!row.value) return
const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]) const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
if (!rowId) return if (!rowId) return
commentsAndLogs.value = await api.utils.commentList({ commentsAndLogs.value = (await api.utils.commentList({
row_id: rowId, row_id: rowId,
fk_model_id: meta.value.id as string, fk_model_id: meta.value.id as string,
comments_only: commentsOnly.value, comments_only: commentsOnly.value,
}) }))?.reverse?.() || []
} }
const isYou = (email) => { const isYou = (email) => {
@ -34,7 +34,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
try { try {
if (!row.value) return if (!row.value || !comment.value) return
const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]) const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
if (!rowId) return if (!rowId) return

1
packages/nc-gui-v2/package.json

@ -26,6 +26,7 @@
"socket.io-client": "^4.5.1", "socket.io-client": "^4.5.1",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"unique-names-generator": "^4.7.1", "unique-names-generator": "^4.7.1",
"vue-dompurify-html": "^3.0.0",
"url": "^0.11.0", "url": "^0.11.0",
"util": "^0.12.4", "util": "^0.12.4",
"vue-i18n": "^9.1.10", "vue-i18n": "^9.1.10",

7
packages/nc-gui-v2/plugins/domPurify.ts

@ -0,0 +1,7 @@
import VueDOMPurifyHTML from 'vue-dompurify-html';
import { defineNuxtPlugin } from 'nuxt/app'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueDOMPurifyHTML)
})

1
packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

@ -678,6 +678,7 @@ h5 {
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>
<!-- <!--
/** /**

Loading…
Cancel
Save