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

feat(gui-v2): context menu 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2947/head
Pranav C 2 years ago
parent
8b41cbe09d
commit
97c894dcab
2 changed files with 206 additions and 105 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. 198
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 113
      packages/nc-gui-v2/composables/useViewData.ts

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

@ -39,6 +39,8 @@ const editEnabled = ref(false)
const { sqlUi } = useProject()
const { xWhere } = useSmartsheetStoreOrThrow()
const addColumnDropdown = ref(false)
const contextMenu = ref(false)
const contextMenuTarget = ref(false)
const visibleColLength = computed(() => {
const cols = fields.value
@ -51,8 +53,10 @@ const {
formattedData: data,
updateRowProperty,
changePage,
addRow,
addEmptyRow,
selectedRows,
deleteRow,
deleteSelectedRows,
} = useViewData(meta, view as any, xWhere)
const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
onMounted(loadGridViewColumns)
@ -105,103 +109,116 @@ defineExpose({
// watchEffect(() => {
if (meta) useProvideColumnCreateStore(meta)
// })
// reset context menu target on hide
watch(contextMenu, () => (contextMenuTarget.value = null))
</script>
<template>
<div class="flex flex-col h-100 min-h-0 w-100">
<div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
<table class="xc-row-table nc-grid backgroundColorDefault">
<thead>
<tr>
<th>#</th>
<th
v-for="col in fields"
:key="col.title"
v-xc-ver-resize
:data-col="col.id"
@xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)"
@xcresized="resizingCol = null"
>
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderCell v-else :column="col" />
</th>
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
<th v-t="['c:column:add']" @click="addColumnDropdown = true">
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<div class="h-full w-full flex align-center justify-center">
<MdiPlusIcon class="text-sm" />
</div>
<template #overlay>
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
</template>
</a-dropdown>
</th>
</tr>
</thead>
<tbody>
<tr v-for="({ row, rowMeta }, rowIndex) in data" :key="rowIndex" 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: rowMeta.checked }">{{ rowIndex + 1 }}</div>
<div :class="{ hidden: !rowMeta.checked, flex: rowMeta.checked }" class="group-hover:flex w-full align-center">
<a-checkbox v-model:checked="rowMeta.checked" />
<span class="flex-1" />
<MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
<div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
<table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
<thead>
<tr>
<th>#</th>
<th
v-for="col in fields"
:key="col.title"
v-xc-ver-resize
:data-col="col.id"
@xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)"
@xcresized="resizingCol = null"
>
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderCell v-else :column="col" />
</th>
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
<th v-t="['c:column:add']" @click="addColumnDropdown = true">
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<div class="h-full w-full flex align-center justify-center">
<MdiPlusIcon class="text-sm" />
</div>
<template #overlay>
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
</template>
</a-dropdown>
</th>
</tr>
</thead>
<tbody>
<tr v-for="({ row, rowMeta }, rowIndex) in data" :key="rowIndex" 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: rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div
:class="{ hidden: !rowMeta.selected, flex: rowMeta.selected }"
class="group-hover:flex w-full align-center"
>
<a-checkbox v-model:checked="rowMeta.selected" />
<span class="flex-1" />
<MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
</div>
</div>
</div>
</td>
<td
v-for="(columnObj, colIndex) in fields"
:key="rowIndex + columnObj.title"
class="cell pointer nc-grid-cell"
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex
}"
:data-col="columnObj.id"
@click="selectCell(rowIndex, colIndex)"
@dblclick="editEnabled = true"
>
</td>
<td
v-for="(columnObj, colIndex) in fields"
:key="rowIndex + columnObj.title"
class="cell pointer nc-grid-cell"
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
}"
:data-col="columnObj.id"
@click="selectCell(rowIndex, colIndex)"
@dblclick="editEnabled = true"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
>
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
<SmartsheetCell
v-else
v-model="row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:model-value="updateRowProperty(row, columnObj.title)"
/>
</td>
</tr>
<SmartsheetCell
v-else
v-model="row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:model-value="updateRowProperty(row, columnObj.title)"
/>
</td>
</tr>
<tr v-if="!isLocked">
<td
v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell"
@click="addRow()"
>
<a-tooltip top left>
<div class="w-min flex align-center">
<MdiPlusIcon class="text-pint-500 text-xs" />
<span class="ml-1 caption grey--text">
{{ $t('activity.addRow') }}
</span>
</div>
<template #title>
<span class="caption"> Add new row</span>
</template>
</a-tooltip>
</td>
</tr>
</tbody>
</table>
</div>
<SmartsheetPagination />
<a-dropdown :trigger="['contextmenu']">
<
<tr v-if="!isLocked">
<td
v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell"
@click="addEmptyRow()"
>
<a-tooltip top left>
<div class="w-min flex align-center">
<MdiPlusIcon class="text-pint-500 text-xs" />
<span class="ml-1 caption grey--text">
{{ $t('activity.addRow') }}
</span>
</div>
<template #title>
<span class="caption"> Add new row</span>
</template>
</a-tooltip>
</td>
</tr>
</tbody>
</table>
</div>
<template #overlay>
<div class="bg-white shadow">
<div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
<div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
<div v-if="contextMenuTarget" class="nc-menu-item">Clear cell</div>
<div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">Insert new row</div>
</div>
</template>
</a-dropdown>
<SmartsheetPagination />
</div>
</template>
@ -222,6 +239,7 @@ if (meta) useProvideColumnCreateStore(meta)
& > * {
@apply flex align-center h-auto;
}
overflow: hidden;
}

