mirror of https://github.com/halo-dev/halo
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
parent
65808c8c6f
commit
d44fa5f6d8
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue