Browse Source

Merge pull request #3271 from nocodb/fix/gui-v2-bugs

fix: miscellaneous bug fixes
pull/3281/head
Pranav C 2 years ago committed by GitHub
parent
commit
e47a642256
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 20
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet/Pagination.vue
  4. 14
      packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
  5. 9
      packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
  6. 2
      packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
  7. 7
      packages/nc-gui-v2/composables/useExpandedFormStore.ts
  8. 1
      packages/nc-gui-v2/composables/useViewColumns.ts
  9. 8
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  10. 2
      packages/nc-gui-v2/pages/index/index.vue

8
packages/nc-gui-v2/components/dashboard/TreeView.vue

@ -232,6 +232,7 @@ function openTableCreateDialog() {
<div class="flex-1">
<div
class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
v-if="isUIAllowed('table-create')"
@click="openTableCreateDialog"
>
<MdiPlus />
@ -352,7 +353,7 @@ function openTableCreateDialog() {
</div>
</a-menu-item>
<a-menu-item v-if="isUIAllowed('table-delete')" @click="() => $e('c:table:delete') && deleteTable(table)">
<a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(table)">
<div class="nc-project-menu-item">
{{ $t('general.delete') }}
</div>
@ -386,10 +387,7 @@ function openTableCreateDialog() {
</div>
</a-menu-item>
<a-menu-item
v-if="isUIAllowed('table-delete')"
@click="() => $e('c:table:delete') && deleteTable(contextMenuTarget.value)"
>
<a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(contextMenuTarget.value)">
<div class="nc-project-menu-item">
{{ $t('general.delete') }}
</div>

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

@ -1,4 +1,6 @@
<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import { isVirtualCol } from 'nocodb-sdk'
import Draggable from 'vuedraggable'
import {
ActiveViewInj,
@ -14,6 +16,8 @@ import {
useViewColumns,
watch,
} from '#imports'
import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
const meta = inject(MetaInj)!
@ -39,6 +43,7 @@ const {
showAll,
hideAll,
saveOrUpdate,
metaColumnById,
} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
watch(
@ -76,6 +81,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
$e('a:fields:reorder')
}
const getIcon = (c: ColumnType) =>
h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
columnMeta: c,
})
</script>
<template>
@ -103,9 +113,12 @@ const onMove = (event: { moved: { newIndex: number } }) => {
<div class="nc-fields-list py-1">
<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>
<div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center" @click.stop>
<a-checkbox v-model:checked="field.show" class="shrink" @change="saveOrUpdate(field, index)">
<span class="">{{ field.title }}</span>
<div class="flex items-center">
<component :is="getIcon(metaColumnById[field.fk_column_id])" />
<span>{{ field.title }}</span>
</div>
</a-checkbox>
<div class="flex-1" />
<MdiDrag class="cursor-move" />
@ -140,4 +153,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
:deep(.ant-checkbox-inner) {
@apply transform scale-60;
}
:deep(.ant-checkbox) {
@apply top-auto;
}
</style>

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

@ -49,12 +49,14 @@ const page = computed({
<style scoped>
:deep(.ant-pagination-item a) {
@apply text-sm !leading-[21px];
@apply text-sm !leading-[21px] !no-underline;
}
:deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
line-height: 21px !important;
@apply text-sm text-gray-500;
@apply text-sm !text-gray-500;
}
:deep(.ant-pagination-item-link) {
@apply text-gray-500;
}

14
packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@ -52,15 +52,23 @@ const iconColor = '#1890ff'
</h5>
<div class="flex-1" />
<a-tooltip placement="bottom">
<template #title>
<div class="text-center w-full">Reload</div>
</template>
<mdi-reload class="cursor-pointer select-none" />
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>
<div class="text-center w-full">Toggle comments draw</div>
</template>
<component
:is="drawerToggleIcon"
v-if="isUIAllowed('rowComments')"
v-if="isUIAllowed('rowComments') && !isNew"
class="cursor-pointer select-none nc-toggle-comments"
@click="commentsDrawer = !commentsDrawer"
/>
</a-tooltip>
<a-button class="!text" @click="emit('cancel')">
<!-- Cancel -->

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
import { isVirtualCol } from 'nocodb-sdk'
import { isSystemColumn, isVirtualCol } from 'nocodb-sdk'
import type { Ref } from 'vue'
import Cell from '../Cell.vue'
import VirtualCell from '../VirtualCell.vue'
@ -46,14 +46,14 @@ const meta = toRef(props, 'meta')
const fields = computedInject(FieldsInj, (_fields) => {
if (props.useMetaFields) {
return meta.value.columns ?? []
return (meta.value.columns ?? []).filter((col) => !isSystemColumn(col))
}
return _fields?.value ?? []
})
provide(MetaInj, meta)
const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
const { commentsDrawer, changedColumns, state: rowState, isNew } = useProvideExpandedFormStore(meta, row)
const { $api } = useNuxtApp()
@ -113,6 +113,7 @@ export default {
<div class="w-[500px] mx-auto">
<div v-for="col of fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderCell v-else :column="col" />
<div class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
@ -130,7 +131,7 @@ export default {
</div>
</div>
<div class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
<div v-if="!isNew" class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
<div class="h-full">
<Comments v-if="commentsDrawer" />
</div>

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

@ -58,7 +58,7 @@ export default {
<ExpandedForm
v-if="!readOnly && !isLocked && expandedFormDlg"
v-model="expandedFormDlg"
:row="{ row: item }"
:row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
:meta="relatedTableMeta"
load-row
use-meta-fields

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

@ -121,7 +121,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
return obj
}, {} as Record<string, any>)
if (row.value.rowMeta.new) {
if (row.value.rowMeta?.new) {
data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
/* todo:
@ -133,11 +133,12 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
}
}
} */
row.value = {
Object.assign(row.value, {
row: data,
rowMeta: {},
oldRow: { ...data },
}
})
/// todo:
// await this.reload();

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

@ -204,5 +204,6 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
saveOrUpdate,
sortedAndFilteredFields,
showSystemFields,
metaColumnById,
}
}

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

@ -85,10 +85,6 @@ onKeyStroke(
clearTabs()
if (!route.params.type && isUIAllowed('teamAndAuth')) {
addTab({ type: TabType.AUTH, title: 'Team & Auth' })
}
function toggleDialog(value?: boolean, key?: string) {
dialogOpen.value = value ?? !dialogOpen.value
openDialogKey.value = key
@ -98,6 +94,10 @@ await loadProject()
await loadTables()
if (!route.params.type && isUIAllowed('teamAndAuth')) {
addTab({ type: TabType.AUTH, title: 'Team & Auth' })
}
const copyProjectInfo = async () => {
try {
await loadProjectMetaInfo()

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

@ -153,7 +153,7 @@ onMounted(() => {
onClick: () => {
$e('a:project:open')
navigateTo(`/nc/${record.id}/auth`)
navigateTo(`/nc/${record.id}`)
},
class: ['group'],
})

Loading…
Cancel
Save