Browse Source

fix(gui): hide prev icon for first row and next icon for last row

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5184/head
Pranav C 2 years ago
parent
commit
77e3796bbb
  1. 3
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 6
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  3. 12
      packages/nc-gui/composables/useViewData.ts

3
packages/nc-gui/components/smartsheet/Grid.vue

@ -118,6 +118,7 @@ const {
selectedAllRecords,
removeRowIfNew,
navigateToSiblingRow,
getExpandedRowIndex
} = useViewData(meta, view, xWhere)
const { getMeta } = useMetas()
@ -982,6 +983,8 @@ const closeAddColumnDropdown = () => {
show-next-prev-icons
@next="navigateToSiblingRow(NavigateDir.NEXT)"
@prev="navigateToSiblingRow(NavigateDir.PREV)"
:first-row="getExpandedRowIndex() === 0"
:last-row="getExpandedRowIndex() === paginationData.totalRows - 1"
/>
</Suspense>
</div>

6
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -35,6 +35,8 @@ interface Props {
rowId?: string
view?: ViewType
showNextPrevIcons?: boolean
firstRow?: boolean
lastRow?: boolean
}
const props = defineProps<Props>()
@ -280,7 +282,7 @@ export default {
<div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
<div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container relative">
<template v-if="props.showNextPrevIcons">
<a-tooltip placement="bottom">
<a-tooltip placement="bottom" v-if="!props.firstRow">
<template #title>
{{ $t('labels.prevRow') }}
@ -289,7 +291,7 @@ export default {
<MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
</a-tooltip>
<a-tooltip placement="bottom">
<a-tooltip placement="bottom" v-if="!props.lastRow">
<template #title>
{{ $t('labels.nextRow') }}
<GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />

12
packages/nc-gui/composables/useViewData.ts

@ -477,11 +477,16 @@ export function useViewData(
}
}
const navigateToSiblingRow = async (dir: NavigateDir) => {
// get current expanded row index
const expandedRowIndex = formattedData.value.findIndex(
// get current expanded row index
function getExpandedRowIndex() {
return formattedData.value.findIndex(
(row: Row) => routeQuery.rowId === extractPkFromRow(row.row, meta.value?.columns as ColumnType[]),
)
}
const navigateToSiblingRow = async (dir: NavigateDir) => {
const expandedRowIndex = getExpandedRowIndex()
// calculate next row index based on direction
let siblingRowIndex = expandedRowIndex + (dir === NavigateDir.NEXT ? 1 : -1)
@ -547,5 +552,6 @@ export function useViewData(
removeRowIfNew,
navigateToSiblingRow,
deleteRowById,
getExpandedRowIndex
}
}

Loading…
Cancel
Save