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

chore(gui): lint 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3569/head
Pranav C 2 years ago
parent
3d1efe1087
commit
48a1e36faf
8 changed files with 194 additions and 195 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. 3
      packages/nc-gui/components/smartsheet/Cell.vue
  2. 352
      packages/nc-gui/components/smartsheet/Grid.vue
  3. 2
      packages/nc-gui/components/smartsheet/Row.vue
  4. 2
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  5. 6
      packages/nc-gui/components/tabs/Smartsheet.vue
  6. 2
      packages/nc-gui/composables/useSmartsheetRowStore.ts
  7. 16
      packages/nc-gui/composables/useViewData.ts
  8. 6
      packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

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

@ -15,9 +15,9 @@ import {
toRef,
useColumn,
useDebounceFn,
useSmartsheetRowStoreOrThrow,
useVModel,
} from '#imports'
import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
import { NavigateDir } from '~/lib'
interface Props {
@ -65,7 +65,6 @@ const syncValue = useDebounceFn(function () {
emit('save')
}, 1000)
const isAutoSaved = $computed(() => {
return [
UITypes.SingleLineText,

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

@ -248,35 +248,36 @@ const onKeyDown = async (e: KeyboardEvent) => {
e.preventDefault()
if (selected.row < data.value.length - 1) selected.row++
break
default: {
const rowObj = data.value[selected.row]
const columnObj = fields.value[selected.col]
if ((!editEnabled && e.metaKey) || e.ctrlKey) {
switch (e.keyCode) {
// copy - ctrl/cmd +c
case 67:
await copy(rowObj.row[columnObj.title] || '')
break
default:
{
const rowObj = data.value[selected.row]
const columnObj = fields.value[selected.col]
if ((!editEnabled && e.metaKey) || e.ctrlKey) {
switch (e.keyCode) {
// copy - ctrl/cmd +c
case 67:
await copy(rowObj.row[columnObj.title] || '')
break
}
}
}
if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
return
}
/** on letter key press make cell editable and empty */
if (e?.key?.length === 1) {
if (!isPkAvail && !rowObj.rowMeta.new) {
// Update not allowed for table which doesn't have primary Key
return message.info(t('msg.info.updateNotAllowedWithoutPK'))
if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
return
}
if (makeEditable(rowObj, columnObj)) {
rowObj.row[columnObj.title] = ''
/** on letter key press make cell editable and empty */
if (e?.key?.length === 1) {
if (!isPkAvail && !rowObj.rowMeta.new) {
// Update not allowed for table which doesn't have primary Key
return message.info(t('msg.info.updateNotAllowedWithoutPK'))
}
if (makeEditable(rowObj, columnObj)) {
rowObj.row[columnObj.title] = ''
}
// editEnabled = true
}
// editEnabled = true
}
}
break
}
}
@ -326,16 +327,21 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
const rowRefs = $ref<any[]>()
/** save/update records before unmounting the component */
onBeforeUnmount(async () => {
console.log(rowRefs)
for (const [index, currentRow] of Object.entries(data.value)) {
let index = -1
for (const currentRow of data.value) {
index++
/** if new record save row and save the LTAR cells */
if (currentRow.rowMeta.new) {
const syncLTARRefs = rowRefs[index]!.syncLTARRefs
const savedRow = await updateOrSaveRow(currentRow, null)
const savedRow = await updateOrSaveRow(currentRow, '')
await syncLTARRefs(savedRow)
currentRow.rowMeta.changed = false
continue
}
/** if existing row check updated cell and invoke update method */
if (currentRow.rowMeta.changed) {
currentRow.rowMeta.changed = false
for (const field of meta?.value.columns ?? []) {
@ -347,7 +353,6 @@ onBeforeUnmount(async () => {
}
}
})
</script>
<template>
@ -363,88 +368,87 @@ onBeforeUnmount(async () => {
@contextmenu="showContextMenu"
>
<thead>
<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 }"
class="nc-check-all w-full items-center"
>
<a-checkbox v-model:checked="selectedAllRecords" />
<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 }"
class="nc-check-all w-full items-center"
>
<a-checkbox v-model:checked="selectedAllRecords" />
<span class="flex-1" />
</div>
</template>
<template v-else>
<div class="text-gray-500">#</div>
</template>
</div>
</th>
<th
v-for="col in fields"
:key="col.title"
v-xc-ver-resize
:data-col="col.id"
:data-title="col.title"
@xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)"
@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" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
</div>
</th>
<th
v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
v-t="['c:column:add']"
class="cursor-pointer"
@click.stop="addColumnDropdown = true"
>
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<div class="h-full w-[60px] flex items-center justify-center">
<MdiPlus class="text-sm nc-column-add" />
<span class="flex-1" />
</div>
</template>
<template v-else>
<div class="text-gray-500">#</div>
</template>
</div>
</th>
<th
v-for="col in fields"
:key="col.title"
v-xc-ver-resize
:data-col="col.id"
:data-title="col.title"
@xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)"
@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" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
</div>
</th>
<th
v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
v-t="['c:column:add']"
class="cursor-pointer"
@click.stop="addColumnDropdown = true"
>
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<div class="h-full w-[60px] flex items-center justify-center">
<MdiPlus class="text-sm nc-column-add" />
</div>
<template #overlay>
<SmartsheetColumnEditOrAddProvider
v-if="addColumnDropdown"
@submit="addColumnDropdown = false"
@cancel="addColumnDropdown = false"
@click.stop
@keydown.stop
/>
</template>
</a-dropdown>
</th>
</tr>
<template #overlay>
<SmartsheetColumnEditOrAddProvider
v-if="addColumnDropdown"
@submit="addColumnDropdown = false"
@cancel="addColumnDropdown = false"
@click.stop
@keydown.stop
/>
</template>
</a-dropdown>
</th>
</tr>
</thead>
<tbody>
<SmartsheetRow ref="rowRefs" v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
<template #default="{ state }">
<tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
<div class="items-center flex gap-1 min-w-[55px]">
<div
v-if="!readOnly || !isLocked"
class="nc-row-no text-xs text-gray-500"
:class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
>
{{ rowIndex + 1 }}
</div>
<div
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 && !isLocked" class="nc-expand"
:class="{ 'nc-comment': row.rowMeta?.commentCount }">
<SmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
<template #default="{ state }">
<tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
<div class="items-center flex gap-1 min-w-[55px]">
<div
v-if="!readOnly || !isLocked"
class="nc-row-no text-xs text-gray-500"
:class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
>
{{ rowIndex + 1 }}
</div>
<div
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 && !isLocked" 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)"
@ -453,87 +457,87 @@ onBeforeUnmount(async () => {
>
{{ row.rowMeta.commentCount }}
</span>
<div
v-else
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
>
<MdiArrowExpand
v-t="['c:row-expand']"
class="select-none transform hover:(text-accent scale-120) nc-row-expand"
@click="expandForm(row, state)"
/>
<div
v-else
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
>
<MdiArrowExpand
v-t="['c:row-expand']"
class="select-none transform hover:(text-accent scale-120) nc-row-expand"
@click="expandForm(row, state)"
/>
</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: isUIAllowed('xcDatatableEditable') && 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="showContextMenu($event, { 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="
:data-key="rowIndex + columnObj.id"
:data-col="columnObj.id"
:data-title="columnObj.title"
@click="selectCell(rowIndex, colIndex)"
@dblclick="makeEditable(row, columnObj)"
@contextmenu="showContextMenu($event, { 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="
isUIAllowed('xcDatatableEditable') &&
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>
</template>
</SmartsheetRow>
<!--
TODO: add relationType !== 'bt' ?
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-->
<tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
<td
v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell cursor-pointer"
@click="addEmptyRow()"
>
<div class="px-2 w-full flex items-center text-gray-500">
<MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
<span class="ml-1">
: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>
</template>
</SmartsheetRow>
<!--
TODO: add relationType !== 'bt' ?
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-->
<tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
<td
v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell cursor-pointer"
@click="addEmptyRow()"
>
<div class="px-2 w-full flex items-center text-gray-500">
<MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
<span class="ml-1">
{{ $t('activity.addRow') }}
</span>
</div>
</td>
</tr>
</div>
</td>
</tr>
</tbody>
</table>

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

@ -35,7 +35,7 @@ reloadHook.on(() => {
provide(ReloadRowDataHookInj, reloadHook)
defineExpose({
syncLTARRefs
syncLTARRefs,
})
</script>

2
packages/nc-gui/components/smartsheet/expanded-form/index.vue
Unescape View File

@ -6,11 +6,11 @@ import Cell from '../Cell.vue'
import VirtualCell from '../VirtualCell.vue'
import Comments from './Comments.vue'
import Header from './Header.vue'
import { ReloadRowDataHookInj } from '~/context'
import {
FieldsInj,
IsFormInj,
MetaInj,
ReloadRowDataHookInj,
computedInject,
provide,
ref,

6
packages/nc-gui/components/tabs/Smartsheet.vue
Unescape View File

@ -21,7 +21,6 @@ import {
import type { TabItem } from '~/composables'
const { activeTab } = defineProps<{
activeTab: TabItem
}>()
@ -38,10 +37,7 @@ const fields = ref<ColumnType[]>([])
// TabMetaInj,
// computed(() => ({} as TabItem)),
// )
provide(
TabMetaInj,
ref(activeTab),
)
provide(TabMetaInj, ref(activeTab))
const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
const reloadEventHook = createEventHook<void>()

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

@ -134,7 +134,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
removeLTARRef,
syncLTARRefs,
loadRow,
currentRow
currentRow,
}
}, 'smartsheet-row-store')

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

@ -166,12 +166,12 @@ export function useViewData(
if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
const response = !isPublic.value
? await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
...queryParams.value,
...params,
...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
where: where?.value,
})
...queryParams.value,
...params,
...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
where: where?.value,
})
: await fetchSharedViewData()
formattedData.value = formatData(response.list)
paginationData.value = response.pageInfo
@ -251,11 +251,11 @@ export function useViewData(
}
}
async function updateOrSaveRow(row: Row, property: string) {
async function updateOrSaveRow(row: Row, property?: string) {
if (row.rowMeta.new) {
return await insertRow(row.row, formattedData.value.indexOf(row))
} else {
await updateRowProperty(row, property)
await updateRowProperty(row, property!)
}
}

6
packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
Unescape View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { TabItem } from '~/composables'
import { TabMetaInj } from '~/context'
import type { TabItem } from '~/composables'
import { TabMetaInj } from '#imports'
const { getMeta } = useMetas()
const route = useRoute()
@ -20,7 +20,7 @@ getMeta(route.params.title as string, true).finally(() => {
<div v-if="loading" class="flex items-center justify-center h-full w-full">
<a-spin size="large" />
</div>
<TabsSmartsheet :active-tab="activeTab" :key="route.params.title" v-else />
<TabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
</template>
<style scoped></style>

Write Preview
Loading…
Cancel
Save