Browse Source

Merge branch 'develop' into feat/gui-v2-is-locked

pull/3209/head
Wing-Kam Wong 2 years ago
parent
commit
137293a224
  1. 8
      packages/nc-gui-v2/app.vue
  2. 41
      packages/nc-gui-v2/assets/style-v2.scss
  3. 3
      packages/nc-gui-v2/components.d.ts
  4. 12
      packages/nc-gui-v2/components/cell/Checkbox.vue
  5. 119
      packages/nc-gui-v2/components/cell/Percent.vue
  6. 2
      packages/nc-gui-v2/components/cell/attachment/Carousel.vue
  7. 12
      packages/nc-gui-v2/components/cell/attachment/Modal.vue
  8. 46
      packages/nc-gui-v2/components/cell/attachment/index.vue
  9. 64
      packages/nc-gui-v2/components/cell/attachment/utils.ts
  10. 18
      packages/nc-gui-v2/components/dashboard/settings/Modal.vue
  11. 5
      packages/nc-gui-v2/components/general/PreviewAs.vue
  12. 189
      packages/nc-gui-v2/components/shared-view/Form.vue
  13. 10
      packages/nc-gui-v2/components/shared-view/Grid.vue
  14. 3
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  15. 2
      packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
  16. 85
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
  17. 23
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  18. 12
      packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
  19. 17
      packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
  20. 14
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  21. 44
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  22. 6
      packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
  23. 4
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  24. 2
      packages/nc-gui-v2/components/virtual-cell/Lookup.vue
  25. 5
      packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
  26. 5
      packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
  27. 1
      packages/nc-gui-v2/composables/index.ts
  28. 4
      packages/nc-gui-v2/composables/useColumn.ts
  29. 30
      packages/nc-gui-v2/composables/useLTARStore.ts
  30. 197
      packages/nc-gui-v2/composables/useSharedFormViewStore.ts
  31. 16
      packages/nc-gui-v2/composables/useSharedView.ts
  32. 97
      packages/nc-gui-v2/composables/useSmartsheetStore.ts
  33. 62
      packages/nc-gui-v2/composables/useViewColumns.ts
  34. 1
      packages/nc-gui-v2/context/index.ts
  35. 9
      packages/nc-gui-v2/layouts/base.vue
  36. 17
      packages/nc-gui-v2/layouts/shared-view.vue
  37. 8
      packages/nc-gui-v2/lib/types.ts
  38. 5
      packages/nc-gui-v2/middleware/auth.global.ts
  39. 100
      packages/nc-gui-v2/package-lock.json
  40. 2
      packages/nc-gui-v2/package.json
  41. 15
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  42. 16
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
  43. 38
      packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
  44. 26
      packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
  45. 2
      packages/nc-gui-v2/pages/forgot-password.vue
  46. 186
      packages/nc-gui-v2/pages/index/index.vue
  47. 2
      packages/nc-gui-v2/pages/signin.vue
  48. 4
      packages/nc-gui-v2/pages/signup/[[token]].vue
  49. 38
      packages/nocodb-sdk/src/lib/Api.ts
  50. 5
      packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
  51. 114
      scripts/sdk/swagger.json

8
packages/nc-gui-v2/app.vue

@ -1,5 +1,11 @@
<script setup lang="ts">
const route = useRoute()
const disableBaseLayout = $computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
</script>
<template>
<NuxtLayout name="base">
<NuxtLayout :name="disableBaseLayout ? false : 'base'">
<NuxtPage />
</NuxtLayout>
</template>

41
packages/nc-gui-v2/assets/style-v2.scss

