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

feat(gui-v2): make edit enabled toggle possible 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2992/head
Pranav C 2 years ago
parent
92cdc64119
commit
6057ee687e
6 changed files with 117 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui-v2/components/cell/Text.vue
  2. 1
      packages/nc-gui-v2/components/cell/TextArea.vue
  3. 14
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  4. 192
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  5. 9
      packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
  6. 2
      packages/nc-gui-v2/context/index.ts

2
packages/nc-gui-v2/components/cell/Text.vue
Unescape View File

@ -18,6 +18,6 @@ const focus = (el: HTMLInputElement) => el?.focus()
</script> </script>
<template> <template>
<input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" /> <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" @blur="editEnabled = false" />
<span v-else>{{ vModel }}</span> <span v-else>{{ vModel }}</span>
</template> </template>

1
packages/nc-gui-v2/components/cell/TextArea.vue
Unescape View File

@ -24,6 +24,7 @@ const focus = (el: HTMLTextAreaElement) => el?.focus()
v-model="vModel" v-model="vModel"
rows="4" rows="4"
class="h-full w-full min-h-[60px] outline-none" class="h-full w-full min-h-[60px] outline-none"
@blur="editEnabled = false"
@keydown.alt.enter.stop @keydown.alt.enter.stop
@keydown.shift.enter.stop @keydown.shift.enter.stop
/> />

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