113
packages/nc-gui-v2/composables/useViewData.ts
Unescape View File

@ -1,9 +1,9 @@
import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
import type { ComputedRef, Ref } from 'vue'
import { notification } from 'ant-design-vue'
import { useNuxtApp } from '#app'
import { useProject } from '#imports'
import { NOCO } from '~/lib'
import { notification } from 'ant-design-vue'
import { extractSdkResponseErrorMsg } from '~/utils'
const formatData = (list: Record<string, any>[]) =>
@ -13,13 +13,18 @@ const formatData = (list: Record<string, any>[]) =>
rowMeta: {},
}))
interface Row {
row: Record<string, any>
oldRow: Record<string, any>
rowMeta?: any
}
export function useViewData(
meta: Ref<TableType> | ComputedRef<TableType> | undefined,
viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
where?: ComputedRef<string | undefined>,
) {
const data = ref<Record<string, any>[]>()
const formattedData = ref<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }[]>([])
const formattedData = ref<Row[]>([])
const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
const selectedRows = reactive([])
@ -32,7 +37,6 @@ export function useViewData(
...params,
where: where?.value,
})
data.value = response.list
formattedData.value = formatData(response.list)
paginationData.value = response.pageInfo
}
@ -74,11 +78,10 @@ export function useViewData(
})
.then(() => {})
*/
} catch (error) {
} catch (error: any) {
notification.error({
message: 'Row update failed',
description:
await extractSdkResponseErrorMsg(error),
description: await extractSdkResponseErrorMsg(error),
})
}
}
@ -104,11 +107,10 @@ export function useViewData(
rowMeta: {},
oldRow: { ...insertedData },
})
} catch (error) {
} catch (error: any) {
notification.error({
message: 'Row insert failed',
description:
await extractSdkResponseErrorMsg(error),
description: await extractSdkResponseErrorMsg(error),
})
}
}
@ -118,23 +120,104 @@ export function useViewData(
await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any)
}
const addRow = () => {
formattedData.value.push({
const addEmptyRow = (addAfter = formattedData.value.length) => {
formattedData.value[addAfter] = {
row: {},
oldRow: {},
rowMeta: { new: true },
})
}
}
const deleteRowById = async (id: string) => {
if (!id) {
throw new Error("Delete not allowed for table which doesn't have primary Key")
}
const res: any = await $api.dbViewRow.delete(
'noco',
project.value.id as string,
meta?.value.id as string,
viewMeta?.value.id as string,
id,
)
if (res.message) {
notification.info({
message: 'Row delete failed',
description: h('div', {
innerHTML: `<div style="padding:10px 4px">Unable to delete row with ID ${id} because of the following:
<br><br>${res.message.join('<br>')}<br><br>
Clear the data first & try again</div>`,
}),
})
return false
}
return true
}
const deleteRow = async (rowIndex: number) => {
try {
const row = formattedData.value[rowIndex]
if (row.rowMeta.new) {
const id = meta?.value?.columns
?.filter((c) => c.pk)
.map((c) => row.row[c.title as any])
.join('___')
const deleted = await deleteRowById(id as string)
if (!deleted) {
return
}
}
formattedData.value.splice(rowIndex, 1)
} catch (e: any) {
notification.error({
message: 'Failed to delete row',
description: await extractSdkResponseErrorMsg(e),
})
}
}
const deleteSelectedRows = async () => {
let row = formattedData.value.length
while (row--) {
try {
const { row: rowObj, rowMeta } = formattedData.value[row]
if (!rowMeta.selected) {
continue
}
if (!rowMeta.new) {
const id = meta?.value?.columns
?.filter((c) => c.pk)
.map((c) => rowObj[c.title as string])
.join('___')
const successfulDeletion = await deleteRowById(id as string)
if (!successfulDeletion) {
continue
}
}
formattedData.value.splice(row, 1)
} catch (e: any) {
return notification.error({
message: 'Failed to delete row',
description: await extractSdkResponseErrorMsg(e),
})
}
}
}
return {
data,
loadData,
paginationData,
formattedData,
insertRow,
updateRowProperty,
changePage,
addRow,
addEmptyRow,
selectedRows,
deleteRow,
deleteSelectedRows,
}
}

Write Preview
Loading…
Cancel
Save