feat: tag and category add save and continue button (#6223)

#### What type of PR is this?

/kind feature

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

文章分类和标签 Modal 添加 ”保存并继续添加” 按钮,便于连续添加。

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

Fixes https://github.com/halo-dev/halo/issues/6127

#### Special notes for your reviewer:

![image](https://github.com/halo-dev/halo/assets/111493458/4debe13e-4002-48a8-827b-58cb74b4b074)


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

```release-note
文章分类和标签页添加 "保存并继续添加" 按钮。
```
pull/6279/head v2.17.0
LonelySnowman 2024-07-01 23:49:18 +08:00 committed by GitHub
parent b9c500dc8d
commit c5bf1924a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 69 additions and 20 deletions

View File

@ -21,6 +21,7 @@ import {
import { useQueryClient } from "@tanstack/vue-query"; import { useQueryClient } from "@tanstack/vue-query";
import { cloneDeep } from "lodash-es"; import { cloneDeep } from "lodash-es";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { submitForm, reset } from "@formkit/core";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -65,6 +66,7 @@ const formState = ref<Category>({
const selectedParentCategory = ref(); const selectedParentCategory = ref();
const saving = ref(false); const saving = ref(false);
const modal = ref<InstanceType<typeof VModal> | null>(null); const modal = ref<InstanceType<typeof VModal> | null>(null);
const keepAddingSubmit = ref(false);
const isUpdateMode = !!props.category; const isUpdateMode = !!props.category;
@ -133,7 +135,11 @@ const handleSaveCategory = async () => {
} }
} }
modal.value?.close(); if (keepAddingSubmit.value) {
reset("category-form");
} else {
modal.value?.close();
}
queryClient.invalidateQueries({ queryKey: ["post-categories"] }); queryClient.invalidateQueries({ queryKey: ["post-categories"] });
@ -145,6 +151,11 @@ const handleSaveCategory = async () => {
} }
}; };
const handleSubmit = (keepAdding = false) => {
keepAddingSubmit.value = keepAdding;
submitForm("category-form");
};
onMounted(() => { onMounted(() => {
if (props.category) { if (props.category) {
formState.value = cloneDeep(props.category); formState.value = cloneDeep(props.category);
@ -340,18 +351,29 @@ const { handleGenerateSlug } = useSlugify(
</div> </div>
<template #footer> <template #footer>
<VSpace> <div class="flex justify-between">
<SubmitButton <VSpace>
:loading="saving" <SubmitButton
type="secondary" :loading="saving && !keepAddingSubmit"
:text="$t('core.common.buttons.submit')" :disabled="saving && keepAddingSubmit"
@submit="$formkit.submit('category-form')" type="secondary"
> :text="$t('core.common.buttons.submit')"
</SubmitButton> @submit="handleSubmit"
>
</SubmitButton>
<VButton
v-if="!isUpdateMode"
:loading="saving && keepAddingSubmit"
:disabled="saving && !keepAddingSubmit"
@click="handleSubmit(true)"
>
{{ $t("core.common.buttons.save_and_continue") }}
</VButton>
</VSpace>
<VButton @click="modal?.close()"> <VButton @click="modal?.close()">
{{ $t("core.common.buttons.cancel_and_shortcut") }} {{ $t("core.common.buttons.cancel_and_shortcut") }}
</VButton> </VButton>
</VSpace> </div>
</template> </template>
</VModal> </VModal>
</template> </template>

View File

@ -26,6 +26,7 @@ import useSlugify from "@console/composables/use-slugify";
import { cloneDeep } from "lodash-es"; import { cloneDeep } from "lodash-es";
import { onMounted } from "vue"; import { onMounted } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { submitForm, reset } from "@formkit/core";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -63,6 +64,8 @@ const modal = ref<InstanceType<typeof VModal> | null>(null);
const saving = ref(false); const saving = ref(false);
const keepAddingSubmit = ref(false);
const isUpdateMode = computed(() => !!props.tag); const isUpdateMode = computed(() => !!props.tag);
const modalTitle = computed(() => { const modalTitle = computed(() => {
@ -101,7 +104,11 @@ const handleSaveTag = async () => {
}); });
} }
modal.value?.close(); if (keepAddingSubmit.value) {
reset("tag-form");
} else {
modal.value?.close();
}
Toast.success(t("core.common.toast.save_success")); Toast.success(t("core.common.toast.save_success"));
} catch (e) { } catch (e) {
@ -111,6 +118,11 @@ const handleSaveTag = async () => {
} }
}; };
const handleSubmit = (keepAdding = false) => {
keepAddingSubmit.value = keepAdding;
submitForm("tag-form");
};
onMounted(() => { onMounted(() => {
setFocus("displayNameInput"); setFocus("displayNameInput");
}); });
@ -250,18 +262,29 @@ const { handleGenerateSlug } = useSlugify(
</div> </div>
<template #footer> <template #footer>
<VSpace> <div class="flex justify-between">
<SubmitButton <VSpace>
:loading="saving" <SubmitButton
type="secondary" :loading="saving && !keepAddingSubmit"
:text="$t('core.common.buttons.submit')" :disabled="saving && keepAddingSubmit"
@submit="$formkit.submit('tag-form')" type="secondary"
> :text="$t('core.common.buttons.submit')"
</SubmitButton> @submit="handleSubmit"
>
</SubmitButton>
<VButton
v-if="!isUpdateMode"
:loading="saving && keepAddingSubmit"
:disabled="saving && !keepAddingSubmit"
@click="handleSubmit(true)"
>
{{ $t("core.common.buttons.save_and_continue") }}
</VButton>
</VSpace>
<VButton @click="modal?.close()"> <VButton @click="modal?.close()">
{{ $t("core.common.buttons.cancel_and_shortcut") }} {{ $t("core.common.buttons.cancel_and_shortcut") }}
</VButton> </VButton>
</VSpace> </div>
</template> </template>
</VModal> </VModal>
</template> </template>

View File

@ -1729,6 +1729,7 @@ core:
buttons: buttons:
save: Save save: Save
close: Close close: Close
save_and_continue: Save and keep adding
close_and_shortcut: Close (Esc) close_and_shortcut: Close (Esc)
delete: Delete delete: Delete
setting: Setting setting: Setting

View File

@ -1308,6 +1308,7 @@ core:
buttons: buttons:
save: Guardar save: Guardar
close: Cerrar close: Cerrar
save_and_continue: Guardar y seguir añadiendo
close_and_shortcut: Cerrar (Esc) close_and_shortcut: Cerrar (Esc)
delete: Borrar delete: Borrar
setting: Configuración setting: Configuración

View File

@ -1644,6 +1644,7 @@ core:
buttons: buttons:
save: 保存 save: 保存
close: 关闭 close: 关闭
save_and_continue: 保存并继续添加
close_and_shortcut: 关闭Esc close_and_shortcut: 关闭Esc
delete: 删除 delete: 删除
setting: 设置 setting: 设置

View File

@ -1601,6 +1601,7 @@ core:
buttons: buttons:
save: 保存 save: 保存
close: 關閉 close: 關閉
save_and_continue: 保存並繼續添加
close_and_shortcut: 關閉Esc close_and_shortcut: 關閉Esc
delete: 刪除 delete: 刪除
setting: 設置 setting: 設置