@ -18,11 +18,21 @@ interface Emits {
const { column, ...props } = defineProps<Props>() const { column, ...props } = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'save', 'navigate']) const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'cancel'])
provide(ColumnInj, column) provide(ColumnInj, column)
provide(EditModeInj, toRef(props, 'editEnabled')) provide(
EditModeInj,
computed({
get() {
return props?.editEnabled
},
set() {
return emit('cancel')
},
}),
)
let changed = $ref(false) let changed = $ref(false)
const syncValue = useDebounceFn(function () { const syncValue = useDebounceFn(function () {

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

@ -208,115 +208,117 @@ const onNavigate = (dir: NavigateDir) => {
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']"> <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
<table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true"> <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
<thead> <thead>
<tr class="group"> <tr class="group">
<th> <th>
<div class="flex align-center w-[80px]"> <div class="flex align-center w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div> <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
<div <div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }" :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
class="group-hover:flex w-full align-center" class="group-hover:flex w-full align-center"
> >
<a-checkbox v-model:checked="selectedAllRecords" /> <a-checkbox v-model:checked="selectedAllRecords" />
<span class="flex-1" /> <span class="flex-1" />
</div>
</div> </div>
</div> </th>
</th> <th
<th v-for="col in fields"
v-for="col in fields" :key="col.title"
:key="col.title" v-xc-ver-resize
v-xc-ver-resize :data-col="col.id"
:data-col="col.id" @xcresize="onresize(col.id, $event)"
@xcresize="onresize(col.id, $event)" @xcresizing="onXcResizing(col.title, $event)"
@xcresizing="onXcResizing(col.title, $event)" @xcresized="resizingCol = null"
@xcresized="resizingCol = null" >
> <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> <SmartsheetHeaderCell v-else :column="col" />
<SmartsheetHeaderCell v-else :column="col" /> </th>
</th> <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" --> <th v-t="['c:column:add']" @click="addColumnDropdown = true">
<th v-t="['c:column:add']" @click="addColumnDropdown = true"> <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']"> <div class="h-full w-full flex align-center justify-center">
<div class="h-full w-full flex align-center justify-center"> <MdiPlusIcon class="text-sm" />
<MdiPlusIcon class="text-sm" /> </div>
</div> <template #overlay>
<template #overlay> <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" /> </template>
</template> </a-dropdown>
</a-dropdown> </th>
</th> </tr>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group"> <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
<td key="row-index" class="caption nc-grid-cell"> <td key="row-index" class="caption nc-grid-cell">
<div class="align-center flex w-[80px]"> <div class="align-center flex w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div> <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div <div
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="group-hover:flex w-full align-center" class="group-hover:flex w-full align-center"
> >
<a-checkbox v-model:checked="row.rowMeta.selected" /> <a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" /> <span class="flex-1" />
<MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" /> <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
</div>
</div> </div>
</div> </td>
</td> <td
<td v-for="(columnObj, colIndex) in fields"
v-for="(columnObj, colIndex) in fields" :key="rowIndex + columnObj.title"
:key="rowIndex + columnObj.title" class="cell pointer nc-grid-cell"
class="cell pointer nc-grid-cell" :class="{
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex, active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
}" }"
:data-col="columnObj.id" :data-col="columnObj.id"
@click="selectCell(rowIndex, colIndex)" @click="selectCell(rowIndex, colIndex)"
@dblclick="editEnabled = true" @dblclick="editEnabled = true"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }" @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
> >
<div class="w-full h-full"> <div class="w-full h-full">
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" <SmartsheetVirtualCell
:column="columnObj" v-if="isVirtualCol(columnObj)"
@navigate="onNavigate" v-model="row.row[columnObj.title]"
/> :column="columnObj"
@navigate="onNavigate"
/>
<SmartsheetCell <SmartsheetCell
v-else v-else
v-model="row.row[columnObj.title]" v-model="row.row[columnObj.title]"
:column="columnObj" :column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex" :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@save="updateOrSaveRow(row, columnObj.title)" @save="updateOrSaveRow(row, columnObj.title)"
@navigate="onNavigate" @navigate="onNavigate"
/> @cancel="editEnabled = false"
</div> />
</td> </div>
</tr> </td>
</tr>
<tr v-if="!isLocked"> <tr v-if="!isLocked">
<td <td
v-t="['c:row:add:grid-bottom']" v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1" :colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell" class="text-left pointer nc-grid-add-new-cell"
@click="addEmptyRow()" @click="addEmptyRow()"
> >
<a-tooltip top left> <a-tooltip top left>
<div class="w-min flex align-center"> <div class="w-min flex align-center">
<MdiPlusIcon class="text-pint-500 text-xs" /> <MdiPlusIcon class="text-pint-500 text-xs" />
<span class="ml-1 caption grey--text"> <span class="ml-1 caption grey--text">
{{ $t('activity.addRow') }} {{ $t('activity.addRow') }}
</span> </span>
</div> </div>
<template #title> <template #title>
<span class="caption"> Add new row</span> <span class="caption"> Add new row</span>
</template> </template>
</a-tooltip> </a-tooltip>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<template #overlay> <template #overlay>
<div class="bg-white shadow" @click="contextMenu = false"> <div class="bg-white shadow" @click="contextMenu = false">
<div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
</div>
<div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div> <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
<div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div> <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
<div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)"> <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">

9
packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
Unescape View File

@ -4,7 +4,6 @@ import { provide, useVirtualCell } from '#imports'
import { ColumnInj } from '~/context' import { ColumnInj } from '~/context'
import { NavigateDir } from '~/lib' import { NavigateDir } from '~/lib'
interface Props { interface Props {
column: ColumnType column: ColumnType
modelValue: any modelValue: any
@ -21,9 +20,11 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
</script> </script>
<template> <template>
<div class="nc-virtual-cell" <div
@keydown.stop.enter.exact="emit('navigate',NavigateDir.NEXT)" class="nc-virtual-cell"
@keydown.stop.shift.enter.exact="emit('navigate',NavigateDir.PREV)"> @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
@keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
>
<VirtualCellHasMany v-if="isHm" /> <VirtualCellHasMany v-if="isHm" />
<VirtualCellManyToMany v-else-if="isMm" /> <VirtualCellManyToMany v-else-if="isMm" />
<VirtualCellBelongsTo v-else-if="isBt" /> <VirtualCellBelongsTo v-else-if="isBt" />

2
packages/nc-gui-v2/context/index.ts
Unescape View File

@ -21,4 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection') export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection') export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection') export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')

Write Preview
Loading…
Cancel
Save