1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<!--
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcDialog :name="name"
:open="open"
close-on-click-outside
out-transition
@update:open="onClose">
<template #actions>
<NcButton type="primary"
:disabled="!isUniqueName"
@click="onCreate">
{{ t('files', 'Create') }}
</NcButton>
</template>
<form @submit.prevent="onCreate">
<NcTextField ref="input"
:error="!isUniqueName"
:helper-text="errorMessage"
:label="label"
:value.sync="localDefaultName" />
</form>
</NcDialog>
</template>
<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent } from 'vue'
import { translate as t } from '@nextcloud/l10n'
import { getUniqueName } from '../utils/fileUtils'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
interface ICanFocus {
focus: () => void
}
export default defineComponent({
name: 'NewNodeDialog',
components: {
NcButton,
NcDialog,
NcTextField,
},
props: {
/**
* The name to be used by default
*/
defaultName: {
type: String,
default: t('files', 'New folder'),
},
/**
* Other files that are in the current directory
*/
otherNames: {
type: Array as PropType<string[]>,
default: () => [],
},
/**
* Open state of the dialog
*/
open: {
type: Boolean,
default: true,
},
/**
* Dialog name
*/
name: {
type: String,
default: t('files', 'Create new folder'),
},
/**
* Input label
*/
label: {
type: String,
default: t('files', 'Folder name'),
},
},
emits: {
close: (name: string|null) => name === null || name,
},
data() {
return {
localDefaultName: this.defaultName || t('files', 'New folder'),
}
},
computed: {
errorMessage() {
if (this.isUniqueName) {
return ''
} else {
return t('files', 'A file or folder with that name already exists.')
}
},
uniqueName() {
return getUniqueName(this.localDefaultName, this.otherNames)
},
isUniqueName() {
return this.localDefaultName === this.uniqueName
},
},
watch: {
defaultName() {
this.localDefaultName = this.defaultName || t('files', 'New folder')
},
/**
* Ensure the input is focussed even if the dialog is already mounted but not open
*/
open() {
this.$nextTick(() => this.focusInput())
},
},
mounted() {
// on mounted lets use the unique name
this.localDefaultName = this.uniqueName
this.$nextTick(() => this.focusInput())
},
methods: {
t,
/**
* Focus the filename input field
*/
focusInput() {
if (this.open) {
this.$nextTick(() => (this.$refs.input as unknown as ICanFocus)?.focus?.())
}
},
onCreate() {
this.$emit('close', this.localDefaultName)
},
onClose(state: boolean) {
if (!state) {
this.$emit('close', null)
}
},
},
})
</script>
|
