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

refactor(gui-v2): simplify Row component 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3025/head
Pranav C 2 years ago
parent
56dca1166a
commit
32ca054ac2
3 changed files with 67 additions and 132 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. 131
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 66
      packages/nc-gui-v2/components/smartsheet/Row.vue
  3. 2
      packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

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

@ -288,7 +288,7 @@ const expandForm = (row: Row) => {
<thead>
<tr>
<th>
<div class="flex align-center w-[80px]">
<div class="flex align-center w-[80px] px-1">
<div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
<div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@ -329,73 +329,66 @@ const expandForm = (row: Row) => {
</tr>
</thead>
<tbody>
<SmartsheetRow
v-for="(row, rowIndex) in data"
:key="row.id"
:row="row"
:row-index="rowIndex"
:selected="selected"
:edit-enabled="editEnabled"
>
<tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell group">
<div class="flex items-center w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="group-hover:flex w-full items-center justify-between p-1"
>
<a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" />
<div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
<MdiArrowExpand
class="select-none transform hover:(text-pink-500 scale-120)"
@click="expandedFormDlg = true"
/>
<SmartsheetRow v-for="(row, rowIndex) in data" :key="rowIndex" :row="row">
<tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell group">
<div class="flex items-center w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="group-hover:flex w-full items-center justify-between p-1"
>
<a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" />
<div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
<MdiArrowExpand
class="select-none transform hover:(text-pink-500 scale-120)"
@click="expandedFormDlg = true"
/>
</div>
</div>
</div>
</div>
</td>
<td
v-for="(columnObj, colIndex) of fields"
:ref="cellRefs.set"
:key="columnObj.id"
class="cell relative cursor-pointer nc-grid-cell"
:class="{
</td>
<td
v-for="(columnObj, colIndex) of fields"
:ref="cellRefs.set"
:key="columnObj.id"
class="cell relative cursor-pointer nc-grid-cell"
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
}"
:data-key="rowIndex + columnObj.id"
:data-col="columnObj.id"
:data-title="columnObj.title"
@click="selectCell(rowIndex, colIndex)"
@dblclick="makeEditable(row, columnObj)"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
>
<div class="w-full h-full">
<SmartsheetVirtualCell
v-if="isVirtualCol(columnObj)"
v-model="row.row[columnObj.title]"
:column="columnObj"
:active="selected.col === colIndex && selected.row === rowIndex"
:row="row"
@navigate="onNavigate"
/>
<SmartsheetCell
v-else
v-model="row.row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
:row-index="rowIndex"
:active="selected.col === colIndex && selected.row === rowIndex"
@update:edit-enabled="editEnabled = false"
@save="updateOrSaveRow(row, columnObj.title)"
@navigate="onNavigate"
@cancel="editEnabled = false"
/>
</div>
</td>
</tr>
:data-key="rowIndex + columnObj.id"
:data-col="columnObj.id"
:data-title="columnObj.title"
@click="selectCell(rowIndex, colIndex)"
@dblclick="makeEditable(row, columnObj)"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
>
<div class="w-full h-full">
<SmartsheetVirtualCell
v-if="isVirtualCol(columnObj)"
v-model="row.row[columnObj.title]"
:column="columnObj"
:active="selected.col === colIndex && selected.row === rowIndex"
:row="row"
@navigate="onNavigate"
/>
<SmartsheetCell
v-else
v-model="row.row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
:row-index="rowIndex"
:active="selected.col === colIndex && selected.row === rowIndex"
@update:edit-enabled="editEnabled = false"
@save="updateOrSaveRow(row, columnObj.title)"
@navigate="onNavigate"
@cancel="editEnabled = false"
/>
</div>
</td>
</tr>
</SmartsheetRow>
<tr v-if="!isLocked">
@ -450,13 +443,11 @@ const expandForm = (row: Row) => {
min-height: 41px !important;
height: 41px !important;
position: relative;
//padding: 0 5px;
}
& > div {
overflow: hidden;
@apply flex align-center h-auto;
padding: 0 5px;
}
td > div {
overflow: hidden;
@apply flex align-center h-auto px-1;
}
table,

66
packages/nc-gui-v2/components/smartsheet/Row.vue
Unescape View File

@ -1,79 +1,23 @@
<script lang="ts" setup>
import { isVirtualCol } from 'nocodb-sdk'
import type { Row } from '~/composables'
import { useSmartsheetStoreOrThrow } from '~/composables'
import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
import { FieldsInj } from '~/context'
interface Props {
row: Row
selected: { col?: number; row?: number }
rowIndex: number
editEnabled: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'navigate'])
const row = toRef(props, 'row')
const rowIndex = toRef(props, 'rowIndex')
const editEnabled = toRef(props, 'editEnabled')
// todo : from props / inject
const isPublicView = false
const fields = inject(FieldsInj, ref([]))
const { meta } = useSmartsheetStoreOrThrow()
const { isNew } = useProvideSmartsheetRowStore(meta, row)
const { isNew, localState } = useProvideSmartsheetRowStore(meta, row)
watch(row, () => {
localState.value = {}
})
</script>
<template>
<tr class="nc-grid-row group">
<td key="row-index" class="caption nc-grid-cell">
<div class="align-center flex w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" class="group-hover:flex w-full align-center">
<a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" />
<mdi-arrow-expand class="text-sm text-pink hidden group-hover:inline-block" @click="emit('expandForm')" />
</div>
</div>
</td>
<td
v-for="(columnObj, colIndex) in fields"
:key="columnObj.title"
class="cell pointer nc-grid-cell"
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
}"
:data-col="columnObj.id"
@click="emit('selectCell', rowIndex, colIndex)"
@dblclick="editEnabled = true"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
>
<div class="w-full h-full">
<SmartsheetVirtualCell
v-if="isVirtualCol(columnObj)"
v-model="row.row[columnObj.title]"
:column="columnObj"
:active="selected.col === colIndex && selected.row === rowIndex"
:row="row"
@navigate="emit('navigate', $event)"
/>
<SmartsheetCell
v-else
v-model="row.row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:edit-enabled="editEnabled = false"
@save="emit('updateOrSaveRow', row, columnObj.title)"
@navigate="emit('navigate', $event)"
@cancel="emit('cancel')"
/>
</div>
</td>
</tr>
<slot />
</template>

2
packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
Unescape View File

@ -5,7 +5,7 @@ import type { Row } from '~/composables/useViewData'
const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
// state
const localState = reactive({})
const localState = ref({})
// getters
const isNew = computed(() => row.value?.rowMeta?.new)

Write Preview
Loading…
Cancel
Save