Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruibaby
ruibaby committed May 22, 2024
2 parents 265d55d + 9bfe3a6 commit 9c0212e
Show file tree
Hide file tree
Showing 7 changed files with 2,258 additions and 471 deletions.
65 changes: 17 additions & 48 deletions ui/console-src/modules/contents/posts/categories/CategoryList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,35 @@ import {
VButton,
VCard,
VEmpty,
VLoading,
VPageHeader,
VSpace,
VLoading,
} from "@halo-dev/components";
import CategoryEditingModal from "./components/CategoryEditingModal.vue";
import CategoryListItem from "./components/CategoryListItem.vue";
// types
import type { Category } from "@halo-dev/api-client";
import type { CategoryTree } from "./utils";
import {
convertCategoryTreeToCategory,
convertTreeToCategories,
resetCategoriesTreePriority,
} from "./utils";
import { convertTreeToCategories, resetCategoriesTreePriority } from "./utils";
// libs
import { useDebounceFn } from "@vueuse/core";
// hooks
import { usePostCategory } from "./composables/use-post-category";
const editingModal = ref(false);
const selectedCategory = ref<Category>();
const selectedParentCategory = ref<Category>();
const creationModal = ref(false);
const { categories, categoriesTree, isLoading, handleFetchCategories } =
usePostCategory();
const {
categories,
categoriesTree,
isLoading,
handleFetchCategories,
handleDelete,
} = usePostCategory();
const batchUpdating = ref(false);
const handleUpdateInBatch = useDebounceFn(async () => {
const categoriesTreeToUpdate = resetCategoriesTreePriority(
categoriesTree.value
);
const categoriesToUpdate = convertTreeToCategories(categoriesTreeToUpdate);
try {
batchUpdating.value = true;
const promises = categoriesToUpdate.map((category) =>
apiClient.extension.category.updatecontentHaloRunV1alpha1Category({
name: category.metadata.name,
Expand All @@ -61,32 +50,12 @@ const handleUpdateInBatch = useDebounceFn(async () => {
console.error("Failed to update categories", e);
} finally {
await handleFetchCategories();
batchUpdating.value = false;
}
}, 500);
const handleOpenEditingModal = (category: CategoryTree) => {
selectedCategory.value = convertCategoryTreeToCategory(category);
editingModal.value = true;
};
const handleOpenCreateByParentModal = (category: CategoryTree) => {
selectedParentCategory.value = convertCategoryTreeToCategory(category);
editingModal.value = true;
};
const onEditingModalClose = () => {
selectedCategory.value = undefined;
selectedParentCategory.value = undefined;
handleFetchCategories();
};
}, 300);
</script>
<template>
<CategoryEditingModal
v-model:visible="editingModal"
:category="selectedCategory"
:parent-category="selectedParentCategory"
@close="onEditingModalClose"
/>
<CategoryEditingModal v-if="creationModal" @close="creationModal = false" />
<VPageHeader :title="$t('core.post_category.title')">
<template #icon>
<IconBookRead class="mr-2 self-center" />
Expand All @@ -96,7 +65,7 @@ const onEditingModalClose = () => {
<VButton
v-permission="['system:posts:manage']"
type="secondary"
@click="editingModal = true"
@click="creationModal = true"
>
<template #icon>
<IconAddCircle class="h-full w-full" />
Expand Down Expand Up @@ -138,7 +107,7 @@ const onEditingModalClose = () => {
<VButton
v-permission="['system:posts:manage']"
type="primary"
@click="editingModal = true"
@click="creationModal = true"
>
<template #icon>
<IconAddCircle class="h-full w-full" />
Expand All @@ -151,11 +120,11 @@ const onEditingModalClose = () => {
</Transition>
<Transition v-else appear name="fade">
<CategoryListItem
:categories="categoriesTree"
v-model="categoriesTree"
:class="{
'cursor-progress opacity-60': batchUpdating,
}"
@change="handleUpdateInBatch"
@delete="handleDelete"
@open-editing="handleOpenEditingModal"
@open-create-by-parent="handleOpenCreateByParentModal"
/>
</Transition>
</VCard>
Expand Down
85 changes: 25 additions & 60 deletions ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" setup>
// core libs
import { computed, nextTick, ref, watch } from "vue";
import { computed, nextTick, onMounted, ref, toRaw } from "vue";
import { apiClient } from "@/utils/api-client";
// components
Expand All @@ -17,36 +17,33 @@ import SubmitButton from "@/components/button/SubmitButton.vue";
import type { Category } from "@halo-dev/api-client";
// libs
import { cloneDeep } from "lodash-es";
import { reset } from "@formkit/core";
import { setFocus } from "@/formkit/utils/focus";
import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
import useSlugify from "@console/composables/use-slugify";
import { useI18n } from "vue-i18n";
import { FormType } from "@/types/slug";
import { useQueryClient } from "@tanstack/vue-query";
const props = withDefaults(
defineProps<{
visible: boolean;
category?: Category;
parentCategory?: Category;
}>(),
{
visible: false,
category: undefined,
parentCategory: undefined,
}
);
const emit = defineEmits<{
(event: "update:visible", visible: boolean): void;
(event: "close"): void;
}>();
const queryClient = useQueryClient();
const { t } = useI18n();
const initialFormState: Category = {
const formState = ref<Category>({
spec: {
displayName: "",
slug: "",
Expand All @@ -63,21 +60,16 @@ const initialFormState: Category = {
name: "",
generateName: "category-",
},
};
const formState = ref<Category>(cloneDeep(initialFormState));
const selectedParentCategory = ref("");
});
const selectedParentCategory = ref();
const saving = ref(false);
const modal = ref();
const isUpdateMode = computed(() => {
return !!formState.value.metadata.creationTimestamp;
});
const isUpdateMode = !!props.category;
const modalTitle = computed(() => {
return isUpdateMode.value
? t("core.post_category.editing_modal.titles.update")
: t("core.post_category.editing_modal.titles.create");
});
const modalTitle = props.category
? t("core.post_category.editing_modal.titles.update")
: t("core.post_category.editing_modal.titles.create");
const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
Expand All @@ -98,7 +90,7 @@ const handleSaveCategory = async () => {
try {
saving.value = true;
if (isUpdateMode.value) {
if (isUpdateMode) {
await apiClient.extension.category.updatecontentHaloRunV1alpha1Category({
name: formState.value.metadata.name,
category: formState.value,
Expand Down Expand Up @@ -144,7 +136,10 @@ const handleSaveCategory = async () => {
);
}
}
onVisibleChange(false);
modal.value.close();
queryClient.invalidateQueries({ queryKey: ["post-categories"] });
Toast.success(t("core.common.toast.save_success"));
} catch (e) {
Expand All @@ -154,37 +149,13 @@ const handleSaveCategory = async () => {
}
};
const onVisibleChange = (visible: boolean) => {
emit("update:visible", visible);
if (!visible) {
emit("close");
}
};
const handleResetForm = () => {
selectedParentCategory.value = "";
formState.value = cloneDeep(initialFormState);
reset("category-form");
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.parentCategory) {
selectedParentCategory.value = props.parentCategory.metadata.name;
}
if (props.category) {
formState.value = cloneDeep(props.category);
}
setFocus("displayNameInput");
} else {
handleResetForm();
}
onMounted(() => {
if (props.category) {
formState.value = toRaw(props.category);
}
);
selectedParentCategory.value = props.parentCategory?.metadata.name;
setFocus("displayNameInput");
});
// custom templates
const { templates } = useThemeCustomTemplates("category");
Expand All @@ -200,17 +171,12 @@ const { handleGenerateSlug } = useSlugify(
formState.value.spec.slug = value;
},
}),
computed(() => !isUpdateMode.value),
computed(() => !isUpdateMode),
FormType.CATEGORY
);
</script>
<template>
<VModal
:title="modalTitle"
:visible="visible"
:width="700"
@update:visible="onVisibleChange"
>
<VModal ref="modal" :title="modalTitle" :width="700" @close="emit('close')">
<FormKit
id="category-form"
type="form"
Expand Down Expand Up @@ -331,14 +297,13 @@ const { handleGenerateSlug } = useSlugify(
<template #footer>
<VSpace>
<SubmitButton
v-if="visible"
:loading="saving"
type="secondary"
:text="$t('core.common.buttons.submit')"
@submit="$formkit.submit('category-form')"
>
</SubmitButton>
<VButton @click="onVisibleChange(false)">
<VButton @click="modal.close()">
{{ $t("core.common.buttons.cancel_and_shortcut") }}
</VButton>
</VSpace>
Expand Down
Loading

0 comments on commit 9c0212e

Please sign in to comment.