Browse Source

fix: Added event to add row btn and pagination of grid

pull/6539/head
Muhammed Mustafa 1 year ago
parent
commit
b02f42fa48
  1. 15
      packages/nc-gui/components/nc/Pagination.vue
  2. 1
      packages/nc-gui/components/smartsheet/Pagination.vue
  3. 13
      packages/nc-gui/components/smartsheet/grid/Table.vue

15
packages/nc-gui/components/nc/Pagination.vue

@ -3,6 +3,7 @@ const props = defineProps<{
current: number current: number
total: number total: number
pageSize: number pageSize: number
entityName?: string
}>() }>()
const emits = defineEmits(['update:current', 'update:pageSize']) const emits = defineEmits(['update:current', 'update:pageSize'])
@ -13,6 +14,8 @@ const current = useVModel(props, 'current', emits)
const pageSize = useVModel(props, 'pageSize', emits) const pageSize = useVModel(props, 'pageSize', emits)
const entityName = computed(() => props.entityName || 'item')
const totalPages = computed(() => Math.max(Math.ceil(total.value / pageSize.value), 1)) const totalPages = computed(() => Math.max(Math.ceil(total.value / pageSize.value), 1))
const { isMobileMode } = useGlobal() const { isMobileMode } = useGlobal()
@ -38,6 +41,7 @@ const goToFirstPage = () => {
<div class="nc-pagination flex flex-row items-center gap-x-2"> <div class="nc-pagination flex flex-row items-center gap-x-2">
<NcButton <NcButton
v-if="!isMobileMode" v-if="!isMobileMode"
v-e="[`a:pagination:${entityName}:first-page`]"
class="first-page" class="first-page"
type="secondary" type="secondary"
size="small" size="small"
@ -47,7 +51,14 @@ const goToFirstPage = () => {
<GeneralIcon icon="doubleLeftArrow" /> <GeneralIcon icon="doubleLeftArrow" />
</NcButton> </NcButton>
<NcButton class="prev-page" type="secondary" size="small" :disabled="current === 1" @click="changePage({ increase: false })"> <NcButton
v-e="[`a:pagination:${entityName}:prev-page`]"
class="prev-page"
type="secondary"
size="small"
:disabled="current === 1"
@click="changePage({ increase: false })"
>
<GeneralIcon icon="arrowLeft" /> <GeneralIcon icon="arrowLeft" />
</NcButton> </NcButton>
<div class="text-gray-600"> <div class="text-gray-600">
@ -59,6 +70,7 @@ const goToFirstPage = () => {
</div> </div>
<NcButton <NcButton
v-e="[`a:pagination:${entityName}:next-page`]"
class="next-page" class="next-page"
type="secondary" type="secondary"
size="small" size="small"
@ -70,6 +82,7 @@ const goToFirstPage = () => {
<NcButton <NcButton
v-if="!isMobileMode" v-if="!isMobileMode"
v-e="[`a:pagination:${entityName}:last-page`]"
class="last-page" class="last-page"
type="secondary" type="secondary"
size="small" size="small"

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

@ -94,6 +94,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
class="xs:(mr-2)" class="xs:(mr-2)"
:class="{ 'rtl-pagination': isRTLLanguage }" :class="{ 'rtl-pagination': isRTLLanguage }"
:total="+count" :total="+count"
entity-name="grid"
/> />
<div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px"> <div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px">
<span class="text-xs" style="white-space: nowrap"> Change page:</span> <span class="text-xs" style="white-space: nowrap"> Change page:</span>

13
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -1627,11 +1627,18 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
> >
<template #add-record> <template #add-record>
<div v-if="isAddingEmptyRowAllowed" class="flex ml-1"> <div v-if="isAddingEmptyRowAllowed" class="flex ml-1">
<NcButton v-if="isMobileMode" class="nc-grid-add-new-row" type="secondary" @click="onNewRecordToFormClick()"> <NcButton
v-if="isMobileMode"
v-e="[isAddNewRecordGridMode ? 'c:row:add:grid' : 'c:row:add:form']"
class="nc-grid-add-new-row"
type="secondary"
@click="onNewRecordToFormClick()"
>
{{ $t('activity.newRecord') }} {{ $t('activity.newRecord') }}
</NcButton> </NcButton>
<a-dropdown-button <a-dropdown-button
v-else v-else
v-e="[isAddNewRecordGridMode ? 'c:row:add:grid:toggle' : 'c:row:add:form:toggle']"
class="nc-grid-add-new-row" class="nc-grid-add-new-row"
placement="top" placement="top"
@click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()" @click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()"
@ -1654,7 +1661,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
}" }"
> >
<div <div
v-e="['c:row:add:grid-top']" v-e="['c:row:add:grid']"
:class="{ 'group': !isLocked, 'disabled-ring': isLocked }" :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
class="px-4 py-3 flex flex-col select-none gap-y-2 cursor-pointer hover:bg-gray-100 text-gray-600 nc-new-record-with-grid" class="px-4 py-3 flex flex-col select-none gap-y-2 cursor-pointer hover:bg-gray-100 text-gray-600 nc-new-record-with-grid"
@click="onNewRecordToGridClick" @click="onNewRecordToGridClick"
@ -1671,7 +1678,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
<div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div> <div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div>
</div> </div>
<div <div
v-e="['c:row:add:expanded-form']" v-e="['c:row:add:form']"
:class="{ 'group': !isLocked, 'disabled-ring': isLocked }" :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
class="px-4 py-3 flex flex-col select-none gap-y-2 cursor-pointer hover:bg-gray-100 text-gray-600 nc-new-record-with-form" class="px-4 py-3 flex flex-col select-none gap-y-2 cursor-pointer hover:bg-gray-100 text-gray-600 nc-new-record-with-form"
@click="onNewRecordToFormClick" @click="onNewRecordToFormClick"

Loading…
Cancel
Save