Browse Source

feat(gui-v2): add comments

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3025/head
Pranav C 2 years ago
parent
commit
d4fb7a2ec7
  1. 8
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 103
      packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
  3. 18
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
  4. 1
      packages/nc-gui-v2/composables/index.ts
  5. 65
      packages/nc-gui-v2/composables/useExpandedFormStore.ts
  6. 8
      packages/nc-gui-v2/utils/dataUtils.ts
  7. 1
      packages/nc-gui-v2/utils/index.ts
  8. 2
      packages/nocodb-sdk/src/lib/Api.ts

8
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -59,6 +59,7 @@ const contextMenu = ref(false)
const contextMenuTarget = ref(false)
const expandedFormDlg = ref(false)
const expandedFormRow = ref<Row>()
const visibleColLength = $computed(() => fields.value?.length)
@ -272,6 +273,11 @@ const onNavigate = (dir: NavigateDir) => {
break
}
}
const expandForm = (row: Row) => {
expandedFormRow.value = row
expandedFormDlg.value = true
}
</script>
<template>
@ -419,7 +425,7 @@ const onNavigate = (dir: NavigateDir) => {
</div>
<SmartsheetPagination />
<SmartsheetExpandedForm v-model="expandedFormDlg" />
<SmartsheetExpandedForm v-if="expandedFormRow" v-model="expandedFormDlg" :row="expandedFormRow" />
</div>
</template>

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

@ -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">
&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> -->
<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>

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

@ -1,25 +1,33 @@
<script setup lang="ts">
import { isVirtualCol } from 'nocodb-sdk'
import { useVModel } from '@vueuse/core'
import { computed, provide } from 'vue'
import { Ref, computed, provide, toRef } from 'vue'
import Comments from '~/components/smartsheet/expanded-form/Comments.vue'
import { useSmartsheetStoreOrThrow } from '~/composables'
import type { Row } from '~/composables'
import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
import { FieldsInj, IsFormInj, MetaInj } from '~/context'
import MdiDoorOpen from '~icons/mdi/door-open'
import MdiDoorClosed from '~icons/mdi/door-closed'
interface Props {
modelValue: string | null
row: Row
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const fields = inject(FieldsInj, ref([]))
const meta = inject(MetaInj)
const row = toRef(props, 'row')
const { meta } = useSmartsheetStoreOrThrow()
provide(IsFormInj, true)
// accept as a prop
const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
// const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
const { loadComments } = useProvideExpandedFormStore(meta, row)
const commentsDrawer = ref(false)
@ -58,7 +66,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
</div>
<div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
<div class="w-[250px]">dsdsssdsdsdd</div>
<div class="w-[250px]">
<Comments />
</div>
</div>
</div>
</a-card>

1
packages/nc-gui-v2/composables/index.ts

@ -20,3 +20,4 @@ export * from './useVirtualCell'
export * from './useColumnCreateStore'
export * from './useSmartsheetStore'
export * from './useLTARStore'
export * from './useExpandedFormStore'

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

@ -1,12 +1,71 @@
import { useInjectionState, } from '#imports'
import { useNuxtApp } from '#app'
import type { ColumnType, TableType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { useInjectionState } from '#imports'
import { useApi } from '~/composables/useApi'
import { extractPkFromRow } from '~/utils'
import { message } from 'ant-design-vue'
const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(() => {
const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
(meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
const { $e, $state } = useNuxtApp()
const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
// { useGlobalInstance: true },
const commentsOnly = ref(false)
const commentsAndLogs = ref([])
const comment = ref('')
},'expanded-form-store')
const loadCommentsAndLogs = async () => {
if (!row.value) return
const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
if (!rowId) return
commentsAndLogs.value = await api.utils.commentList({
row_id: rowId,
fk_model_id: meta.value.id as string,
comments_only: commentsOnly.value,
})
}
const isYou = (email) => {
return $state.user?.value?.email === email;
}
const saveComment = async () => {
try {
if (!row.value) return
const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
if (!rowId) return
await api.utils.commentRow({
fk_model_id: meta.value?.id as string,
row_id: rowId,
description: comment.value,
})
comment.value = ''
message.success('Comment added successfully')
await loadCommentsAndLogs()
} catch (e) {
message.error(e.message)
}
$e('a:row-expand:comment')
}
return {
commentsOnly,
loadCommentsAndLogs,
commentsAndLogs,
isCommentsLoading,
commentsError,
saveComment,
comment,isYou
}
},
'expanded-form-store',
)
export { useProvideExpandedFormStore }
export function useExpandedFormStoreOrThrow() {

8
packages/nc-gui-v2/utils/dataUtils.ts

@ -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('___')
}

1
packages/nc-gui-v2/utils/index.ts

@ -15,3 +15,4 @@ export * from './columnUtils'
export * from './validation'
export * from './viewUtils'
export * from './currencyUtils'
export * from './dataUtils'

2
packages/nocodb-sdk/src/lib/Api.ts

@ -3111,7 +3111,7 @@ export class Api<
* @response `200` `void` OK
*/
commentRow: (
data: { row_id: string; fk_model_id: string; comment: string },
data: { row_id: string; fk_model_id: string; description?: string },
params: RequestParams = {}
) =>
this.request<void, any>({

Loading…
Cancel
Save