163 lines
3.5 KiB
Vue
163 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue'
|
|
import type { CollectionObject } from '@MailManager/models/collection'
|
|
import type { ServiceObject } from '@MailManager/models'
|
|
|
|
// Props
|
|
interface Props {
|
|
modelValue: boolean
|
|
service: ServiceObject
|
|
parentFolderLabel?: string
|
|
validateName?: (name: string) => string[]
|
|
loading?: boolean
|
|
errorMessage?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
parentFolderLabel: 'Root',
|
|
validateName: () => [],
|
|
loading: false,
|
|
errorMessage: '',
|
|
})
|
|
|
|
// Emits
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
confirm: [folderName: string]
|
|
}>()
|
|
|
|
// Form state
|
|
const folderName = ref('')
|
|
const validationErrors = ref<string[]>([])
|
|
|
|
// Computed
|
|
const dialogValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const isValid = computed(() => {
|
|
return folderName.value.trim().length > 0 && validationErrors.value.length === 0
|
|
})
|
|
|
|
// Watch folder name for validation
|
|
watch(folderName, (newName) => {
|
|
validationErrors.value = props.validateName(newName)
|
|
})
|
|
|
|
// Reset form when dialog opens/closes
|
|
watch(dialogValue, (isOpen) => {
|
|
if (isOpen) {
|
|
resetForm()
|
|
}
|
|
})
|
|
|
|
const resetForm = () => {
|
|
folderName.value = ''
|
|
validationErrors.value = []
|
|
}
|
|
|
|
const handleCreate = async () => {
|
|
const errors = props.validateName(folderName.value)
|
|
|
|
if (errors.length > 0) {
|
|
validationErrors.value = errors
|
|
return
|
|
}
|
|
|
|
emit('confirm', folderName.value.trim())
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
dialogValue.value = false
|
|
resetForm()
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog
|
|
v-model="dialogValue"
|
|
max-width="500"
|
|
persistent
|
|
>
|
|
<v-card>
|
|
<v-card-title class="text-h5">
|
|
Create New Folder
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<!-- Service info -->
|
|
<div class="mb-4">
|
|
<div class="text-caption text-medium-emphasis">Account</div>
|
|
<div class="text-body-2">
|
|
{{ service.label || service.primaryAddress || 'Mail Account' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parent folder info -->
|
|
<div class="mb-4">
|
|
<div class="text-caption text-medium-emphasis">Location</div>
|
|
<div class="text-body-2">
|
|
{{ parentFolderLabel }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Folder name input -->
|
|
<v-text-field
|
|
v-model="folderName"
|
|
label="Folder Name"
|
|
placeholder="Enter folder name"
|
|
variant="outlined"
|
|
autofocus
|
|
:error-messages="validationErrors"
|
|
:disabled="loading"
|
|
@keyup.enter="isValid && handleCreate()"
|
|
/>
|
|
|
|
<!-- Error message -->
|
|
<v-alert
|
|
v-if="errorMessage"
|
|
type="error"
|
|
variant="tonal"
|
|
density="compact"
|
|
class="mt-2"
|
|
>
|
|
{{ errorMessage }}
|
|
</v-alert>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
|
|
<v-btn
|
|
variant="text"
|
|
:disabled="loading"
|
|
@click="handleCancel"
|
|
>
|
|
Cancel
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
color="primary"
|
|
variant="elevated"
|
|
:loading="loading"
|
|
:disabled="!isValid"
|
|
@click="handleCreate"
|
|
>
|
|
Create Folder
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-caption {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.0333em;
|
|
}
|
|
</style>
|