@ -17,6 +17,10 @@ main {
@apply m-0 h-full w-full bg-white dark:(bg-black text-white);
}
html {
overflow-y: auto !important;
}
main {
@apply flex-0 w-full relative scrollbar-thin-dull;
overflow-x: hidden;
@ -43,11 +47,6 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
@apply color-transition;
}
html {
overflow-y: auto !important;
}
// menu item styling
.nc-menu-item {
@apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
@ -57,6 +56,16 @@ html {
}
}
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
&:hover {
.nc-icon {
@apply text-pink-500;
}
}
}
.nc-sidebar-right-item {
@apply relative flex items-center;
@ -152,9 +161,9 @@ html {
@apply transition-opacity duration-300 ease-in-out;
}
.page-enter,
.page-enter-active,
.page-leave-active,
.layout-enter,
.layout-enter-active,
.layout-leave-active {
@apply opacity-0;
}
@ -182,4 +191,22 @@ html {
.glow-enter,
.glow-leave-active {
@apply opacity-0;
}
.scaling-btn {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
}
&:active::after {
@apply ring ring-pink-500;
}
}

3
packages/nc-gui-v2/components.d.ts vendored

@ -103,6 +103,7 @@ declare module '@vue/runtime-core' {
MdiCheck: typeof import('~icons/mdi/check')['default']
MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
MdiClose: typeof import('~icons/mdi/close')['default']
MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
@ -134,6 +135,7 @@ declare module '@vue/runtime-core' {
MdiFunction: typeof import('~icons/mdi/function')['default']
MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
MdiGithub: typeof import('~icons/mdi/github')['default']
MdiGridLarge: typeof import('~icons/mdi/grid-large')['default']
MdiHeart: typeof import('~icons/mdi/heart')['default']
MdiHook: typeof import('~icons/mdi/hook')['default']
MdiInformation: typeof import('~icons/mdi/information')['default']
@ -154,6 +156,7 @@ declare module '@vue/runtime-core' {
MdiPlus: typeof import('~icons/mdi/plus')['default']
MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
MdiPlusRoundedOutline: typeof import('~icons/mdi/plus-rounded-outline')['default']
MdiRefresh: typeof import('~icons/mdi/refresh')['default']
MdiReload: typeof import('~icons/mdi/reload')['default']
MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']

12
packages/nc-gui-v2/components/cell/Checkbox.vue

@ -1,6 +1,5 @@
<script setup lang="ts">
import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
import { EditModeInj } from '~/context'
import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
interface Props {
modelValue?: boolean | undefined | number
@ -20,7 +19,7 @@ const column = inject(ColumnInj)
const isForm = inject(IsFormInj)
const editEnabled = inject(EditModeInj)
const readOnly = inject(ReadonlyInj)
const checkboxMeta = $computed(() => {
return {
@ -34,14 +33,17 @@ const checkboxMeta = $computed(() => {
})
function onClick() {
if (editEnabled) {
if (!readOnly) {
vModel = !vModel
}
}
</script>
<template>
<div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
<div
class="flex"
:class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel && !readOnly, 'opacity-0': readOnly && !vModel }"
>
<div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
<component
:is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"

119
packages/nc-gui-v2/components/cell/Percent.vue

@ -1,69 +1,76 @@
<script setup lang="ts">
import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
import { EditModeInj } from '~/context'
import { EditModeInj, inject } from '#imports'
interface Props {
modelValue: number | string | null | undefined
}
const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const editEnabled = inject(EditModeInj)
const column = inject(ColumnInj)
const percent = ref()
const isEdited = ref(false)
const percentType = computed(() => column?.value?.meta?.precision || 0)
const percentStep = computed(() => getPercentStep(percentType.value))
const localState = computed({
get: () => {
return renderPercent(modelValue, percentType.value, !isEdited.value)
},
set: (val) => {
if (val === null) val = 0
if (isValidPercent(val, column?.value?.meta?.negative)) {
percent.value = val / 100
}
},
})
function onKeyDown(evt: KeyboardEvent) {
isEdited.value = true
return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
}
function onBlur() {
if (isEdited.value) {
emit('update:modelValue', percent.value)
isEdited.value = false
}
}
function onKeyDownEnter() {
if (isEdited.value) {
emit('update:modelValue', percent.value)
isEdited.value = false
}
}
const vModel = useVModel(props, 'modelValue', emits)
</script>
<template>
<input
v-if="isEdited"
v-model="localState"
type="number"
:step="percentStep"
@keydown="onKeyDown"
@blur="onBlur"
@keydown.enter="onKeyDownEnter"
/>
<input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
<span v-else>{{ localState }}</span>
<input v-if="editEnabled" v-model="vModel" type="number" />
<span v-else>{{ vModel }}</span>
</template>
<!-- <script setup lang="ts">
import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
import { EditModeInj } from '~/context'
interface Props {
modelValue: number | string | null | undefined
}
const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const editEnabled = inject(EditModeInj)
const column = inject(ColumnInj)
const percent = ref()
const isEdited = ref(false)
const percentType = computed(() => column?.value?.meta?.precision || 0)
const percentStep = computed(() => getPercentStep(percentType.value))
const localState = computed({
get: () => {
return renderPercent(modelValue, percentType.value, !isEdited.value)
},
set: (val) => {
if (val === null) val = 0
if (isValidPercent(val, column?.value?.meta?.negative)) {
percent.value = val / 100
}
},
})
function onKeyDown(evt: KeyboardEvent) {
isEdited.value = true
return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
}
function onBlur() {
if (isEdited.value) {
emit('update:modelValue', percent.value)
isEdited.value = false
}
}
function onKeyDownEnter() {
if (isEdited.value) {
emit('update:modelValue', percent.value)
isEdited.value = false
}
}
</script>
<template>
<input
v-if="isEdited"
v-model="localState"
type="number"
:step="percentStep"
@keydown="onKeyDown"
@blur="onBlur"
@keydown.enter="onKeyDownEnter"
/>
<input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
<span v-else>{{ localState }}</span>
</template> -->

2
packages/nc-gui-v2/components/cell/attachment/Carousel.vue

@ -92,7 +92,7 @@ onClickOutside(carouselRef, () => {
<div v-for="item of imageItems" :key="item.url">
<div
:style="{ backgroundImage: `url('${item.url}')` }"
:style="{ backgroundImage: `url('${item.url || item.data}')` }"
class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
/>
</div>

12
packages/nc-gui-v2/components/cell/attachment/Modal.vue

@ -10,7 +10,6 @@ const {
open,
isLoading,
isPublicGrid,
isForm,
isReadonly,
visibleItems,
modalVisible,
@ -34,6 +33,8 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
const { isSharedForm } = useSmartsheetStoreOrThrow()
onKeyDown('Escape', () => {
modalVisible.value = false
isOverDropZone.value = false
@ -61,7 +62,7 @@ function onClick(item: Record<string, any>) {
<template #title>
<div class="flex gap-4">
<div
v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
class="nc-attach-file group"
@click="open"
>
@ -78,7 +79,7 @@ function onClick(item: Record<string, any>) {
</template>
<div ref="dropZoneRef">
<template v-if="!isReadonly && !dragging">
<template v-if="isSharedForm || (!isReadonly && !dragging)">
<general-overlay
v-model="isOverDropZone"
inline
@ -94,9 +95,8 @@ function onClick(item: Record<string, any>) {
<a-card class="nc-attachment-item group">
<a-tooltip v-if="!isReadonly">
<template #title> Remove File </template>
<MdiCloseCircle
v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
class="nc-attachment-remove"
@click.stop="removeFile(i)"
/>
@ -116,7 +116,7 @@ function onClick(item: Record<string, any>) {
>
<div
v-if="isImage(item.title, item.mimetype)"
:style="{ backgroundImage: `url('${item.url}')` }"
:style="{ backgroundImage: `url('${item.url || item.data}')` }"
class="w-full h-full bg-contain bg-center bg-no-repeat"
@click.stop="onClick(item)"
/>

46
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -4,7 +4,16 @@ import { useProvideAttachmentCell } from './utils'
import { useSortable } from './sort'
import Modal from './Modal.vue'
import Carousel from './Carousel.vue'
import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
import {
computed,
isImage,
openLink,
ref,
useDropZone,
useSmartsheetRowStoreOrThrow,
useSmartsheetStoreOrThrow,
watch,
} from '#imports'
interface Props {
modelValue: string | Record<string, any>[] | null
@ -23,13 +32,26 @@ const sortableRef = ref<HTMLDivElement>()
const { cellRefs } = useSmartsheetStoreOrThrow()!
const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
useProvideAttachmentCell(updateModelValue)
const {
column,
modalVisible,
attachments,
visibleItems,
onDrop,
isLoading,
open,
FileIcon,
selectedImage,
isReadonly,
storedFiles,
} = useProvideAttachmentCell(updateModelValue)
const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
const { state: rowState } = useSmartsheetRowStoreOrThrow()
const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
/** on new value, reparse our stored attachments */
@ -37,7 +59,11 @@ watch(
() => modelValue,
(nextModel) => {
if (nextModel) {
attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
try {
attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
} catch {
attachments.value = []
}
}
},
{ immediate: true },
@ -53,13 +79,23 @@ onKeyDown('Escape', () => {
modalVisible.value = false
isOverDropZone.value = false
})
/** sync storedFiles state with row state */
watch(
() => storedFiles.value.length || 0,
() => {
rowState.value[column.value.title!] = storedFiles.value
},
)
const { isSharedForm } = useSmartsheetStoreOrThrow()
</script>
<template>
<div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
<Carousel />
<template v-if="!isReadonly && !dragging && !!currentCellRef">
<template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
<general-overlay
v-model="isOverDropZone"
inline

64
packages/nc-gui-v2/components/cell/attachment/utils.ts

@ -1,7 +1,7 @@
import { message } from 'ant-design-vue'
import FileSaver from 'file-saver'
import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
import { ColumnInj, EditModeInj, IsPublicInj, MetaInj, ReadonlyInj } from '~/context'
import { isImage } from '~/utils'
import { NOCO } from '~/lib'
import MdiPdfBox from '~icons/mdi/pdf-box'
@ -10,11 +10,17 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
interface AttachmentProps {
data?: any
file: File
title: string
}
export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
(updateModelValue: (data: string | Record<string, any>[]) => void) => {
const isReadonly = inject(ReadonlyInj, false)
const isPublicForm = inject('isPublicForm', false)
const isPublic = inject(IsPublicInj, ref(false))
const isForm = inject('isForm', false)
@ -27,7 +33,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
const editEnabled = inject(EditModeInj, ref(false))
const storedFiles = ref<{ title: string; file: File }[]>([])
/** keep user selected files data (in base encoded string format) and meta details */
const storedFilesData = ref<{ title: string; file: File }[]>([])
/** keep user selected File object */
const storedFiles = ref<File[]>([])
const attachments = ref<File[]>([])
@ -43,10 +53,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
/** remove a file from our stored attachments (either locally stored or saved ones) */
function removeFile(i: number) {
if (isPublicForm) {
if (isPublic.value) {
storedFilesData.value.splice(i, 1)
storedFiles.value.splice(i, 1)
updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
} else {
attachments.value.splice(i, 1)
updateModelValue(attachments.value)
@ -57,19 +68,33 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
async function onFileSelect(selectedFiles: FileList | File[]) {
if (!selectedFiles.length || isPublicGrid) return
if (isPublicForm) {
storedFiles.value.push(
...Array.from(selectedFiles).map((file) => {
const res = { file, title: file.name }
if (isImage(file.name, (file as any).mimetype)) {
const reader = new FileReader()
reader.readAsDataURL(file)
}
return res
}),
if (isPublic.value) {
storedFiles.value.push(...selectedFiles)
storedFilesData.value.push(
...(await Promise.all<AttachmentProps>(
Array.from(selectedFiles).map(
(file) =>
new Promise<AttachmentProps>((resolve) => {
const res: AttachmentProps = { file, title: file.name }
if (isImage(file.name, (file as any).mimetype)) {
const reader = new FileReader()
reader.onload = (e: any) => {
res.data = e.target?.result
resolve(res)
}
reader.onerror = () => {
resolve(res)
}
reader.readAsDataURL(file)
} else {
resolve(res)
}
}),
),
)),
)
return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
return updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
}
const newAttachments = []
@ -124,15 +149,15 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
}
/** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
const visibleItems = computed<any[]>(() => (isPublicForm ? storedFiles.value : attachments.value) || ([] as any[]))
const visibleItems = computed<any[]>(() => (isPublic.value ? storedFilesData.value : attachments.value) || ([] as any[]))
watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
return {
attachments,
storedFiles,
storedFilesData,
visibleItems,
isPublicForm,
isPublic,
isForm,
isPublicGrid,
isReadonly,
@ -149,6 +174,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
downloadFile,
updateModelValue,
selectedImage,
storedFiles,
}
},
'useAttachmentCell',

18
packages/nc-gui-v2/components/dashboard/settings/Modal.vue

@ -13,6 +13,7 @@ import TeamFillIcon from '~icons/ri/team-fill'
import MultipleTableIcon from '~icons/mdi/table-multiple'
import NootbookOutline from '~icons/mdi/notebook-outline'
import { useUIPermission, useVModel, watch } from '#imports'
import MdiCloseIcon from '~icons/mdi/close'
interface Props {
modelValue: boolean
@ -130,8 +131,21 @@ watch(
</script>
<template>
<a-modal v-model:visible="vModel" :footer="null" width="max(90vw, 600px)" @cancel="emits('update:modelValue', false)">
<a-typography-title class="ml-4 mb-2 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
<a-modal
v-model:visible="vModel"
:footer="null"
width="max(90vw, 600px)"
:closable="false"
@cancel="emits('update:modelValue', false)"
>
<div class="flex flex-row justify-between w-full items-center mb-1">
<a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
<a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
<template #icon>
<MdiCloseIcon class="cursor-pointer mt-1" />
</template>
</a-button>
</div>
<a-layout class="mt-3 modal-body flex">
<!-- Side tabs -->

5
packages/nc-gui-v2/components/general/PreviewAs.vue

@ -7,6 +7,7 @@ import MdiEyeOutline from '~icons/mdi/eye-outline'
import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
const { float } = defineProps<{ float?: boolean }>()
const position = useState('preview-as-position', () => ({
y: `${window.innerHeight - 100}px`,
x: `${window.innerWidth / 2 - 250}px`,
@ -98,10 +99,6 @@ watch(previewAs, () => window.location.reload())
</template>
<style scoped>
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
}
.floating-reset-btn {
@apply z-1000 index-100 fixed text-white
@apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;

189
packages/nc-gui-v2/components/shared-view/Form.vue

@ -1,12 +1,20 @@
<script setup lang="ts">
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { FieldsInj, MetaInj } from '#imports'
import { useSharedFormStoreOrThrow } from '#imports'
const fields = inject(FieldsInj, ref([]))
const meta = inject(MetaInj)
const { sharedView } = useSharedView()
const formState = ref(fields.value.reduce((a, v) => ({ ...a, [v.title]: undefined }), {}))
const {
sharedFormView,
submitForm,
v$,
formState,
notFound,
formColumns,
submitted,
secondsRemain,
passwordDlg,
password,
loadSharedView,
} = useSharedFormStoreOrThrow()
function isRequired(_columnObj: Record<string, any>, required = false) {
let columnObj = _columnObj
@ -15,7 +23,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
columnObj.colOptions &&
columnObj.colOptions.type === RelationTypes.BELONGS_TO
) {
columnObj = fields.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
columnObj = formColumns.value?.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
string,
any
>
@ -23,60 +31,129 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
return required || (columnObj && columnObj.rqd && !columnObj.cdf)
}
useSmartsheetStoreOrThrow()
useProvideSmartsheetRowStore(meta, formState)
const formRef = ref()
</script>
<template>
<div class="flex flex-col my-4 space-y-2 mx-32 items-center">
<div class="flex w-2/3 flex-col mt-10">
<div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
<a-typography-title class="border-b-1 border-gray-100 w-full pb-3 nc-share-form-title" :level="1">
{{ sharedView.view.heading }}
</a-typography-title>
<a-typography class="pl-1 text-sm nc-share-form-desc">{{ sharedView.view.subheading }}</a-typography>
</div>
<div class="bg-primary/100 !h-[100vh] overflow-auto w-100 flex flex-col">
<div>
<img src="~/assets/img/icons/512x512-trans.png" width="30" class="mx-4 mt-2" />
</div>
<div class="m-4 mt-2 bg-white rounded p-2 flex-1">
<a-alert v-if="notFound" type="warning" class="mx-auto mt-10 max-w-[300px]" message="Not found"> </a-alert>
<a-form ref="formRef" :model="formState" class="mt-8 pb-12 mb-8 px-3 bg-gray-50 rounded-md">
<div v-for="(field, index) in fields" :key="index" class="flex flex-col mt-4 px-10 pt-6 space-y-2">
<div class="flex">
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
<SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
<template v-else-if="submitted">
<div class="flex justify-center">
<div v-if="sharedFormView" style="min-width: 350px" class="mt-3">
<a-alert type="success" outlined :message="sharedFormView.success_msg || 'Successfully submitted form data'">
</a-alert>
<p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds
</p>
<div v-if="sharedFormView.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
</div>
</div>
<a-form-item
v-if="isVirtualCol(field)"
class="ma-0 gap-0 pa-0"
:class="`nc-form-field-${field.title}`"
:name="field.title"
:rules="[{ required: field.required, message: `${field.title} is required` }]"
>
<SmartsheetVirtualCell v-model="formState[field.title]" class="nc-input" :column="field" />
</a-form-item>
<a-form-item
v-else
class="ma-0 gap-0 pa-0"
:class="`nc-form-field-${field.title}`"
:name="field.title"
:rules="[{ required: field.required, message: `${field.title} is required` }]"
>
<SmartsheetCell v-model="formState[field.title]" class="nc-input" :column="field" :edit-enabled="true" />
</a-form-item>
</div>
</a-form>
</template>
<div v-else-if="sharedFormView" class="">
<a-row class="justify-center">
<a-col :md="20">
<div>
<div class="h-full ma-0 rounded-b-0">
<div
class="nc-form-wrapper pb-10 rounded shadow-xl"
style="background: linear-gradient(180deg, #dbdbdb 0, #dbdbdb 200px, white 200px)"
>
<div class="mt-10 flex items-center justify-center flex-col">
<div class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex">
<div class="flex items-center justify-center grow h-[100px]">
<img src="~/assets/img/icon.png" width="50" class="mx-4" />
<span class="text-4xl font-weight-bold">NocoDB</span>
</div>
</div>
</div>
<div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded">
<h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1">
{{ sharedFormView.heading }}
</h2>
<div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
{{ sharedFormView.subheading }}
</div>
<div class="h-100">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2">
<div class="flex">
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
<SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
</div>
<div v-if="isVirtualCol(field)" class="mt-0">
<SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
<div v-else class="mt-0">
<SmartsheetCell
v-model="formState[field.title]"
class="nc-input"
:column="field"
:edit-enabled="true"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
<div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
</div>
<div class="text-center my-9">
<a-button type="primary" size="large" @click="submitForm(formState, additionalState)"> Submit</a-button>
</div>
</div>
</div>
</div>
</div>
</div>
</a-col>
</a-row>
</div>
</div>
<a-modal
v-model:visible="passwordDlg"
:closable="false"
width="28rem"
centered
:footer="null"
:mask-closable="false"
@close="passwordDlg = false"
>
<div class="w-full flex flex-col">
<a-typography-title :level="4">This shared view is protected</a-typography-title>
<a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
<a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
<a-input-password v-model:value="password" placeholder="Enter password" />
</a-form-item>
<a-button type="primary" html-type="submit">Unlock</a-button>
</a-form>
</div>
</a-modal>
</div>
</template>
@ -84,4 +161,8 @@ const formRef = ref()
.nc-input {
@apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
}
.nc-form-wrapper {
@apply my-0 mx-auto max-w-[800px];
}
</style>

10
packages/nc-gui-v2/components/shared-view/Grid.vue

@ -4,23 +4,23 @@ import type { TableType } from 'nocodb-sdk'
import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
const { sharedView, meta, columns } = useSharedView()
const { sharedView, meta } = useSharedView()
const reloadEventHook = createEventHook<void>()
provide(ReloadViewDataHookInj, reloadEventHook)
provide(ReadonlyInj, ref(true))
provide(ReadonlyInj, true)
provide(MetaInj, meta)
provide(ActiveViewInj, sharedView)
provide(FieldsInj, columns)
provide(FieldsInj, ref(meta.value.columns as any[]))
provide(IsPublicInj, ref(true))
useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
</script>
<template>
<div class="nc-container flex flex-col h-full mt-4 px-6">
<div class="nc-container flex flex-col h-full mt-1.5 px-12">
<SmartsheetToolbar />
<SmartsheetGrid class="px-3" />
<SmartsheetGrid />
</div>
</template>

3
packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@ -99,7 +99,7 @@ useEventListener(document, 'click', handleClose)
</script>
<template>
<div ref="editOrAddRef" class="min-w-[400px] max-h-[95vh] bg-white shadow p-6 overflow-auto" @click.stop>
<div ref="editOrAddRef" class="min-w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border" @click.stop>
<a-form v-if="formState" v-model="formState" name="column-create-or-edit" layout="vertical">
<div class="flex flex-col gap-2">
<a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
@ -132,7 +132,6 @@ useEventListener(document, 'click', handleClose)
v-model:value="formState"
/>
<SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
<SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
<SmartsheetColumnSelectOptions
v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
v-model:value="formState"

2
packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue

@ -1,3 +1,5 @@
<!-- File not in use for now -->
<script setup lang="ts">
import { precisions } from '@/utils/percentUtils'

85
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@ -2,31 +2,42 @@
import type { FilterType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
import { useNuxtApp } from '#app'
import { inject, useViewFilters } from '#imports'
import { comparisonOpList } from '~/utils/filterUtils'
import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
import MdiDeleteIcon from '~icons/mdi/close-box'
import MdiAddIcon from '~icons/mdi/plus'
import type { Filter } from '~/lib/types'
const {
nested = false,
parentId,
autoSave = true,
hookId = null,
modelValue,
} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string; modelValue?: Filter[] }>()
import {
ActiveViewInj,
MetaInj,
ReloadViewDataHookInj,
comparisonOpList,
computed,
inject,
ref,
useNuxtApp,
useViewFilters,
watch,
} from '#imports'
import type { Filter } from '~/lib'
interface Props {
nested?: boolean
parentId?: string
autoSave: boolean
hookId?: string
modelValue?: Filter[]
}
const { nested = false, parentId, autoSave = true, hookId = null, modelValue } = defineProps<Props>()
const emit = defineEmits(['update:filtersLength'])
const meta = inject(MetaInj)
const logicalOps = [
{ value: 'and', text: 'AND' },
{ value: 'or', text: 'OR' },
]
const activeView = inject(ActiveViewInj)
const meta = inject(MetaInj)!
const reloadDataHook = inject(ReloadViewDataHookInj)
const activeView = inject(ActiveViewInj)!
// todo: replace with inject or get from state
const reloadDataHook = inject(ReloadViewDataHookInj)!
const { $e } = useNuxtApp()
@ -35,11 +46,13 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
parentId,
computed(() => autoSave),
() => {
reloadDataHook?.trigger()
reloadDataHook.trigger()
},
modelValue,
)
const nestedFilters = ref()
const filterUpdateCondition = (filter: FilterType, i: number) => {
saveOrUpdate(filter, i)
$e('a:filter:update', {
@ -63,12 +76,14 @@ const filterUpdateCondition = (filter: FilterType, i: number) => {
// return true
// })
const columns = computed(() => meta?.value?.columns)
const columns = computed(() => meta.value?.columns)
const types = computed(() => {
if (!meta?.value?.columns?.length) {
if (!meta.value?.columns?.length) {
return {}
}
return meta?.value?.columns?.reduce((obj: any, col: any) => {
return meta.value?.columns?.reduce((obj: any, col: any) => {
switch (col.uidt) {
case UITypes.Number:
case UITypes.Decimal:
@ -83,22 +98,15 @@ const types = computed(() => {
})
watch(
() => (activeView?.value as any)?.id,
() => activeView.value?.id,
(n, o) => {
if (n !== o) loadFilters(hookId as string)
},
{ immediate: true },
)
const nestedFilters = ref()
const logicalOps = [
{ value: 'and', text: 'AND' },
{ value: 'or', text: 'OR' },
]
watch(
() => filters?.value?.length,
() => filters.value.length,
(length) => {
emit('update:filtersLength', length ?? 0)
},
@ -106,7 +114,10 @@ watch(
const applyChanges = async (hookId?: string) => {
await sync(hookId)
for (const nestedFilter of nestedFilters?.value || []) {
if (!nestedFilters.value.length) return
for (const nestedFilter of nestedFilters.value) {
if (nestedFilter.parentId) {
await nestedFilter.applyChanges(hookId, true)
}
@ -128,7 +139,7 @@ defineExpose({
<template v-for="(filter, i) in filters" :key="filter.id || i">
<template v-if="filter.status !== 'delete'">
<template v-if="filter.is_group">
<MdiDeleteIcon
<MdiCloseBox
v-if="!filter.readOnly"
:key="i"
small
@ -174,7 +185,7 @@ defineExpose({
mdi-close-box
</v-icon> -->
<MdiDeleteIcon
<MdiCloseBox
v-if="!filter.readOnly"
class="nc-filter-item-remove-btn text-grey align-self-center"
@click.stop="deleteFilter(filter, i)"
@ -260,7 +271,7 @@ defineExpose({
<a-button class="elevation-0 text-capitalize" type="primary" ghost @click.stop="addFilter">
<div class="flex align-center gap-1">
<!-- <v-icon small color="grey"> mdi-plus </v-icon> -->
<MdiAddIcon />
<MdiPlus />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
@ -268,7 +279,7 @@ defineExpose({
<a-button class="text-capitalize !text-gray-500" @click.stop="addFilterGroup">
<div class="flex align-center gap-1">
<!-- <v-icon small color="grey"> mdi-plus </v-icon> -->
<MdiAddIcon />
<MdiPlus />
Add Filter Group
<!-- todo: add i18n {{ $t('activity.addFilterGroup') }} -->
</div>

23
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@ -1,6 +1,6 @@
<script setup lang="ts">
import Draggable from 'vuedraggable'
import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
import { ActiveViewInj, FieldsInj, IsLockedInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
import { computed, inject, useNuxtApp, useViewColumns, watch } from '#imports'
const meta = inject(MetaInj)!
@ -8,6 +8,7 @@ const activeView = inject(ActiveViewInj)!
const reloadDataHook = inject(ReloadViewDataHookInj)!
const rootFields = inject(FieldsInj)
const isLocked = inject(IsLockedInj)
const isPublic = inject(IsPublicInj)
const { $e } = useNuxtApp()
@ -49,14 +50,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
if (fields.value.length < 2) return
if (fields.value.length - 1 === event.moved.newIndex) {
fields.value[event.moved.newIndex].order = (fields.value[event.moved.newIndex - 1].order || 1) + 1
} else if (event.moved.newIndex === 0) {
fields.value[event.moved.newIndex].order = (fields.value[1].order || 1) / 2
} else {
fields.value[event.moved.newIndex].order =
((fields.value[event.moved.newIndex - 1].order || 1) + (fields.value[event.moved.newIndex + 1].order || 1)) / 2
}
fields.value.map((field, index) => {
field.order = index + 1
return field
})
saveOrUpdate(fields.value[event.moved.newIndex], event.moved.newIndex)
@ -87,10 +84,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
<a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
</div>
<div class="nc-fields-list py-1">
<Draggable :list="fields" item-key="id" @change="onMove($event)">
<template #item="{ element: field }">
<Draggable v-model="fields" item-key="id" @change="onMove($event)">
<template #item="{ element: field, index: index }">
<div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
<a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
<a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, index)">
<span class="">{{ field.title }}</span>
</a-checkbox>
<div class="flex-1" />
@ -101,7 +98,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
</div>
<v-divider class="my-2" />
<div class="p-2 py-1 flex" @click.stop>
<div v-if="!isPublic" class="p-2 py-1 flex" @click.stop>
<a-checkbox v-model:checked="showSystemFields">
<span class="text-xs"> {{ $t('activity.showSystemFields') }}</span>
</a-checkbox>

12
packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@ -111,16 +111,16 @@ const exportFile = async (exportType: ExportTypes) => {
</a-button>
<template #overlay>
<div class="bg-white shadow-lg !border">
<div class="bg-gray-50 py-2 shadow-lg !border">
<div>
<div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
<MdiDownloadOutline />
<MdiDownloadOutline class="text-gray-500" />
<!-- Download as CSV -->
{{ $t('activity.downloadCSV') }}
</div>
<div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
<MdiDownloadOutline />
<MdiDownloadOutline class="text-gray-500" />
<!-- Download as XLSX -->
{{ $t('activity.downloadExcel') }}
</div>
@ -132,7 +132,7 @@ const exportFile = async (exportType: ExportTypes) => {
:class="{ disabled: isLocked }"
@click="!isLocked ? (quickImportDialog = true) : {}"
>
<MdiUploadOutline />
<MdiUploadOutline class="text-gray-500" />
<!-- Upload CSV -->
{{ $t('activity.uploadCSV') }}
</div>
@ -143,7 +143,7 @@ const exportFile = async (exportType: ExportTypes) => {
class="nc-menu-item"
@click="sharedViewListDlg = true"
>
<MdiViewListOutline />
<MdiViewListOutline class="text-gray-500" />
<!-- Shared View List -->
{{ $t('activity.listSharedView') }}
</div>
@ -154,7 +154,7 @@ const exportFile = async (exportType: ExportTypes) => {
class="nc-menu-item"
@click="showWebhookDrawer = true"
>
<MdiHook />
<MdiHook class="text-gray-500" />
{{ $t('objects.webhooks') }}
</div>
</div>

17
packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

@ -21,7 +21,7 @@ const { isUIAllowed } = useUIPermission()
let showShareModel = $ref(false)
const passwordProtected = $ref(false)
let passwordProtected = $ref(false)
const shared = ref()
@ -100,6 +100,20 @@ const copyLink = () => {
copy(sharedViewUrl?.value as string)
message.success('Copied to clipboard')
}
watch(
() => passwordProtected,
(value) => {
if (!value) {
shared.value.password = ''
saveShareLinkPassword()
}
},
)
onMounted(() => {
if (shared.value?.password?.length) passwordProtected = true
})
</script>
<template>
@ -133,7 +147,6 @@ const copyLink = () => {
<a-collapse-panel key="1" header="More Options">
<div class="mb-2">
<a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
<!-- todo: add password toggle -->
<div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
<a-input
v-model:value="shared.password"

14
packages/nc-gui-v2/components/smartsheet/Cell.vue

@ -23,6 +23,7 @@ interface Props {
editEnabled: boolean
rowIndex?: number
active?: boolean
virtual?: boolean
}
const props = defineProps<Props>()
@ -33,6 +34,8 @@ const column = toRef(props, 'column')
const active = toRef(props, 'active', false)
const virtual = toRef(props, 'virtual', false)
provide(ColumnInj, column)
provide(EditModeInj, useVModel(props, 'editEnabled', emit))
@ -73,10 +76,6 @@ const isManualSaved = $computed(() => {
return [UITypes.Currency, UITypes.Duration].includes(column?.value?.uidt as UITypes)
})
const isPrimary = computed(() => {
return column?.value?.pv
})
const vModel = computed({
get: () => props.modelValue,
set: (val) => {
@ -94,6 +93,7 @@ const vModel = computed({
})
const {
isPrimary,
isURL,
isEmail,
isJSON,
@ -118,7 +118,7 @@ const {
} = useColumn(column)
const syncAndNavigate = (dir: NavigateDir) => {
if (isJSON) return
if (isJSON.value) return
if (changed) {
emit('save')
@ -131,7 +131,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
<template>
<div
class="nc-cell w-full h-full"
:class="{ 'text-blue-600': isPrimary }"
:class="{ 'text-blue-600': isPrimary && !virtual }"
@keydown.stop.left
@keydown.stop.right
@keydown.stop.up
@ -153,12 +153,12 @@ const syncAndNavigate = (dir: NavigateDir) => {
<CellEmail v-else-if="isEmail" v-model="vModel" />
<CellUrl v-else-if="isURL" v-model="vModel" />
<CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
<CellPercent v-else-if="isPercent" v-model="vModel" />
<CellCurrency v-else-if="isCurrency" v-model="vModel" />
<CellDecimal v-else-if="isDecimal" v-model="vModel" />
<CellInteger v-else-if="isInt" v-model="vModel" />
<CellFloat v-else-if="isFloat" v-model="vModel" />
<CellText v-else-if="isString" v-model="vModel" />
<CellPercent v-else-if="isPercent" v-model="vModel" />
<CellJson v-else-if="isJSON" v-model="vModel" />
<CellText v-else v-model="vModel" />
<div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" @click.stop.prevent />

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

@ -41,7 +41,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
// keep a root fields variable and will get modified from
// fields menu and get used in grid and gallery
const fields = inject(FieldsInj, ref([]))
const readonly = inject(ReadonlyInj, ref(false))
const readOnly = inject(ReadonlyInj, false)
const isLocked = inject(IsLockedInj, false)
const reloadViewDataHook = inject(ReloadViewDataHookInj)
@ -59,7 +59,15 @@ const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
const addColumnDropdown = ref(false)
const contextMenu = ref(false)
const _contextMenu = ref(false)
const contextMenu = computed({
get: () => _contextMenu.value,
set: (val) => {
if (!readOnly) {
_contextMenu.value = val
}
},
})
const contextMenuTarget = ref(false)
const expandedFormDlg = ref(false)
@ -272,11 +280,15 @@ const onNavigate = (dir: NavigateDir) => {
case NavigateDir.NEXT:
if (selected.row < data.value.length - 1) {
selected.row++
} else {
editEnabled = false
}
break
case NavigateDir.PREV:
if (selected.row > 0) {
selected.row--
} else {
editEnabled = false
}
break
}
@ -302,15 +314,20 @@ const expandForm = (row: Row, state: Record<string, any>) => {
<tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
<th>
<div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
<div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
<div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
class="nc-check-all w-full align-center"
>
<a-checkbox v-model:checked="selectedAllRecords" />
<template v-if="!readOnly">
<div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
<div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
class="nc-check-all w-full align-center"
>
<a-checkbox v-model:checked="selectedAllRecords" />
<span class="flex-1" />
</div>
<span class="flex-1" />
</div>
</template>
<template v-else>
<div class="text-gray-500">#</div>
</template>
</div>
</th>
<th
@ -324,12 +341,11 @@ const expandForm = (row: Row, state: Record<string, any>) => {
@xcresized="resizingCol = null"
>
<div class="w-full h-full bg-gray-100 flex items-center">
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readonly" />
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
</div>
</th>
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
<th
v-if="!readonly && !isLocked && isUIAllowed('add-column')"
v-t="['c:column:add']"
@ -368,7 +384,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
{{ rowIndex + 1 }}
</div>
<div
v-if="!readonly"
v-if="!readOnly"
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="nc-row-expand-and-checkbox"
>

6
packages/nc-gui-v2/components/smartsheet/VirtualCell.vue

@ -14,13 +14,13 @@ const ManyToMany = defineAsyncComponent(() => import('../virtual-cell/ManyToMany
const BelongsTo = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
const Rollup = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
const Rollup = defineAsyncComponent(() => import('../virtual-cell/Rollup.vue') as any)
const Formula = defineAsyncComponent(() => import('../virtual-cell/Formula.vue'))
const Count = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
const Count = defineAsyncComponent(() => import('../virtual-cell/Count.vue'))
const Lookup = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
const Lookup = defineAsyncComponent(() => import('../virtual-cell/Lookup.vue') as any)
interface Props {
column: ColumnType

4
packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@ -133,7 +133,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
<template #title> {{ $t('objects.webhooks') }}</template>
<div class="nc-sidebar-right-item hover:after:bg-gray-300">
<MdiHook />
<MdiHook @click.stop />
</div>
</a-tooltip>
@ -143,7 +143,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
<template #title> Get API Snippet</template>
<div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
<MdiXml class="group-hover:(!text-white)" />
<MdiXml class="group-hover:(!text-white)" @click.stop />
</div>
</a-tooltip>

2
packages/nc-gui-v2/components/virtual-cell/Lookup.vue

@ -64,7 +64,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
:key="i"
:class="{ 'bg-gray-100 px-2 rounded-full': !lookupColumnMetaProps.isAttachment }"
>
<SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" />
<SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
</div>
</template>
</template>

5
packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@ -11,6 +11,7 @@ import {
useVModel,
watch,
} from '#imports'
import { IsPublicInj } from '~/context'
const props = defineProps<{ modelValue?: boolean }>()
@ -22,6 +23,8 @@ const vModel = useVModel(props, 'modelValue', emit)
const isForm = inject(IsFormInj, ref(false))
const isPublic = inject(IsPublicInj, ref(false))
const column = inject(ColumnInj)
const readonly = inject(ReadonlyInj, false)
@ -117,7 +120,7 @@ const expandedFormRow = ref()
@click.stop="unlinkRow(row)"
/>
<MdiDeleteOutline
v-if="!readonly"
v-if="!readonly && !isPublic"
class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
@click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
/>

5
packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue

@ -13,6 +13,7 @@ import {
useVModel,
watch,
} from '#imports'
import { IsPublicInj } from '~/context'
const props = defineProps<{ modelValue: boolean }>()
@ -38,6 +39,8 @@ const {
const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
const isPublic = inject(IsPublicInj, ref(false))
const linkRow = async (row: Record<string, any>) => {
if (isNew.value) {
addLTARRef(row, column?.value as ColumnType)
@ -105,7 +108,7 @@ const newRowState = computed(() => {
></a-input>
<div class="flex-1" />
<MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
<a-button type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
<a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
</div>
<template v-if="childrenExcludedList?.pageInfo?.totalRows">
<div class="flex-1 overflow-auto min-h-0">

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

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

4
packages/nc-gui-v2/composables/useColumn.ts

@ -56,10 +56,14 @@ export function useColumn(column: Ref<ColumnType>) {
const isManualSaved = computed(() =>
[UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype.value),
)
const isPrimary = computed(() => {
return column?.value?.pv
})
return {
abstractType,
dataTypeLow,
isPrimary,
isBoolean,
isString,
isTextArea,

30
packages/nc-gui-v2/composables/useLTARStore.ts

@ -2,6 +2,7 @@ import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } fr
import type { ComputedRef, Ref } from 'vue'
import { Modal, message } from 'ant-design-vue'
import {
IsPublicInj,
NOCO,
computed,
extractSdkResponseErrorMsg,
@ -13,6 +14,7 @@ import {
useProject,
} from '#imports'
import type { Row } from '~/composables'
import { SharedViewPasswordInj } from '~/context'
interface DataApiResponse {
list: Record<string, any>
@ -26,6 +28,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
const { metas, getMeta } = useMetas()
const { project } = useProject()
const { $api } = useNuxtApp()
const sharedViewPassword = inject(SharedViewPasswordInj, ref(null))
const childrenExcludedList = ref<DataApiResponse | undefined>()
const childrenList = ref<DataApiResponse | undefined>()
const childrenExcludedListPagination = reactive({
@ -39,6 +42,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
size: 10,
})
const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
// getters
@ -79,8 +84,29 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
const loadChildrenExcludedList = async () => {
try {
/** if new row load all records */
if (isNewRow?.value) {
if (isPublic) {
const route = useRoute()
childrenExcludedList.value = await $api.public.dataRelationList(
route.params.viewId as string,
column?.value?.id,
{},
{
headers: {
'xc-password': sharedViewPassword.value,
},
query: {
limit: childrenExcludedListPagination.size,
offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
where:
childrenExcludedListPagination.query &&
`(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
} as any,
},
)
/** if new row load all records */
} else if (isNewRow?.value) {
childrenExcludedList.value = await $api.dbTableRow.list(
NOCO,
project.value.id as string,

197
packages/nc-gui-v2/composables/useSharedFormViewStore.ts

@ -0,0 +1,197 @@
import useVuelidate from '@vuelidate/core'
import { minLength, required } from '@vuelidate/validators'
import { message } from 'ant-design-vue'
import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { SharedViewPasswordInj } from '~/context'
import { extractSdkResponseErrorMsg } from '~/utils'
import { useInjectionState, useMetas } from '#imports'
const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((sharedViewId: string) => {
const progress = ref(false)
const notFound = ref(false)
const submitted = ref(false)
const passwordDlg = ref(false)
const password = ref<string | null>(null)
const secondsRemain = ref(0)
provide(SharedViewPasswordInj, password)
const sharedView = ref<ViewType>()
const sharedFormView = ref<FormType>()
const meta = ref<TableType>()
const columns = ref<(ColumnType & { required?: boolean; show?: boolean })[]>()
const { $api } = useNuxtApp()
const { metas, setMeta } = useMetas()
const formState = ref({})
const { state: additionalState } = useProvideSmartsheetRowStore(
meta as Ref<TableType>,
ref({
row: formState,
rowMeta: { new: true },
oldRow: {},
}),
)
const formColumns = computed(() =>
columns?.value?.filter((c) => c.show)?.filter((col) => !isVirtualCol(col) || col.uidt === UITypes.LinkToAnotherRecord),
)
const loadSharedView = async () => {
try {
const viewMeta = await $api.public.sharedViewMetaGet(sharedViewId, {
headers: {
'xc-password': password.value,
},
})
passwordDlg.value = false
sharedView.value = viewMeta
sharedFormView.value = viewMeta.view
meta.value = viewMeta.model
columns.value = viewMeta.model?.columns
setMeta(viewMeta.model)
const relatedMetas = { ...viewMeta.relatedMetas }
Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
} catch (e: any) {
if (e.response && e.response.status === 404) {
notFound.value = true
} else if ((await extractSdkResponseErrorMsg(e)) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
passwordDlg.value = true
}
}
}
const validators = computed(() => {
const obj: any = {
localState: {},
virtual: {},
}
for (const column of formColumns?.value ?? []) {
if (
!isVirtualCol(column) &&
((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || (column as any).required)
) {
obj.localState[column.title!] = { required }
} else if (
column.uidt === UITypes.LinkToAnotherRecord &&
column.colOptions &&
(column.colOptions as LinkToAnotherRecordType).type === RelationTypes.BELONGS_TO
) {
const col = columns.value?.find((c) => c.id === (column?.colOptions as LinkToAnotherRecordType)?.fk_child_column_id)
if ((col && col.rqd && !col.cdf) || column.required) {
if (col) {
obj.virtual[column.title!] = { required }
}
}
} else if (isVirtualCol(column) && column.required) {
obj.virtual[column.title!] = {
minLength: minLength(1),
required,
}
}
}
return obj
})
const v$ = useVuelidate(
validators,
computed(() => ({ localState: formState?.value, virtual: additionalState?.value })),
)
const submitForm = async () => {
try {
if (!(await v$.value?.$validate())) {
return
}
progress.value = true
const data: Record<string, any> = { ...(formState?.value ?? {}), ...(additionalState?.value || {}) }
const attachment: Record<string, any> = {}
for (const col of metas?.value?.[sharedView?.value?.fk_model_id as string]?.columns ?? []) {
if (col.uidt === UITypes.Attachment) {
attachment[`_${col.title}`] = data[col.title!]
delete data[col.title!]
}
}
await $api.public.dataCreate(
sharedView?.value?.uuid as string,
{
data,
...attachment,
},
{
headers: {
'xc-password': password.value,
},
},
)
submitted.value = true
progress.value = false
await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
} catch (e: any) {
console.log(e)
await message.error(await extractSdkResponseErrorMsg(e))
}
progress.value = false
}
/** reset form if show_blank_form is true */
watch(submitted, (nextVal: boolean) => {
if (nextVal && sharedFormView.value?.show_blank_form) {
secondsRemain.value = 5
const intvl = setInterval(() => {
secondsRemain.value = secondsRemain.value - 1
if (secondsRemain.value < 0) {
submitted.value = false
clearInterval(intvl)
}
}, 1000)
}
/** reset form state and validation */
if (!nextVal) {
additionalState.value = {}
formState.value = {}
v$.value?.$reset()
}
})
return {
sharedView,
sharedFormView,
loadSharedView,
columns,
submitForm,
progress,
meta,
validators,
v$,
formColumns,
formState,
notFound,
password,
submitted,
secondsRemain,
passwordDlg,
}
}, 'expanded-form-store')
export { useProvideSharedFormStore }
export function useSharedFormStoreOrThrow() {
const sharedFormStore = useSharedFormStore()
if (sharedFormStore == null) throw new Error('Please call `useProvideSharedFormStore` on the appropriate parent component')
return sharedFormStore
}

16
packages/nc-gui-v2/composables/useSharedView.ts

@ -13,11 +13,10 @@ export function useSharedView() {
const password = useState<string | undefined>('password')
const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
const meta = ref<TableType>(sharedView.value?.model)
const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
const meta = useState<TableType>('meta')
const formColumns = computed(
() =>
columns.value
meta.value.columns
.filter(
(f: Record<string, any>) =>
f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
@ -39,10 +38,14 @@ export function useSharedView() {
allowCSVDownload.value = JSON.parse(viewMeta.meta).allowCSVDownload
if (localPassword) password.value = localPassword
sharedView.value = viewMeta
sharedView.value = { ...viewMeta }
meta.value = { ...viewMeta.model }
meta.value = viewMeta.model
columns.value = viewMeta.model.columns
let order = 1
meta.value.columns = [...viewMeta.model.columns]
.filter((c) => c.show)
.map((c) => ({ ...c, order: order++ }))
.sort((a, b) => a.order - b.order)
setMeta(viewMeta.model)
@ -96,7 +99,6 @@ export function useSharedView() {
sharedView,
loadSharedView,
meta,
columns,
nestedFilters,
fetchSharedViewData,
paginationData,

97
packages/nc-gui-v2/composables/useSmartsheetStore.ts

@ -3,53 +3,58 @@ import type { TableType, ViewType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
const { $api } = useNuxtApp()
const { sqlUi } = useProject()
const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
// state
// todo: move to grid view store
const search = reactive({
field: '',
query: '',
})
// getters
const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
const xWhere = computed(() => {
let where
const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
if (!col) return
if (!search.query.trim()) return
if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
where = `(${col.title},like,%${search.query.trim()}%)`
} else {
where = `(${col.title},eq,${search.query.trim()})`
const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
(view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
const { $api } = useNuxtApp()
const { sqlUi } = useProject()
const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
// state
// todo: move to grid view store
const search = reactive({
field: '',
query: '',
})
// getters
const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
const isSharedForm = computed(() => isForm?.value && shared)
const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
const xWhere = computed(() => {
let where
const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
if (!col) return
if (!search.query.trim()) return
if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
where = `(${col.title},like,%${search.query.trim()}%)`
} else {
where = `(${col.title},eq,${search.query.trim()})`
}
return where
})
return {
view,
meta,
isLocked,
$api,
search,
xWhere,
isPkAvail,
isForm,
isGrid,
isGallery,
cellRefs,
isSharedForm,
}
return where
})
return {
view,
meta,
isLocked,
$api,
search,
xWhere,
isPkAvail,
isForm,
isGrid,
isGallery,
cellRefs,
}
}, 'smartsheet-store')
},
'smartsheet-store',
)
export { useProvideSmartsheetStore }

62
packages/nc-gui-v2/composables/useViewColumns.ts

@ -4,18 +4,11 @@ import { watch } from 'vue'
import type { ComputedRef, Ref } from 'vue'
import { useNuxtApp } from '#app'
import { IsPublicInj } from '#imports'
import type { Field } from '~/lib'
export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
const isPublic = inject(IsPublicInj, ref(false))
const fields = ref<
{
order: number
show: number | boolean
title: string
fk_column_id?: string
system?: boolean
}[]
>()
const fields = ref<Field[]>()
const filterQuery = ref('')
@ -39,7 +32,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
}
}, {})
fields.value = meta.value?.columns
?.map((column) => {
?.map((column: ColumnType) => {
const currentColumnField = fieldById[column.id!] || {}
return {
@ -50,13 +43,13 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
system: isSystemColumn(currentColumnField.type || false),
}
})
.sort((a, b) => a.order - b.order)
.sort((a: Field, b: Field) => a.order - b.order)
}
}
const showAll = async (ignoreIds?: any) => {
if (isPublic.value) {
fields.value = fields.value?.map((field) => ({
fields.value = fields.value?.map((field: Field) => ({
...field,
show: true,
}))
@ -79,7 +72,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
}
const hideAll = async (ignoreIds?: any) => {
if (isPublic.value) {
fields.value = fields.value?.map((field) => ({
fields.value = fields.value?.map((field: Field) => ({
...field,
show: false,
}))
@ -101,9 +94,9 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
}
const saveOrUpdate = async (field: any, index: number) => {
if (isPublic && fields.value) {
if (isPublic.value && fields.value) {
fields.value[index] = field
meta.value.columns = meta.value?.columns?.map((column) => {
meta.value.columns = meta.value?.columns?.map((column: ColumnType) => {
if (column.id === field.fk_column_id) {
return {
...column,
@ -128,14 +121,15 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
reloadData?.()
}
const metaColumnById = computed(() => {
return (
meta.value?.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
return {
...acc,
[curr.id!]: curr,
}
}, {}) || {}
const metaColumnById = computed<Record<string, ColumnType>>(() => {
if (!meta.value?.columns) return {}
return meta.value?.columns?.reduce(
(acc: ColumnType, curr: ColumnType) => ({
...acc,
[curr.id!]: curr,
}),
{} as any,
)
})
@ -160,33 +154,37 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
const filteredFieldList = computed(() => {
return (
fields.value?.filter((field) => {
fields.value?.filter((field: Field) => {
// hide system columns if not enabled
if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
return false
}
return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
}) || {}
if (filterQuery.value === '') {
return true
} else {
return field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
}
}) || []
)
})
const sortedAndFilteredFields = computed<ColumnType[]>(() => {
return (fields?.value
?.filter((c) => {
?.filter((field: Field) => {
// hide system columns if not enabled
if (
!showSystemFields.value &&
metaColumnById.value &&
metaColumnById?.value?.[c.fk_column_id!] &&
isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
metaColumnById?.value?.[field.fk_column_id!] &&
isSystemColumn(metaColumnById.value?.[field.fk_column_id!])
) {
return false
}
return c.show && metaColumnById?.value?.[c.fk_column_id!]
return field.show && metaColumnById?.value?.[field.fk_column_id!]
})
?.sort((a, b) => a.order - b.order)
?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]
?.sort((a: Field, b: Field) => a.order - b.order)
?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[]
})
// reload view columns when table meta changes

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

@ -24,3 +24,4 @@ export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('relo
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')

9
packages/nc-gui-v2/layouts/base.vue

@ -22,7 +22,10 @@ const logout = () => {
<a-layout class="!flex-col">
<Transition name="layout">
<a-layout-header v-if="signedIn" class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
<a-layout-header
v-if="!route.meta.public && signedIn"
class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
>
<div
v-if="
route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
@ -48,7 +51,7 @@ const logout = () => {
<GeneralShareBaseButton />
<a-tooltip placement="bottom">
<template #title> Switch language </template>
<template #title> Switch language</template>
<div class="flex pr-4 items-center">
<GeneralLanguage class="cursor-pointer text-2xl" />
@ -88,7 +91,7 @@ const logout = () => {
</Transition>
<a-tooltip placement="bottom">
<template #title> Switch language </template>
<template #title> Switch language</template>
<Transition name="layout">
<div v-if="!signedIn" class="nc-lang-btn">

17
packages/nc-gui-v2/layouts/shared-view.vue

@ -1,5 +1,7 @@
<script lang="ts" setup>
import { navigateTo } from '#app'
const { isLoading } = useGlobal()
const { sharedView } = useSharedView()
</script>
<script lang="ts">
@ -10,12 +12,25 @@ export default {
<template>
<a-layout id="nc-app">
<a-layout class="!flex-col">
<a-layout class="!flex-col bg-white">
<a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
<div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>
<div>
<div class="flex justify-center items-center">
<div class="flex items-center gap-2 ml-3">
<template v-if="isLoading">
{{ $t('general.loading') }}
<MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
</template>
<div v-else class="text-xl font-semibold truncate">
{{ sharedView?.title }}
</div>
</div>
</div>
</div>
<div class="flex-1" />
</a-layout-header>

8
packages/nc-gui-v2/lib/types.ts

@ -21,6 +21,14 @@ export interface ProjectMetaInfo {
PackageVersion?: string
}
export interface Field {
order: number
show: number | boolean
title: string
fk_column_id?: string
system?: boolean
}
export type Roles = Record<Role, boolean>
export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }

5
packages/nc-gui-v2/middleware/auth.global.ts

@ -23,9 +23,14 @@ import { useGlobal } from '#imports'
export default defineNuxtRouteMiddleware((to, from) => {
const state = useGlobal()
/** if public allow */
if (to.meta.public) return
/** if shred base allow without validating */
if (to.params?.projectType === 'base') return
if (to.meta.public) return
/** if auth is required or unspecified (same as required) and user is not signed in, redirect to signin page */
if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !state.signedIn.value) {
return navigateTo('/signin')

100
packages/nc-gui-v2/package-lock.json generated

@ -6,6 +6,8 @@
"": {
"dependencies": {
"@ckpack/vue-color": "^1.2.0",
"@vuelidate/core": "^2.0.0-alpha.44",
"@vuelidate/validators": "^2.0.0-alpha.31",
"@vueuse/core": "^9.0.2",
"@vueuse/integrations": "^9.0.2",
"ant-design-vue": "^3.2.10",
@ -2862,6 +2864,72 @@
"vue": "^3.0.1"
}
},
"node_modules/@vuelidate/core": {
"version": "2.0.0-alpha.44",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
"integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
"dependencies": {
"vue-demi": "^0.13.4"
}
},
"node_modules/@vuelidate/core/node_modules/vue-demi": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
"integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/validators": {
"version": "2.0.0-alpha.31",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
"integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
"dependencies": {
"vue-demi": "^0.13.4"
}
},
"node_modules/@vuelidate/validators/node_modules/vue-demi": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
"integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuetify/loader-shared": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",
@ -17366,6 +17434,38 @@
"dev": true,
"requires": {}
},
"@vuelidate/core": {
"version": "2.0.0-alpha.44",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
"integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
"requires": {
"vue-demi": "^0.13.4"
},
"dependencies": {
"vue-demi": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
"integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
"requires": {}
}
}
},
"@vuelidate/validators": {
"version": "2.0.0-alpha.31",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
"integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
"requires": {
"vue-demi": "^0.13.4"
},
"dependencies": {
"vue-demi": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
"integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
"requires": {}
}
}
},
"@vuetify/loader-shared": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.5.0.tgz",

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

@ -12,6 +12,8 @@
},
"dependencies": {
"@ckpack/vue-color": "^1.2.0",
"@vuelidate/core": "^2.0.0-alpha.44",
"@vuelidate/validators": "^2.0.0-alpha.31",
"@vueuse/core": "^9.0.2",
"@vueuse/integrations": "^9.0.2",
"ant-design-vue": "^3.2.10",

15
packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@ -9,12 +9,14 @@ import {
ref,
useClipboard,
useElementHover,
useGlobal,
useProject,
useRoute,
useTabs,
useUIPermission,
} from '#imports'
import { TabType } from '~/composables'
const route = useRoute()
const { appInfo, token } = useGlobal()
@ -71,11 +73,13 @@ const isHovered = useElementHover(sidebar)
const copyProjectInfo = async () => {
try {
await loadProjectMetaInfo()
copy(
await copy(
Object.entries(projectMetaInfo.value!)
.map(([k, v]) => `${k}: **${v}**`)
.join('\n'),
)
message.info('Copied project info to clipboard')
} catch (e: any) {
console.log(e)
@ -85,7 +89,8 @@ const copyProjectInfo = async () => {
const copyAuthToken = async () => {
try {
copy(token.value!)
await copy(token.value!)
message.info('Copied auth token to clipboard')
} catch (e: any) {
console.log(e)
@ -143,7 +148,7 @@ const copyAuthToken = async () => {
<div
:style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
:class="[isOpen ? '' : 'justify-center']"
class="group cursor-pointer flex gap-4 items-center nc-project-menu"
class="group cursor-pointer flex gap-4 items-center nc-project-menu overflow-hidden"
>
<template v-if="isOpen">
<div class="text-xl font-semibold truncate">{{ project.title }}</div>
@ -279,10 +284,6 @@ const copyAuthToken = async () => {
</template>
<style lang="scss" scoped>
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
}
:deep(.ant-dropdown-menu-item-group-title) {
@apply border-b-1;
}

16
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

@ -1,17 +1,3 @@
<script>
export default {
name: 'Index',
}
</script>
<template>
<div class="nc-main-tab">
<span>Welcome to NocoDB!</span>
</div>
<div class="h-full w-full prose text-3xl text-gray-400 flex items-center justify-center">Welcome to NocoDB!</div>
</template>
<style scoped>
.nc-main-tab {
@apply w-full text-3xl text-gray-400 flex align-center justify-center;
}
</style>

38
packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue

@ -1,39 +1,31 @@
<script setup lang="ts">
import type { Ref } from 'vue'
import type { TableType } from 'nocodb-sdk'
import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj, useRoute } from '#imports'
import type { TableType } from 'nocodb-sdk/build/main'
import { useProvideSharedFormStore } from '~/composables/useSharedFormViewStore'
import { IsFormInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
definePageMeta({
requiresAuth: false,
public: true,
})
const route = useRoute()
const reloadEventHook = createEventHook<void>()
const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
await loadSharedView(route.params.viewId as string)
const { loadSharedView, sharedView, meta, notFound } = useProvideSharedFormStore(route.params.viewId as string)
provide(ReloadViewDataHookInj, reloadEventHook)
provide(MetaInj, meta)
provide(ActiveViewInj, sharedView)
provide(FieldsInj, formColumns)
provide(IsPublicInj, ref(true))
await loadSharedView()
if (!notFound.value) {
provide(ReloadViewDataHookInj, reloadEventHook)
provide(MetaInj, meta)
provide(IsPublicInj, ref(true))
provide(IsFormInj, ref(true))
useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>, true)
}
</script>
<template>
<NuxtLayout id="content" class="flex">
<div class="nc-container flex flex-col h-full mt-2 px-6">
<SharedViewForm />
</div>
</NuxtLayout>
<SharedViewForm />
</template>
<style scoped>
.nc-container {
height: calc(100% - var(--header-height));
flex: 1 1 100%;
}
</style>

26
packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

@ -1,7 +1,19 @@
<script setup lang="ts">
import { ReadonlyInj, ReloadViewDataHookInj, useRoute } from '#imports'
import { message } from 'ant-design-vue'
import {
ReadonlyInj,
ReloadViewDataHookInj,
createEventHook,
definePageMeta,
extractSdkResponseErrorMsg,
provide,
ref,
useRoute,
useSharedView,
} from '#imports'
definePageMeta({
public: true,
requiresAuth: false,
layout: 'shared-view',
})
@ -10,15 +22,20 @@ const route = useRoute()
const reloadEventHook = createEventHook<void>()
provide(ReloadViewDataHookInj, reloadEventHook)
provide(ReadonlyInj, ref(true))
provide(ReadonlyInj, true)
const { loadSharedView } = useSharedView()
const showPassword = ref(false)
try {
await loadSharedView(route.params.viewId as string)
} catch (e) {
showPassword.value = true
} catch (e: any) {
if (e?.response?.status === 403) {
showPassword.value = true
} else {
console.error(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
</script>
@ -27,6 +44,7 @@ try {
<div v-if="showPassword">
<SharedViewAskPassword v-model="showPassword" />
</div>
<SharedViewGrid v-else />
</NuxtLayout>
</template>

2
packages/nc-gui-v2/pages/forgot-password.vue

@ -129,7 +129,7 @@ function resetError() {
}
.submit {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

186
packages/nc-gui-v2/pages/index/index.vue

@ -69,103 +69,119 @@ onMounted(() => {
</div>
<div class="min-w-2/4 flex-auto">
<a-card :loading="isLoading" class="!rounded-lg shadow">
<h1 class="text-center text-4xl p-2 nc-project-page-title flex items-center justify-center gap-2 text-gray-600">
<a-card class="transition-all duration-300 ease-out !rounded-lg shadow">
<h1 class="flex items-center justify-center gap-2 leading-8 mb-8">
<!-- My Projects -->
<b>{{ $t('title.myProject') }}</b>
<MdiRefresh
v-t="['a:project:refresh']"
class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
@click="loadProjects"
/>
<span class="text-4xl">{{ $t('title.myProject') }}</span>
<a-tooltip title="Reload projects">
<span
class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
:class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
>
<MdiRefresh
v-t="['a:project:refresh']"
class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
:class="isLoading ? '!text-primary' : ''"
@click="loadProjects"
/>
</span>
</a-tooltip>
</h1>
<div class="order-1 flex mb-6">
<a-input-search
v-model:value="filterQuery"
class="max-w-[200px] nc-project-page-search"
class="max-w-[250px] nc-project-page-search rounded"
:placeholder="$t('activity.searchProject')"
/>
<div class="flex-grow" />
<a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
<a-button class="nc-new-project-menu !shadow">
<div class="flex align-center">
<a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
<button class="nc-new-project-menu">
<div class="flex items-center w-full">
{{ $t('title.newProj') }}
<MdiMenuDown class="menu-icon" />
</div>
</a-button>
</button>
<template #overlay>
<a-menu>
<div
v-t="['c:project:create:xcdb']"
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
@click="navigateTo('/project/create')"
>
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
</div>
<div
v-t="['c:project:create:extdb']"
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
</div>
<a-menu-item>
<div
v-t="['c:project:create:xcdb']"
class="nc-project-menu-item gap-4"
@click="navigateTo('/project/create')"
>
<MdiPlusOutline class="text-lg" />
<div>{{ $t('activity.createProject') }}</div>
</div>
</a-menu-item>
<a-menu-item>
<div
v-t="['c:project:create:extdb']"
class="nc-project-menu-item gap-4"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="text-lg" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
<div v-if="isLoading">
<a-skeleton />
</div>
<a-table
v-else
:custom-row="
(record) => ({
onClick: () => {
$e('a:project:open')
navigateTo(`/nc/${record.id}`)
},
})
"
:data-source="filteredProjects"
:pagination="{ position: ['bottomCenter'] }"
>
<!-- Title -->
<a-table-column key="title" :title="$t('general.title')" data-index="title">
<template #default="{ text }">
<div
class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
:title="text"
>
{{ text }}
</div>
</template>
</a-table-column>
<!-- Actions -->
<a-table-column key="id" :title="$t('labels.actions')" data-index="id">
<template #default="{ text, record }">
<div class="flex align-center">
<MdiEditOutline
v-t="['c:project:edit:rename']"
class="nc-action-btn"
@click.stop="navigateTo(`/project/${text}`)"
/>
<MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
</div>
</template>
</a-table-column>
</a-table>
<TransitionGroup name="layout" mode="out-in">
<div v-if="isLoading">
<a-skeleton />
</div>
<a-table
v-else
:custom-row="
(record) => ({
onClick: () => {
$e('a:project:open')
navigateTo(`/nc/${record.id}`)
},
class: ['group'],
})
"
:data-source="filteredProjects"
:pagination="{ position: ['bottomCenter'] }"
>
<!-- Title -->
<a-table-column key="title" :title="$t('general.title')" data-index="title">
<template #default="{ text }">
<div
class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
>
{{ text }}
</div>
</template>
</a-table-column>
<!-- Actions -->
<a-table-column key="id" :title="$t('labels.actions')" data-index="id">
<template #default="{ text, record }">
<div class="flex items-center gap-2">
<MdiEditOutline
v-t="['c:project:edit:rename']"
class="nc-action-btn"
@click.stop="navigateTo(`/project/${text}`)"
/>
<MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
</div>
</template>
</a-table-column>
</a-table>
</TransitionGroup>
</a-card>
</div>
@ -182,7 +198,25 @@ onMounted(() => {
<style scoped>
.nc-action-btn {
@apply text-gray-500 hover:text-primary mr-2 cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
@apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
}
.nc-new-project-menu {
@apply cursor-pointer z-1 relative color-transition rounded-md px-3 py-2 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
}
&:active::after {
@apply ring ring-pink-500;
}
}
:deep(.ant-table-cell) {

2
packages/nc-gui-v2/pages/signin.vue

@ -167,7 +167,7 @@ function resetError() {
}
.submit {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

4
packages/nc-gui-v2/pages/signup/[[token]].vue

@ -162,7 +162,7 @@ function resetError() {
<div class="prose-sm mt-4 text-gray-500">
By signing up, you agree to the
<a class="prose-sm text-pink-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a>
<a class="prose-sm text-gray-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a>
</div>
</div>
</NuxtLayout>
@ -186,7 +186,7 @@ function resetError() {
}
.submit {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

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

@ -130,6 +130,7 @@ export interface ViewType {
order?: number;
fk_model_id?: string;
slug?: string;
uuid?: string;
show_system_fields?: boolean;
lock_type?: 'collaborative' | 'locked' | 'personal';
}
@ -3062,32 +3063,41 @@ export class Api<
}),
/**
* No description
* @description Read project details
*
* @tags Public
* @name SharedViewMetaGet
* @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
* @response `200` `object` OK
* @name SharedBaseGet
* @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
* @response `200` `{ project_id?: string }` OK
*/
sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
this.request<object, any>({
path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
this.request<{ project_id?: string }, any>({
path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
method: 'GET',
format: 'json',
...params,
}),
/**
* @description Read project details
* No description
*
* @tags Public
* @name SharedBaseGet
* @request GET:/api/v1/db/public/shared-base/{sharedBaseUuid}/meta
* @response `200` `{ project_id?: string }` OK
* @name SharedViewMetaGet
* @request GET:/api/v1/db/public/shared-view/{sharedViewUuid}/meta
* @response `200` `(ViewType & { relatedMetas?: any, client?: string, columns?: ((GridColumnType | FormColumnType | GalleryColumnType) & ColumnType), model?: TableType } & { view?: (FormType | GridType | GalleryType) })` OK
*/
sharedBaseGet: (sharedBaseUuid: string, params: RequestParams = {}) =>
this.request<{ project_id?: string }, any>({
path: `/api/v1/db/public/shared-base/${sharedBaseUuid}/meta`,
sharedViewMetaGet: (sharedViewUuid: string, params: RequestParams = {}) =>
this.request<
ViewType & {
relatedMetas?: any;
client?: string;
columns?: (GridColumnType | FormColumnType | GalleryColumnType) &
ColumnType;
model?: TableType;
} & { view?: FormType | GridType | GalleryType },
any
>({
path: `/api/v1/db/public/shared-view/${sharedViewUuid}/meta`,
method: 'GET',
format: 'json',
...params,

5
packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts

@ -1552,8 +1552,9 @@ class BaseModelSqlv2 {
switch (colOptions.type) {
case RelationTypes.BELONGS_TO:
{
const parentCol = await colOptions.getChildColumn();
insertObj[parentCol.column_name] =
const childCol = await colOptions.getChildColumn();
const parentCol = await colOptions.getParentColumn();
insertObj[childCol.column_name] =
nestedData?.[parentCol.title];
}
break;

114
scripts/sdk/swagger.json

@ -4363,28 +4363,22 @@
"description": ""
}
},
"/api/v1/db/public/shared-view/{sharedViewUuid}/meta": {
"/api/v1/db/public/shared-base/{sharedBaseUuid}/meta": {
"parameters": [
{
"schema": {
"type": "string"
},
"name": "sharedViewUuid",
"name": "sharedBaseUuid",
"in": "path",
"required": true
},
{
"schema": {
"type": "string"
},
"in": "header",
"name": "xc-password",
"description": "Shared view password"
}
],
"get": {
"summary": "",
"operationId": "public-shared-view-meta-get",
"operationId": "public-shared-base-get",
"description": "Read project details",
"parameters": [],
"responses": {
"200": {
"description": "OK",
@ -4392,58 +4386,117 @@
"application/json": {
"schema": {
"type": "object",
"properties": {}
"properties": {
"project_id": {
"type": "string"
}
}
}
},
"application/xml": {
"schema": {}
}
}
}
},
"tags": [
"Public"
],
"description": "",
"parameters": []
]
}
},
"/api/v1/db/public/shared-base/{sharedBaseUuid}/meta": {
"/api/v1/db/public/shared-view/{sharedViewUuid}/meta": {
"parameters": [
{
"schema": {
"type": "string"
},
"name": "sharedBaseUuid",
"name": "sharedViewUuid",
"in": "path",
"required": true
},
{
"schema": {
"type": "string"
},
"in": "header",
"name": "xc-password",
"description": "Shared view password"
}
],
"get": {
"summary": "",
"operationId": "public-shared-base-get",
"description": "Read project details",
"parameters": [],
"operationId": "public-shared-view-meta-get",
"responses": {
"200": {
"description": "OK",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"project_id": {
"type": "string"
"allOf": [
{
"$ref": "#/components/schemas/View"
},
{
"type": "object",
"properties": {
"relatedMetas": {},
"client": {
"type": "string"
},
"columns": {
"allOf": [
{
"oneOf": [
{
"$ref": "#/components/schemas/GridColumn"
},
{
"$ref": "#/components/schemas/FormColumn"
},
{
"$ref": "#/components/schemas/GalleryColumn"
}
]
},
{
"$ref": "#/components/schemas/Column"
}
]
},
"model": {
"$ref": "#/components/schemas/Table"
}
}
},
{
"type": "object",
"properties": {
"view": {
"oneOf": [
{
"$ref": "#/components/schemas/Form"
},
{
"$ref": "#/components/schemas/Grid"
},
{
"$ref": "#/components/schemas/Gallery"
}
]
}
}
}
}
]
}
},
"application/xml": {
"schema": {}
}
}
}
},
"tags": [
"Public"
]
],
"description": "",
"parameters": []
}
},
"/api/v1/db/meta/audits/comments": {
@ -6093,6 +6146,9 @@
"slug": {
"type": "string"
},
"uuid": {
"type": "string"
},
"show_system_fields": {
"type": "boolean"
},

Loading…
Cancel
Save