fix: prevent duplicate CreateEdit submissions (#1541)

frontend/src/components/misc/CreateEdit.vue

@@ -9,7 +9,7 @@
 			:shadow="false"
 			:padding="false"
 			class="has-text-start"
-			:loading="loading"
+			:loading="currentLoading"
 			:show-close="true"
 			@close="$router.back()"
 		>
@@ -37,8 +37,9 @@
 						v-if="hasPrimaryAction"
 						variant="primary"
 						:icon="primaryIcon"
-						:disabled="primaryDisabled || loading"
+						:disabled="isBusy"
 						class="mis-2"
+						:loading="currentLoading"
 						@click.prevent.stop="primary"
 					>
 						{{ primaryLabel || $t('misc.create') }}
@@ -52,7 +53,9 @@
 <script setup lang="ts">
 import type {IconProp} from '@fortawesome/fontawesome-svg-core'
 
-withDefaults(defineProps<{
+import {computed, ref, toRef, watch} from 'vue'
+
+const props = withDefaults(defineProps<{
 	title: string,
 	primaryLabel?: string,
 	primaryIcon?: IconProp,
@@ -60,7 +63,7 @@ withDefaults(defineProps<{
 	hasPrimaryAction?: boolean,
 	tertiary?: string,
 	wide?: boolean,
-	loading?: boolean
+	loading?: boolean,
 }>(), {
 	primaryLabel: '',
 	primaryIcon: 'plus',
@@ -68,17 +71,42 @@ withDefaults(defineProps<{
 	hasPrimaryAction: true,
 	tertiary: '',
 	wide: false,
-	loading: false,
 })
 
 const emit = defineEmits<{
 	'create': [event: MouseEvent],
 	'primary': [event: MouseEvent],
-	'tertiary': [event: MouseEvent]
+	'tertiary': [event: MouseEvent],
+	'update:loading': [value: boolean],
 }>()
 
+const loadingProp = toRef(props, 'loading')
+const currentLoading = ref(false)
+
+watch(
+	loadingProp,
+	(value) => {
+		if (value !== undefined) {
+			currentLoading.value = value
+		}
+	},
+	{immediate: true},
+)
+
+const isBusy = computed(() => props.primaryDisabled || currentLoading.value)
+
+function setLoading(value: boolean) {
+	currentLoading.value = value
+	emit('update:loading', value)
+}
+
 function primary(event: MouseEvent) {
+	if (isBusy.value) {
+		return
+	}
+
 	emit('create', event)
 	emit('primary', event)
+	setLoading(true)
 }
 </script>

frontend/src/views/filters/FilterEdit.vue

@@ -1,13 +1,14 @@
 <template>
 	<CreateEdit
+		v-model:loading="loadingModel"
 		:title="$t('filters.edit.title')"
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		:tertiary="$t('misc.delete')"
-		@primary="saveFilterWithValidation"
+		@primary="handleSave"
 		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: projectId } })"
 	>
-		<form @submit.prevent="saveFilterWithValidation()">
+		<form @submit.prevent="handleSave()">
 			<div class="field">
 				<label
 					class="label"
@@ -69,6 +70,8 @@
 </template>
 
 <script setup lang="ts">
+import {computed, ref} from 'vue'
+
 import Editor from '@/components/input/AsyncEditor'
 import CreateEdit from '@/components/misc/CreateEdit.vue'
 import Filters from '@/components/project/partials/Filters.vue'
@@ -89,4 +92,27 @@ const {
 	titleValid,
 	validateTitleField,
 } = useSavedFilter(() => props.projectId)
+
+const isSubmitting = ref(false)
+
+const loadingModel = computed({
+	get: () => isSubmitting.value || filterService.loading,
+	set(value: boolean) {
+		isSubmitting.value = value
+	},
+})
+
+async function handleSave() {
+	if (isSubmitting.value) {
+		return
+	}
+
+	isSubmitting.value = true
+
+	try {
+		await saveFilterWithValidation()
+	} finally {
+		isSubmitting.value = false
+	}
+}
 </script>

frontend/src/views/labels/NewLabel.vue

@@ -1,5 +1,6 @@
 <template>
 	<CreateEdit
+		v-model:loading="loadingModel"
 		:title="$t('label.create.title')"
 		:primary-disabled="label.title === ''"
 		@create="newLabel()"
@@ -66,6 +67,14 @@ onBeforeMount(() => label.value.hexColor = getRandomColorHex())
 
 const showError = ref(false)
 const loading = computed(() => labelStore.isLoading)
+const isSubmitting = ref(false)
+
+const loadingModel = computed({
+	get: () => isSubmitting.value || loading.value,
+	set(value: boolean) {
+		isSubmitting.value = value
+	},
+})
 
 async function newLabel() {
 	if (label.value.title === '') {
@@ -74,11 +83,21 @@ async function newLabel() {
 	}
 	showError.value = false
 
-	const newLabel = await labelStore.createLabel(label.value)
-	router.push({
-		name: 'labels.index',
-		params: {id: newLabel.id},
-	})
-	success({message: t('label.create.success')})
+	if (isSubmitting.value) {
+		return
+	}
+
+	isSubmitting.value = true
+
+	try {
+		const newLabel = await labelStore.createLabel(label.value)
+		router.push({
+			name: 'labels.index',
+			params: {id: newLabel.id},
+		})
+		success({message: t('label.create.success')})
+	} finally {
+		isSubmitting.value = false
+	}
 }
 </script>

frontend/src/views/project/NewProject.vue

@@ -1,8 +1,9 @@
 <template>
 	<CreateEdit
+		v-model:loading="isSubmitting"
 		:title="$t('project.create.header')"
 		:primary-disabled="project.title === ''"
-		@create="createNewProject()"
+		@create="createProject()"
 	>
 		<div class="field">
 			<label
@@ -21,7 +22,7 @@
 					:placeholder="$t('project.create.titlePlaceholder')"
 					type="text"
 					name="projectTitle"
-					@keyup.enter="createNewProject()"
+					@keyup.enter="createProject()"
 					@keyup.esc="$router.back()"
 				>
 			</div>
@@ -78,6 +79,7 @@ const project = reactive(new ProjectModel())
 const projectService = shallowReactive(new ProjectService())
 const projectStore = useProjectStore()
 const parentProject = ref<IProject | null>(null)
+const isSubmitting = ref(false)
 
 watch(
 	() => props.parentProjectId,
@@ -85,18 +87,28 @@ watch(
 	{immediate: true},
 )
 
-async function createNewProject() {
+async function createProject() {
 	if (project.title === '') {
 		showError.value = true
 		return
 	}
 	showError.value = false
 
+	if (isSubmitting.value) {
+		return
+	}
+
+	isSubmitting.value = true
+
 	if (parentProject.value) {
 		project.parentProjectId = parentProject.value.id
 	}
 
-	await projectStore.createProject(project)
-	success({message: t('project.create.createdSuccess')})
+	try {
+		await projectStore.createProject(project)
+		success({message: t('project.create.createdSuccess')})
+	} finally {
+		isSubmitting.value = false
+	}
 }
 </script>

frontend/src/views/project/settings/ProjectSettingsDuplicate.vue

@@ -1,9 +1,9 @@
 <template>
 	<CreateEdit
+		v-model:loading="loadingModel"
 		:title="$t('project.duplicate.title')"
 		primary-icon="paste"
 		:primary-label="$t('project.duplicate.label')"
-		:loading="isLoading"
 		@primary="duplicate"
 	>
 		<p>{{ $t('project.duplicate.text') }}</p>
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
@@ -33,6 +33,14 @@ const projectStore = useProjectStore()
 const {project, isLoading, duplicateProject} = useProject(route.params.projectId)
 
 const parentProject = ref<IProject | null>(null)
+const isDuplicating = ref(false)
+
+const loadingModel = computed({
+	get: () => isDuplicating.value || isLoading.value,
+	set(value: boolean) {
+		isDuplicating.value = value
+	},
+})
 watch(
 	() => project.parentProjectId,
 	parentProjectId => {
@@ -42,7 +50,13 @@ watch(
 )
 
 async function duplicate() {
-	await duplicateProject(parentProject.value?.id ?? 0)
-	success({message: t('project.duplicate.success')})
+	isDuplicating.value = true
+
+	try {
+		await duplicateProject(parentProject.value?.id ?? 0)
+		success({message: t('project.duplicate.success')})
+	} finally {
+		isDuplicating.value = false
+	}
 }
 </script>

frontend/src/views/project/settings/ProjectSettingsEdit.vue

@@ -1,5 +1,6 @@
 <template>
 	<CreateEdit
+		v-model:loading="loadingModel"
 		:title="$t('project.edit.header')"
 		primary-icon=""
 		:primary-label="$t('misc.save')"
@@ -84,7 +85,7 @@
 </template>
 
 <script setup lang="ts">
-import {watch, ref} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
@@ -116,6 +117,14 @@ const {t} = useI18n({useScope: 'global'})
 const {project, save: saveProject, isLoading} = useProject(() => props.projectId)
 
 const parentProject = ref<IProject | null>(null)
+const isSaving = ref(false)
+
+const loadingModel = computed({
+	get: () => isSaving.value || isLoading.value,
+	set(value: boolean) {
+		isSaving.value = value
+	},
+})
 watch(
 	() => project.parentProjectId,
 	parentProjectId => {
@@ -129,9 +138,19 @@ watch(
 useTitle(() => project?.title ? t('project.edit.title', {project: project.title}) : '')
 
 async function save() {
-	project.parentProjectId = parentProject.value?.id ?? project.parentProjectId
-	await saveProject()
-	await useBaseStore().handleSetCurrentProject({project})
-	router.back()
+	if (isSaving.value) {
+		return
+	}
+
+	isSaving.value = true
+
+	try {
+		project.parentProjectId = parentProject.value?.id ?? project.parentProjectId
+		await saveProject()
+		await useBaseStore().handleSetCurrentProject({project})
+		router.back()
+	} finally {
+		isSaving.value = false
+	}
 }
 </script>

frontend/src/views/teams/NewTeam.vue

@@ -1,8 +1,9 @@
 <template>
 	<CreateEdit
+		v-model:loading="loadingModel"
 		:title="title"
 		:primary-disabled="team.name === ''"
-		@create="newTeam()"
+		@create="createTeam()"
 	>
 		<div class="field">
 			<label
@@ -21,7 +22,7 @@
 					class="input"
 					:placeholder="$t('team.attributes.namePlaceholder')"
 					type="text"
-					@keyup.enter="newTeam"
+					@keyup.enter="createTeam"
 				>
 			</div>
 		</div>
@@ -55,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import {reactive, ref, shallowReactive, computed} from 'vue'
+import {computed, reactive, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import TeamModel from '@/models/team'
@@ -80,21 +81,39 @@ const router = useRouter()
 const teamService = shallowReactive(new TeamService())
 const team = reactive(new TeamModel())
 const showError = ref(false)
+const isSubmitting = ref(false)
+
+const loadingModel = computed({
+	get: () => isSubmitting.value || teamService.loading,
+	set(value: boolean) {
+		isSubmitting.value = value
+	},
+})
 
 const configStore = useConfigStore()
 
-async function newTeam() {
+async function createTeam() {
 	if (team.name === '') {
 		showError.value = true
 		return
 	}
 	showError.value = false
 
-	const response = await teamService.create(team)
-	router.push({
-		name: 'teams.edit',
-		params: { id: response.id },
-	})
-	success({message: t('team.create.success') })
+	if (isSubmitting.value) {
+		return
+	}
+
+	isSubmitting.value = true
+
+	try {
+		const response = await teamService.create(team)
+		router.push({
+			name: 'teams.edit',
+			params: { id: response.id },
+		})
+		success({message: t('team.create.success') })
+	} finally {
+		isSubmitting.value = false
+	}
 }
 </script>