chore: remove submit button when edit task

README.md

@@ -4,23 +4,16 @@
 
 MyWeek is a weekly planner & to-do list app. It aims to enhance your productivity, manage your stuff in a week calendar view.
 
-Here is some screenshots of MyWeek. Visit [myweek.thien.dev](https://myweek.thien.dev) to explore more.
-
-<img width="871" alt="Screenshot 2023-03-11 at 15 32 35" src="https://user-images.githubusercontent.com/72242664/224474214-845071e0-f948-4870-8076-3c784e426cf9.png">
-<img width="871" alt="Screenshot 2023-03-11 at 15 33 15" src="https://user-images.githubusercontent.com/72242664/224474213-6ea0e0d6-c6d4-4dfc-93ba-30900e5592c2.png">
-<img width="871" alt="Screenshot 2023-03-11 at 15 34 14" src="https://user-images.githubusercontent.com/72242664/224474209-e3fbd1a4-fd52-495a-8d3a-4f8ac26c47ae.png">
-<img width="871" alt="Screenshot 2023-03-11 at 15 33 32" src="https://user-images.githubusercontent.com/72242664/224474212-a5945ff5-cb2d-44c3-a2a1-18c205aedc88.png">
-
 ## Features
 
 - Active calendars
 - Manage tasks
 - Notes
 - Drag & drop items
 - Checklists
+- Labels
 - Dark theme (coming soon)
 - Recurring tasks (comming soon)
-- Labels (comming soon)
 
 ## Development
 
@@ -58,6 +51,15 @@ After that, run the following command.
 pnpm dev
 ```
 
+## Screenshots
+
+Here is some screenshots of MyWeek. Visit [myweek.thien.dev](https://myweek.thien.dev) to explore more.
+
+<img width="871" alt="Screenshot 2023-03-11 at 15 32 35" src="https://user-images.githubusercontent.com/72242664/224474214-845071e0-f948-4870-8076-3c784e426cf9.png">
+<img width="871" alt="Screenshot 2023-03-11 at 15 33 15" src="https://user-images.githubusercontent.com/72242664/224474213-6ea0e0d6-c6d4-4dfc-93ba-30900e5592c2.png">
+<img width="871" alt="Screenshot 2023-03-11 at 15 34 14" src="https://user-images.githubusercontent.com/72242664/224474209-e3fbd1a4-fd52-495a-8d3a-4f8ac26c47ae.png">
+<img width="871" alt="Screenshot 2023-03-11 at 15 33 32" src="https://user-images.githubusercontent.com/72242664/224474212-a5945ff5-cb2d-44c3-a2a1-18c205aedc88.png">
+
 ## License
 
 MyWeek is released under MIT license. See LICENSE for more information.

src/components/FormSelectColor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-const colors = ['111,40,78', '53,85,87', '240,100,86', '208,97,87', '43,100,52', '53,83,77']
+const colors = ['111,40,78', '120,25,65', '208,97,87', '210,50,60', '240,100,86', '53,85,87', '53,83,77', '43,100,52']
 const props = defineProps<{
 	modelValue: string
 }>()

src/components/FormSelectLabels.vue

@@ -8,7 +8,7 @@ import { Label } from '@/types/label'
 const props = defineProps<{
 	modelValue: Label[]
 }>()
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'select'])
 
 const labelStore = useLabel()
 const selectedLabels = ref<Label[]>([...props.modelValue])
@@ -17,11 +17,13 @@ function selectLabel(label) {
 	if (selectedLabels.value.find(e => e.id === label.id)) return
 	selectedLabels.value.push(label)
 	emit('update:modelValue', selectedLabels.value)
+	emit('select', selectedLabels.value)
 }
 
 function removeLabel(label) {
 	selectedLabels.value = selectedLabels.value.filter(e => e.id !== label.id)
 	emit('update:modelValue', selectedLabels.value)
+	emit('select', selectedLabels.value)
 }
 </script>
 <template>

src/components/LabelItem.vue

@@ -25,7 +25,7 @@ const bgColor = computed(() => {
 })
 
 const textColor = computed(() => {
-	return `hsla(${h.value},${s.value}%,${l.value - 50 < 0 ? 0 : l.value - 50}%, 1)`
+	return `hsla(${h.value},${s.value}%,${l.value - 30 < 0 ? 0 : l.value - 50}%, 1)`
 })
 </script>
 

src/components/ModalEditTask.vue

@@ -11,6 +11,7 @@ import { useLabel } from '@/stores/label'
 import { addToast } from '@/composables/toast'
 import { format, parseISO } from 'date-fns'
 import isEqual from 'lodash/isEqual'
+import debounce from 'lodash/debounce'
 import { DatePicker } from 'v-calendar'
 import { supabase } from '@/composables/supabase'
 
@@ -67,29 +68,39 @@ const calendarAttrs = ref([
 async function onSubmit() {
 	isSaving.value = true
 	try {
-		await supabase.from('tasks_labels').delete().eq('task_id', props.item.id)
-		await supabase.from('tasks_labels').upsert(
-			form.value.labels.map(({ id }) => {
-				return {
-					task_id: props.item.id,
-					label_id: id,
-					user_id: props.item.user_id,
-				}
-			})
-		)
 		await store.update(props.item.id, {
 			status: form.value.status,
 			date: form.value.date,
 			description: form.value.description,
 			title: form.value.title,
 		})
 		store.fetchList()
-		emit('close')
 	} catch (error: any) {
 		addToast('error', error.message)
 	}
 	isSaving.value = false
 }
+
+const debounceSubmit = debounce(onSubmit, 500)
+
+function onSelectDay() {
+	onSubmit()
+	showCalendar = false
+}
+
+async function onSelectLabels(labels) {
+	await supabase.from('tasks_labels').delete().eq('task_id', props.item.id)
+	await supabase.from('tasks_labels').upsert(
+		labels.map(({ id }) => {
+			return {
+				task_id: props.item.id,
+				label_id: id,
+				user_id: props.item.user_id,
+			}
+		})
+	)
+	store.fetchList()
+}
 </script>
 <template>
 	<Modal v-if="openModal" title="Edit task" :open="openModal" :header="false" @close="emit('close')">
@@ -102,6 +113,7 @@ async function onSubmit() {
 						class="outline-none resize-none w-full text-xl font-medium h-[28px]"
 						placeholder="Type task name..."
 						@keypress.enter.prevent="onSubmit"
+						@input="debounceSubmit"
 					/>
 				</div>
 				<div>
@@ -114,6 +126,7 @@ async function onSubmit() {
 							<div>
 								<select
 									v-model="form.status"
+									@change="onSubmit"
 									class="md:text-sm w-auto rounded-md px-2 h-[32px] outline-none hover:bg-gray-100 transition cursor-pointer focus:ring focus:ring-3 focus:ring-gray-300 focus:border focus:border-gray-400"
 								>
 									<option value="active">Active</option>
@@ -144,7 +157,7 @@ async function onSubmit() {
 										is-required
 										:first-day-of-week="2"
 										:attributes="calendarAttrs"
-										@dayclick="showCalendar = false"
+										@dayclick="onSelectDay"
 									/>
 								</div>
 							</div>
@@ -176,7 +189,12 @@ async function onSubmit() {
 										</template>
 										<span v-else class="text-sm">Select labels</span>
 									</div>
-									<FormSelectLabels v-if="showSelectLabels" v-model="form.labels" class="absolute z-10 top-0" />
+									<FormSelectLabels
+										v-if="showSelectLabels"
+										v-model="form.labels"
+										@select="onSelectLabels"
+										class="absolute z-10 top-0"
+									/>
 								</div>
 							</div>
 						</div>
@@ -187,13 +205,9 @@ async function onSubmit() {
 							v-auto-resize="80"
 							class="md:text-sm px-2 py-2 overflow-y-hidden resize-none border border-transparent bg-gray-100 focus:bg-white focus:border-gray-400 transition rounded-md w-full outline-none border border-transparent focus:ring focus:ring-3 focus:ring-gray-300 focus:border-gray-400"
 							placeholder="Add a more detailed description..."
+							@input="debounceSubmit"
 						/>
 					</div>
-					<div class="flex items-center gap-2 mt-4">
-						<WButton type="submit" :loading="isSaving" size="sm" :disabled="!isFormChanged">
-							{{ submitButtonText }}
-						</WButton>
-					</div>
 					<div class="mt-6">
 						<h2 class="font-medium mb-4">Checklist</h2>
 						<TaskChecklist :item="item" />