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. 81
      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

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

@ -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">
&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>
&lt;!&ndash; <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> &ndash;&gt;
</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&#45;&#45;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>
<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>

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

@ -37,7 +37,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
</script>
<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-grow" />
<component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
@ -65,9 +65,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
</div>
</div>
<div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
<div class="w-[250px]">
<Comments />
<div class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto" :class="{ active: commentsDrawer }">
<div class="w-[280px]">
<Comments v-if="commentsDrawer" />
</div>
</div>
</div>

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

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

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

@ -26,6 +26,7 @@
"socket.io-client": "^4.5.1",
"sortablejs": "^1.15.0",
"unique-names-generator": "^4.7.1",
"vue-dompurify-html": "^3.0.0",
"url": "^0.11.0",
"util": "^0.12.4",
"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;
border-radius: 8px;
}
</style>
<!--
/**

Loading…
Cancel
Save