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

chore(gui-v2): lint 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3339/head
Pranav C 2 years ago
parent
9ccf78a516
commit
d70c309505
1 changed files with 166 additions and 166 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. 332
      packages/nc-gui-v2/components/smartsheet/Grid.vue

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

@ -174,7 +174,7 @@ const makeEditable = (row: Row, col: ColumnType) => {
return return
} }
if (!isPkAvail.value && !row.rowMeta.new) { if (!isPkAvail.value && !row.rowMeta.new) {
message.info('Update not allowed for table which doesn\'t have primary Key') message.info("Update not allowed for table which doesn't have primary Key")
return return
} }
if (col.ai) { if (col.ai) {
@ -240,34 +240,35 @@ const onKeyDown = async (e: KeyboardEvent) => {
e.preventDefault() e.preventDefault()
if (selected.row < data.value.length - 1) selected.row++ if (selected.row < data.value.length - 1) selected.row++
break break
default: { default:
const rowObj = data.value[selected.row] {
const columnObj = fields.value[selected.col] const rowObj = data.value[selected.row]
const columnObj = fields.value[selected.col]
if (!editEnabled && e.metaKey || e.ctrlKey) {
switch (e.keyCode) { if ((!editEnabled && e.metaKey) || e.ctrlKey) {
// copy - ctrl/cmd +c switch (e.keyCode) {
case 67: // copy - ctrl/cmd +c
await copy(rowObj.row[columnObj.title] || '') case 67:
break 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 (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
if (e?.key?.length === 1) { return
if (!isPkAvail && !rowObj.rowMeta.new) {
return message.info('Update not allowed for table which doesn\'t have primary Key')
} }
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) {
return message.info("Update not allowed for table which doesn't have primary Key")
}
if (makeEditable(rowObj, columnObj)) {
rowObj.row[columnObj.title] = ''
}
// editEnabled = true
} }
// editEnabled = true
} }
}
break break
} }
} }
@ -318,88 +319,87 @@ const onNavigate = (dir: NavigateDir) => {
@contextmenu.prevent="contextMenu = true" @contextmenu.prevent="contextMenu = true"
> >
<thead> <thead>
<tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]"> <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
<th> <th>
<div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center"> <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
<template v-if="!readOnly"> <template v-if="!readOnly">
<div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div> <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
<div <div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }" :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
class="nc-check-all w-full items-center" class="nc-check-all w-full items-center"
> >
<a-checkbox v-model:checked="selectedAllRecords" /> <a-checkbox v-model:checked="selectedAllRecords" />
<span class="flex-1" /> <span class="flex-1" />
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="text-gray-500">#</div> <div class="text-gray-500">#</div>
</template> </template>
</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"
:data-title="col.title" :data-title="col.title"
@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"
> >
<div class="w-full h-full bg-gray-100 flex items-center"> <div class="w-full h-full bg-gray-100 flex items-center">
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" /> <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" /> <SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
</div>
</th>
<th
v-if="!readOnly && !isLocked && isUIAllowed('add-column')"
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> </div>
</th>
<th
v-if="!readOnly && !isLocked && isUIAllowed('add-column')"
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> <template #overlay>
<SmartsheetColumnEditOrAddProvider <SmartsheetColumnEditOrAddProvider
v-if="addColumnDropdown" v-if="addColumnDropdown"
@submit="addColumnDropdown = false" @submit="addColumnDropdown = false"
@cancel="addColumnDropdown = false" @cancel="addColumnDropdown = false"
@click.stop @click.stop
@keydown.stop @keydown.stop
/> />
</template> </template>
</a-dropdown> </a-dropdown>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row"> <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
<template #default="{ state }"> <template #default="{ state }">
<tr class="nc-grid-row"> <tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1"> <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
<div class="items-center flex gap-1 min-w-[55px]"> <div class="items-center flex gap-1 min-w-[55px]">
<div <div
v-if="!readOnly || !isLocked" v-if="!readOnly || !isLocked"
class="nc-row-no text-xs text-gray-500" class="nc-row-no text-xs text-gray-500"
:class="{ hidden: row.rowMeta.selected }" :class="{ hidden: row.rowMeta.selected }"
> >
{{ rowIndex + 1 }} {{ rowIndex + 1 }}
</div> </div>
<div <div
v-if="!readOnly" v-if="!readOnly"
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="nc-row-expand-and-checkbox" class="nc-row-expand-and-checkbox"
> >
<a-checkbox v-model:checked="row.rowMeta.selected" /> <a-checkbox v-model:checked="row.rowMeta.selected" />
</div> </div>
<span class="flex-1" /> <span class="flex-1" />
<div v-if="!readOnly && !isLocked" class="nc-expand" <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
:class="{ 'nc-comment': row.rowMeta?.commentCount }">
<span <span
v-if="row.rowMeta?.commentCount" v-if="row.rowMeta?.commentCount"
class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)" class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
@ -408,86 +408,86 @@ const onNavigate = (dir: NavigateDir) => {
> >
{{ row.rowMeta.commentCount }} {{ row.rowMeta.commentCount }}
</span> </span>
<div <div
v-else v-else
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)" class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
> >
<MdiArrowExpand <MdiArrowExpand
class="select-none transform hover:(text-accent scale-120) nc-row-expand" class="select-none transform hover:(text-accent scale-120) nc-row-expand"
@click="expandForm(row, state)" @click="expandForm(row, state)"
/> />
</div>
</div> </div>
</div> </div>
</div> </td>
</td> <td
<td v-for="(columnObj, colIndex) of fields"
v-for="(columnObj, colIndex) of fields" :ref="cellRefs.set"
:ref="cellRefs.set" :key="columnObj.id"
:key="columnObj.id" class="cell relative cursor-pointer nc-grid-cell"
class="cell relative cursor-pointer nc-grid-cell" :class="{
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex, active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
}" }"
:data-key="rowIndex + columnObj.id" :data-key="rowIndex + columnObj.id"
:data-col="columnObj.id" :data-col="columnObj.id"
:data-title="columnObj.title" :data-title="columnObj.title"
@click="selectCell(rowIndex, colIndex)" @click="selectCell(rowIndex, colIndex)"
@dblclick="makeEditable(row, columnObj)" @dblclick="makeEditable(row, columnObj)"
@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 <SmartsheetVirtualCell
v-if="isVirtualCol(columnObj)" v-if="isVirtualCol(columnObj)"
v-model="row.row[columnObj.title]" v-model="row.row[columnObj.title]"
:column="columnObj" :column="columnObj"
:active="selected.col === colIndex && selected.row === rowIndex" :active="selected.col === colIndex && selected.row === rowIndex"
:row="row" :row="row"
@navigate="onNavigate" @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=" :edit-enabled="
isUIAllowed('xcDatatableEditable') && isUIAllowed('xcDatatableEditable') &&
editEnabled && editEnabled &&
selected.col === colIndex && selected.col === colIndex &&
selected.row === rowIndex selected.row === rowIndex
" "
:row-index="rowIndex" :row-index="rowIndex"
:active="selected.col === colIndex && selected.row === rowIndex" :active="selected.col === colIndex && selected.row === rowIndex"
@update:edit-enabled="editEnabled = false" @update:edit-enabled="editEnabled = false"
@save="updateOrSaveRow(row, columnObj.title)" @save="updateOrSaveRow(row, columnObj.title)"
@navigate="onNavigate" @navigate="onNavigate"
@cancel="editEnabled = false" @cancel="editEnabled = false"
/> />
</div> </div>
</td> </td>
</tr> </tr>
</template> </template>
</SmartsheetRow> </SmartsheetRow>
<!-- <!--
TODO: add relationType !== 'bt' ? TODO: add relationType !== 'bt' ?
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'"> v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
--> -->
<tr v-if="!isView && !isLocked && !isPublicView && isUIAllowed('xcDatatableEditable')"> <tr v-if="!isView && !isLocked && !isPublicView && isUIAllowed('xcDatatableEditable')">
<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 cursor-pointer" class="text-left pointer nc-grid-add-new-cell cursor-pointer"
@click="addEmptyRow()" @click="addEmptyRow()"
> >
<div class="px-2 w-full flex items-center text-gray-500"> <div class="px-2 w-full flex items-center text-gray-500">
<MdiPlus class="text-pint-500 text-xs ml-2 text-primary" /> <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
<span class="ml-1"> <span class="ml-1">
{{ $t('activity.addRow') }} {{ $t('activity.addRow') }}
</span> </span>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

Write Preview
Loading…
Cancel
Save