Browse Source

refactor: add sticky button for adding row

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5805/head
Pranav C 2 years ago
parent
commit
1ba6c4860b
  1. 28
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 24
      packages/nc-gui/components/smartsheet/Pagination.vue

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

@ -1004,23 +1004,17 @@ const deleteSelectedRangeOfRows = () => {
</template>
</LazySmartsheetRow>
<tr
v-if="isAddingEmptyRowAllowed"
<tr v-if="isAddingEmptyRowAllowed">
<td
v-e="['c:row:add:grid-bottom']"
class="!sticky bottom-0 left-0 z-6 cursor-pointer"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell cursor-pointer"
@click="addEmptyRow()"
>
<td style="border-top: 1px solid #eee !important;" :colspan="2" class="text-left pointer nc-grid-add-new-cell !sticky lef-0 !border-0">
<div class="px-2 w-full flex items-center text-gray-500 !z-5">
<div class="px-2 w-full flex items-center text-gray-500">
<component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
<span class="ml-1">
{{ $t('activity.addRow') }}
</span>
</div>
</td>
<td style="border-top: 1px solid #eee !important;" v-e="['c:row:add:grid-bottom']" class="!z-0 !border-0" :colspan="visibleColLength - 1"></td>
</tr>
</tbody>
</table>
@ -1082,8 +1076,18 @@ const deleteSelectedRangeOfRows = () => {
</a-dropdown>
</div>
<LazySmartsheetPagination />
<div class="absolute bottom-4 left-4 z-4" @click="addEmptyRow()">
<a-button v-e="['c:row:add:grid-bottom', { footer: true }]" class="!rounded-xl">
<div class="flex items-center">
<component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
<span class="ml-1">
{{ $t('activity.addRow') }}
</span>
</div>
</a-button>
</div>
<LazySmartsheetPagination align-count-on-right> </LazySmartsheetPagination>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"

24
packages/nc-gui/components/smartsheet/Pagination.vue

@ -1,6 +1,10 @@
<script setup lang="ts">
import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports'
const props = defineProps<{
alignCountOnRight?: boolean
}>()
const paginatedData = inject(PaginationDataInj)!
const changePage = inject(ChangePageInj)!
@ -19,11 +23,15 @@ const page = computed({
<template>
<div class="flex items-center mb-1">
<span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500" data-testid="grid-pagination">
<div class="flex-1">
<span
v-if="!alignCountOnRight && count !== null && count !== Infinity"
class="caption ml-5 text-gray-500"
data-testid="grid-pagination"
>
{{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
</span>
<div class="flex-1" />
</div>
<a-pagination
v-if="count !== Infinity"
@ -44,7 +52,15 @@ const page = computed({
</a-input>
</div>
<div class="flex-1" />
<div class="flex-1 text-right pr-2">
<span
v-if="alignCountOnRight && count !== null && count !== Infinity"
class="caption mr-5 text-gray-500"
data-testid="grid-pagination"
>
{{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
</span>
</div>
</div>
</template>

Loading…
Cancel
Save