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.
98 lines
2.5 KiB
98 lines
2.5 KiB
<script lang="ts" setup> |
|
import { generateUniqueName, onKeyStroke, onMounted, reactive, ref } from '#imports' |
|
|
|
const props = defineProps<{ |
|
fileName: string |
|
fileNames: string[] |
|
}>() |
|
|
|
const emit = defineEmits<{ |
|
(event: 'rename', value: string): void |
|
(event: 'cancel'): void |
|
}>() |
|
|
|
const inputEl = ref() |
|
|
|
const visible = ref(true) |
|
|
|
const fileEnding = props.fileName.split('.').pop() |
|
const form = reactive({ |
|
name: props.fileName.replace(`.${fileEnding}`, ''), |
|
}) |
|
|
|
function renameFile(fileName: string) { |
|
visible.value = false |
|
emit('rename', fileName) |
|
} |
|
|
|
async function useRandomName() { |
|
form.name = await generateUniqueName() |
|
} |
|
|
|
const rules = { |
|
name: [ |
|
{ required: true, message: 'Filename is required.' }, |
|
{ |
|
validator: (_: unknown, v: string) => |
|
new Promise((resolve, reject) => { |
|
props.fileNames.every((fileName) => fileName.replace(`.${fileEnding}`, '') !== v) |
|
? resolve(true) |
|
: reject(new Error(`File name should be unique.`)) |
|
}), |
|
message: 'File name should be unique.', |
|
}, |
|
], |
|
} |
|
|
|
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.name}.${fileEnding}`)"> |
|
<a-form-item class="w-full" name="name" :rules="rules.name"> |
|
<a-input ref="inputEl" v-model:value="form.name" 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.rename') }}</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 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>
|
|
|