2020-02-18 08:57:00 +01:00
|
|
|
<template>
|
|
|
|
<div class="card" v-if="todo">
|
|
|
|
<div class="card-content">
|
2020-10-14 08:08:20 +02:00
|
|
|
<b-field :label="$t('Status')">
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-checkbox size="is-large" v-model="status" />
|
|
|
|
</b-field>
|
|
|
|
<b-field :label="$t('Title')">
|
|
|
|
<b-input v-model="title" />
|
|
|
|
</b-field>
|
2022-01-18 12:51:37 +01:00
|
|
|
<b-field :label="$t('Assigned to')"> </b-field>
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-field :label="$t('Due on')">
|
2021-12-13 17:20:33 +01:00
|
|
|
<b-datepicker v-model="dueDate" :first-day-of-week="firstDayOfWeek" />
|
2020-02-18 08:57:00 +01:00
|
|
|
</b-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
2022-01-18 12:51:37 +01:00
|
|
|
import { Prop, Vue } from "vue-property-decorator";
|
2021-05-12 18:13:39 +02:00
|
|
|
import debounce from "lodash/debounce";
|
|
|
|
import { DebouncedFunc } from "lodash";
|
2020-09-29 09:53:48 +02:00
|
|
|
import { SnackbarProgrammatic as Snackbar } from "buefy";
|
2020-02-18 08:57:00 +01:00
|
|
|
import { ITodo } from "../../types/todos";
|
|
|
|
import RouteName from "../../router/name";
|
|
|
|
import { UPDATE_TODO } from "../../graphql/todos";
|
|
|
|
import { IPerson } from "../../types/actor";
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
export default class Todo extends Vue {
|
|
|
|
@Prop({ required: true, type: Object }) todo!: ITodo;
|
|
|
|
|
|
|
|
RouteName = RouteName;
|
|
|
|
|
|
|
|
editMode = false;
|
|
|
|
|
2020-11-30 10:24:11 +01:00
|
|
|
debounceUpdateTodo!: DebouncedFunc<
|
|
|
|
(obj: Record<string, unknown>) => Promise<void>
|
|
|
|
>;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
|
|
|
// We put this in data because of issues like
|
|
|
|
// https://github.com/vuejs/vue-class-component/issues/263
|
2020-09-29 09:53:48 +02:00
|
|
|
data(): Record<string, unknown> {
|
2020-02-18 08:57:00 +01:00
|
|
|
return {
|
|
|
|
debounceUpdateTodo: debounce(this.updateTodo, 1000),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
get title(): string {
|
|
|
|
return this.todo.title;
|
|
|
|
}
|
|
|
|
|
|
|
|
set title(title: string) {
|
|
|
|
this.debounceUpdateTodo({ title });
|
|
|
|
}
|
|
|
|
|
|
|
|
get status(): boolean {
|
|
|
|
return this.todo.status;
|
|
|
|
}
|
|
|
|
|
|
|
|
set status(status: boolean) {
|
|
|
|
this.debounceUpdateTodo({ status });
|
|
|
|
}
|
|
|
|
|
|
|
|
get assignedTo(): IPerson | undefined {
|
|
|
|
return this.todo.assignedTo;
|
|
|
|
}
|
|
|
|
|
|
|
|
set assignedTo(person: IPerson | undefined) {
|
|
|
|
this.debounceUpdateTodo({ assignedToId: person ? person.id : null });
|
|
|
|
}
|
|
|
|
|
|
|
|
get dueDate(): Date | undefined {
|
|
|
|
return this.todo.dueDate;
|
|
|
|
}
|
|
|
|
|
|
|
|
set dueDate(dueDate: Date | undefined) {
|
|
|
|
this.debounceUpdateTodo({ dueDate });
|
|
|
|
}
|
|
|
|
|
2020-09-29 09:53:48 +02:00
|
|
|
async updateTodo(params: Record<string, unknown>): Promise<void> {
|
|
|
|
try {
|
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: UPDATE_TODO,
|
|
|
|
variables: {
|
|
|
|
id: this.todo.id,
|
|
|
|
...params,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
this.editMode = false;
|
2021-09-29 18:20:33 +02:00
|
|
|
} catch (e: any) {
|
2020-11-30 10:24:11 +01:00
|
|
|
Snackbar.open({
|
|
|
|
message: e.message,
|
|
|
|
type: "is-danger",
|
|
|
|
position: "is-bottom",
|
|
|
|
});
|
2020-09-29 09:53:48 +02:00
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
2021-12-13 17:20:33 +01:00
|
|
|
|
|
|
|
get firstDayOfWeek(): number {
|
|
|
|
return this.$dateFnsLocale?.options?.weekStartsOn || 0;
|
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
|
|
|
</script>
|