mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.4 KiB
109 lines
3.4 KiB
1 month ago
|
<script setup lang="ts">
|
||
|
|
import { onKeyDown } from '@vueuse/core'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
newRows: number
|
||
|
|
modelValue: boolean
|
||
|
|
newColumns: number
|
||
|
|
cellsOverwritten: number
|
||
|
|
rowsUpdated: number
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:expand', 'cancel', 'update:modelValue'])
|
||
|
|
|
||
|
|
const dialogShow = useVModel(props, 'modelValue', emit)
|
||
|
|
|
||
|
|
const expand = ref(true)
|
||
|
|
|
||
|
|
const updateExpand = () => {
|
||
|
|
emit('update:expand', expand.value)
|
||
|
|
dialogShow.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
onKeyDown('esc', () => {
|
||
|
|
dialogShow.value = false
|
||
|
|
emit('update:modelValue', false)
|
||
|
|
})
|
||
|
|
|
||
|
|
const close = () => {
|
||
|
|
dialogShow.value = false
|
||
|
|
emit('cancel')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<NcModal
|
||
|
|
v-if="dialogShow"
|
||
|
|
v-model:visible="dialogShow"
|
||
|
|
:show-separator="false"
|
||
|
|
:header="$t('activity.createTable')"
|
||
|
|
size="small"
|
||
|
|
@keydown.esc="dialogShow = false"
|
||
|
|
>
|
||
|
|
<div class="flex justify-between w-full text-base font-semibold mb-2 text-nc-content-gray-emphasis items-center">
|
||
|
|
{{ 'Do you want to expand this table ?' }}
|
||
|
|
</div>
|
||
|
|
<div data-testid="nc-expand-table-modal" class="flex flex-col">
|
||
|
|
<div class="mb-2 nc-content-gray">
|
||
|
|
To accommodate your pasted data, we need to
|
||
|
|
<span v-if="cellsOverwritten && rowsUpdated" class="font-bold">
|
||
|
|
overwrite {{ cellsOverwritten }} {{ cellsOverwritten === 1 ? 'cell' : 'cells' }} in {{ rowsUpdated }}
|
||
|
|
{{ rowsUpdated === 1 ? 'record' : 'records' }}
|
||
|
|
</span>
|
||
|
|
<template v-if="newRows">
|
||
|
|
<template v-if="cellsOverwritten || rowsUpdated"> and </template>
|
||
|
|
<span class="font-bold"> insert {{ newRows }} additional {{ newRows === 1 ? 'record' : 'records' }} </span>
|
||
|
|
</template>
|
||
|
|
<template v-if="newColumns">
|
||
|
|
<template v-if="cellsOverwritten || rowsUpdated || newRows"> and </template>
|
||
|
|
<span class="font-bold"> insert {{ newColumns }} additional {{ newColumns === 1 ? 'field' : 'fields' }} </span>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a-radio-group v-if="(newRows ?? 0) > 0" v-model:value="expand">
|
||
|
|
<a-radio
|
||
|
|
data-testid="nc-table-expand-yes"
|
||
|
|
:style="{
|
||
|
|
display: 'flex',
|
||
|
|
height: '30px',
|
||
|
|
lineHeight: '30px',
|
||
|
|
}"
|
||
|
|
:value="true"
|
||
|
|
>
|
||
|
|
<div class="nc-content-gray">
|
||
|
|
<span class="font-semibold"> Expand </span>
|
||
|
|
table to accommodate all pasted cells
|
||
|
|
</div>
|
||
|
|
</a-radio>
|
||
|
|
<a-radio
|
||
|
|
data-testid="nc-table-expand-no"
|
||
|
|
:style="{
|
||
|
|
display: 'flex',
|
||
|
|
lineHeight: '30px',
|
||
|
|
}"
|
||
|
|
:value="false"
|
||
|
|
>
|
||
|
|
<div class="nc-content-gray leading-5">
|
||
|
|
<span class="font-semibold"> Don't expand </span>
|
||
|
|
the table. Values beyond the table's current size will be skipped.
|
||
|
|
</div>
|
||
|
|
</a-radio>
|
||
|
|
</a-radio-group>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-row mt-5 justify-end gap-x-2">
|
||
|
|
<div class="flex gap-2 items-center">
|
||
|
|
<NcButton data-testid="nc-table-expand-cancel" type="secondary" size="small" @click="close">
|
||
|
|
{{ $t('labels.cancel') }}
|
||
|
|
</NcButton>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-2 items-center">
|
||
|
|
<NcButton data-testid="nc-table-expand" type="primary" size="small" @click="updateExpand">
|
||
|
|
{{ $t('labels.continue') }}
|
||
|
|
</NcButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</NcModal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|