Skip to content

Commit

Permalink
feat: tag and category add save and continue button (halo-dev#6223)
Browse files Browse the repository at this point in the history
#### What type of PR is this?

/kind feature

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

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

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

Fixes halo-dev#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
文章分类和标签页添加 "保存并继续添加" 按钮。
```
  • Loading branch information
LonelySnowman authored Jul 1, 2024
1 parent b9c500d commit c5bf192
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
import { useQueryClient } from "@tanstack/vue-query";
import { cloneDeep } from "lodash-es";
import { useI18n } from "vue-i18n";
import { submitForm, reset } from "@formkit/core";
const props = withDefaults(
defineProps<{
Expand Down Expand Up @@ -65,6 +66,7 @@ const formState = ref<Category>({
const selectedParentCategory = ref();
const saving = ref(false);
const modal = ref<InstanceType<typeof VModal> | null>(null);
const keepAddingSubmit = ref(false);
const isUpdateMode = !!props.category;
Expand Down Expand Up @@ -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"] });
Expand All @@ -145,6 +151,11 @@ const handleSaveCategory = async () => {
}
};
const handleSubmit = (keepAdding = false) => {
keepAddingSubmit.value = keepAdding;
submitForm("category-form");
};
onMounted(() => {
if (props.category) {
formState.value = cloneDeep(props.category);
Expand Down Expand Up @@ -340,18 +351,29 @@ const { handleGenerateSlug } = useSlugify(
</div>

<template #footer>
<VSpace>
<SubmitButton
:loading="saving"
type="secondary"
:text="$t('core.common.buttons.submit')"
@submit="$formkit.submit('category-form')"
>
</SubmitButton>
<div class="flex justify-between">
<VSpace>
<SubmitButton
:loading="saving && !keepAddingSubmit"
:disabled="saving && keepAddingSubmit"
type="secondary"
:text="$t('core.common.buttons.submit')"
@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()">
{{ $t("core.common.buttons.cancel_and_shortcut") }}
</VButton>
</VSpace>
</div>
</template>
</VModal>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import useSlugify from "@console/composables/use-slugify";
import { cloneDeep } from "lodash-es";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { submitForm, reset } from "@formkit/core";
const props = withDefaults(
defineProps<{
Expand Down Expand Up @@ -63,6 +64,8 @@ const modal = ref<InstanceType<typeof VModal> | null>(null);
const saving = ref(false);
const keepAddingSubmit = ref(false);
const isUpdateMode = computed(() => !!props.tag);
const modalTitle = computed(() => {
Expand Down Expand Up @@ -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"));
} catch (e) {
Expand All @@ -111,6 +118,11 @@ const handleSaveTag = async () => {
}
};
const handleSubmit = (keepAdding = false) => {
keepAddingSubmit.value = keepAdding;
submitForm("tag-form");
};
onMounted(() => {
setFocus("displayNameInput");
});
Expand Down Expand Up @@ -250,18 +262,29 @@ const { handleGenerateSlug } = useSlugify(
</div>

<template #footer>
<VSpace>
<SubmitButton
:loading="saving"
type="secondary"
:text="$t('core.common.buttons.submit')"
@submit="$formkit.submit('tag-form')"
>
</SubmitButton>
<div class="flex justify-between">
<VSpace>
<SubmitButton
:loading="saving && !keepAddingSubmit"
:disabled="saving && keepAddingSubmit"
type="secondary"
:text="$t('core.common.buttons.submit')"
@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()">
{{ $t("core.common.buttons.cancel_and_shortcut") }}
</VButton>
</VSpace>
</div>
</template>
</VModal>
</template>
1 change: 1 addition & 0 deletions ui/src/locales/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1729,6 +1729,7 @@ core:
buttons:
save: Save
close: Close
save_and_continue: Save and keep adding
close_and_shortcut: Close (Esc)
delete: Delete
setting: Setting
Expand Down
1 change: 1 addition & 0 deletions ui/src/locales/es.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1308,6 +1308,7 @@ core:
buttons:
save: Guardar
close: Cerrar
save_and_continue: Guardar y seguir añadiendo
close_and_shortcut: Cerrar (Esc)
delete: Borrar
setting: Configuración
Expand Down
1 change: 1 addition & 0 deletions ui/src/locales/zh-CN.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1644,6 +1644,7 @@ core:
buttons:
save: 保存
close: 关闭
save_and_continue: 保存并继续添加
close_and_shortcut: 关闭(Esc)
delete: 删除
setting: 设置
Expand Down
1 change: 1 addition & 0 deletions ui/src/locales/zh-TW.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1601,6 +1601,7 @@ core:
buttons:
save: 保存
close: 關閉
save_and_continue: 保存並繼續添加
close_and_shortcut: 關閉(Esc)
delete: 刪除
setting: 設置
Expand Down

0 comments on commit c5bf192

Please sign in to comment.