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

Merge branch 'develop' into feat/row-numbering

pull/5092/head
Wing-Kam Wong 2 years ago
parent
9c3dff1c43 7b2baea508
commit
641950ea38
9 changed files with 321 additions and 105 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. 250
      packages/nc-gui/components/smartsheet/Gallery.vue
  2. 59
      packages/nc-gui/components/smartsheet/expanded-form/Header.vue
  3. 29
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  4. 2
      packages/nc-gui/components/smartsheet/header/Menu.vue
  5. 1
      packages/nc-gui/composables/useViewData.ts
  6. 2
      packages/nc-gui/lang/cs.json
  7. 2
      packages/nc-gui/lang/en.json
  8. 33
      tests/playwright/pages/Dashboard/ExpandedForm/index.ts
  9. 48
      tests/playwright/tests/expandedFormUrl.spec.ts

250
packages/nc-gui/components/smartsheet/Gallery.vue
Unescape View File

@ -51,6 +51,7 @@ const {
galleryData,
changePage,
addEmptyRow,
deleteRow,
navigateToSiblingRow,
} = useViewData(meta, view)
@ -85,6 +86,30 @@ const isRowEmpty = (record: any, col: any) => {
return Array.isArray(val) && val.length === 0
}
const { isSqlView } = useSmartsheetStoreOrThrow()
const { isUIAllowed } = useUIPermission()
const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
// TODO: extract this code (which is duplicated in grid and gallery) into a separate component
const _contextMenu = ref(false)
const contextMenu = computed({
get: () => _contextMenu.value,
set: (val) => {
if (hasEditPermission) {
_contextMenu.value = val
}
},
})
const contextMenuTarget = ref<{ row: number } | null>(null)
const showContextMenu = (e: MouseEvent, target?: { row: number }) => {
if (isSqlView.value) return
e.preventDefault()
if (target) {
contextMenuTarget.value = target
}
}
const attachments = (record: any): Attachment[] => {
try {
if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
@ -175,113 +200,138 @@ watch(view, async (nextView) => {
</script>
<template>
<div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-testid="nc-gallery-wrapper">
<div class="nc-gallery-container grid gap-2 my-4 px-3">
<div v-for="record in data" :key="`record-${record.row.id}`">
<LazySmartsheetRow :row="record">
<a-card
hoverable
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
:data-testid="`nc-gallery-card-${record.row.id}`"
@click="expandFormClick($event, record)"
>
<template v-if="galleryData?.fk_cover_image_col_id" #cover>
<a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
<template #customPaging>
<a>
<div class="pt-[12px]">
<div></div>
<a-dropdown
v-model:visible="contextMenu"
:trigger="isSqlView ? [] : ['contextmenu']"
overlay-class-name="nc-dropdown-grid-context-menu"
>
<template #overlay>
<a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
<a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
<div v-e="['a:row:delete']" class="nc-project-menu-item">
<!-- Delete Row -->
{{ $t('activity.deleteRow') }}
</div>
</a-menu-item>
<a-menu-item v-if="contextMenuTarget" @click="openNewRecordFormHook.trigger()">
<div v-e="['a:row:insert']" class="nc-project-menu-item">
<!-- Insert New Row -->
{{ $t('activity.insertRow') }}
</div>
</a-menu-item>
</a-menu>
</template>
<div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-testid="nc-gallery-wrapper">
<div class="nc-gallery-container grid gap-2 my-4 px-3">
<div v-for="(record, rowIndex) in data" :key="`record-${record.row.id}`">
<LazySmartsheetRow :row="record">
<a-card
hoverable
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
:data-testid="`nc-gallery-card-${record.row.id}`"
@click="expandFormClick($event, record)"
@contextmenu="showContextMenu($event, { row: rowIndex })"
>
<template v-if="galleryData?.fk_cover_image_col_id" #cover>
<a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
<template #customPaging>
<a>
<div class="pt-[12px]">
<div></div>
</div>
</a>
</template>
<template #prevArrow>
<div style="z-index: 1"></div>
</template>
<template #nextArrow>
<div style="z-index: 1"></div>
</template>
<template v-for="(attachment, index) in attachments(record)">
<LazyCellAttachmentImage
v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
:key="`carousel-${record.row.id}-${index}`"
class="h-52 object-contain"
:srcs="getPossibleAttachmentSrc(attachment)"
/>
</template>
</a-carousel>
<MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
</template>
<div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
<div
v-if="!isRowEmpty(record, col) || isLTAR(col.uidt)"
class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
>
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div>
</a>
</template>
<template #prevArrow>
<div style="z-index: 1"></div>
</template>
<template #nextArrow>
<div style="z-index: 1"></div>
</template>
<template v-for="(attachment, index) in attachments(record)">
<LazyCellAttachmentImage
v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
:key="`carousel-${record.row.id}-${index}`"
class="h-52 object-contain"
:srcs="getPossibleAttachmentSrc(attachment)"
/>
</template>
</a-carousel>
<MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
</template>
<div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
<div
v-if="!isRowEmpty(record, col) || isLTAR(col.uidt)"
class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
>
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div>
</div>
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<LazySmartsheetVirtualCell
v-if="isVirtualCol(col)"
v-model="record.row[col.title]"
:column="col"
:row="record"
/>
<LazySmartsheetCell
v-else
v-model="record.row[col.title]"
:column="col"
:edit-enabled="false"
:read-only="true"
/>
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<LazySmartsheetVirtualCell
v-if="isVirtualCol(col)"
v-model="record.row[col.title]"
:column="col"
:row="record"
/>
<LazySmartsheetCell
v-else
v-model="record.row[col.title]"
:column="col"
:edit-enabled="false"
:read-only="true"
/>
</div>
</div>
</div>
</div>
</a-card>
</LazySmartsheetRow>
</a-card>
</LazySmartsheetRow>
</div>
</div>
</div>
<div class="flex-1" />
<LazySmartsheetPagination />
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
:view="view"
/>
</Suspense>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg"
:key="route.query.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.query.rowId"
:view="view"
show-next-prev-icons
@next="navigateToSiblingRow(NavigateDir.NEXT)"
@prev="navigateToSiblingRow(NavigateDir.PREV)"
/>
</Suspense>
</div>
<div class="flex-1" />
<LazySmartsheetPagination />
</div>
</a-dropdown>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
:view="view"
/>
</Suspense>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg"
:key="route.query.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.query.rowId"
:view="view"
show-next-prev-icons
@next="navigateToSiblingRow(NavigateDir.NEXT)"
@prev="navigateToSiblingRow(NavigateDir.PREV)"
/>
</Suspense>
</template>
<style scoped>

59
packages/nc-gui/components/smartsheet/expanded-form/Header.vue
Unescape View File

@ -12,7 +12,7 @@ import {
const props = defineProps<{ view?: ViewType }>()
const emit = defineEmits(['cancel'])
const emit = defineEmits(['cancel', 'duplicateRow'])
const route = useRoute()
@ -72,6 +72,22 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
}
}
})
const showDeleteRowModal = ref(false)
const { deleteRowById } = useViewData(meta, ref(props.view))
const onDeleteRowClick = () => {
showDeleteRowModal.value = true
}
const onConfirmDeleteRowClick = async () => {
showDeleteRowModal.value = false
await deleteRowById(primaryKey.value)
reloadTrigger.trigger()
emit('cancel')
message.success('Row deleted')
}
</script>
<template>
@ -127,6 +143,47 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</div>
</a-button>
<a-dropdown>
<a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
<div class="flex gap-1 items-center">
<!-- More -->
<span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
<MdiMenuDown class="text-grey" />
</div>
</a-button>
<template #overlay>
<div class="bg-gray-50 py-2 shadow-lg !border">
<div>
<div
v-e="['a:actions:duplicate-row']"
class="nc-menu-item"
:class="{ disabled: isNew }"
@click="!isNew && emit('duplicateRow')"
>
<MdiContentCopy class="text-gray-500" />
{{ $t('activity.duplicateRow') }}
</div>
<a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
<p>Are you sure you want to delete this row?</p>
</a-modal>
<div
v-e="['a:actions:delete-row']"
class="nc-menu-item"
:class="{ disabled: isNew }"
@click="!isNew && onDeleteRowClick()"
>
<MdiDelete class="text-gray-500" />
{{ $t('activity.deleteRow') }}
</div>
</div>
</div>
</template>
</a-dropdown>
<a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
<template #overlay>
<a-menu class="nc-expand-form-save-dropdown-menu">

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

@ -39,6 +39,8 @@ const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
const { t } = useI18n()
const row = ref(props.row)
const state = toRef(props, 'state')
@ -60,6 +62,8 @@ provide(MetaInj, meta)
const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
const duplicatingRowInProgress = ref(false)
if (props.loadRow) {
await loadRow()
}
@ -101,6 +105,23 @@ const onClose = () => {
isExpanded.value = false
}
const onDuplicateRow = () => {
duplicatingRowInProgress.value = true
const newRow = Object.assign(
{},
{
row: row.value.row,
oldRow: {},
rowMeta: { new: true },
},
)
setTimeout(async () => {
row.value = newRow
duplicatingRowInProgress.value = false
message.success(t('msg.success.rowDuplicatedWithoutSavedYet'))
}, 500)
}
const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
// override reload trigger and use it to reload grid and the form itself
@ -148,7 +169,7 @@ export default {
class="nc-drawer-expanded-form"
:class="{ active: isExpanded }"
>
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
<div class="!bg-gray-100 rounded flex-1 relative">
<template v-if="props.showNextPrevIcons">
@ -169,8 +190,12 @@ 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">
<div class="w-[500px] mx-auto">
<div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]">
<a-spin size="large" />
</div>
<div
v-for="(col, i) of fields"
v-else
v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
:key="col.title"
class="mt-2 py-2"
@ -237,9 +262,11 @@ export default {
.nc-next-arrow {
@apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover:(bg-gray-200) active:(scale-125 opacity-100) text-xl;
}
.nc-prev-arrow {
@apply left-4 top-4;
}
.nc-next-arrow {
@apply right-4 top-4;
}

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

@ -280,7 +280,7 @@ const hideField = async () => {
</a-menu-item>
<a-divider class="!my-0" />
<a-menu-item v-if="!virtual && !column?.pv" @click="setAsPrimaryValue">
<a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsPrimaryValue">
<div class="nc-column-set-primary nc-header-menu-item">
<MdiStar class="text-primary" />

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

@ -546,5 +546,6 @@ export function useViewData(
removeLastEmptyRow,
removeRowIfNew,
navigateToSiblingRow,
deleteRowById,
}
}

2
packages/nc-gui/lang/cs.json
Unescape View File

@ -206,7 +206,7 @@
"advancedSettings": "Pokročilá nastavení",
"codeSnippet": "Úryvek kódu",
"keyboardShortcut": "Klávesové zkratky",
"generateRandomName": "Generate Random Name"
"generateRandomName": "Vytvořit náhodné jméno"
},
"labels": {
"createdBy": "Vytvořil/a",

2
packages/nc-gui/lang/en.json
Unescape View File

@ -387,6 +387,7 @@
"saveAndStay": "Save & Stay",
"insertRow": "Insert New Row",
"deleteRow": "Delete Row",
"duplicateRow": "Duplicate Row",
"deleteSelectedRow": "Delete Selected Rows",
"importExcel": "Import Excel",
"importCSV": "Import CSV",
@ -716,6 +717,7 @@
},
"success": {
"columnDuplicated": "Column duplicated successfully",
"rowDuplicatedWithoutSavedYet": "Row duplicated (not saved)",
"updatedUIACL": "Updated UI ACL for tables successfully",
"pluginUninstalled": "Plugin uninstalled successfully",
"pluginSettingsSaved": "Plugin settings saved successfully",

33
tests/playwright/pages/Dashboard/ExpandedForm/index.ts
Unescape View File

@ -7,6 +7,7 @@ export class ExpandedFormPage extends BasePage {
readonly addNewTableButton: Locator;
readonly copyUrlButton: Locator;
readonly toggleCommentsButton: Locator;
readonly moreOptionsButton: Locator;
constructor(dashboard: DashboardPage) {
super(dashboard.rootPage);
@ -14,12 +15,44 @@ export class ExpandedFormPage extends BasePage {
this.addNewTableButton = this.dashboard.get().locator('.nc-add-new-table');
this.copyUrlButton = this.dashboard.get().locator('.nc-copy-row-url:visible');
this.toggleCommentsButton = this.dashboard.get().locator('.nc-toggle-comments:visible');
this.moreOptionsButton = this.dashboard.get().locator('.nc-actions-menu-btn:visible').last();
}
get() {
return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
}
async clickDuplicateRow() {
await this.moreOptionsButton.click();
// wait for the menu to appear
await this.rootPage.waitForTimeout(1000);
await this.rootPage.locator('.nc-menu-item:has-text("Duplicate Row")').click();
// wait for loader to disappear
// await this.dashboard.waitForLoaderToDisappear();
await this.rootPage.waitForTimeout(2000);
}
async clickDeleteRow() {
await this.moreOptionsButton.click();
// wait for the menu to appear
await this.rootPage.waitForTimeout(1000);
await this.rootPage.locator('.nc-menu-item:has-text("Delete Row")').click();
await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
}
async isDisabledDuplicateRow() {
await this.moreOptionsButton.click();
const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Duplicate Row")');
return await isDisabled.count();
}
async isDisabledDeleteRow() {
await this.moreOptionsButton.click();
const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Delete Row")');
return await isDisabled.count();
}
async getShareRowUrl() {
await this.copyUrlButton.click();
await this.verifyToast({ message: 'Copied to clipboard' });

48
tests/playwright/tests/expandedFormUrl.spec.ts
Unescape View File

@ -1,8 +1,9 @@
import { test } from '@playwright/test';
import { expect, test } from '@playwright/test';
import { DashboardPage } from '../pages/Dashboard';
import { GalleryPage } from '../pages/Dashboard/Gallery';
import { GridPage } from '../pages/Dashboard/Grid';
import setup from '../setup';
import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
test.describe('Expanded form URL', () => {
let dashboard: DashboardPage;
@ -132,3 +133,48 @@ test.describe('Expanded form URL', () => {
await viewTestTestTable('gallery');
});
});
test.describe('Expanded record duplicate & delete options', () => {
let dashboard: DashboardPage, toolbar: ToolbarPage;
let context: any;
test.beforeEach(async ({ page }) => {
context = await setup({ page });
dashboard = new DashboardPage(page, context.project);
toolbar = dashboard.grid.toolbar;
});
test('Grid', async () => {
await dashboard.closeTab({ title: 'Team & Auth' });
await dashboard.treeView.openTable({ title: 'Actor' });
// create filter to narrow down the number of records
await toolbar.clickFilter();
await toolbar.filter.add({
columnTitle: 'FirstName',
opType: 'is equal',
value: 'NICK',
isLocallySaved: false,
});
await toolbar.clickFilter();
await dashboard.grid.verifyRowCount({ count: 3 });
// expand row & duplicate
await dashboard.grid.openExpandedRow({ index: 0 });
await dashboard.expandedForm.clickDuplicateRow();
await dashboard.expandedForm.save();
await dashboard.grid.verifyRowCount({ count: 4 });
// expand row & delete
await dashboard.grid.openExpandedRow({ index: 3 });
await dashboard.expandedForm.clickDeleteRow();
await dashboard.grid.verifyRowCount({ count: 3 });
// expand row, duplicate & verify menu
await dashboard.grid.openExpandedRow({ index: 0 });
await dashboard.expandedForm.clickDuplicateRow();
expect(await dashboard.expandedForm.isDisabledDeleteRow()).toBe(1);
expect(await dashboard.expandedForm.isDisabledDuplicateRow()).toBe(1);
});
});

Write Preview
Loading…
Cancel
Save