mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
GitHub
37 changed files with 1238 additions and 84 deletions
@ -0,0 +1,85 @@
|
||||
<script lang="ts" setup> |
||||
import { generateUniqueName, onKeyStroke, onMounted, reactive, ref } from '#imports' |
||||
|
||||
const props = defineProps<{ |
||||
title: string |
||||
}>() |
||||
|
||||
const emit = defineEmits<{ |
||||
(event: 'rename', value: string): void |
||||
(event: 'cancel'): void |
||||
}>() |
||||
|
||||
const inputEl = ref() |
||||
|
||||
const visible = ref(true) |
||||
|
||||
const form = reactive({ |
||||
title: props.title, |
||||
}) |
||||
|
||||
function renameFile(fileName: string) { |
||||
visible.value = false |
||||
emit('rename', fileName) |
||||
} |
||||
|
||||
async function useRandomName() { |
||||
form.title = await generateUniqueName() |
||||
} |
||||
|
||||
const rules = { |
||||
title: [{ required: true, message: 'title is required.' }], |
||||
} |
||||
|
||||
function onCancel() { |
||||
visible.value = false |
||||
emit('cancel') |
||||
} |
||||
|
||||
onKeyStroke('Escape', onCancel) |
||||
|
||||
onMounted(() => { |
||||
inputEl.value.select() |
||||
inputEl.value.focus() |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-modal |
||||
:visible="visible" |
||||
:closable="false" |
||||
:mask-closable="false" |
||||
destroy-on-close |
||||
title="Rename file" |
||||
class="nc-attachment-rename-modal" |
||||
width="min(100%, 620px)" |
||||
:footer="null" |
||||
centered |
||||
@cancel="onCancel" |
||||
> |
||||
<div class="flex flex-col items-center justify-center h-full"> |
||||
<a-form class="w-full h-full" no-style :model="form" @finish="renameFile(form.title)"> |
||||
<a-form-item class="w-full" name="title" :rules="rules.title"> |
||||
<a-input ref="inputEl" v-model:value="form.title" class="w-full" :placeholder="$t('general.rename')" /> |
||||
</a-form-item> |
||||
<div class="flex items-center justify-center gap-6 w-full mt-4"> |
||||
<button class="scaling-btn bg-opacity-100" type="submit"> |
||||
<span>{{ $t('general.confirm') }}</span> |
||||
</button> |
||||
<button class="scaling-btn bg-opacity-100" type="button" @click="useRandomName"> |
||||
<span>{{ $t('title.generateRandomName') }}</span> |
||||
</button> |
||||
</div> |
||||
</a-form> |
||||
</div> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-attachment-rename-modal { |
||||
.ant-input-affix-wrapper, |
||||
.ant-input { |
||||
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,132 @@
|
||||
<script setup lang="ts"> |
||||
import type { TreeProps } from 'ant-design-vue' |
||||
import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface' |
||||
import { fileMimeTypeList, fileMimeTypes } from './utils' |
||||
import { useGlobal, useVModel } from '#imports' |
||||
|
||||
const props = defineProps<{ |
||||
value: any |
||||
}>() |
||||
|
||||
const emit = defineEmits(['update:value']) |
||||
|
||||
const vModel = useVModel(props, 'value', emit) |
||||
|
||||
const validators = {} |
||||
|
||||
const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow() |
||||
|
||||
const { appInfo } = useGlobal() |
||||
|
||||
const searchValue = ref<string>('') |
||||
|
||||
setAdditionalValidations({ |
||||
...validators, |
||||
}) |
||||
|
||||
// set default value |
||||
vModel.value.meta = { |
||||
...(appInfo.value.ee && { |
||||
// Maximum Number of Attachments per cell |
||||
maxNumberOfAttachments: Math.max(1, +appInfo.value.ncMaxAttachmentsAllowed || 50) || 50, |
||||
// Maximum File Size per file |
||||
maxAttachmentSize: Math.max(1, +appInfo.value.ncMaxAttachmentsAllowed || 20) || 20, |
||||
// allow all mime types by default |
||||
supportedAttachmentMimeTypes: ['*'], |
||||
}), |
||||
...vModel.value.meta, |
||||
} |
||||
|
||||
const expandedKeys = ref<(string | number)[]>([]) |
||||
|
||||
const autoExpandParent = ref<boolean>(true) |
||||
|
||||
const allowAllMimeTypeCheckbox = ref(true) |
||||
|
||||
const getParentKey = (key: string | number, tree: TreeProps['treeData']): string | null => { |
||||
if (!tree) return null |
||||
let parentKey |
||||
for (let i = 0; i < tree.length; i++) { |
||||
const node = tree[i] |
||||
if (node.children) { |
||||
if (node.children.some((item) => item.key === key)) { |
||||
parentKey = node.key as string |
||||
} else if (getParentKey(key, node.children)) { |
||||
parentKey = getParentKey(key, node.children) as string |
||||
} |
||||
} |
||||
} |
||||
return parentKey as string |
||||
} |
||||
|
||||
function allowAllMimeTypeCheckboxOnChange(evt: CheckboxChangeEvent) { |
||||
if (evt.target.checked) { |
||||
vModel.value.meta.supportedAttachmentMimeTypes = ['*'] |
||||
} else { |
||||
vModel.value.meta.supportedAttachmentMimeTypes = ['application', 'audio', 'image', 'video', 'misc'] |
||||
} |
||||
} |
||||
|
||||
watch(searchValue, (value) => { |
||||
expandedKeys.value = fileMimeTypeList |
||||
?.map((item: Record<string, any>) => { |
||||
if (item.title.includes(value)) { |
||||
return getParentKey(item.key, fileMimeTypes) |
||||
} |
||||
return null |
||||
}) |
||||
.filter((item: any, i: number, self: any[]) => item && self.indexOf(item) === i) as string[] |
||||
searchValue.value = value |
||||
autoExpandParent.value = true |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-row class="my-2" gutter="8"> |
||||
<a-col :span="12"> |
||||
<a-form-item v-bind="validateInfos['meta.maxNumberOfAttachments']" label="Max Number of Attachments"> |
||||
<a-input-number v-model:value="vModel.meta.maxNumberOfAttachments" :min="1" class="!w-full nc-attachment-max-count" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
|
||||
<a-col :span="12"> |
||||
<a-form-item v-bind="validateInfos['meta.maxAttachmentSize']" label="Max Attachment Size (MB)"> |
||||
<a-input-number v-model:value="vModel.meta.maxAttachmentSize" :min="1" class="!w-full nc-attachment-max-size" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
|
||||
<a-col class="mt-4" :span="24"> |
||||
<a-form-item v-bind="validateInfos['meta.supportedAttachmentMimeTypes']" class="!p-[10px] border-2"> |
||||
<a-checkbox |
||||
v-model:checked="allowAllMimeTypeCheckbox" |
||||
class="nc-allow-all-mime-type-checkbox" |
||||
name="virtual" |
||||
@change="allowAllMimeTypeCheckboxOnChange" |
||||
> |
||||
Allow All Mime Types |
||||
</a-checkbox> |
||||
<div v-if="!allowAllMimeTypeCheckbox" class="mt-[5px]"> |
||||
<a-input-search v-model:value="searchValue" class="mt-[5px] mb-[15px]" placeholder="Search" /> |
||||
<a-tree |
||||
v-model:expanded-keys="expandedKeys" |
||||
v-model:checkedKeys="vModel.meta.supportedAttachmentMimeTypes" |
||||
checkable |
||||
:height="250" |
||||
:tree-data="fileMimeTypes" |
||||
:auto-expand-parent="autoExpandParent" |
||||
class="!bg-gray-50 my-[10px]" |
||||
> |
||||
<template #title="{ title }"> |
||||
<span v-if="title.indexOf(searchValue) > -1"> |
||||
{{ title.substr(0, title.indexOf(searchValue)) }} |
||||
<span class="text-primary font-bold">{{ searchValue }}</span> |
||||
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }} |
||||
</span> |
||||
<span v-else>{{ title }}</span> |
||||
</template> |
||||
</a-tree> |
||||
</div> |
||||
</a-form-item> |
||||
</a-col> |
||||
</a-row> |
||||
</template> |
||||
@ -0,0 +1,112 @@
|
||||
import { NcUpgraderCtx } from './NcUpgrader'; |
||||
import { MetaTable } from '../utils/globals'; |
||||
import Base from '../models/Base'; |
||||
import Model from '../models/Model'; |
||||
import { XKnex } from '../db/sql-data-mapper/index'; |
||||
import NcConnectionMgrv2 from '../utils/common/NcConnectionMgrv2'; |
||||
import { UITypes } from 'nocodb-sdk'; |
||||
|
||||
// before 0.103.0, an attachment object was like
|
||||
// [{
|
||||
// "url": "http://localhost:8080/download/noco/xcdb/Sheet-1/title5/39A410.jpeg",
|
||||
// "title": "foo.jpeg",
|
||||
// "mimetype": "image/jpeg",
|
||||
// "size": 6494
|
||||
// }]
|
||||
// in this way, if the base url is changed, the url will be broken
|
||||
// this upgrader is to convert the existing local attachment object to the following format
|
||||
// [{
|
||||
// "url": "http://localhost:8080/download/noco/xcdb/Sheet-1/title5/39A410.jpeg",
|
||||
// "path": "download/noco/xcdb/Sheet-1/title5/39A410.jpeg",
|
||||
// "title": "foo.jpeg",
|
||||
// "mimetype": "image/jpeg",
|
||||
// "size": 6494
|
||||
// }]
|
||||
// the new url will be constructed by `${ncSiteUrl}/${path}` in UI. the old url will be used for fallback
|
||||
// while other non-local attachments will remain unchanged
|
||||
|
||||
function getTnPath(knex: XKnex, tb: Model) { |
||||
const schema = (knex as any).searchPath?.(); |
||||
const clientType = knex.clientType(); |
||||
if (clientType === 'mssql' && schema) { |
||||
return knex.raw('??.??', [schema, tb.table_name]); |
||||
} else if (clientType === 'snowflake') { |
||||
return [ |
||||
knex.client.config.connection.database, |
||||
knex.client.config.connection.schema, |
||||
tb.table_name, |
||||
].join('.'); |
||||
} else { |
||||
return tb.table_name; |
||||
} |
||||
} |
||||
|
||||
export default async function ({ ncMeta }: NcUpgraderCtx) { |
||||
const bases: Base[] = await ncMeta.metaList2(null, null, MetaTable.BASES); |
||||
for (const base of bases) { |
||||
const knex: XKnex = base.is_meta |
||||
? ncMeta.knexConnection |
||||
: NcConnectionMgrv2.get(base); |
||||
const models = await (await Base.get(base.id, ncMeta)).getModels(ncMeta); |
||||
for (const model of models) { |
||||
const updateRecords = []; |
||||
const columns = await ( |
||||
await Model.get(model.id, ncMeta) |
||||
).getColumns(ncMeta); |
||||
const attachmentColumns = columns |
||||
.filter((c) => c.uidt === UITypes.Attachment) |
||||
.map((c) => c.column_name); |
||||
if (attachmentColumns.length === 0) { |
||||
continue; |
||||
} |
||||
const primaryKeys = columns.filter((c) => c.pk).map((c) => c.column_name); |
||||
const records = await knex(getTnPath(knex, model)).select([ |
||||
...primaryKeys, |
||||
...attachmentColumns, |
||||
]); |
||||
for (const record of records) { |
||||
for (const attachmentColumn of attachmentColumns) { |
||||
const attachmentMeta = |
||||
typeof record[attachmentColumn] === 'string' |
||||
? JSON.parse(record[attachmentColumn]) |
||||
: record[attachmentColumn]; |
||||
if (attachmentMeta) { |
||||
const newAttachmentMeta = []; |
||||
for (const attachment of attachmentMeta) { |
||||
if ('url' in attachment) { |
||||
const match = attachment.url.match(/^(.*)\/download\/(.*)$/); |
||||
if (match) { |
||||
// e.g. http://localhost:8080/download/noco/xcdb/Sheet-1/title5/ee2G8p_nute_gunray.png
|
||||
// match[1] = http://localhost:8080
|
||||
// match[2] = download/noco/xcdb/Sheet-1/title5/ee2G8p_nute_gunray.png
|
||||
const path = `download/${match[2]}`; |
||||
|
||||
newAttachmentMeta.push({ |
||||
...attachment, |
||||
path, |
||||
}); |
||||
} else { |
||||
// keep it as it is
|
||||
newAttachmentMeta.push(attachment); |
||||
} |
||||
} |
||||
} |
||||
const where = primaryKeys |
||||
.map((key) => { |
||||
return { [key]: record[key] }; |
||||
}) |
||||
.reduce((acc, val) => Object.assign(acc, val), {}); |
||||
updateRecords.push( |
||||
await knex(getTnPath(knex, model)) |
||||
.update({ |
||||
[attachmentColumn]: JSON.stringify(newAttachmentMeta), |
||||
}) |
||||
.where(where) |
||||
); |
||||
} |
||||
} |
||||
} |
||||
await Promise.all(updateRecords); |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 931 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
@ -0,0 +1,140 @@
|
||||
import { ColumnPageObject } from '.'; |
||||
import BasePage from '../../../Base'; |
||||
import { expect } from '@playwright/test'; |
||||
|
||||
export class AttachmentColumnPageObject extends BasePage { |
||||
readonly column: ColumnPageObject; |
||||
|
||||
constructor(column: ColumnPageObject) { |
||||
super(column.rootPage); |
||||
this.column = column; |
||||
} |
||||
|
||||
get() { |
||||
return this.column.get(); |
||||
} |
||||
|
||||
async advanceConfig({ |
||||
columnTitle, |
||||
fileCount, |
||||
fileSize, |
||||
fileTypesExcludeList, |
||||
}: { |
||||
columnTitle: string; |
||||
fileCount?: number; |
||||
fileSize?: number; |
||||
fileTypesExcludeList?: string[]; |
||||
}) { |
||||
await this.column.openEdit({ title: columnTitle }); |
||||
await this.column.editMenuShowMore(); |
||||
|
||||
// text box : nc-attachment-max-count
|
||||
// text box : nc-attachment-max-size
|
||||
// checkbox : ant-tree-checkbox
|
||||
// Checkbox order: Application, Audio, Image, Video, Misc
|
||||
|
||||
if (fileCount) { |
||||
const inputMaxCount = await this.column.get().locator(`.nc-attachment-max-count`); |
||||
await inputMaxCount.locator(`input`).fill(fileCount.toString()); |
||||
} |
||||
|
||||
if (fileSize) { |
||||
const inputMaxSize = await this.column.get().locator(`.nc-attachment-max-size`); |
||||
await inputMaxSize.locator(`input`).fill(fileSize.toString()); |
||||
} |
||||
|
||||
if (fileTypesExcludeList) { |
||||
// click on nc-allow-all-mime-type-checkbox
|
||||
const allowAllMimeCheckbox = await this.column.get().locator(`.nc-allow-all-mime-type-checkbox`); |
||||
await allowAllMimeCheckbox.click(); |
||||
|
||||
const treeList = await this.column.get().locator(`.ant-tree-list`); |
||||
const checkboxList = await treeList.locator(`.ant-tree-treenode`); |
||||
|
||||
for (let i = 0; i < fileTypesExcludeList.length; i++) { |
||||
const fileType = fileTypesExcludeList[i]; |
||||
switch (fileType) { |
||||
case 'Application': |
||||
await checkboxList.nth(0).locator(`.ant-tree-checkbox`).click(); |
||||
break; |
||||
case 'Audio': |
||||
await checkboxList.nth(1).locator(`.ant-tree-checkbox`).click(); |
||||
break; |
||||
case 'Image': |
||||
await checkboxList.nth(2).locator(`.ant-tree-checkbox`).click(); |
||||
break; |
||||
case 'Video': |
||||
await checkboxList.nth(3).locator(`.ant-tree-checkbox`).click(); |
||||
break; |
||||
case 'Misc': |
||||
await checkboxList.nth(4).locator(`.ant-tree-checkbox`).click(); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
} |
||||
|
||||
await this.rootPage.waitForTimeout(1000); |
||||
} |
||||
|
||||
await this.column.save({ isUpdated: true }); |
||||
} |
||||
|
||||
// add multiple options at once after column creation is completed
|
||||
//
|
||||
async addOptions({ columnTitle, options }: { columnTitle: string; options: string[] }) { |
||||
await this.column.openEdit({ title: columnTitle }); |
||||
for (let i = 0; i < options.length; i++) { |
||||
await this.column.get().locator('button:has-text("Add option")').click(); |
||||
await this.column.get().locator(`[data-testid="select-column-option-input-${i}"]`).click(); |
||||
await this.column.get().locator(`[data-testid="select-column-option-input-${i}"]`).fill(options[i]); |
||||
} |
||||
await this.column.save({ isUpdated: true }); |
||||
} |
||||
|
||||
async editOption({ columnTitle, index, newOption }: { index: number; columnTitle: string; newOption: string }) { |
||||
await this.column.openEdit({ title: columnTitle }); |
||||
|
||||
await this.column.get().locator(`[data-testid="select-column-option-input-${index}"]`).click(); |
||||
await this.column.get().locator(`[data-testid="select-column-option-input-${index}"]`).fill(newOption); |
||||
|
||||
await this.column.save({ isUpdated: true }); |
||||
} |
||||
|
||||
async deleteOption({ columnTitle, index }: { index: number; columnTitle: string }) { |
||||
await this.column.openEdit({ title: columnTitle }); |
||||
await this.column.get().locator(`svg[data-testid="select-column-option-remove-${index}"]`).click(); |
||||
await expect(this.column.get().getByTestId(`select-column-option-${index}`)).toHaveClass(/removed/); |
||||
await this.column.save({ isUpdated: true }); |
||||
} |
||||
|
||||
async deleteOptionWithUndo({ columnTitle, index }: { index: number; columnTitle: string }) { |
||||
await this.column.openEdit({ title: columnTitle }); |
||||
await this.column.get().locator(`svg[data-testid="select-column-option-remove-${index}"]`).click(); |
||||
await expect(this.column.get().getByTestId(`select-column-option-${index}`)).toHaveClass(/removed/); |
||||
await this.column.get().locator(`svg[data-testid="select-column-option-remove-undo-${index}"]`).click(); |
||||
await expect(this.column.get().getByTestId(`select-column-option-${index}`)).not.toHaveClass(/removed/); |
||||
await this.column.save({ isUpdated: true }); |
||||
} |
||||
|
||||
async reorderOption({ |
||||
columnTitle, |
||||
sourceOption, |
||||
destinationOption, |
||||
}: { |
||||
columnTitle: string; |
||||
sourceOption: string; |
||||
destinationOption: string; |
||||
}) { |
||||
await this.column.openEdit({ title: columnTitle }); |
||||
await this.column.rootPage.waitForTimeout(150); |
||||
await this.column.rootPage.dragAndDrop( |
||||
`svg[data-testid="select-option-column-handle-icon-${sourceOption}"]`, |
||||
`svg[data-testid="select-option-column-handle-icon-${destinationOption}"]`, |
||||
{ |
||||
force: true, |
||||
} |
||||
); |
||||
await this.column.save({ isUpdated: true }); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue