diff --git a/components/Project/Create/Components/DatePicker.vue b/components/Project/Create/Components/DatePicker.vue index 6df176f..ba2400b 100644 --- a/components/Project/Create/Components/DatePicker.vue +++ b/components/Project/Create/Components/DatePicker.vue @@ -78,20 +78,20 @@ const days = computed(() => { > { const project = ref>() const projectImage = ref() - const isPublishing = ref(false) const { getProjectById } = useData() function setProject(id: string) { - clearProject() project.value = getProjectById(id, { shallow: false }) as Project delete project.value.ratings } @@ -30,7 +28,6 @@ export const useProject = defineStore('project', () => { } async function publishProject() { - isPublishing.value = true try { let imageBuffer: Buffer | undefined let base64Image: string | undefined @@ -58,14 +55,10 @@ export const useProject = defineStore('project', () => { catch (e) { console.error(e) } - finally { - isPublishing.value = false - } } return { project, - isPublishing, setProject, clearProject, saveProject, diff --git a/composables/useProjectForm.ts b/composables/useProjectForm.ts index 265747e..399ce8a 100644 --- a/composables/useProjectForm.ts +++ b/composables/useProjectForm.ts @@ -11,11 +11,10 @@ import ProjectCreateCategoriesHistory from '~/components/Project/Create/Categori export const useProjectForm = defineStore('useProjectForm', () => { const { saveProject, publishProject } = useProject() - const { project, isPublishing } = storeToRefs(useProject()) + const { project } = storeToRefs(useProject()) const isEditingName = ref(false) const { value: name, errorMessage: nameError } = useField('name', yup.string().required().notOneOf(['Untitled', 'Undefined', 'Create', 'create'])) - name.value = project.value?.name || 'Untitled' function toggleEditName() { isEditingName.value = !isEditingName.value @@ -45,10 +44,9 @@ export const useProjectForm = defineStore('useProjectForm', () => { const currentComponent = ref() async function next() { - if (selectedTab.value === 0) { - if (!(await currentComponent.value.isFormValid()) || nameError.value) - return - } + const isFormValid = selectedTab.value === 0 ? await currentComponent.value.isFormValid() : true + if (!isFormValid || nameError.value) + return saveName() currentComponent.value.save() @@ -59,12 +57,9 @@ export const useProjectForm = defineStore('useProjectForm', () => { } async function jumpTo(index: number) { - if (selectedTab.value === 0) { - if (!(await currentComponent.value.isFormValid()) || nameError.value) - return - if (nameError.value) - return - else saveName() + const isFormValid = selectedTab.value === 0 ? await currentComponent.value.isFormValid() : true + if (!isFormValid || nameError.value) { + return } saveName() @@ -73,25 +68,29 @@ export const useProjectForm = defineStore('useProjectForm', () => { selectedTab.value = index } + const isPublishing = ref(false) async function publish(isNew?: boolean) { - if (selectedTab.value === 0) { - if (!(await currentComponent.value.isFormValid()) || nameError.value) - return - } - else if (isPublishing) { + isPublishing.value = true + const isFormValid = selectedTab.value === 0 ? await currentComponent.value.isFormValid() : true + if (!isFormValid || nameError.value) return - } saveName() currentComponent.value?.save() await publishProject() + isPublishing.value = false if (isNew) navigateTo('/') else navigateTo(`/project/${project.value?.id || project.value?.name?.toLowerCase().replace(/\s+/g, '-')}`) } + function initForm() { + selectedTab.value = 0 + name.value = 'Untitled' + } + return { isEditingName, name, @@ -104,5 +103,7 @@ export const useProjectForm = defineStore('useProjectForm', () => { next, publish, jumpTo, + isPublishing, + initForm, } }) diff --git a/pages/project/[id]/edit.vue b/pages/project/[id]/edit.vue index 1715a6c..e48fe9a 100644 --- a/pages/project/[id]/edit.vue +++ b/pages/project/[id]/edit.vue @@ -5,10 +5,12 @@ definePageMeta({ const { projects } = useData() const { setProject, saveProjectImage } = useProject() -const { project, isPublishing } = storeToRefs(useProject()) +const { project } = storeToRefs(useProject()) +const { initForm } = useProjectForm() const route = useRoute() await until(projects).toMatch(p => p?.length > 0) +initForm() setProject(route.params.id as string) if (!project.value) { @@ -38,7 +40,7 @@ onChange((files) => { }) const { next, jumpTo, publish, toggleEditName } = useProjectForm() -const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError } = storeToRefs(useProjectForm()) +const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError, isPublishing } = storeToRefs(useProjectForm()) name.value = project.value?.name || 'Untitled' const projectNameInput = ref(null) @@ -299,7 +301,7 @@ const transitionDone = ref(false) w-full lg="w-fit" inverted-color - @click="publish()" + @click="isPublishing ? null : publish()" > { saveProjectImage(file) }) -const { next, jumpTo, publish, toggleEditName } = useProjectForm() -const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError } = storeToRefs(useProjectForm()) +const { next, jumpTo, publish, toggleEditName, initForm } = useProjectForm() +const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError, isPublishing } = storeToRefs(useProjectForm()) const projectNameInput = ref(null) watch(isEditingName, () => { @@ -37,6 +37,11 @@ watch(isEditingName, () => { }) const transitionDone = ref(false) + +onBeforeMount(() => { + clearProject() + initForm() +})