github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix/Fixed field hiding and improved typing in useViewColumn

pull/3197/head
Muhammed Mustafa 2 years ago
parent
b26b023143
commit
5a1ef4ef08
4 changed files with 58 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  2. 25
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  3. 53
      packages/nc-gui-v2/composables/useViewColumns.ts
  4. 8
      packages/nc-gui-v2/lib/types.ts

4
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
Unescape View File

@ -89,9 +89,9 @@ const onMove = (event: { moved: { newIndex: number } }) => {
</div>
<div class="nc-fields-list py-1">
<Draggable :list="fields" item-key="id" @change="onMove($event)">
<template #item="{ element: field }">
<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" />

25
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -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)
@ -63,7 +63,7 @@ const _contextMenu = ref(false)
const contextMenu = computed({
get: () => _contextMenu.value,
set: (val) => {
if (!readonly) {
if (!readOnly) {
_contextMenu.value = val
}
},
@ -310,6 +310,7 @@ 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">
<template v-if="!readOnly">
<div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
<div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@ -319,6 +320,10 @@ const expandForm = (row: Row, state: Record<string, any>) => {
<span class="flex-1" />
</div>
</template>
<template v-else>
<div class="text-gray-500">#</div>
</template>
</div>
</th>
<th
@ -332,14 +337,13 @@ 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 && isUIAllowed('add-column')"
v-if="!readOnly && isUIAllowed('add-column')"
v-t="['c:column:add']"
class="cursor-pointer"
@click.stop="addColumnDropdown = true"
@ -368,18 +372,21 @@ const expandForm = (row: Row, state: Record<string, any>) => {
<tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
<div class="align-center flex gap-1 min-w-[55px]">
<div v-if="!readonly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
<div v-if="!readOnly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
{{ rowIndex + 1 }}
</div>
<div v-else class="text-xs text-gray-500">
{{ 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"
>
<a-checkbox v-model:checked="row.rowMeta.selected" />
</div>
<span class="flex-1" />
<div v-if="!readonly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
<div v-if="!readOnly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
<span
v-if="row.rowMeta?.commentCount"
class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"

53
packages/nc-gui-v2/composables/useViewColumns.ts
Unescape View File

@ -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,16 +121,16 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
reloadData?.()
}
const metaColumnById = computed(() => {
return (
meta.value?.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
return {
const metaColumnById = computed<Record<string, ColumnType>>(
() =>
meta.value?.columns?.reduce(
(acc: ColumnType, curr: ColumnType) => ({
...acc,
[curr.id!]: curr,
}
}, {}) || {}
}),
{},
) || {},
)
})
const showSystemFields = computed({
get() {
@ -160,33 +153,33 @@ 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())
}) || {}
}) || []
)
})
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

8
packages/nc-gui-v2/lib/types.ts
Unescape View File

@ -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 }

Write Preview
Loading…
Cancel
Save