feat: add support for creating a new group when uploading attachments (#6951)

#### What type of PR is this?

/kind improvement
/area ui
/milestone 2.20.x

#### What this PR does / why we need it:

支持在附件上传界面创建新分组。

#### Which issue(s) this PR fixes:

Fixes #6942 

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
支持在附件上传界面创建新分组。
```
pull/6964/head
Nancy 2024-10-27 17:52:01 +08:00 committed by GitHub
parent 65808c8c6f
commit d44fa5f6d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 2 deletions

View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import UppyUpload from "@/components/upload/UppyUpload.vue";
import type { PolicyTemplate } from "@halo-dev/api-client";
import {
IconAddCircle,
@ -15,6 +16,7 @@ import {
useFetchAttachmentPolicyTemplate,
} from "../composables/use-attachment-policy";
import AttachmentGroupBadge from "./AttachmentGroupBadge.vue";
import AttachmentGroupEditingModal from "./AttachmentGroupEditingModal.vue";
import AttachmentPolicyBadge from "./AttachmentPolicyBadge.vue";
import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
@ -22,7 +24,7 @@ const emit = defineEmits<{
(event: "close"): void;
}>();
const { groups } = useFetchAttachmentGroup();
const { groups, handleFetchGroups } = useFetchAttachmentGroup();
const { policies, handleFetchPolicies } = useFetchAttachmentPolicy();
const { policyTemplates } = useFetchAttachmentPolicyTemplate();
@ -30,6 +32,7 @@ const modal = ref<InstanceType<typeof VModal> | null>(null);
const selectedGroupName = useLocalStorage("attachment-upload-group", "");
const selectedPolicyName = useLocalStorage("attachment-upload-policy", "");
const policyEditingModal = ref(false);
const groupEditingModal = ref(false);
const policyTemplateNameToCreate = ref();
onMounted(() => {
@ -43,13 +46,23 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
policyEditingModal.value = true;
};
const handleOpenCreateNewGroupModal = () => {
groupEditingModal.value = true;
};
const onEditingModalClose = async () => {
await handleFetchPolicies();
policyTemplateNameToCreate.value = undefined;
selectedPolicyName.value = policies.value?.[0].metadata.name;
policyEditingModal.value = false;
};
const onGroupEditingModalClose = async () => {
await handleFetchGroups();
groupEditingModal.value = false;
};
</script>
<template>
<VModal
ref="modal"
@ -128,7 +141,15 @@ const onEditingModalClose = async () => {
:is-selected="group.metadata.name === selectedGroupName"
:features="{ actions: false, checkIcon: true }"
@click="selectedGroupName = group.metadata.name"
>
/>
<AttachmentGroupBadge @click="handleOpenCreateNewGroupModal">
<template #text>
<span>{{ $t("core.common.buttons.new") }}</span>
</template>
<template #actions>
<IconAddCircle />
</template>
</AttachmentGroupBadge>
</div>
<UppyUpload
@ -155,4 +176,9 @@ const onEditingModalClose = async () => {
:template-name="policyTemplateNameToCreate"
@close="onEditingModalClose"
/>
<AttachmentGroupEditingModal
v-if="groupEditingModal"
@close="onGroupEditingModalClose"
/>
</template>