File size: 2,607 Bytes
8ede856 | 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 | <template>
<BaseCreateFolderDialog v-model="showDialog" :parent-folder-id="parentFolderId" :labels="labels"
@create="handleCreate" ref="baseDialog" />
</template>
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { useModuleI18n } from '@/i18n/composables';
import { usePersonaStore } from '@/stores/personaStore';
import { mapActions } from 'pinia';
import BaseCreateFolderDialog from '@/components/folder/BaseCreateFolderDialog.vue';
import type { CreateFolderData } from '@/components/folder/types';
export default defineComponent({
name: 'CreateFolderDialog',
components: {
BaseCreateFolderDialog
},
props: {
modelValue: {
type: Boolean,
default: false
},
parentFolderId: {
type: String as PropType<string | null>,
default: null
}
},
emits: ['update:modelValue', 'created', 'error'],
setup() {
const { tm } = useModuleI18n('features/persona');
return { tm };
},
computed: {
showDialog: {
get(): boolean {
return this.modelValue;
},
set(value: boolean) {
this.$emit('update:modelValue', value);
}
},
labels() {
return {
title: this.tm('folder.createDialog.title'),
nameLabel: this.tm('folder.form.name'),
descriptionLabel: this.tm('folder.form.description'),
nameRequired: this.tm('folder.validation.nameRequired'),
cancelButton: this.tm('buttons.cancel'),
createButton: this.tm('folder.createDialog.createButton')
};
}
},
methods: {
...mapActions(usePersonaStore, ['createFolder']),
async handleCreate(data: CreateFolderData) {
const baseDialog = this.$refs.baseDialog as InstanceType<typeof BaseCreateFolderDialog>;
baseDialog.setLoading(true);
try {
await this.createFolder({
name: data.name,
description: data.description,
parent_id: data.parent_id
});
this.$emit('created', this.tm('folder.messages.createSuccess'));
this.showDialog = false;
} catch (error: any) {
this.$emit('error', error.message || this.tm('folder.messages.createError'));
} finally {
baseDialog.setLoading(false);
}
}
}
});
</script>
|