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.
108 lines
3.4 KiB
108 lines
3.4 KiB
<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>
|
|
|