Browse Source

Merge branch 'develop' into feat/ltar-rollup-on-creation

pull/5848/head
Raju Udava 1 year ago committed by GitHub
parent
commit
0ce72ed4a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 23
      packages/nc-gui/components/cell/attachment/index.vue
  2. 15
      packages/nc-gui/components/smartsheet/Grid.vue
  3. 11
      packages/nc-gui/components/smartsheet/header/Icon.vue
  4. 15
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
  5. 6
      packages/nc-gui/composables/useExpandedFormStore.ts
  6. 2
      packages/nc-gui/composables/useViewData.ts

23
packages/nc-gui/components/cell/attachment/index.vue

@ -2,6 +2,7 @@
import { onKeyDown } from '@vueuse/core' import { onKeyDown } from '@vueuse/core'
import { useProvideAttachmentCell } from './utils' import { useProvideAttachmentCell } from './utils'
import { useSortable } from './sort' import { useSortable } from './sort'
import { RowHeightInj } from '~/context'
import { import {
ActiveCellInj, ActiveCellInj,
CurrentCellInj, CurrentCellInj,
@ -129,11 +130,16 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
} }
} }
}) })
const rowHeight = inject(RowHeightInj, ref(1.8))
</script> </script>
<template> <template>
<div <div
ref="attachmentCellRef" ref="attachmentCellRef"
:style="{
height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
}"
class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
> >
<LazyCellAttachmentCarousel /> <LazyCellAttachmentCarousel />
@ -153,7 +159,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<div <div
v-if="!isReadonly" v-if="!isReadonly"
:class="{ 'mx-auto px-4': !visibleItems.length }" :class="{ 'mx-auto px-4': !visibleItems.length }"
class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)" class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
data-testid="attachment-cell-file-picker-button" data-testid="attachment-cell-file-picker-button"
@click.stop="open" @click.stop="open"
> >
@ -162,7 +168,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<a-tooltip v-else placement="bottom"> <a-tooltip v-else placement="bottom">
<template #title> Click or drop a file into cell</template> <template #title> Click or drop a file into cell</template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-1">
<MaterialSymbolsAttachFile <MaterialSymbolsAttachFile
class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]" class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
/> />
@ -183,7 +189,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
<div <div
ref="sortableRef" ref="sortableRef"
:class="{ dragging }" :class="{ dragging }"
class="flex cursor-pointer justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto" class="flex cursor-pointer justify-center items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
:style="{
maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
}"
> >
<template v-for="(item, i) of visibleItems" :key="item.url || item.title"> <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
<a-tooltip placement="bottom"> <a-tooltip placement="bottom">
@ -192,7 +201,11 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
</template> </template>
<div v-if="isImage(item.title, item.mimetype ?? item.type)"> <div v-if="isImage(item.title, item.mimetype ?? item.type)">
<div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item"> <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
<LazyCellAttachmentImage :alt="item.title || `#${i}`" :srcs="getPossibleAttachmentSrc(item)" /> <LazyCellAttachmentImage
class="max-h-[1.8rem] max-w-[1.8rem]"
:alt="item.title || `#${i}`"
:srcs="getPossibleAttachmentSrc(item)"
/>
</div> </div>
</div> </div>
<div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)"> <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
@ -229,7 +242,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
.nc-cell { .nc-cell {
.nc-attachment-cell { .nc-attachment-cell {
.nc-attachment { .nc-attachment {
@apply w-[50px] h-[50px] min-h-[50px] min-w-[50px] ring-1 ring-gray-300 rounded; @apply w-[1.8rem] h-[1.8rem] min-h-[1.8rem] min-w-[1.8rem] ring-1 ring-gray-300 rounded;
} }
.ghost, .ghost,

15
packages/nc-gui/components/smartsheet/Grid.vue

@ -942,6 +942,19 @@ const refreshFillHandle = () => {
} }
} }
const addRowExpandOnClose = (row: Row) => {
if (!skipRowRemovalOnCancel.value) {
const removed = removeRowIfNew(row)
if (removed) {
clearSelectedRange()
activeCell.row = null
activeCell.col = null
}
}
}
watch( watch(
[() => selectedRange.end.row, () => selectedRange.end.col, () => activeCell.row, () => activeCell.col], [() => selectedRange.end.row, () => selectedRange.end.col, () => activeCell.row, () => activeCell.col],
([sr, sc, ar, ac], [osr, osc, oar, oac]) => { ([sr, sc, ar, ac], [osr, osc, oar, oac]) => {
@ -1310,7 +1323,7 @@ useEventListener(document, 'mouseup', () => {
:state="expandedFormRowState" :state="expandedFormRowState"
:meta="meta" :meta="meta"
:view="view" :view="view"
@update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)" @update:model-value="addRowExpandOnClose(expandedFormRow)"
/> />
</Suspense> </Suspense>

11
packages/nc-gui/components/smartsheet/header/Icon.vue

@ -0,0 +1,11 @@
<script lang="ts" setup>
import { ColumnType, isVirtualCol } from 'nocodb-sdk'
const { column } = defineProps<{ column: ColumnType }>()
</script>
<template>
<SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" :column-meta="column" />
<SmartsheetHeaderCellIcon v-else :column-meta="column" />
</template>

15
packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { isSystemColumn } from 'nocodb-sdk'
import type { TableType } from 'nocodb-sdk' import type { TableType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk' import { UITypes } from 'nocodb-sdk'
import { import {
@ -29,10 +30,14 @@ onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
const columns = computed(() => const columns = computed(() =>
(meta.value as TableType)?.columns (meta.value as TableType)?.columns
?.filter((c) => {
return !isSystemColumn(c)
})
?.filter((column) => column?.uidt !== UITypes.Links) ?.filter((column) => column?.uidt !== UITypes.Links)
?.map((column) => ({ ?.map((column) => ({
value: column.id, value: column.id,
label: column.title, label: column.title,
column,
})), })),
) )
@ -68,10 +73,16 @@ function onPressEnter() {
:open="isDropdownOpen" :open="isDropdownOpen"
size="small" size="small"
:dropdown-match-select-width="false" :dropdown-match-select-width="false"
:options="columns"
dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option" dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option"
class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0" class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
/> >
<a-select-option v-for="op of columns" :key="op.value" :value="op.value">
<div class="flex items-center -ml-1 gap-2">
<SmartsheetHeaderIcon class="" :column="op.column" />
{{ op.label }}
</div>
</a-select-option>
</a-select>
</div> </div>
<a-input <a-input

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

@ -267,7 +267,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
addOrEditStackRow(row.value, isNewRow) addOrEditStackRow(row.value, isNewRow)
} }
message.success(`${displayValue.value || 'Row'} updated successfully.`) // trim the display value if greater than 20chars
const trimmedDisplayValue =
displayValue.value && displayValue.value?.length > 20 ? `${displayValue.value?.substring(0, 20)}...` : displayValue.value
message.success(`${trimmedDisplayValue || 'Row'} updated successfully.`)
changedColumns.value = new Set() changedColumns.value = new Set()
} catch (e: any) { } catch (e: any) {

2
packages/nc-gui/composables/useViewData.ts

@ -938,7 +938,9 @@ export function useViewData(
if (index > -1 && row.rowMeta.new) { if (index > -1 && row.rowMeta.new) {
formattedData.value.splice(index, 1) formattedData.value.splice(index, 1)
return true
} }
return false
} }
// get current expanded row index // get current expanded row index

Loading…
Cancel
Save