github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #5165 from ruibaby/refactor/pat-creation-modal 

refactor: logic of pat creation modal
pull/5181/head
John Niang 2024-01-11 14:54:56 +08:00 committed by GitHub
parent 5f0ac9f5ca 9f2bed7f86
commit 5c00d9fe3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
View File

@ -16,12 +16,13 @@ import { useI18n } from "vue-i18n";
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { t } = useI18n(); const { t } = useI18n();
const visible = defineModel({ type: Boolean, default: false });
const emit = defineEmits<{ const emit = defineEmits<{
(event: "close"): void; (event: "close"): void;
}>(); }>();
const modal = ref();
const formState = ref< const formState = ref<
Omit<PersonalAccessToken, "spec"> & { Omit<PersonalAccessToken, "spec"> & {
spec: PatSpec; spec: PatSpec;
@ -71,7 +72,6 @@ const {
}, },
onSuccess(data) { onSuccess(data) {
queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] }); queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] });
visible.value = false;
emit("close"); emit("close");
setTimeout(() => { setTimeout(() => {
@ -100,7 +100,7 @@ const { copy } = useClipboard({
<template> <template>
<VModal <VModal
v-model:visible="visible" ref="modal"
:width="700" :width="700"
:title="$t('core.uc_profile.pat.creation_modal.title')" :title="$t('core.uc_profile.pat.creation_modal.title')"
@close="emit('close')" @close="emit('close')"
@ -246,7 +246,7 @@ const { copy } = useClipboard({
:text="$t('core.common.buttons.submit')" :text="$t('core.common.buttons.submit')"
@submit="$formkit.submit('pat-creation-form')" @submit="$formkit.submit('pat-creation-form')"
/> />
<VButton @click="visible = false"> <VButton @click="modal.close()">
{{ $t("core.common.buttons.cancel_and_shortcut") }} {{ $t("core.common.buttons.cancel_and_shortcut") }}
</VButton> </VButton>
</VSpace> </VSpace>

25
console/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
View File

@ -11,7 +11,6 @@ import { apiClient } from "@/utils/api-client";
import type { PersonalAccessToken } from "@halo-dev/api-client"; import type { PersonalAccessToken } from "@halo-dev/api-client";
import { useQuery } from "@tanstack/vue-query"; import { useQuery } from "@tanstack/vue-query";
import PersonalAccessTokenCreationModal from "../components/PersonalAccessTokenCreationModal.vue"; import PersonalAccessTokenCreationModal from "../components/PersonalAccessTokenCreationModal.vue";
import { nextTick } from "vue";
import PersonalAccessTokenListItem from "../components/PersonalAccessTokenListItem.vue"; import PersonalAccessTokenListItem from "../components/PersonalAccessTokenListItem.vue";
const { const {
@ -32,28 +31,11 @@ const {
}, },
}); });
// fixme: Refactor VModal component to simplify the code
// use v-if to control the visibility of the modal
const creationModal = ref(false); const creationModal = ref(false);
const creationModalVisible = ref(false);
function handleOpenCreationModal() {
creationModal.value = true;
nextTick(() => {
creationModalVisible.value = true;
});
}
function onCreationModalClose() {
creationModalVisible.value = false;
setTimeout(() => {
creationModal.value = false;
}, 200);
}
</script> </script>
<template> <template>
<div v-if="pats?.length" class="my-5 flex justify-end"> <div v-if="pats?.length" class="my-5 flex justify-end">
<VButton type="secondary" @click="handleOpenCreationModal"> <VButton type="secondary" @click="creationModal = true">
<template #icon> <template #icon>
<IconAddCircle class="h-full w-full" /> <IconAddCircle class="h-full w-full" />
</template> </template>
@ -73,7 +55,7 @@ function onCreationModalClose() {
<VButton @click="refetch"> <VButton @click="refetch">
{{ $t("core.common.buttons.refresh") }} {{ $t("core.common.buttons.refresh") }}
</VButton> </VButton>
<VButton type="primary" @click="handleOpenCreationModal"> <VButton type="primary" @click="creationModal = true">
<template #icon> <template #icon>
<IconAddCircle class="h-full w-full" /> <IconAddCircle class="h-full w-full" />
</template> </template>
@ -97,7 +79,6 @@ function onCreationModalClose() {
<PersonalAccessTokenCreationModal <PersonalAccessTokenCreationModal
v-if="creationModal" v-if="creationModal"
v-model="creationModalVisible" @close="creationModal = false"
@close="onCreationModalClose"
/> />
</template> </template>